В качестве примера приведем в сокращенном виде исходный текст документа, определяющего фреймы, показанные на рис. 6.1.
<HTML>
<HEAD>
<TITLE>лаб 5</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>
<NOFRAME>
<BODY BGCOLOR="#FFFFFF">
Используйте более новый навигатор.
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Здесь мы определили два набора фреймов, причем второй набор вложен в первый.
Для первого набора мы определили один фрейм, расположенный горизонтально. Первый из них имеет высоту 90 пикселей и используется для размещения нашего логотипа, второй занимает все оставшееся пространство:
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
В свободном пространстве ниже фрейма первого набора мы расположили еще один набор фреймов. Второй набор фреймов состоит из двух фреймов, расположенных вертикально. Эти фреймы занимают, соответственно, 25% и 75% ширины родительского фрейма:
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
Вернемся опять к первому набору фреймов.
В этом наборе определен только один фрейм:
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.html" 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="f2.gif"></TD>
<TD VALIGN=TOP><IMG SRC="logo.gif"></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="https://www.ааа.ru/index.html" TARGET="_top">Домашняя страница</A><BR>
<A HREF="main.htm" TARGET="main page">Добро пожаловать</A><BR>
<A HREF="news.htm" TARGET="main page">Новости</A><BR>
<P><A HREF="books.htm" TARGET="main page">Книги</A><BR>
<P><A HREF="capital.htm" TARGET="main page">КАПИТАЛ</A><BR>
<A HREF="terra.htm" TARGET="main page">КОМПЬЮТЕРРА</A><BR>
<A HREF="qa.htm" TARGET="main page">Вопросы и ответы</A><BR>
<A HREF="links.htm" TARGET="main page">Ресурсы Internet</A><BR>
<P><A HREF="virchk.htm" TARGET="main page">Вирусы</A><BR>
<P><A HREF="frends.htm" TARGET="main page">Партнеры и друзья</A><BR>
<A HREF="../guest/gbook.htm" TARGET="main page">Книга гостей</A><BR>
<P><A HREF="../eng/home.htm" TARGET="_top">Set English Language</A><BR>
</LEFT>
</BODY>
</HTML>
Обратите внимание, что в операторах <A> параметр TARGET, задающий имя окна для загрузки документа, имеет различные значения. В параметре TARGET вы должны указать имя окна, в которое будет выполняться загрузка документа.
Для параметра TARGET можно указывать одно из нескольких предопределенных имен:
Имя окна | Описание |
_top | Документ HTML будет загружен в окно самого верхнего уровня |
_parent | Документ HTML загрузится в родительское окно (по отношению к текущему окну) |
_self | Документ будет загружен в текущее окно |
_blank | Для загрузки документа будет использовано новое окно без имени |
Когда пользователь выбирает строку “Домашняя страница”, документ HTML с адресом https://www.ааа.ru/index.html загружается в окно, которое называется _top. В результате указанный документ займет все внутреннее пространство окна навигатора.
Остальные ссылки, кроме последней, загружают документы в окно с именем main page. Это окно соответствует фрейму, расположенному справа и принадлежащему второму набору фреймов.
При необходимости вы можете загружать документы и в окно левого фрейма, указав в параметре TARGET значение toc. При этом можно сделать так, что при выборе в левом фрейме какого-либо раздела содержимое этого фрейма полностью изменяется, отображая, например, названия подразделов нового раздела.
Документ main.htm, который первоначально загружается в окно фрейма main page,
может содержать общее описание сайта или приветствие, счетчик посещений страницы,
почтовый адрес и сведения об авторских правах на информацию, расположенную на сайте.
Плавающие фреймы
Навигатор Microsoft Internet Explorer позволяет создавать еще одну разновидность фреймов - так называемые плавающие фреймы.
Вы можете использовать плавающий фрейм не только для размещения текста в тексте, но и для организации ссылок на другие документы.
Вокруг плавающего фрейма может располагаться текст или другие графические изображения. Вы можете указывать для фрейма такие же атрибуты выравнивания, как и для графических изображений.
Плавающий фрейм вставляется в документ HTML при помощи оператора <IFRAME>, который всегда используется в паре с оператором </IFRAME>. Для этого оператора можно задавать параметр ALIGN, который задает выравнивание текста, расположенного около плавающего фрейма, параметры WIDTH и HEIGHT, задающие размеры фрейма, а также параметры HSPACE и VSPACE.
Еще один параметр, который допустим при описании плавающего фрейма - FRAMEBORDER. Он может принимать значения 1 или 0. Если значение этого параметра равно 1, плавающий фрейм заключается в трехмерную рамку (используется по умолчанию), а если 0 - рамка не отображается.
Параметр SCROLLING может принимать значения “yes”, “no” или “auto”. Если указано значение “yes”, окно плавающего фрейма будет иметь полосы просмотра. Если “no” - полос просмотра не будет. В том случае, когда для параметра SCROLLING указано значение “auto”, полосы просмотра будут создаваться только при необходимости, когда содержимое документа не помещается в окне фрейма.
Пример
<HTML>
<HEAD>
<TITLE>Плавающие фреймы в документах HTML</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение плавающих фреймов в документах HTML</H2>
Вы можете включить внутрь документа HTML плавающий фрейм:
<P><IFRAME SRC="include.html" ALIGN=LEFT>
</IFRAME>Если указано выравнивание по левой границе,
текст, расположенный рядом с плавающим фреймом, будет
расположен справа от фрейма
</BODY>
</HTML>
В этом документе определен плавающий фрейм, в который загружается документ HTML, расположенный в файле include.html
include.html
<HTML>
<HEAD>
<TITLE>Документ для плавающего фрейма</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<P>Содержимое этого документа отображается внутри
плавающего фрейма.
<P>Оно отображается в окне, которое имеет
вертикальную полосу просмотра.
<P>Если содержимое документа,
загруженного в плавающий фрейм, не помещается в окне фрейма,
пользователь может пролистать его при помощи этой
полосы просмотра.
</BODY>
</HTML>
Лабораторное задание №5
1) Создать документ с фреймами следующего вида:
В этой области необходимо разместить рисунок. | |
Три ссылки на заранее созданные html документы, при нажатии на ссылки их содержание должно отображаться в окне фрейма №3. | Первоначально здесь должна быть расположена информация об авторе |
2) Создать документ с фреймами следующего вида:
В этой области необходимо разместить рисунок с использованием элемента карта. Элемент должен содержать области разного цвета, которые должны использоваться как ссылки на личные страницы (т.е. страница пункта 6 лабораторной работы 1,2) Личные страницы должны выводиться в окне фрейма №2 |
3) Создать документ с фреймами следующего вида:
Первоначально здесь должна быть расположена информация об авторе | |
Видеофрагмент 1 | Три ссылки на заранее созданные html документы, при нажатии на ссылки их содержание должно отображаться в окне фрейма №1. |
Описание видеофрагмента 1 Ссылка на видеофрагмент2 |
В окне фрейма2 должна располагаться страница с видеофрагментом1, при нажатии на видеофрагмент1 в окно фрейма3 должна загрузиться информация, содержащая: описание видеофрагмента1 и ссылку на видеофрагмент 2, при нажатии на эту ссылку в окне фрейма 2 должен загрузиться видеофрагмент 2, при нажатии на видеофрагмент2 в окне фрейма 3 должна загрузиться информация, содержащая: описание видеофрагмента2 и ссылку на видеофрагмент 1…
4) Самостоятельно придумать 4 примера документов с фреймами для демонстрации работы параметра TARGET с предопределенными именами (_top, _parent, _self, _blank).
5) Самостоятельно придумать примеры документов с фреймами, чтобы продемонстрировать умение:
- задавать размер фреймов
- задавать рамки для фреймов
- задавать расстояние между фреймами
- задавать отступ
- знать, как сделать невозможным изменение окна фрейма
- сделать появление полосы прокрутки, только при необходимости
6)Создать документ с плавающим фреймом, без рамки, полоса прокрутки должна появляться при необходимости, текст, расположенный рядом с фреймом должен быть расположен слева от фрейма.