Отображение нескольких документов в рамках одной Web-страницы (фреймы).

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

озможность работы с фреймами впервые была реализована в браузере Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.

Сферы применения фреймов

Разработчикам HTML-документов предоставляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы (frames). В ряде русскоязычных описаний языка HTML вместо термина фреймы используется термин кадры. Частота использования обоих терминов примерно одинакова.

одновременно видеть на экране и оглавление документов, и содержимое выбранного документа.

 

Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:

<FRAMESET ROWS="80%,20%">

<FRAMESET COLS="15%, 85%">

<FRAME SRC="LIST.htm">

<FRAME scrolling=auto SRC="empty.htm" name="pages">

</FRAMESET>

<FRAME SRC = "toolbar.html" scrolling=noresize>

</FRAMESET>

Данный пример показывает наиболее типичное использование фреймовых структур, когда один фрейм служит оглавлением документов, а другой используется для загрузки их содержимого. Решение такой задачи без применения фреймов обычно выполняется следующим образом. На одной из страниц располагают оглавление, состоящее из ссылок на другие документы или их отдельные фрагменты. При переходе по такой ссылке оглавление исчезает, а на его место загружается нужный документ, после прочтения которого обычно необходимо вновь вернуться к оглавлению. При использовании фреймов такой возврат становится ненужным, так как оглавление постоянно располагается на части экрана.

В интернете можно найти сайт электронного издания популярного в Санкт-Петербурге адресно-телефонного справочника "Весь Петербург".

Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:

<FRAMESET COLS="100,*" frameborder="0" framespacing="0" border="0">

<FRAME NAME="Menu window" SRC="menu.htm" noresize>

<FRAME NAME=content SRC="sql.idc" noresize>

</FRAMESET>

Фреймы очень похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Кроме того, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Совет

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

Правила описания фреймов

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

Фреймы определяются в структуре, называемой FRAMESET, которая используется для страниц, содержащих фреймы, вместо раздела BODY обычного документа. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTML-коде. В свою очередь, страницы с разделом BODY не могут использовать фреймы.

Совет

Так как для страниц с фреймами не применяется раздел BODY, то нет возможности задать фоновое изображение и цвет фона для всей страницы в целом. Напомним, что эти установки определяются параметрами BACKGROUND и BGCOLOR, записываемыми в тэге BODY. Однако это не мешает в каждый фрейм загружать документы, имеющие свои параметры фона.

Контейнер из тегов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только тэги <FRAME> и вложенные теги <FRAMESET>.

Тэг <FRAMESET> имеет два параметра: ROWS (строки) и COLS (столбцы) и записывается в следующем виде:

<FRAMESET ROWS="список_значений" COLS="список_значений">.

Приведем пример, использующий все три варианта задания значений:

<FRAMESET COLS="100,25%,*,2*">.

В этом примере первый столбец будет иметь ширину 100 пикселов. Второй столбец займет 25 процентов от всей ширины окна просмотра, третий столбец — 1/3 оставшегося пространства и, наконец, последний столбец — 2/3. Абсолютные значения рекомендуется назначать первыми по порядку слева направо. За ними следуют процентные значения от общего размера пространства. В заключение записываются значения, определяющие пропорциональное разбиение оставшегося пространства.

Совет

Если вы используете абсолютные значения параметров COLS или ROWS, то задавайте их небольшими, чтобы они могли поместиться в любом окне браузера, и дополняйте их, по крайней мере, одним значением, заданным в процентной или относительной форме, для заполнения оставшегося пространства.

Если используется тег <FRAMESET>, в котором заданы значения и COLS, и ROWS, то будет создана сетка из фреймов. Например:

<FRAMESET ROWS="*,2*,*" COLS="2*,*">

Эта строка HTML-кода создает сетку фреймов с тремя строками и двумя столбцами. Первая и последняя строки занимают 1/4 высоты каждая, а средняя строка — половину. Первый столбец занимает 2/3 ширины, а второй - 1/3.

Контейнер <FRAMESET> </FRAMESET> может быть вложен внутрь другого такого же контейнера, как это было показано в начальном примере. Рассмотрим далее использование тега <FRAME>.

Примечание В некоторых источниках по языку HTML указывается, что параметры COLS и ROWS тега <FRAMESET> являются взаимоисключающими. Однако и Netscape, и Microsoft Internet Explorer допускают их совместное использование.

Тэг <FRAME>

Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тегов <FRAMESET> и </FRAMESET>. Например:

<FRAMESET ROWS="*,2*">

<FRAME>

<FRAME>

</FRAMESET>

Обратите внимание, что тег <FRAME> не является контейнером и в отличие от <FRAMESET> не имеет завершающего тэга. Все определение одиночного фрейма выполняется одной строчкой HTML-кода.

Необходимо записать столько тегов <FRAME>, сколько отдельных фреймов определено при задании тега <FRAMESET>. В предыдущем примере тэгом <FRAMESET> задано две строки, поэтому потребовалось записать два тега <FRAME>. Однако этот пример, по существу, бесполезен, так как ни один из фреймов не имеет какого-либо содержания!

Тэг <FRAME> имеет шесть параметров: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

Примечание

Некоторые браузеры разрешают использовать ряд дополнительных параметров тега <FRAME>. Обзор возможностей браузеров Netscape и Microsoft Internet Explorer дается в конце главы.

Приведем запись тега <FRAME> со всеми параметрами:

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO

MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>

На практике в тэге <FRAME> редко используются одновременно все параметры.

Наиболее важный параметр — SRC (сокращение от слова source). Довольно часто в тэге <FRAME> задается единственный параметр SRC. Например:

<FRAME SRC="url">.

Значение параметра SRC определяет URL-адрес документа, который будет загружен изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:

<FRAME SRC="sample.htm">.

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

Конечно, в качестве значения SRC может быть задан любой допустимый URL-адрес. Если, например, фрейм используется для отображения изображения в формате GIF, которое располагается на сервере издательства данной книги, то следует записать:

<FRAME SRC="http://www.bhv.ru/example.gif">.

Совет

He задавайте в документе, описывающем структуру фреймов, никакого содержания.

Обычный текст, заголовки, графические изображения и другие элементы не могут прямо использоваться в документе, который описывает структуру фреймов. Все содержание фреймов должно быть определено в отдельных HTML-файлах, имена которых задаются параметром SRC тега <FRAME>.

Параметр NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, располагающегося на той же самой странице. Например:

<FRAME SRC="sample.htm" NAME="Frame_1">.

Такая запись создает фрейм с именем "Frame_1", на который может быть выполнена ссылка. Например:

<A HREF="other.htm" TARGET="Frame_1">

Щелкните здесь для загрузки документа other.htm во фрейм с именем Frame_1</A>.

 

Обратите внимание на параметр TARGET, который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.

Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Записывается это следующим образом:

MARGINWIDTH="value",

где "value" — абсолютное значение в пикселах. Например:

<FRAME MARGINHEIGHT= "5" MARGINWIDTH= "7">.

Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа — по 7 пикселов. Не забудьте, что здесь идет речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрей-ма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.