Фреймы

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

Описание структуры фреймов осуществляется при помощи документа frameset. Это документ формата HTML, структура которого отличается от обычной. Основное отличие состоит в том, что документ frameset не имеет самостоятельного содержания и поэтому тело документа в обычном понимании отсутствует. Это в частности означает отсутствие в нем тега <body>. Вместо этого документ содержит элемент описания фреймов, задаваемый парным тегом <frameset>. Содержимое этого элемента состоит из описаний отдельных фреймов и их содержимого, для чего используется, главным образом, одиночные теги <frame>.

В открывающем теге <frameset> с помощью атрибутов задается способ разбиение окна броузера на панели. Такое разбиение можно провести по вертикали (атрибут cols) или по горизонтали (атрибут rows). Можно также превратить окно броузера в сетку панелей, указав оба эти атрибута.

Значение этого атрибута представляет собой список параметров, перечисленных через запятую, определяющих размеры областей. Значения могут задаваться точно так же, как при определении размера столбцов и строк таблицы: в пикселях (px), в процентах (%), пропорциональных долях (*).

Содержимое панелей окна определяется элементами, вложенными в элемент frameset. Чтобы создать панели фреймов, несводимой к простой "полосатой" или сетчатой структуре. Нужно в качестве одного из элементов, вложенных в элемент frameset, также использовать элемент frameset. Глубина такого вложения не ограничивается, что позволяет создавать очень сложные конструкции панелей.

На создаваемой панели должен быть представлен какой-то документ HTML. Выбор нужного документа осуществляется с помощью одиночного тега <frame>, который разрешается использовать только внутри элемента frameset. Тег <frame> содержит следующие атрибуты:

src - обязательный атрибут, значение которого - адрес URL для страницы, которая должна быть по умолчанию отображена внутри данного фрейма.
noresize - данный атрибут запрещает возможность изменения размеров фреймов
scrolling - дает возможность управления отображением полос прокрутки во фреймах (auto - полосы прокрутки отображаются автоматически, yes - полосы прокрутки отображаются, no - полосы прокрутки не отображаются)
name - задает имя фрейму

Пример <html>
<head>
<title>Фреймы</title>
</head>
<frameset cols="60%,*">
<frameset rows="60%,*">
<frameset cols="50%,*">
<frame src="page.html">
<frame src="page.html">
</frameset>
<frame src="page.html">
</frameset>
<frame src="page.html">
</frameset>
</html>

Посмотреть в броузере

Один из типичных приемов применения фреймов - создание специальной неизменной панели навигации. При щелчке на одной из ссылок этой панели должно изменяться содержимое других фреймов.

Чтобы изменить стандартный режим работы, следует задать имя для нужных панелей-фреймов. Это делается с помощью атрибута name, значение которого - строка имени, в которой предпочтительнее всего использовать только латинские символы нижнего регистра. Ссылка на имя окна должна быть указана в гиперссылке с помощью атрибута target. Это может быть осуществлено как в обычной гиперссылке, так и при использовании изображения-карты. При использовании навигационной панели большинство ссылок на ней должны указывать на один и тот же фрейм.

Кроме имен, определенных самостоятельно, существуют и заранее заданные имена, которые можно использовать в качестве значений атрибута target. Все эти имена начинаются со специального символа "_" (подчеркивание) и содержат только символы нижнего регистра.

_blank - указывает, что документ, на который указывает ссылка, должен быть открыт в новом окне броузера.
_parent - указывает, что документ необходимо открыть в родительском наборе фреймов.
_self - указывает, что документ надо открыть в пределах текущей панели.
_top - позволяет отказаться от фреймов и открыть документ в обычном режиме окна.
Эта страница выполнена именно в этом стиле. Слева меню с ссылками имеющими атрибут target со значением имени правого фрейма.

Встроенные фреймы являются фреймами только по названию. На самом деле это совершенно иной элемент HTML, предназначенный для отображения содержимого одного документа HTML в пределах другого документа. Встроенные фреймы описываются парным тегом <iframe>, который создает блочный элемент. В нормальной ситуации содержимое этого элемента не имеет значения (он может быть пустым), но оно отображается в том случае, когда броузер не допускает применение этого тега. Открывающий тег <iframe> может содержать все те же атрибуты, что и тег <frame>, а также дополнительные атрибуты width, height, align, задающие размер и размещение области фрейма. Путем использования атрибута name (и атрибута target в ссылках) можно обеспечить загрузку других документов в область встроенного фрейма.

Пример <html>
<head>
<title>Встроенные фреймы</title>
</head>
<body>Документ внутри документа<br>
<iframe src="page.html" target="inline">
Если ваш броузер не поддерживает встроенные фреймы, <a href="page.html" target="_blank">откройте этот же документ</a> в отдельном окне.
</iframe>
</body>
</html>

Посмотреть в броузере

Если броузер поддерживает встроенные фреймы, вы увидите, как один документ отображается в рамках другого. Если броузер не поддерживает встроенные фреймы, отображается содержимое элемента iframe. В данном случае предоставлен другой способ увидеть содержимое второго документа.

Design Studio of Vint Stone. 2003.