Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Лабораторная работа 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>





Рекомендуемые страницы:

Воспользуйтесь поиском по сайту:



©2015- 2021 megalektsii.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.