8.2 Создание фреймов - HTML - Каталог статей

Друзья сайта

Сайт для программиста.

Сайт о заработке в интернете.

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Главная » Статьи » HTML

8.2 Создание фреймов

Урок №8: Фреймы

Рассмотрим процесс создания фреймов

Первым этапом является создание документа фреймовой структуры (или фреймовой разметки). Как можно догадаться из названия, этот HTML-файл представляет собой документ, в котором описана структура из нескольких фреймов. Иначе говоря, в нем нет ни текстового содержимого, ни графики, а есть только специальные теги, описывающие расположение и размеры фреймов. Кроме того, эти теги содержат ссылки на документы, вставленные в каждый конкретный фрейм.
Также необходимо продумать, на какие области нужно разделить экран. Горизонтальное и вертикальное деление экрана задаются при помощи разных атрибутов.
Следующим этапом является подготовка отдельных HTML-файлов для каждого фрейма. Они создаются по таким же правилам, что и обычные веб-страницы. Нужно только учитывать размер области, в которой они будут демонстрироваться. До тех пор, пока эти файлы не будут созданы, открывать документ фреймовой структуры в броузере не имеет смысла, ведь, не имея содержимого фреймов, вы ничего интересного не увидите. :)

Думаю, что с последним пунктом вы можете справиться без проблем. Основная задача состоит в том, чтобы правильно разработать документ фреймовой структуры.

Замечание: Нетрудно подсчитать, сколько документов нужно для создания той или иной структуры. Если нужно разбить экран на N областей, то количество веб-страниц будет равно N+1, то есть N фреймов и 1 документ фреймовой структуры.

Документы фреймовой структуры описываются в спецификациях XHTML 1.0 Frameset и XHTML 1.1 (модули Frame и Iframe). Поэтому команда DOCTYPE в документах фреймовой структуры будет выглядеть следующим образом:

Документ XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml1-frameset.dtd">

Документ XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Почему же в XHTML 1.0 создана отдельная спецификация для отображения фреймов? Чем спецификация XHTML 1.0 Frameset отличается от XHTML 1.0 Strict? Дело в том, что обычные веб-страницы заключают в себе содержимое, т.е. текст, графику, различные элементы. А документ фреймовой структуры содержит в себе лишь указания на то, какими веб-страницами он будет заполнен.

Напомню минимальную модель содержимого обычного XHTML-документа:

<html>
 <head>
 <title></title>
 </head>
 <body>
 </body>
</html>

В отличие от обычных XHTML-документов, минимальная модель содержимого документа фреймовой структуры выглядит так:

<html>
 <head>
 <title></title>
 </head>
 <frameset атрибут cols или rows>
 один или несколько тегов <frame />
 </frameset>
</html>

Важно: В документе фреймовой структуры отсутствует элемент <body>.

Рассмотрим теги и атрибуты, которые используются в документе фреймовой структуры.

Тег <frameset>

Тег <frameset> является основным тегом фреймовой структуры документа. Как было уже замечено, в HTML-коде отсутствует тег <body>, поэтому тег <frameset> вставляется сразу же после раздела <head>. Тег <frameset> может содержать два атрибута - cols и rows, которые определяют количество и размер фреймов. При помощи атрибута cols описывается разбиение страницы на столбцы, а при помощи rows - на строки. Значение атрибута может быть указано в пикселах, процентах или относительных единицах, причем число значений соответствует количеству фреймов. Значения записываются через запятую, например:

<frameset cols="20%, 80%">
В данном примере мы имеем два вертикальных фрейма, причем первый (левый) занимает 20% рабочей области окна браузера, а второй (правый) - 80% (общая сумма, естественно, должна составлять 100%).

Кстати, указывать размеры всех фреймов в пикселах нелогично, так как веб-страницу будут просматривать пользователи с разным разрешением экрана. Если нужно указать соотношение размеров в стиле "левый столбец 150 пикселов, а правый - все оставшееся место", то для этого есть следующий прием:

<frameset cols="150, *">
Символ "звездочка" в значении атрибута cols или rows обозначает как раз "все оставшееся место в окне".

Формат записи значений в относительных единицах выглядит так:

<frameset rows="*, 2*, 3*">

Символ "звездочки" (*) в данном случае является одной долей, то есть осуществляет пропорциональное деление окна браузера на указанное количество фреймов (в нашем случае это три горизонтальных фрейма). Чтобы определить дробное число, соответствующее размеру конкретного фрейма, нужно сложить все цифры, стоящие перед символом *, и подставить получившуюся сумму в качестве знаменателя от целого числа. Таким образом: 1 + 2 + 3 = 6, т. е. первый фрейм занимает 1/6 окна, второй - 2/6 (или 1/3) окна, а третий - 3/6 (или 1/2) окна браузера. Отсутствие цифры перед символом "звездочки" подразумевает значение 1.

Параметры rows и cols могут принимать смешанные значения, например: <frameset rows="50, 50%, *, 3*"> Такая структура включает в себя четыре горизонтальных фрейма: первый строго зафиксирован (50 пикселов), второй занимает 50% от всего размера окна браузера, а два последних фрейма поделят оставшееся пространство в соотношении 1/4 и 3/4.

Элемент <frameset> может содержать элементы <frame>, <noframes> и другие элементы <frameset>.

Тег <frame />

Элемент <frame> используется внутри контейнера <frameset>. Он вызывает документ с помощью атрибута src, в значении которого указывается URI - относительный или абсолютный адрес документа. Этот элемент является пустым, то есть он сам себя закрывает.

Рассмотрим простой пример

Допустим, что документ index.html состоит из двух горизонтальных фреймов, верхний определяется документом header.html (его высота 120 пикселов), а нижний - документом main.html. Все три документа находятся в одной папке. Размеры этих фреймов указываются при помощи атрибута rows тега <frameset>, а для задания файлов-источников содержимого фреймов нужно использовать теги <frame />. Код, соответствующий поставленной задаче, выглядит так:

Листинг №8.1:
<html> <head> <title>Заголовок</title> </head> <frameset rows="120,"> <frame src="header.html" /> <frame src="main.html" /> </frameset> </html*>

Замечание: Количество тегов <frame /> внутри фреймовой структуры должно быть равно количеству значений, перечисленных в значении атрибута cols или rows тега <frameset>.

Кроме атрибута src, элемент <frame> имеет еще несколько атрибутов, отвечающих, в основном, за внешний вид отображаемого фрейма. Приведем список всех его атрибутов:

src: Определяет размещение первоначального содержимого фрейма.
name: Определяет имя фрейма. Этот атрибут мы рассмотрим подробно в следующей главе.
frameborder: При присвоении этому атрибуту значения 1 вокруг фрейма в окне броузера отображается рамка. Если установлено значение 0, рамка не отображается.
scrolling: Определяет наличие во фрейме полос прокрутки. Значение yes - полосы есть, no - полосы не отображаются, auto - полосы отображаются, если содержимое фрейма выходит за рамки отведенного контейнера.
noresize: При установленном значении noresize не позволяет пользователю изменять размер данного фрейма. Если атрибут вообще не указан, то пользователь может изменять размер фрейма.
longdesc: Определяет ссылку к полному описанию фрейма. Это описание может использоваться в невизуальных средствах отображения веб-страниц.
marginwidth: Определяет зазор в пикселях между содержимым фрейма и его правым и левым полями
marginheight: Определяет зазор в пикселях между содержимым фрейма и его верхним и нижним полями

В качестве примера приведем тег, создающий фрейм с границами, неизменным размером, обязательной прокруткой, полями по 10 пикселов и исходным файлом example.html.

<frame src="example.html" frameborder="1" scrolling="yes" noresize="noresize"
 marginwidth="10" marginheight="10" />

Тег <noframes>

Возможность работы с фреймами не была предусмотрена спецификацией HTML вплоть до версии 3.2. С принятием HTML 4.0 была введена поддержка фреймовых структур, а Консорциум W3C стал рекомендовать использование тега <noframes>, предоставляющего информацию пользователям браузеров, не поддерживающих фреймовую структуру.

<noframes>
 <body>
 Ваш броузер не отображает фреймы.
 </body>
</noframes>

Текст, заключенный между двумя тегами <noframes>, будет показан владельцам таких браузеров, а современные браузеры просто проигнорируют эту информацию.

Замечание: На самом деле, подавляющее большинство броузеров поддерживают фреймы. Ну разве что на некоторых мобильных телефонах такая возможность не предусмотрена.

Ниже представлениа таблица, в которой перечислены теги документа фреймовой структуры с допустимыми атрибутами.

Элементы	Атрибуты	Модель минимального содержимого
frameset	cols (число) rows (число)	(frame или frameset) - один и больше; noframes - 0 или 1
frame	src (URI) frameborder ("1" или "0") longdesc (URI) marginheight (число пикселов) marginwidth (число пикселов) noresize ("noresize") scrolling ("yes" или "no" или "auto") name (имя)	пустой
noframes		body

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 4723 | Рейтинг: 4.0/2

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]