Использование фреймов (от англ. Frame – рамка)
С позиции HTML фреймы устроены очень просто и описываются небольшим количеством тегов. Рассмотрим их. Для создания странички с фреймами мы должны создать количество страниц, равное количеству частей (фреймов), на которое разделена страничка, плюс еще одну «материнскую» страничку, которая будет содержать описание фреймовой структуры.
Структура фреймов описывается в отдельном файле с помощью тега <FRAMESET> . Для создания на страничке 2 фреймов равной ширины, расположенных в левой и правой частях страницы, мы должны будем создать HTML-файл со следующим кодом:
<FRAMESET COLS=”50%,50%”> <FRAME SRC=”путь_к_файлу- источнику_для _левого_фрейма.html”> <FRAME SRC=”путь_к_файлу- источнику_для _правого_фрейма.html”> </FRAMESET> |
Это весь код, который должна содержать «материнская» страничка.
Для создания большего количества фреймов вы должны изменить значение параметра COLS в теге <FRAMESET> и дополнить список <FRAME SRC> файлом, который будет служить источником для нового фрейма.
В нашем примере значение параметра COLS=”50%, 50%” cообщает броузеру о том, что он должен сгенерировать на страничке два вертикальных фрейма, а ширина каждого из них будет равна 50% ширины окна броузера. Значения <FRAME SRC=”URL”> указывают броузеру на файлы, которые будут являться источниками наполнения фреймов. Файлы перечисляются по порядку, слева направо и сверху вниз.
Для создания горизонтальной фреймовой структуры необходимо использовать тег <FRAMESET> с параметром ROWS. Таким образом, для создания такой же структуры, как и в приведенном выше примере, но с горизонтальным разделением страницы на две половины, необходимо будет использовать следующий код:
<FRAMESET ROWS=”50%,50%”> <FRAME SRC=”путь_к_файлу-источнику_ для _верхнего_фрейма.html”> <FRAME SRC=”путь_к_файлу-источнику_ для _нижнего_фрейма.html”> </FRAMESET> |
Вы можете сочетать вертикальные и горизонтальные фреймы в любом порядке. Для этого необходимо лишь применять уже известные вам правила использования вложенных тегов (см. выше) и правильно описывать структуру в теге <FRAMESET>, соблюдая желаемую последовательность расположения.
Взгляните на исходный код «материнской» странички:
<HTML> <HEAD> <TITLE>Примеры фреймовой структуры </TITLE> </HEAD> <FRAMESET COLS=”20%,*”> <FRAME SRC=”fr1.html”>
<FRAMESET ROWS=”50%,*”> <FRAME SRC=”fr2.html”> <FRAME SRC=”fr3.html”> </FRAMESET>
</FRAMESET> </HTML> |
Как вы видите, здесь используется набор из двух горизонтальных фреймов, вложенный в другой набор из двух вертикальных фреймов. Взгляните на значения ширины фреймов в тегах <FRAMESET> – в этом примере вместо значения ширины второго фрейма используется знак «*». Он сообщает броузеру, что для этого фрейма необходимо отвести все свободное пространство, оставшееся после первого фрейма. Вы можете указывать ширину фреймов как в процентах относительно свободного окна броузера, так и в пикселях.
Как и большинство тегов HTML, теги <FRAMESET> и <FRAME> имеют дополнительные параметры, управляющие отображением фреймовой структуры.
Рассмотрим параметры, с которыми может использоваться тег <FRAMESET>:
BORDER – может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию)
FRAMEBORDER – любое значение (в пикселях)
FRAMESPACING – управление шириной границ фреймов. Для Netscape Navigator может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию), а для Microsoft Internet Explorer – любое значение (в пикселях).
Броузеры Netscape Navigator и Microsoft Internet Explorer работают с фреймами немного по-разному (впрочем, они и все остальное делают с большими отличиями).
Для того чтобы отключить отображение границ фреймов в броузере Netscape Navigator, необходимо указать параметры BORDER=0, FRAMESPACING=0, а для выполнения той же задачи в Microsoft Internet Explorer необходимо указать параметры FRAMEBORDER=0 и FRAMESPACING=0. Поэтому, если вы хотите отключить отображение границ фреймов, для адекватного отображения Web-страниц в обоих броузерах в теге <FRAMESET> необходимо указывать все три параметра равными нулю.
Параметры, которые можно использовать с тегом <FRAME>.
SRC=«URL» – как вы уже знаете, этим параметром определяется страница-источник для данного фрейма.
NAME=«название фрейма» – используется для присвоения фрейму имени. Это требуется для целевых операций с фреймами, т. е. для загрузки определенного документа в соответствующий фрейм.
MARGINWIDTH=«n(пикселей)» – значения отступов от края страницы (по горизонтали) для страниц, которые будут отображаться в заданном фрейме.
MARGINHEIGHT=«n(пикселей)» – то же, но по вертикали.
SCROLLING=«yes/no/auto» – принудительное включение/отключение/установка автоматического режима отображения линеек прокрутки для данного фрейма.
NORESIZE – запрет изменения размеров фреймов при просмотре.
А теперь посмотрим, как мы можем, используя полученные знания, сделать нашу тестовую страничку об истории подводных лодок более удобной и привлекательной.
Создадим два фрейма, в одном из них, содержащем графику, мы расположим меню, а второй фрейм будет содержать тексты статей. Таким образом, при переходе от статьи к статье будет перезагружаться только текстовый фрейм – это позволит значительно увеличить скорость загрузки.
Вот исходный код набора фреймов, применяющегося для этой страницы (Пример 11.):
<HTML> <HEAD> <TITLE>История подводных лодок</TITLE> </HEAD> <FRAMESET ROWS=”60,*” BORDER=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAME SRC=”fr_top.html” MARGIN- WIDTH=”0” MARGINHEIGHT=”0” SCROL- LING=”auto” NORESIZE> <FRAME NAME=”main”SRC=”fr_main1.html” MARGINWIDTH=”0” MARGINHEIGHT=”0” SCROLLING=”auto” NORESIZE> </FRAMESET> </HTML> |
Картинки, используемые в верхнем фрейме, для удобства форматирования расположены внутри таблицы. Взгляните на исходный код верхнего фрейма:
<HTML> <HEAD></HEAD> <BODY BGCOLOR=”#OOOOOO”> <TABLE BORDER=0 WIDTH=100% ALIGN=CENTER> <TR> <TD ALIGN=RIGHT VALIGN=MIDDLE> <A HREF=”index.html” TARGET=”_top”> <IMG SRC=”menu1.gif” WIDTH=200 HEIGHT=20 ALT=”Назад”></A> </TD> <TD ALIGN=CENTER VALIGN=TOP> <IMG SRC=”header1.gif” WIDTH=300 HEIGHT=32> </TD> <TD ALIGN=LEFT VALIGN=MIDDLE> <A HREF=”fr_main2.html” TARGET=”main”> <IMG SRC=”menu2.gif” WIDTH=200 HEIGHT=20 ALT=”Следующая статья”></A> </TD> </TR> </TABLE> </BODY> </HTML> |
Обратите внимание на параметры TARGET в теге <A>. При указании параметра TARGET="_top" после щелчка по ссылке первая страничка сайта будет загружена в окно, не содержащее фреймов. Для указания броузеру этого действия мы использовали зарезервированное имя "_top".
Всего в HTML существует четыре таких зарезервированных имени, из них для нас пока важны только два. Одно из них вы уже знаете, а второе, «_blank», используется для открытия гиперссылки в новом окне броузера. Обратите внимание: зарезервированные имена следует писать строчными буквами! Также вы не можете использовать зарезервированные имена для обозначения ваших фреймов.
Во втором теге <A> мы использовали параметр TARGET со значением "main". Посмотрите на исходный код «материнской» странички – этим именем там был назван нижний фрейм. Таким образом, при щелчке по гиперссылке «Следующая история» файл со статьей будет загружен не в верхний фрейм (в котором находится гиперссылка), а в нижний.
Нижний фрейм можно оформить с помощью таблицы, создав три колонки и окрасив правую и левую в цвет фона, а в среднюю поместив текст статьи.
Вот как это можно воплотить в HTML:
<HTML> <HEAD></HEAD> <BODY BGCOLOR=”#000000”> <TABLE WIDTH=100% BORDER=0 ALIGN=CENTER CELLSPACING=0 CELLPADDING=20> <TR> <TD WIDTH=5% BGCOLOR=BLACK> </TD> <TD WIDTH=90% BGCOLOR=WHITE> <B><FONT SIZE=5> <CENTER>Изобретение инженера Бауэра.</CENTER></B></FONT> <FONT SIZE=2> <I><U><P ALIGN=”RIGHT”>Игорь Дыгало</P></U></I></FONT> <BR> <P ALIGN=”JUSTIFY”> Текст статьи... </P> </TD> <TD WIDTH=5% BGCOLOR=BLACK> </TD> </TABLE> </BODY> </HTML> |