4 Фреймы
4.1 Разбиение окна браузера на фреймы
Фреймы позволяют разделить окно браузера на несколько областей прямоугольной формы и отобразить в каждой из них отдельный HTML-документ. Описание фреймовой структуры строится в отдельном файле. В обычном HTML-документе за разделом HEAD непосредственно следует раздел BODY, в котором содержится информация, предназначенная для отображения. В документе с фреймами элемент BODY либо отсутствует, либо расположен в разделе NOFRAMES, предназначенном для браузеров, которые не поддерживают фреймы. Вместо элемента BODY используется элемент FRAMESET, с помощью которого задается разбиение окна браузера на столбцы или строки. В состав FRAMESET входят другие элементы FRAMESET, реализующие дальнейшее разбиение окна, либо элементы FRAME, определяющие URL документов, которые должны отображаться внутри фреймов.
В примерах 4.1 и 4.2 приведены исходные коды двух документов с фреймами. Эти документы почти идентичны и отличаются только использованием атрибута FRAMEBORDER, определяющим, должны ли отображаться разделительные линии между фреймами. Результаты показаны на рис. 4.1 и 4.2.
|
Пример 4.1. Фреймы с разделителями |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Frames with Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%"> <FRAME SRC="Frame-Cell.html"> <FRАMESET COLS="*,*"> <FRАМE SRC="Frame-Cеll.html"> <FRAME SRC="Frаme-Cell.html"> </FRAMЕSET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HRЕF-"Frame-Cеll.html">nonframes version</A>. </BODY> </NOFRAMЕS> </FRAMESET> </HTML>
|
|
Пример 4.2. Фреймы без разделителей |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HЕАD> <TITLE>Frames without Borders</TITLE> </HEAD> <FRАМЕSET ROWS="40%,60%" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0> <FRАМE SRC="Frаme-Cell.html"> <FRAMЕSET COLS="*,*"> <FRAME SRC="Framе-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>. </BODY> </NOFRAMES> </FRAMЕSET> </HTML>
|
4.2 Определение фрейма для отображения документа
Автор Web-страницы может создать ее так, чтобы при активизации ссылки документ, на который она указывает, отображался в конкретном, заранее заданном фрейме. Чтобы сделать это, надо присвоить требуемому фрейму имя, а в состав гипертекстовой ссылки включить атрибут TARGET, указав в качестве значения этого атрибута имя фрейма. При отсутствии атрибута TARGET документ, соответствующий активизированной ссылке, отображается в том фрейме, в котором находится эта ссылка. Если в атрибуте TARGET вы укажете имя несуществующего фрейма, документ будет открыт в новом окне браузера и этому окну будет присвоено имя, заданное в качестве значения TARGET.
Часто фреймы используются для создания небольшой панели инструментов или меню, представляющего содержание документа. Такая панель или меню располагается либо в верхней, либо в левой части окна браузера. Остальное пространство в окне предназначено для отображения главного документа. После щелчка на пункте меню с содержанием в основной области выводится документ, на который указывает ссылка. Рассмотрим в качестве примера Web-страницу, показанную на рис. 4.3.
WEB-страница создается так, чтобы под таблицу с содержанием отводилось пространство фиксированного размера. Остальная часть окна предназначается для вывода документа (имя этого фрейма Main). В примере 4.3 представлен HTML-код документа верхнего уровня.
|
Пример 4.3. Код документа с фреймами |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Документ из двух фреймов</TITLE> </HEAD> <FRAMESET ROWS="75,*"> <FRАМE SRC="mеnu.html" NAME="Menu"> <FRAME SRC="introduction.html" NАME="Main"> <NОFRАMES> <BODY> This page requires Frames. For a non-Frames version, <A HREF="introduction.html">the introduction</A>. </BОDY> </NOFRAMES> </FRAMESET> </HTML>
|
Каждая из ссылок в документе menu.html содержит атрибут TARGET, для которого указано значение Main. Таким образом, при активизации ссылки в верхнем фрейме документ отображается в нижнем фрейме. Код документа, включающего таблицу с содержанием, показан в примере 4.4.
|
Пример 4.4. Код документа с меню |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Таблица с содержанием</TITLE> </HEAD> <ВОDY> <TАBLE WIDTH="100%"> <TR><ТН><А HREF="intrоduction.html" TARGET="Main"> Introduction</A></TH> <TH><A НREF="potential.html" TARGET="Mаin"> Potential</A></TH> <TH><A HRЕF="invеsting.html" TARGET="Main"> Investing</A></TH> <TH><A HREF="referеnces.html" TARGET="Main"> References</A></TH> </ТR> </TАBLE> </BODY> </HTML>
|
При выборе ссылки в таблице содержимое верхнего фрейма остается неизменным. Того же эффекта можно достичь, вовсе отказавшись от атрибутов TARGET в составе гипертекстовых ссылок и включив в раздел HEAD выражение <BASE TARGET="Main">. Документ, содержащий атрибут TARGET, не считается строго соответствующим HTML 4.0, поэтому в начало этого документа должна быть включена промежуточная декларация DOCTYPE.