2.3 Пример документа html с фреймами
В качестве примера приведем в сокращенном виде исходный текст документа, определяющего фреймы, показанные на рис. 2.1.
<HTML>
<HEAD>
<TITLE>Лабораторная с фреймами</TITLE>
</HEAD>
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm"
MARGINHEIGHT=1>
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="auto" NAME="main page" SRC="main.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Рисунок 2.1-Пример документа с фреймами
Здесь мы определили два набора фреймов, причем второй набор вложен в первый.
Для первого набора мы определили один фрейм, расположенный горизонтально. Первый из них имеет высоту 90 пикселов и используется для размещения нашего логотипа, второй занимает все оставшееся пространство:
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
Как видно из этой строки, фреймы не имеют рамки (значение параметра FRAMEBORDER равно 0). Мы убрали рамку, потому что она выглядит слишком тяжеловесно. Дополнительно мы указали, что при просмотре в навигаторе Netscape Navigator фреймы должны иметь рамку толщиной 1 пиксел.
Зачем мы эти сделали?
Нам хотелось, чтобы сервер выглядел по возможности одинаково в окнах навигаторов Microsoft Internet Explorer и Netscape Navigator. Однако эти навигаторы работают по-разному с рамками фреймов.
Если в операторе <FRAMESET> указать, что фреймы не должны иметь рамки, то Microsoft Internet Explorer не рисует трехмерную рамку. Однако между фреймами остается маленький зазор серого цвета, который выглядит как рамка. Эту рамку можно использовать, например, для изменения размера фрейма (если при определении фрейма для него не указан параметр NORESIZE, запрещающий изменение размера).
Навигатор Netscape Navigator в указанной выше ситуации (когда значение параметра FRAMEBORDER равно нулю) не оставляет никакого зазора между фреймами. В этом и выражается отличие. Для того чтобы сделать зазор размером в один пиксел, мы указали параметр BORDER, который распознается только навигатором Netscape Navigator.
В свободном пространстве ниже фрейма первого набора мы расположили еще один набор фреймов. Второй набор фреймов состоит из двух фреймов, расположенных вертикально. Эти фреймы занимают, соответственно, 25% и 75% ширины родительского фрейма:
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
Вернемся опять к первому набору фреймов.
В этом наборе определен только один фрейм:
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm"
MARGINHEIGHT=1>
Так как этот фрейм предназначен для отображения логотипа, для него не используется свертка. Поэтому значение параметра SCROLLING равно “no”.
Имя фрейма указано в параметре NAME как “title”. Дополнительно мы указали параметр NORESIZE, запретив изменение размера фрейма мышью.
Параметр SRC указан как “title.htm”. Из файла с этим именем загружается документ HTML при отображении фрейма. Заметим, что файл title.htm расположен в том же каталоге, что и файл, определяющий фреймы.
Параметр MARGINHEIGHT задает отступ по высоте, равный 1 пикселу. Мы указали этот параметр для уменьшения зазора между верхней границей фрейма и графическими изображениями логотипа.
Файл title.htm содержит таблицу с двумя графическими изображениями и текстом и не имеет никаких особенностей:
<HTML>
<BODY BGCOLOR="#FFFFFF">
<TABLE>
<TR><TD VALIGN=TOP><IMG SRC="a01.jpg"></TD>
<TD VALIGN=MIDDLE>МО2д: Лабораторная сработа «Создание HTML
документов с использованием фреймов»</TD>
<TD VALIGN=TOP><IMG SRC="a02.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Теперь перейдем к второму набору фреймов, разделяющих по вертикали нижнюю часть окна навигатора на две половины. Два фрейма из этого набора определены следующим образом:
<FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="auto" NAME="main page" SRC="main.htm">
Так как для параметра SCROLLING указано значение "auto", то если содержимое не помещается в окне фрейма, около фрейма появляются полосы просмотра.
Окно левого фрейма называется “toc”. Оно загружается из файла с именем toc.htm, который состоит из ссылок на разделы сервера:
<HTML>
<BODY BGCOLOR="#B0FFD8">
<BASEFONT SIZE=2>
<LEFT>
<A HREF="main.htm" TARGET="main page">Добро пожаловать</A><BR>
<A HREF="news.htm" TARGET="main page">Новости</A><BR>
<A HREF="books.htm" TARGET="main page">Книги</A><BR>
<A HREF="metods.htm" TARGET="main page">Методички</A><BR>
<A HREF="examples.htm" TARGET="main page">Примеры</A><BR>
<A HREF="sprav.htm" TARGET="main page">Справочные
материалы</A><BR>
</LEFT>
</BODY>
</HTML>
Обратите внимание, что в операторах <A> параметр TARGET, задающей имя окна для загрузки документа, может иметь различные значения. В параметре TARGET вы должны указать имя окна, в которое будет выполняться загрузка документа.
Для параметра TARGET можно указывать одно из нескольких предопределенных имен:
Имя окна |
Описание |
_top |
Документ HTML будет загружен в окно самого верхнего уровня |
_parent |
Документ HTML загрузится в родительское окно (по отношению к текущему окну) |
_self |
Документ будет загружен в текущее окно |
_blank |
Для загрузки документа будет использовано новое окно без имени |
Все ссылки (в данном примере) загружают документы в окно с именем main page. Это окно соответствует фрейму, расположенному справа и принадлежащему второму набору фреймов.
При необходимости вы можете загружать документы и в окно левого фрейма, указав в параметре TARGET значение toc, или в окно верхнего фрейма, указав в параметре TARGET значение title. При этом можно сделать так, что при выборе в левом фрейме какого-либо раздела содержимое этого фрейма полностью изменяется, отображая, например, названия подразделов нового раздела.
Документ main.htm, который первоначально загружается в окно фрейма main page, представлен ниже:
<HTML>
<BODY BGCOLOR="#FFFFFF"><CENTER>
<H2>Добро пожаловать на наш сайт!</H2>
<P>Этот ресурс посвящен вопросам создания документов с фреймами</p>
<HR>
Эту страницу лучше всего просматривать навигаторами MS Internet Explorer v3.0 или Netscape Navigator
<TABLE><TR><TD>
</CENTER>
</BODY>
</HTML>