 |
Создание фреймов на web-странице
|
|
|
|
Лабораторная работа №4.
Цель работы: Изучить принципы создания фреймов их использование для отображения информации на web-страницах сайта.
Фреймы (или рамки – Frame) – мощный механизм представления информации на Web-страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла. Фреймы – удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трёх фреймов и старайтесь не применять их без надобности. Фреймы позволяют нам открыть в окне браузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта). Базовая структура группы фреймов Web-страница, которая разделена на фреймы, собирается вместе с документом верхнего уровня — документом группы фреймов (frameset).
Документы группы фреймов содержат стандартный заголовок (задаваемый тегом <head>). В отличие от стандартных HTML-документов они не имеют тега <body>. Вместо него используют тег <frameset>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <frame>. Содержимое фреймовых документов поступает из различных файлов HTML. Оно выводится в различных фреймах. Прежде, чем размещать документы на Web-странице, используя фреймы, нужно решить по какому принципу мы это будем делать. Предлагаем классический вариант - logo.html, menu.html, content.html - о котором упоминалось выше. Расположение фреймов может быть различное, для примера рассмотрим четыре варианта из множества возможных (см. рис.14):
|
|
|
Рис.14 Пример расположения документов оформленных фреймами.
Рассмотрим первую схему на рисунке 14 и приведём его базовый html файл:
<html> <head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150" >
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head> </html>
Поясним данный html файл. Параметр rows - в нашем примере это выглядит так: rows="100,*,150" - документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселей, третьего - 150, а второй занимает все оставшееся пространство. Тэг frame сообщает браузеру какие документы у нас будут в каждом ряду (строке). Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html. Если замените параметр rows, на cols, то получим расположение документов, изображённое на рисунке 14 схеме третьей, то есть, документы будут располагаться не по строкам, а по столбцам.
Рассмотрим вторую схему на рисунке 14. В первом ряду расположен logo.html, а второй ряд мы поделим на две колонки, в которых располагаются документы menu.html и content.html. Для данной схемы базовый html файл будет выглядеть следующим образом:
<html> <head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset> </frameset> </head> </html>
Рассмотрим четвёртую схему на рисунке 14. Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html, а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html. Базовый html файл, для данного примера будет выглядеть следующим образом:
<html> <head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset> </head> </html>
На уровне группы фреймов (то есть внутри открывающего тега <frameset>) вы задаете строки и столбцы и решаете, следует ли выводить границы между фреймами.
|
|
|
На уровне отдельного фрейма (в теге <frame>) вы задаете URL выводимого в этом фрейме документа и имя фрейма для последующих ссылок на него. Также вы имеете возможность управлять появлением полос прокрутки, разрешением пользователю изменять размер фрейма и полей, если они вообще есть.
Создание строк и столбцов
Строки и столбцы задаются внутри тега <frameset> атрибутами cols и rows. Эти атрибуты разделяют группу фреймов по принципу координатной сетки. Фреймы заполняются слева направо по столбцам и сверху вниз по строкам.
Размер каждой строки (или столбца) задается после имени атрибута списком значений в кавычках, разделенных запятыми. Количество значений в списке определяет число строк (столбцов) это выглядит следующим образом:
<frameset rows="50%, 50%">
|
|
|
