Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.
Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1).
Рис. 13.1. Пример разделения окна браузера на два фрейма
При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.
Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1).
Пример 13.1. Файл index.html
Фреймы
В случае использования фреймов в первой строке кода пишется следующий тип документа.
Данный указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.
В данном примере окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.
В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src . В левое окно будет загружен файл, названный menu.html (пример 13.2), а в правое — content.html (пример 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name .
Пример 13.2. Файл menu.html
Навигация по сайту
В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.
Пример 13.3. Файл content.html
Содержание сайта
СОДЕРЖАНИЕ
Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).
Рис. 13.2. Разделение страницы на три фрейма
В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows , где для разнообразия применяется процентная запись (пример 13.4).
Пример 13.4. Три фрейма
Фреймы
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no" и noresize .
Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .
В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.
Что это такое и чем отличается Iframe от FrameЧто же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.
Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.
В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит основное преимущество использования фреймов в Html.
Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).
Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.
Iframe — встроенный фрейм в стандарте Html 5Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.
Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.
Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент . Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.
Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег :
В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты Width и Height , значения которых задаются в пикселах:
Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.
Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты Hspace и Vspace , которые позволяют задать отступы от границ фрейма до обтекающего его текста.
Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же Align , но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.
Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).
Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":
Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.
Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.
Как я уже упоминал, наглядным примером использования Iframe является :
Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.
Фреймы на основе тегов Frame и Frameset — их структураИтак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset .
Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):
Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента Frame . Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.
Третий элемент, который мы еще с вами не затронули — это Noframes . Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.
Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.
Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.
Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows . Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.
Создание структуры на основе Frameset и его атрибутов Cols и RowsВ качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.
Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.
Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:
В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:
В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать . Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.
Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как звездочка «*» . Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.
Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:
Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».
Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).
А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:
Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?
Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:
Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:
В результате мы получим первую колонку Frame шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.
Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:
Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".
И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.
Указываем путь в атрибуте Src элемента FrameНо это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.
Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это Src . Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.
Путь до документа в Src может быть указан в виде . Относительные пути обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.
Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.
Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:
Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.
В приведенном на рисунке примере, в окно левого фрейма у меня загружается страничка с неким меню, которое представляет из себя обычный . Но не суть важно как формируется меню, а важно то, что произойдет после нажатия на любую из его ссылок.
Если вы проделаете это, то все произойдет именно так, как надо — документ откроется в правом нижнем окне. Но для этого мне пришлось применить одну небольшую хитрость, ибо в варианте по умолчанию документ открывался на весь размер окна, заменяя собой фреймовую структуру, что мне было вовсе не нужно, ибо исчезало навигационное меню в левом и верхнем фреймах.
Как открывать документы по ссылке во фреймеИтак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target="_self".
Но этим возможности Target не ограничиваются. Оказывается можно добавлять в него значение в виде названия фрейма , которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.
Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью атрибута Name в теге Frame.
Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target="ktona":
История появления Joomla и компонента VirtueMart
Конечно же, с помощью инструмента поиска и замены в проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать специальный тег Base , о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.
Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target="ktona" и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:
Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?
Ну, во-первых, нужно дать имя левому вертикальному фрейму:
А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target="gor":
Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.
Атрибуты тега Frame для настройки внешнего вида оконДавайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с Scrolling . С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.
Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.
Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).
Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:
Следующий атрибут тега Frame — Noresize — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.
При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).
Еще один визуальный атрибут — Frameborder . C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.
Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.
Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — Marginwidth и Marginheight , которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):
Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по этой фреймовой структуры невозможно отследить ее состояние .
У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?
Потому что адрес остается неизменным и при открытии его из закладок браузера, или же из письма электронной почты, вы получите страницу со стартовым состоянием фреймовой структуры, а не то ее состояние, которое вы хотели бы сохранить.
Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.
Это первый минус использования фреймов для создания сайтов и очень весомый, но есть и еще один огромный минус. Поисковики, конечно же, уже давно научились индексировать их и извлекать из них адреса тех документов, которые подгружаются в их окна. Проблема в другом.
Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?
Пользователь увидит документ и не увидит навигации по вашему сайту , ибо она будет зашита в других окнах, а они подгружаются только в составе всей структуры.
В итоге сайт, построенный на фреймах, становится просто не юзабельным. Хотя опять же есть решения этой проблемы на базе серверных скриптов, когда будет осуществляться редирект с адресов отдельных документов на фреймовую структуру находящуюся в нужном состоянии, но это опять же очень сложно и не всегда надежно.
В общем, вывод можно сделать однозначный — создавать сайты на фреймах не нужно . Но зато они постоянно используются для создания хелпов для различных приложений, ну и еще где-то по мелочи могут пригодиться.
Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и , а следовательно и улучшить , которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.
Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:
JOOMLA
Но все эти ограничения касаются только структур на тегах Frame и Frameset, а встроенные фреймы на тегах Iframe не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на ");">
Вам может быть интересно
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
В любом редакторе текста сделайте новый текстовой файл.
Введите главные теги, не считая тегов , которые в файле, описывающем фреймы, не употребляются. В тегах заголовка укажите - Компания SD:
Компания SD
Заместо тегов в файле, описывающем фреймы, употребляется пара тегов с атрибутами rows либо cols, определяющими, как делится экран - по горизонтали либо по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты либо ширины фрейма в пикселах либо в процентах от 1% до 100%. К примеру, если вы желаете поделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:
Направьте внимание: значения атрибутов отделяются один от другого запятой.
Вертикальное разделение фреймов (frame)Чтоб поделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:
Но фактическая ширина и высота окна фрейма находится в зависимости от текущего разрешения монитора. Потому, если у пользователя установлено разрешение, к примеру, 1024 x 768 пикселов, другими словами ширина экрана - 1024 пиксела, то часть экрана может остаться незаполненной. Потому рекомендуется задавать размеры фреймов в процентах так, чтоб их сумма была равна 100%. Если все таки нужно для 1-го из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение эмблемой *. В данном случае браузер сам подберет подходящий размер для второго окна.
Сделаем для отображения нашего WEB сайта два вертикальных фрейма. Для первого фрейма, в каком будет выводиться меню, установим фиксированную ширину - 160 пикселов, а размер второго предоставим найти браузеру, заменив его звездочкой *.
В редакторе текста, воткните пустую строчку после закрывающего тега и введите последующий код:
Таким способом, мы указали, что окно браузера должно быть разбито по вертикали на два фрейма. Для описания каждого фрейма в отдельности употребляются одиночные теги , которые обязаны находиться внутри элемента …. Неотклонимым атрибутом тега является src, значение его - адресок документа, который должен находиться в данном фрейме. Потому что в первом фрейме будет находиться файл menu.html, то данный тег следует записать так:
Воткните пустую строчку после открывающего тега и введите обозначенный тег.
Во второй фрейм должен загружаться файл other.html, потому второй тег будет таким:
Как сделать меню с помощью фреймов (frame)Чтоб во второй фрейм могли загружаться также и все другие странички WEB сайта - list.html и другие, которые, может быть, будут сделаны, - нужно при помощи атрибута name присвоить данному фрейму имя, которое, будучи обозначено в ссылках хоть какого документа в качестве значения атрибута target, обусловит, в какой конкретно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ раскрывается в том же окне. Конкретно для того, чтоб при переходе по ссылкам нашего меню странички раскрывались не в первом фрейме, в каком размещено меню, а во втором, мы использовали в прошлом опыте в ссылках меню атрибут target со значением "frame": target="frame", где "frame" - это имя второго фрейма. И сейчас имя "frame" следует присвоить второму фрейму, в каком должен раскрываться файл other.html. Потому второй тег в окончательном виде должен быть записан так:
Введите этот код, вставив пустую строчку перед закрывающим тегом .
Собираем основной фрейм (frame)Сохраните файл в папке WEB под именованием index.html.
Имя index.html должно непременно присваиваться файлу с главной страничкой каждого WEB сайта. Конкретно этот файл раскрывается по умолчанию при воззвании к WEB узлу, если не обозначено другое название файла. На неких WEB сайтах имя главной странички может быть index.htm, a index.html отображается не как страничка, как папка с названиями файлов. Это нужно уточнять у админа узла.
Сейчас можно просмотреть, как смотрятся сделанные фреймы.
Откройте в браузере файл index.html из папки WEB. Вы увидите, что окно программки просмотра разбито по вертикали на два фрейма. В левом фрейме отображается меню, а в правом - файл other.html.
Направьте внимание, что каждый фрейм имеет свои полосы прокрутки. По мере надобности их отображение можно отменить. Для этого довольно в теге указать атрибут scrolling=no.
Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no:
Видите ли, фреймы - комфортное средство для размещения инфы на WEB страничках. Но, используя его, не следует терять чувства меры. Очень огромное количество окон на дисплее не улучшает восприятие информации. Не располагайте на дисплее более трех фреймов и пытайтесь не использовать их без необходимости.
Главные минусы фреймов (frame)Основной минус использования фреймов состоит в том, что такая страничка фактически никак не могут быть найдена поисковыми машинами и как следует вы не получите на такую страничку гостей. В этом и заключается основной минус. Также фреймы вызывают нагрузку на вычислительные мощности компьютера. Естественно, это в наше время не очень актуально, но актуально для мобильных устройств, где скорость прорисовки WEB страничек еще мучается. Напомню, что на конец 2010 года, WEB пользуются через мобильные устройства около 10% и эта цифра с каждым годом вырастает.
РезультатИтак, первый шаг нашей работы закончен - мы сделали WEB сайт из двух WEB страничек. Сейчас, чтоб он стал доступен всем, его нужно поместить в Интернет на один из серверов World Wide WEB.
Как сделать страничку с фреймамиВ программке FrontPage фреймы именуются рамками. Проще всего сделать страничку с фреймами на базе одного из готовых шаблонов, имеющихся в программке FrontPage.
Изберите команду меню Файл - Сделать (File - New). В правой части рабочего окна программки появится Область задач (Task Pane) с активной задачей Создание (New).
В разделе Сделать страничку (New page) Области задач (Task Pane) щелкните мышью на ссылке Другие шаблоны страничек (More page templates). На дисплее появится диалог Шаблоны страничек (Page Templates).
Изберите вкладку Страничка рамок (Frames Pages).
На этой вкладке имеется набор шаблонов для сотворения страничек с фреймами. При выборе шаблона, начальный вид странички отображается справа в поле Эталон (Preview), а в поле Описание (Description) выводится описание шаблона.
Изберите один из шаблонов, к примеру Оглавление (Contents), и нажмите кнопку ОК. Будет сотворена новенькая страничка с фреймами по избранному шаблону.
В нижней части вновь сделанной вкладки нов_стр_1.htm (new_page_1.htm) появится дополнительная кнопка Без рамок (No Frame), нажав на которую, мы увидим, как будет смотреться страничка в браузере, не поддерживающем работу с фреймами. По умолчанию туда помещается текст сообщения о невозможности отображения фреймов.
Когда браузер загружает страничку с фреймами, он читает информацию о фреймах и потом загружает исходную страничку в каждый фрейм. Потому после сотворения странички с фреймами нужно задать для фреймов исходные странички.
В режиме редактирования Конструктор (Design) представления Страничка (Page) в пустых фреймах показываются кнопки.
Нажмите кнопку Сделать страничку (New Page) в каждом фрейме. Внутри фреймов будут сделаны новые странички.
При помощи другой кнопки Задать исходную страничку (Set Initial Page) можно избрать для фрейма одну из ранее сделанных страничек в качестве исходной.
Изберите в меню команду Файл - Сохранить (File - Save), чтобы сохранить новые странички. На дисплее поочередно появятся обычные диалоги сохранения файлов Сохранить как (Save As) для каждой странички, в каких необходимо указать названия файлов. Укажите, к примеру, для исходной странички левого фрейма имя LeftFrame, для исходной странички правого фрейма - имя RightFrame, а для самой странички с фреймами - имя FrameContainer.
Если вы избрали шаблон Оглавление (Contents) при разработке странички с фреймами, то в нем уже имеется установленная связь между фреймами: активизация ссылки, помещенной в левый фрейм, будет вызывать загрузку страничек, на которую показывает ссылка, в правый фрейм. В данном случае правый фрейм именуется мотивированным фреймом (target frame).
Чтобы проверить, как работает связь между фреймами, поместим на страничку левого фрейма две текстовые ссылки. Пусть одна из их ссылается, к примеру на исходную страничку правого фрейма, а другая - на главную страничку WEB сайта.
Установите текстовый курсор в начало странички в левом фрейме и наберите фразу Ссылка на главную страничку.
Выделите набранную фразу при помощи мыши либо клавиатуры и изберите команду меню Вставка - Ссылка (Insert - Hyperlink). На дисплее появится диалог Добавление гиперссылки (Create Hyperlink).
В перечне файлов WEB сайта изберите файл домашней странички index и нажмите кнопку ОК. Набранная фраза будет преобразована в ссылку.
Выделите набранную фразу при помощи мыши либо клавиатуры и щелкните на кнопке добавление гиперссылки на панели инструментов Стандартная (Standard). На дисплее появится диалог Добавление гиперссылки (Create Hyperlink).
В перечне файлов WEB сайта изберите RightFrame и нажмите кнопку ОК. Набранная фраза будет преобразована в ссылку.
Переключитесь в режим подготовительного просмотра, щелкнув на кнопке Просмотр (Preview) в нижней части вкладки FrameContainer.htm.
По мере надобности можно поменять мотивированной фрейм для отдельной ссылки либо для всех ссылок в текущем фрейме.
В режиме редактирования Конструктор (Design) представления Страничка (Page) щелкните правой кнопкой мыши на одной из ссылок в левом фрейме и в показавшемся контекстном меню изберите команду Характеристики гиперссылки (Hyperlink Properties). На дисплее появится диалог Изменение гиперссылки (Edit Hyperlink).
(Target Frame). На дисплее появится диалог Конечная рамка (Target Frame).
В поле Настройка объекта (Target setting) можно указать мотивированной фрейм либо избрать один из вариантов в перечне Общие объекты (Common targets). Флаг Установить для странички по умолчанию (Set as page default) позволяет использовать избранный мотивированной фрейм для всех ссылок странички, где очевидно не указан какой-нибудь другой.
Нажмите кнопку ОК, чтобы закрыть диалог Конечная рамка (Target Frame), и потом кнопку ОК в диалоге Изменение гиперссылки (Edit Hyperlink).
Хотя фреймы не содержат собственных зрительных частей, страничка с фреймами и сами фреймы имеют ряд опций, позволяющих управлять их отображением.
Щелкните правой кнопкой мыши в любом месте на одном из фреймов и в показавшемся контекстном меню изберите команду Характеристики рамки (Frame Properties). На дисплее появится диалог Характеристики рамки (Frame Properties).
В поле Имя (Name) обозначено внутреннее имя фрейма, оно употребляется также при выборе мотивированного фрейма для ссылки. В поле Исходная страничка (Initial page) указана страничка, отображаемая во фрейме при его загрузке. В группе частей управления Размер рамки (Frame size) можно указать ширину (Width) и высоту (Height) фрейма относительно примыкающих фреймов (Relative), относительно размеров окна браузера в процентах (Percent) либо фиксированный размер в пикселах (Pixels). В группе частей управления Поля (Margins) определяются значения отступа от вертикальных (Width) и горизонтальных (Height) границ фрейма до содержимого внутри фрейма. Если установлен флаг Изменять размер в обозревателе (Resizable in browser), то гость WEB сайта может поменять размер фрейма, передвигая мышью разделитель между примыкающими фреймами. В открывающемся перечне Полосы прокрутки (Show scrollbars) задается режим отображения полос прокрутки: по мере надобности (If needed), другими словами когда страничка полностью не помещается во фрейме, никогда (Never) либо всегда (Always).
Нажмите кнопку Страничка рамок (Frames Page). На дисплее появится диалог Характеристики странички (Page Properties) с открытой вкладкой Рамки (Frames).
Флаг Показать границы (Show borders) определяет, будут ли отображаться границы фрейма. Если флаг сброшен, то в браузере не будут видны разделительные полосы между фреймами. В поле Интервал между рамками (Frame Spacing) задается ширина границ, разделяющих примыкающие фреймы.
Нажмите кнопку ОК, чтобы закрыть диалог Характеристики странички (Page Properties) и потом кнопку ОК в диалоге Характеристики рамки (Frame Properties).
Вы сможете добавить новые фреймы либо удалить имеющиеся со странички.
В режиме редактирования странички изберите один из фреймов, щелкнув на нем мышью.
Изберите команду меню Рамки - Поделить рамку
(Frames - Split Frame). На дисплее появится диалог Поделить рамку (Split Frame).
При помощи одного из переключателей изберите вариант разделения: на столбцы (Split into columns) либо на строчки (Split into rows).
Нажмите кнопку ОК. Область текущего фрейма будет разбита на две части, и на страничку будет добавлен новый фрейм.
Новый фрейм также можно сделать, если в режиме редактирования странички переместить при помощи мыши разделитель фреймов, удерживая при всем этом кнопку Ctrl.
Чтобы удалить фрейм, выделите его, щелкнув на нем мышью, и в меню программки изберите команду Рамки - Удалить рамку (Frames - Delete Frame). Фрейм будет удален.
Удаление фрейма не приводит к удалению странички, которая в нем отображалась. Последний фрейм на страничке не может быть удален.
В открывающемся перечне Тип файла (Save as type) изберите Шаблоны FrontPage (FrontPage Template).
В поле ввода Название файла (File Name) укажите название файла шаблона и нажмите кнопку Сохранить (Save). На дисплее появится диалог Сохранить как шаблон (Save As Template).
В поле ввода Заглавие (Title) укажите заглавие шаблона, которое будет отображаться в перечне шаблонов при разработке новейшей странички. В поле ввода Описание (Description) можно коротко обрисовать предназначение и вид шаблона.
Нажмите кнопку ОК. Шаблон будет сохранен.
Сейчас вы сможете использовать свой шаблон при разработке новейшей странички с фреймами, выбирая его в перечне шаблонов диалога Шаблоны страничек (Page Templates). Если при сохранении шаблона были установлены исходные странички во фреймах, то они будут употребляться по умолчанию для всех фреймов, сделанных на базе шаблона.
Фреймы комфортно использовать для навигации по WEB сайту либо разделу WEB сайта. В одном из фреймов обычно помещают список ссылок в виде текста либо рисунков, а в другой загружаются странички при выборе ссылок из первого фрейма. Другим вариантом является внедрение общих границ и навигационных меню, о которых мы уже ведали. Использовать фреймы и общие границы сразу не рекомендуется - это в состоянии сделать навигацию по WEB сайту запутанной.
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов . Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в htmlФрейм (англ. frame) - некоторая подключаемая независимая область на веб-странице.
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
Рис 1. Использования фреймы на примере хелпа блокнота
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Рис 2. Каркас использования фреймов для примера №1
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пример №1 html-страницы с фреймами Пояснение к примеру №1Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы - отсутствует. Вместо него вставлен тег , который отвечает за тело страницы. У этого тега есть два атрибут cols="25%,75%" , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).
Последний совсем необязательный тег это . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2Каркас для примера 2:
Рис 3. Каркас использования фреймов для примера №2
Код исходной html-страницы с фреймом будет следующий:
Пример №2 html-страницы с фреймами Ваш браузер не поддерживает отображение фреймовКод файла top.html
Файл top.html - шапка сайта Пример №2 А здесь могло быть лого и не только:)Код файла menu.html
Файл menu.html - меню сайтаКод файла content.html
Файл content.html - контент сайта Главная страница Содержимое сайта. Сейчас открыт файл content.htmlЭто исходное состояние нашего фрейма. Назовем этот файл "Главной страницей"
Код файла about-site.html
Файл about-site.html - Страница о сайте О сайте Страница о сайте. Сейчас открыт файл about-site.htmlКод файла about-autor.html
Файл about-autor.html - об авторе Об авторе Страница об авторе. Сейчас открыт файл about-autor.htmlКод файла footer.html
Файл footer.html - о сайте Футер сайта. Сейчас открыт файл footer.html Пояснение к примеру №2Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows="15%,70%,15%" . Первый фрейм в нашем примере - шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols="25%,75%" в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name="main" с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target="main" , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
Рис 4. Пример №2 - исходное состояние
При переходе на страницу о сайте страница будет выглядеть следующим образом:
Рис 5. Пример №2 - второе состояние
Рис 6. Пример №2 - третье состояние
Тег нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:
Необязательные атрибуты этого тега являются width="ширина" и height="высота" , а обязательный атрибут src="адрес фрейма" .
Атрибуты и свойства тега1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = "100,100,300" задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = "2*,3*,100" задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols="2*,100,15%,4*" .
3. Атрибут frameborder="{yes|no}"
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2"
задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу нужен закрывающий тег .
Атрибуты и свойства тега1. Атрибут src="адрес элемента"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10"
задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling="{yes|no|auto}"
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
- Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
- Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
- Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. - вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
- Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
- Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
- Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
- Не все браузеры поддерживают фреймы.
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы прекрасно подходят для оформления следующих документов:
Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame , frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).
ТегТег - заменяет тег и используется для разделения экрана. Имеет закрывающий тег.
АтрибутыВ отдельном теге имеет смысл использовать только один из атрибутов – COLS или ROWS. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры ….
Пример
Результат:
Обратите внимание также на различие в порядке нумерации фреймов.
ТегТег , помещенный в контейнер …, определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные HTML-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать HTML-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Тег избавит вас от необходимости повторять атрибут TARGET в каждой отдельной гиперссылки, если все они указывают на одно и то же окно фрейма. Для этого надо поместить тег с атрибутом TARGET в контейнер ….
Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Атрибут TARGET каждой конкретной ссылки замещает одноименный атрибут тега .
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Как уже упоминалось, имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие броузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.
В основном эти служебные имена предназначены для того, чтобы тем или иным способом "вырваться" из текущей фреймовой структуры. Поэкспериментируйте с ними, чтобы понять, как можно загружать документы в различные окна.
ТегВ HTML 4.0 появились плавающие (или встроенные) фреймы. С помощью тега можно поместить один фрейм в обычный HTML-документ. Причем контейнер … здесь не нужен.
Закрывающий тег обязателен!
АтрибутыОпределяет, что будет показано в окне браузера если он не поддерживает фреймы.
Ваш браузер не поддерживает плавающие фреймы!
Как загрузить фрейм без дополнительных файлов?Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную HTML-код фрейма, а затем в качестве SRC тега указать "javascript:parent.имя переменной ".
var varFrame = " HTML-код "; ...
Проблема адресной строки при фреймовой структуре сайтаПри использовании фреймов на сайте используется одна страница, которая указывает местоположение фреймов.
Приведём пример такой страницы:
...
После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.
Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать адрес на внутреннюю страницу сайта.
Есть несколько решений этой проблемы
Ранее бал рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.
Идея заключается в следующем: при загрузке страницы, содержащей информационную часть, будем проверять окружение страницы и, если требуемая фреймовая структура отсутствует - создадим её при помощи скрипта.
Возможны три случая:
В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.
И так, посетитель попадает "куда не надо". В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.
Реализация решения возможна как на стороне клиента, так и на стороне сервера. Основной недостаток реализации на стороне клиента очевиден - зависимость от возможностей и настроек клиента. Например, на компьютере пользователя запрещено выполнение скриптов. Второй вариант не будет работать, если на сервере нет поддержки PHP .
JavaScript-решение.При таком подходе есть ограничение - не все браузеры поддерживают JavaScript , а в ряде случаев пользователи сами отключают скрипты.
Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.
Создадим файл frame.js :
If (window.name != "main") { window.name="root"; document.write(""); document.write(""); document.write(""); document.write(""); }
Вначале мы проверяем название окна, в который загружается страница: if (window.name != "main") . Если имя окна и название фрейма не совпадают, значит надо создать фреймовую структуру. Это делается динамически с использованием метода write объекта document .
К каждой странице сайта подключаем файл frame.js . Теперь страницы сайта будут иметь такую структуру:
... ...
При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру.
PHP-решениеПри таком подходе сайт станет доступным большему числу посетителей.
Проверять окружение страницы будем по другому (не так, как при использовании JavaScript ). Загрузку документа во фрейм будем выполнять с параметром frames=yes . При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.
Помещаем код в файл frames.php . Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.
frames ...
В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать HTML документ, описывающий фреймовую структуру.
.
