4.2. Создание вложенных фреймов
Каждый элемент <FRAMESET> формирует фреймы, относящиеся к одному набору (или уровню). Чтобы задать фреймы с разными свойствами (например, размеры или вид обрамления), применяются вложенные фреймы.
Вы познакомились с формированием на странице вертикальных и горизонтальных фреймов одного уровня, которые формируются с помощью одного тега <FRAMESET>. Более сложную структуру можно создать, если использовать теги <FRAMESET>, вложенные друг в друга.
Попытаемся создать вертикальный и горизонтальный наборы фреймов (рис. 4.3).
| Фрейм 1 | Фрейм 2 |
| Фрейм 3 | |
| Фрейм 4 |
Рис. 4.3. Фреймовая структура с вертикальными
и горизонтальными фреймами
При создании такой структуры вы стремитесь сразу к двум целям. Во-первых, вам нужны два столбца. Во-вторых, правый столбец вам нужно разделить на три строки. Вот в такой последовательности и следует разместить описание фреймов: внутри описания правого столбца поместите описание трех строк. Это на языке HTML будет выглядеть так, как указано ниже, результат отображения в браузере см. на рис. 4.4.
<HTML>
<HEAD><TITLE> создание вложенных фреймов
</TITLE>.
</HEAD>
<FRAMESET COLS="40%, 60%">
<FRAME SRC="page2fl1.htm">
<FRAMESET ROWS="*, *, *">
<FRAME SRC="page2fl2.htm">
< FRAME SRC="page2fl3.htm">
<FRAME SRC="page2fl4.htm">
</ FRAMESET>
</FRAMESET>
</HTML>
Рис. 4.4. Результат отображения вложенных фреймов
Итак, в данном примере второй <FRAMESET> вложен в первый. На самом деле он заменяет собой второй тег <FRAME>, требующийся первому набору фреймов. В нем и определяются три строки, на которые делится правый столбец.
Рассмотрим еще один пример на вложенные фреймы с использованием тех же самых web-страниц (рис. 4.5, 4.6).
|
| |
|
| |
Рис. 4.5. Структура вложенных фреймов второго примера
<HTML>
<HEAD>
<TITLE> создание вложенных фреймов
</TITLE>
</HEAD>
<FRAMESET ROWS="25%, 50%, 25%">
<FRAME SRC="page2fl1.htm">
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>
<FRAME SRC="page2fl4.htm">
</FRAMESET>
</HTML>
В этом документе используется вложение одного кадра в другой. Внешний контейнер <FRAMESET> определяет три горизонтально расположенных кадра, занимающих всю ширину окна браузера по вертикали (25, 50 и 25 %). Верхний и нижний кадры содержат документы page2fl1.htm и page2fl4.htm. Средний кадр имеет вложенный контейнер <FRAMESET>.
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>
Определяющие – два вертикальных кадра, высота которых задается атрибутом внешнего контейнера. Левый кадр занимает 25 %, а правый – 75 % ширины окна браузера, они содержат документы page2fl2.htm и page2fl3.htm.
Однако на странице, как правило, не должно быть более трех или четырех кадров одновременно. Если вам хочется иметь больше 3–4 вертикальных или горизонтальных кадров одновременно, вам следует воспользоваться табличным представлением информации. Кадры в основном нужны для включения в вашу страницу элементов управления областями окна браузера или для организации динамического обновления информации. Размещение статичных данных по строкам и колонкам удобнее всего в обыкновенной таблице.
Рис. 4.6. Вложенные фреймы второго примера
Директива <NOFRAMES></NOFRAMES>, включающая вложенные теги <BODY> </BODY>, позволяет записать произвольное количество HTML-кода, который будет динамически преобразован в самостоятельную web-страницу, в случае если клиентский браузер не поддерживает фреймы.
4.3. Взаимодействие фреймов
После того как мы узнали о методах создания фреймов, пришло время познакомиться с их главным предназначением – управлением навигацией по сайту. Работа с фреймовыми структурами имеет специфические особенности, которые следует учитывать при использовании данного средства навигации для HTML-документов.
Взаимодействие между отдельными фреймами происходит посредством загрузки документа по соответствующей ссылке в установленное окно. Чтобы при организации ссылки выполнялась загрузка страницы в определенный фрейм, этому фрейму (он называется целевым) нужно присвоить уникальное имя с помощью атрибута NAME. Имена целевых фреймов могут начинаться с любой строчной или прописной буквы латинского алфавита. Всем фреймам, содержание которых планируется менять, необходимо дать правильные имена: они должны начинаться с алфавитно-цифрового символа, но не с символа подчеркивания, так как он является первым символом зарезервированных имен фреймов. Все остальные имена, начинающиеся указанным символом, игнорируются.
Чтобы назначить фрейму имя, следует вставить атрибут NAME в тег <FRAME>.
<FRAME SRC="info.htm" NAME="perv">
устанавливает, что содержимым фрейма с именем "perv" после начальной загрузки будет файл info.htm. Реализация операции загрузки осуществляется с помощью параметра TARGET тега <A>.
<A HREF="moreinfo.htm" TARGET="perv"> текст ссылки </A>
Атрибут TARGET содержит имя фрейма. При активизации этой ссылки содержимое фрейма perv, т. е. файл info.htm, размещенный в нем при создании, будет заменен файлом moreinfo.htm.
Если при создании фрейма ему не присваивается имя, то по умолчанию вызванный по гиперссылке документ будет загружаться в текущий фрейм, из которого была активизирована ссылка. Этого можно избежать и сделать так, чтобы страница появлялась в соседнем окне. Существуют специальные зарезервированные имена, по которым происходит загрузка документов на узлах с фреймовой структурой:
_blank – загружает указанный файл в новое окно без названия;
_self – загружает указанный файл в кадр, откуда делается вызов;
_parent – загружает указанный файл в старший (родительский) кадр сетки кадров; если такой кадр не определен, то этот результат аналогичен self;
_top – загружает указанный файл в полное окно, разрушая всю структуру кадров.
Приведем несколько примеров:
<A HREF="stuft.htm" TARGET="_blank">
активизация ссылки приведет к открытию нового, не имеющего названия окна браузера и выводу в него содержимого файла stuft.htm. Это может быть новый HTML-документ либо определение новой сетки кадров.
<A HREF="stuft.htm" TARGET="_self">
указывает на то, что при активизации ссылки кадр, в котором она расположена, будет очищен и в него будет выведен файл stuft.htm.
<A HREF="stuft.htm" TARGET="_parent">
при активизации ссылки сетка кадров, которой принадлежит вызывающий кадр, будет заменена содержимым stuft.htm.
<A HREF="stuft.htm" TARGET="_top">
означает, что при активизации ссылки все окно браузера будет заменено содержимым stuft.htm.
Рассмотрим пример по взаимодействию между фреймами и открытию отдельных окон браузера с помощью атрибута TARGET.
Создадим файл со следующей фреймовой структурой (рис. 4.7).
| Меню (список гиперссылок) | |
| Левый | Правый |
Рис. 4.7. Пример фреймовой структуры
<HTML>
<HEAD>
<TITLE> взаимодействие между фреймами
</TITLE>
</HEAD>
<FRAMESET ROWS="2*, *">
<FRAME NAME="menu" SRC="menu.htm"» NORESIZE
FRAMEBORDER="1">
<FRAMESET COLS="50%, 50%">
<FRAME NAME="left" SRC="page2fl2.htm">
<FRAME NAME="right" SRC="page2fl3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Верхний фрейм будет содержать перечень гиперссылок, а два нижних предназначены для открытия в них содержимого конкретной ссылки, но предварительно в них загружается фоновое изображение.
Содержимое файла верхнего фрейма:
<HTML><HEAD>
<TITLE> взаимодействие между фреймами
</TITLE></HEAD>
<BODY BGCOLOR="#ffffff" TEXT="black" LINK="#ff0000" ALINK="#00ff00" VLINK="blue">
<H3>Ссылки верхнего фрейма></H3>
<UL TYPE="square">
<LI><A HREF="page2fl4.htm" TARGET="left">водяная лилия в левом
фрейме</A>
<LI><A HREF="page2fl4.htm" TARGET="right"> водяная лилия в
правом фрейме</A>
<LI><A HREF="page1121.htm" TARGET="left">ромашки в левом
фрейме</A>
<LI><A HREF="page1121.htm" TARGET="right">ромашки в правом
фрейме</A></UL></BODY></HTML>
После открытия файла с фреймовой структурой вы увидите экран браузера, разделенный на две горизонтальные части (рис. 4.8). В верхней части приведен список еще не использованных гиперссылок, которые отображены синим цветом. А в нижней части, в свою очередь разделенной тоже на две части, увидите фоновое содержание этих фреймов. После использования гиперссылок видно, что содержимое этих частей меняется, а активная гиперссылка отображается зеленым цветом.
 |
Рис. 4.8. Основная фреймовая структура
и структура с использованием гиперссылок
Итак, мы рассмотрели документы, которые по специальной гиперссылке загружались в целевой фрейм. При создании целевого фрейма использовались атрибуты NAME и TARGET. В рассмотренном примере были использованы три целевых фрейма. Но иногда бывает ситуация, когда используется один целевой фрейм, а все файлы по нескольким гиперссылкам должны открываться в этом фрейме. Чтобы организовать такую загрузку, не нужно записывать атрибут TARGET в каждый элемент привязки, достаточно для этого использовать тег <BASE>, который размещается в заголовочной части HTML-файла.
Фрейм, в который производится загрузка по гиперссылкам, называется базовым фреймом и задается значением атрибута TARGET в одиночном теге <BASE>. Например, начало HTML-файла, где располагаются гиперссылки, будет выглядеть следующим образом:
<HTML>
<HEAD>
<TITLE> список меню
</TITLE>
<BASE TARGET="right" >
</HEAD>
4.4. Плавающие фреймы
Фреймы, которые размещаются в обычном HTML-документе в пределах тега <BODY> </BODY> с использованием тега <IFRAME> </IFRAME>, называются плавающими, его также называют строчным от сокращения английского термина «inline frame». Задание плавающего фрейма аналогично описанию тега <IMG>. Кратко перечислим только допустимые атрибуты тега:
SRC – задает URL-адрес загружаемого файла;
WIDTH, HEIGHT – определяют ширину и высоту плавающего фрейма;
ALIGN – устанавливает выравнивание фрейма относительно окна браузера;
MARGINWIDTH, MARGINHEIGHT, FRAMEBORDER SCROLLING – назначают размеры свободных полей, вывод рамки фрейма и полос прокрутки;
NAME – задает имя фрейма, используемого при определении целевого фрейма.
В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены посетителем страницы, поэтому атрибут NORESIZE не входит в число допустимых атрибутов тега <IFRAME>
Пример схемы HTML-документа, содержащего плавающий фрейм, приведен ниже, а его отображение в браузере представлено на рис. 4.9.
Рис. 4.9. HTML-документ с плавающим фреймом
<HTML><HEAD>
<TITLE> плавающий фрейм
</TITLE></HEAD>
<BODY>
<P> Содержимое основной части документа</P>
<IFRAME NAME="plav" SRC="page2fl4.htm" MARGINWIDTH="30"
FRAMEBORDER="1" HEIGHT="200" ALIGN="center">
</IFRAME>
<P> Содержимое основной части документа</P>
<P> Содержимое основной части документа</P>
<P> Содержимое основной части документа</P>
</BODY>
</HTML>
* * *
Итак, в этой части главы вы узнали о фреймах и как их используют для разделения окна браузера на несколько независимых частей, в каждой из которых находится свой документ.
Работать с фреймами несложно. Для этого вместо <BODY> используется тег <FRAMESET>, внутри которого определяются строки и столбцы фреймов. Каждый из них задается с помощью тега <FRAME>. Кроме того, вы рассмотрели простую и сложную организацию фреймов, познакомились с плавающим фреймом и с его назначением.
Практическое задание
РАЗМЕТКА WEB-СТРАНИЦЫ С ПОМОЩЬЮ ФРЕЙМОВ
1. Разметка web-страницы с использованием фреймов простой организации. Наберите в простом редакторе «Блокнот» структуру гипертекстовой программы.
<HEAD>
<TITLE>
Фреймы простой структуры
</TITLE>
</HEAD>
</HTML>
После закрытия заголовка </HEAD> вставьте тег <FRAMESET> для создания шести фреймов на странице (две строки и три столбца) – значения атрибутов ROWS и COLS задайте в процентах. В этом же теге используйте атрибуты задания ширины рамок BORDER и цвет рамок BORDERCOLOR. Сохраните изменения в файле и просмотрите исходный файл в браузере. Есть ли разделительные границы между фреймами? И если нет, то почему?
Затем внутрь тега <FRAMESET> вставьте 6 тегов <FRAME> </FRAME>, соответственно количеству фреймов. Сохраните файл и просмотрите в браузере. Отметьте, что изменилось сейчас. Задайте значения для атрибута SRС (для каждого фрейма задайте название файла, содержащего страницы page1.htm, page2.htm и т. д., созданные в предыдущих практических заданиях). Сохраните изменения и просмотрите в браузере.
Величину фреймов задайте сначала в относительных единицах, затем задайте в пикселах. Просмотрите разницу при задании этих значений в браузере.
Поэкспериментируйте: задайте различные цвета рамок для каждого фрейма.
2. Разметка web-страницы с использованием фреймов сложной организации. Используйте предыдущую страницу в качестве исходного текста программы. Для этого сначала сохраните его в другом файле, а затем внесите изменения согласно рис. 4.10.
|
| |||
|
| |||
|
|
| ||
Рис. 4.10. Структура фреймов для второго задания
3. Создание навигации по сайту. Создайте самостоятельно web-страницу, оформленную с использованием фреймов (рис. 4.11).
| Заголовок страницы | |
| Гиперссылки | Содержание |
| Дополнительная информация или адрес | |
Рис. 4.11. Фреймовая структура для навигации по сайту
Содержание файла с гиперссылками выводится во фрейме «Гиперссылки». При активизации гиперссылки содержимое вызываемого файла должно открываться во фрейме «Содержание». Для привязки файлов к гиперссылкам используйте готовые страницы из предыдущих практических заданий.
Контрольные вопросы и задания
1. Что такое фрейм?
2. Для чего предназначен фрейм?
3. Какие этапы используются при создании простой организации фреймов?