ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 03.04.2025
Просмотров: 141
Скачиваний: 1
Лабораторная работа №5
Ознакомление с основами языка HTML. Фреймы
Фреймы предоставляют возможность создавать многооконный интерфейс. В этом случае окно навигатора разделяется на несколько окон (фреймов), в каждом из которых отображается содержимое различных документов HTML. Таким образом, можно работать одновременно с несколькими документами.
Структура документа с фреймами
Прежде всего необходимо подготовить документ HTML, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь следующий вид:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<!-- Определение фреймов -->
<FRAMESET ROWS="90,*" FRAMEBORDER=1 BORDER=1>
<FRAME SRC="frame1.htm">
<FRAME SRC="frame2.htm">
<!-- Вариант для навигатора, не способного работать с фреймами-->
<NOFRAME>
<BODY BGCOLOR="#FFFFFF">
. . .
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
В начале документа HTML, который предназначен для описания фреймов, нет привычного оператора <BODY>. Вместо этого там расположен оператор определения набора фреймов <FRAMESET>, который используется в паре с оператором </FRAMESET>. Параметры оператора <FRAMESET> описывают набор фреймов в целом, задавая размеры, внешний вид рамки и так далее.
Между операторами <FRAMESET> и </FRAMESET> находятся операторы <FRAME>, которые определяют параметры отдельных фреймов. В частности, операторы <FRAME> задают адресаURLдокументовHTML, которые загружаются в фреймы сразу после их создания.
Помимо операторов <FRAME>, внутри пары операторов<FRAMESET>и</FRAMESET>необходимо разместить операторы<NOFRAME> и</NOFRAME>. Между этими операторами вы должны расположить документHTML, который будет отображаться навигаторами, не способными работать с фреймами. В простейшем случае этот документ должен содержать сообщение о том, что данную страницу лучше всего просматривать более современными навигаторами.
Заметим, что можно создавать вложенные фреймы, определяя наборы фреймов внутри пары операторов <FRAMESET>и</FRAMESET>:
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm">
<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>
Вы можете заменить фрейм на набор фреймов, заменив соответствующий оператор <FRAME> на определение набора, сделанное оператором <FRAMESET>.
Определение параметров фреймов
Прежде всего рассмотрим параметры оператора <FRAMESET>, предназначенного для определения набора фреймов.
|
Параметр |
Описание |
|
COLS |
Ширина колонки в процентах, пикселах или относительный размер |
|
ROWS |
Высота строки в процентах, пикселах или относительный размер |
|
FRAMEBORDER |
Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается |
|
|
|
|
FRAMESPACING |
С помощью этого параметра можно задать дополнительное расстояние между фреймами в пикселах |
Параметры COLS и ROWS нужны в том случае, когда фреймы, определенные в наборе, располагаются в виде таблицы. Первый из этих параметров указывает ширину колонки, а второй - высоту строки. Если фреймы располагаются в одном столбце, параметр COLS указывать не надо. Аналогично, если фреймы занимают только одну строку, не нужно указывать параметр ROWS.
Вы можете задать значения для параметров COLS и ROWS либо в процентном отношении, соответственно, к ширине и высоте окна навигатора, либо в пикселах. Если вместо значения указан символ *, колонка или строка занимают всю оставшуюся часть окна.
Например, ниже указано, что высота первого фрейма равна 90 пикселам, а второй фрейм занимает всю нижнюю часть окна навигатора:
<FRAMESET ROWS="90,*">
В следующем примере два фрейма, расположенные рядом, занимают, соответственно, 20% и 80% ширины окна навигатора.
<FRAMESET COLS="20%,80%">
Другой оператор, который используется для определения параметров фреймов - это оператор <FRAME>.Он имеет следующие параметры:
|
Параметр |
Описание |
|
ALIGN |
Используется только для “плавающих фреймов” в навигаторе Microsoft Internet Explorer. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Этот параметр может принимать следующие значения: LEFT, CENTER, RIGHT,TOP, BOTTOM |
|
MARGINHEIGHT |
Размер отступа по вертикали от границ фрейма в пикселах |
|
MARGINWIDTH |
Размер отступа по горизонтали от границ фрейма в пикселах |
|
FRAMEBORDER |
Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается |
|
NAME |
Этот параметр задает имя фрейма, которое используется в операторе ссылки <A>для указания, в какой фрейм нужно загрузить новый документ |
|
NORESIZE |
Если указан этот параметр, пользователь не сможет изменять размеры фрейма, передвигая его границы мышью |
|
SCROLLING |
Параметр SCROLLING определяет, нужно ли создавать полосы просмотра для свертки содержимого фрейма. Для этого параметра можно указывать следующие значения: YESполосы просмотра создаются всегда; NOполосы просмотра не создаются; AUTOполосы просмотра создаются только при необходимости, когда документHTML не помещается полностью в окне фрейма |
|
SRC |
Адрес URLфайла с документомHTML, который загружается в окно фрейма |
Пример документа html с фреймами
В качестве примера приведем в сокращенном виде исходный текст документа, определяющего фреймы, показанные на рис. 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="http://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 с адресом http://www.ааа.ru/index.html загружается в окно, которое называется_top. В результате указанный документ займет все внутреннее пространство окна навигатора.
Остальные ссылки, кроме последней, загружают документы в окно с именем main page. Это окно соответствует фрейму, расположенному справа и принадлежащему второму набору фреймов.