 |
Лабораторная работа 6. Фреймы
|
|
|
|
Иногда Web-страницу делят на несколько частей (чаще всего — на две, реже — на три, совсем редко — на большее количество). Одна такая часть называется фреймом (от английского frame — рамка). В каждом фрейме отображается отдельная Web-страница.
Структура фреймов описывается в специальном файле. Таким образом, для создания страницы с двумя фреймами необходимы, по крайней мере, три файла: в одном описывается структура, а в двух других — страницы, которые будут показаны в первом и втором фреймах.
Разбивка на столбцы
В отличие от обычной Web-страницы, страница, которая описывает структуру фреймов, не содержит тела, то есть блока <BODY>...</BODY>. Вместо этого записывается блок <FRAMESET>...</FRAMESET> (от английского frameset - набор фреймов).
Чаще всего используется разбивка страницы на столбцы, когда левая часть содержит оглавление сложного документа, а в правой показан выбранный раздел.
Пример1:
<HTML>
<HEAD>
<TITLE>Фреймы-столбцы</TITLE>
</HEAD>
<FRAMESET COLS="30%,*" FRAMESPACING="20">
<FRAME SRC="left.html" NORESIZE SCROLLING="auto">
<FRAME SRC="right.html" NAME="qq">
</FRAMESET>
</HTML>
Описание структуры заключено внутрь блока <FRAMESET>...</FRAMESET>. В параметре COLS тега <FRAMESET> указывается, сколько фреймов-столбцов будет на странице и какова ширина каждого из них (через запятую). Ширина фреймов может быть задана в процентах от всей ширины окна браузера или в пикселах. Знак * означает «использовать все оставшееся место» (в примере левая часть занимает 30 процентов ширины окна).
Параметры тегов
Параметр FRAMESPACING тега <FRAMESET> задает ширину границы между фреймами в пикселах. Границу можно перетаскивать мышкой, изменяя размеры фреймов, если это разрешено: <FRAMESET COLS="30%,*" FRAMESPACING="0">.
|
|
|
Если требуется скрыть границу между фреймами, в теге <FRAMESET> надо установит дополнительные параметры (для разных браузеров): <FRAMESET COLS="30%,*" FRAMEborder="0" border="0">
Каждый фрейм описывается непарным тегом <FRAME>, у которого есть один обязательный параметр SRC, указывающий имя файла для или URL документа в Интернете, который будет загружен в этот фрейм.
Параметр NORESIZE тега <FRAME> говорит о том, что размеры этого фрейма запрещено менять. Параметр SCROLLING задает режим работы вертикальной линейки прокрутки и может принимать три значения: yes — линейка прокрутки видна всегда, no — прокрутка запрещена, линейки прокрутки нет, auto — линейка прокрутки появляется только тогда, когда информация не помещается в окно.
Каждый фрейм может иметь имя, которое указывается в параметре NAME тега <FRAME>. Оно служит для того, чтобы загружать документы в другой фрейм, обращаясь к нему по имени
Параметры MARGINWIDTH и MARGINHEIGHT тега <FRAME> задают значения горизонтального и вертикального отступов от края страницы в пикселах. Например, чтобы убрать эти поля, надо написать: <FRAME SRC="left.html" MARGINWIDTH="0" MARGINHEIGHT="0">
Разбивка на строки
Аналогично описывается и деление страницы на фреймы-строки. Для этого используется параметр ROWS тега <FRAMESET>.
Пример2:
<HTML>
<HEAD>
<TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS="40,*" FRAMESPACING="10">
<FRAME SRC="up.html" NORESIZE SCROLLING="auto">
<FRAME SRC="down.html" NAME="qq" >
</FRAMESET>
</HTML>
Обратите внимание, что высота первой строки задана в пикселах (без знака процента).
Сложные структуры
Покажем пример структуры, в которой сделана разбивка на строки и столбцы:
Легко заметить, что страница разбита на два столбца, а второй столбец - еще на 2 строки. Таким образом, получилась вложенная структура, где вместо второго столбца использован набор фреймов с разбивкой на строки:
|
|
|
Пример3:
<HTML>
<HEAD>
<TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET COLS="30%,*" FRAMESPACING="20">
<FRAME SRC="left.html" SCROLLING="no">
<FRAMESET ROWS="40,*" FRAMESPACING="10">
<FRAME SRC="up.html" NORESIZE SCROLLING="auto">
<FRAME SRC="down.html" NAME="qq">
</FRAMESET>
</FRAMESET>
</HTML>
Ссылки на другой фрейм
Часто один фрейм используется как оглавление, а другой является рабочей частью. Для того чтобы после щелчка на пункте оглавления заданный файл открывался не в том же фрейме, а в другом, в параметре TARGET тега <A> надо указать имя нужного фрейма. Например, если надо открыть документ во фрейме с именем qq, можно записать: <A HREF="part1.html" TARGET="qq">
Практическая часть
Задание 6.1.
Проделайте примеры 1-3, приведенные в тексте. В случае необходимости дополните примеры нужными тегами и другой информацией. Каждый пример разместите на отдельной странице браузера.
Задание 6.2.
В программе блокнот создайте следующие файлы, сохраните их все в папке Primer_5_1. Вместо файла с логотипом фирмы k1.gif возьмите любое изображение. Просмотрите результат в браузере.
Frame_1.html
HTML>
<HEAD>
<TITLE>Пример разбивки на фреймы</TITLE>
</HEAD>
<FRAMESET ROWS="65,*">
<FRAME SRC="k1.gif" ALIGN=CENTER ALT="Логотип фирмы" NORESIZE SCROLLING=NO MARGINHEEIGHT=1 MARGINWIDTH=1>
<FRAMESET COLS="20%,*">
<FRAME SRC="Menu.htm" NAME="Menu" NORESIZE SCROLLING=NO>
<FRAME SRC="Start.htm" NAME="Work">
</FRAMESET>
</FRAMESET>
</HTML>
Menu.html
<HTML>
<HEAD>
<TITLE>Пример разбивки на фреймы</TITLE>
</HEAD>
<BODY BGCOLOR="#ffddff">
<H2 ALIGN=CENTER>САЙТЫ</H2>
<P ALIGN=CENTER><A HREF="foto.htm" TARGET=Work>Мое фото</A></P>
<P ALIGN=CENTER><A HREF="diablo.htm" TARGET=Work>Diablo: описание персонажей</A></P>
<P ALIGN=CENTER><A HREF="winter.htm" TARGET=Work>Зимняя сказка</A></P>
</BODY>
</HTML>
Start.html
<HTML>
<HEAD>
<TITLE>Стартовое окно фрейма</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=center>Стартовое окно фрейма</H2>
<P ALIGN=left><IMG SRC=gajka.gif></P>
Это - стартовая страничка, которая загружается в данный фрейм по умолчанию, когда вы открываете в браузере страничку с фреймами.<BR>
Щелкните мышью на одной из гиперссылок меню левого фрейма, чтобы загрузить сюда другую страничку. Если она не умещается в пространстве фрейма целиком, для ее просмотра пользуйтесь линейкой прокрутки. (Обратите внимание, что содержимое фреймов заголовка и меню при этом остается неподвижным)
|
|
|
</BODY>
</HTML>
|
|
|
