Фреймы и фреймсодержащие документы

В этой главе:

1. Элемент FRAMESET
2. Элемент FRAME
3. Элемент NOFRAMES
4. Элемент IFRAME

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

Фреймсодержащий документ не может нести в себе часть BODY, она заменяется элементом FRAMESET. При этом в окно браузера выводятся документы, указанные в элементах FRAME из набора FRAMESET. Например, если файл container.html является контейнером для двух фреймов, в котором элементы FRAME ссылаются на файлы left.html и right.html, то браузер разобьет экран на две части и загрузит в них эти два файла (рис. 2.4). Эти файлы, а также другие примеры определения фреймов вы найдете на прилагаемом компакт-диске в каталоге Part_2\Frames.

Рис. 2.4. Фреймы

Элемент FRAMESET

Элемент FRAMESET определяет набор создаваемых фреймов и порядок их вывода в окне браузера. Так, для того, чтобы разделить окно браузера по вертикали на две равных части (как на рис. 2.4), потребуется код, приведенный в листинге 2.9.

Листинг 2.9. Документ с элементом FRAMESET

В этом примере определяется набор из двух фреймов, на первый из которых отводится столбец шириной в 50 процентов окна, а на второй – все оставшееся место (в данном случае – те же 50%). При этом браузер разбивает свою рабочую область на две части, в каждую из которых загружается собственный HTML-документ. Возможное содержание одного из этих файлов приведено в листинге 2.10.

Листинг 2.10. Обычный документ, загружаемый во фрейм

Как видно, это самый обычный документ HTML. В правый фрейм загружается практически такой же документ, лишь для выделения мы поменяем цвет его фона на светло-серый. Для этого в часть HEAD добавим определение стиля для BODY:

В данном примере страница была разделена на две части по вертикали, для чего был применен атрибут COLS с двумя значениями. Если бы требовалось разделить страницу на большее количество частей (скажем, сделать три фрейма), то достаточно добавить еще одно значение:

При этом в контейнер FRAMESET потребуется вставить еще один элемент FRAME. В тех случаях, когда надо разделить окно по горизонтали, то используется атрибут ROWS:

В этом случае окно браузера будет разделено на две части – верхнюю, шириной 100 пикселей и нижнюю, занимающую все оставшееся пространство. Возможна и комбинация этих двух атрибутов. Так, чтобы сделать 6 фреймов, расположив их в виде таблицы 2х3 – из двух строк и трех столбцов, потребуется указать следующие значения этих атрибутов:

При этом следует не забыть про то, что в контейнере следует определить все 6 фреймов при помощи соответствующего количества элементов FRAME. Но есть и еще один способ такого же, или даже более гибкого разделения окна на фреймы – при помощи вложения нескольких элементов FRAMESET один в другой. Например, тот же самый пример с таблицей 2х3 будет выглядеть так:

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

Листинг 2.11. Сложный документ с фреймами

Здесь место второго фрейма занимает определение еще одного контейнера, содержащего, в свою очередь, набор из двух фреймов. В результате окно будет разделено на верхнюю часть шириной во весь экран и высотой 80 пикселей и нижнюю, состоящую из двух частей – левой, шириной в треть окна браузера и правой, занимающей все оставшееся пространство (рис. 2.5).

Рис. 2.5. Документ из трех фреймов

Таким образом, комбинируя атрибуты COLS и ROWS, а также применяя вложение элементов FRAMESET, можно создавать сколь угодно затейливые комбинации фреймов. Остальные атрибуты этого элемента приведены в таблице 2.8.

Как видно, элемент FRAMESET поддерживает ряд атрибутов, связанных с внешним видом разделяющего бордюра. Они являются нестандартными, поскольку отсутствуют в спецификациях какой-либо версии HTML – большая часть из них когда-то была введена компанией Netscape в свою программу просмотра. Ввиду нестандартности этих атрибутов и отличий в трактовке разными программами просмотра, следует их избегать. Проблема лишь в том, что полноценной замены со стороны CSS для этих атрибутов не существует. Так что если «очень хочется», то можно ограничится одним лишь атрибутом border:

В данном случае видимой рамки между фреймами не будет. Пример с рамкой вы можете посмотреть в файле frameborder.html.

Свойства frameset

Закрывающий тег: требуется.
Совместимость: все.
Вложение: допустимо.
Уникальный: нет.

Элемент FRAME

Как мы уже видели на примерах элемента FRAMESET, элемент FRAME определяет содержимое каждого конкретного фрейма. Он всегда должен быть вложенным в контейнер FRAMESET. Каждый элемент FRAME при помощи атрибута SRC определяет файл, который должен быть загружен в соответствующий фрейм. Другой важный, хотя и необязательный атрибут – NAME – назначает фрейму имя, используя которое ссылки из одного фрейма могут ссылаться на другой фрейм. Например, если мы вернемся к фреймам, определенным в листинге 2.9, то в файл в левом фрейме может ссылаться на правый при помощи атрибута TARGET:

При щелчке по этой ссылке во фрейм, названный RightFrame при помощи атрибута NAME, будет загружен документ top.html. Этот и все прочие атрибуты элемента приведены в таблице 2.9.

Все еще не рассмотренные нами атрибуты относятся к оформлению. Впрочем, некоторые из них нам уже знакомы по элементу FRAMESET – это FRAMEBORDER и BORDERCOLOR. И если атрибут определения цвета остается нестандартным и для этого элемента, то отвечающий за рамку FRAMEBORDER «утвержден» в HTML 4.0. Что касается остальных атрибутов, то попробуем посмотреть на их действие. Для этого возьмем за основу пример с тремя фреймами (листинг 2.11) и внесем изменения в каждый из трех элементов FRAME. В первый добавим атрибут NORESIZE, а во второй и третий добавим по атрибуту FRAMEBORDER с установленным значением 0. Кроме того, к ним же добавим атрибуты SCROLLING, только в одном укажем значение No, а в другом – Yes. В итоге код примет примерно такой вид, как в листинге 2.12.

Листинг 2.12. Прокрутка, рамки и изменение размеров фреймов

Если теперь загрузить эту страницу в браузер (файл moreframes.html), то можно увидеть, что разделительная полоса между левым и правым фреймами исчезла. Это произошло благодаря тому, что для определяющих эти фреймы элементов указаны атрибуты FRAMEBORDER со значением 0. Еще одно отличие, которое можно заметить сразу – это появившаяся у правого фрейма полоса прокрутки. За ее появление ответственен атрибут SCROLLING со значением Yes.

ПРИМЕЧАНИЕ
Здесь следует отметить, что MSIE (как и Netscape 4) выведет только вертикальную полосу, а Opera – как вертикальную, так и горизонтальную, в то время как браузеры, основанные на ядре Mozilla, не будут выводить полосу прокрутки вообще.

Теперь обратимся к верхнему фрейму. Поскольку для него явно не указано атрибута FRAMEBORDER, то подразумевается, что он как бы есть, но со значением 1 (т.е. принятым по умолчанию). Поэтому между ним и нижними фреймами мы видим бордюр, подобно тому, что был в предыдущем примере. Однако из-за того, что указан атрибут NORESIZE, вы не сможете изменить его размер при помощи мышки.

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

Свойства FRAME

Закрывающий тег: только для XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент NOFRAMES

Для случая, когда браузер посетителя страницы не поддерживает фреймы, можно предусмотреть альтернативное содержание документа-контейнера фреймов. Для этого после определения набора фреймов элементом FRAMESET в документ вставляется элемент NOFRAMES, внутри которого размещают либо альтернативное содержание, либо пояснительный текст, как показано на листинге 2.13.

Листинг 2.13. Определение фреймов и альтернативный документ

Таким образом посетитель, зашедший на такую страницу браузером без поддержки фреймов (скажем, MSIE 2.0 или Lynx), увидит не пустое окно, а пояснительный текст и ссылку на вариант, сделанный без использования фреймов.

Хотя элемент NOFRAMES и имеет ряд атрибутов приведенных в таблице 2.10, вряд ли они вам понадобятся, поскольку примитивные браузеры, не распознающие фреймы, скорее всего, не воспримут и эти атрибуты.

ПРИМЕЧАНИЕ
Тут следует отметить, что уж если браузер не поддерживает фреймы, то он тем более не поддерживает большую часть общих атрибутов, поскольку они появились, преимущественно, в HTML 4.0, а фреймы появиись во времена HTML 2.0, и были "узаконены" в HTML 3.2.

Свойства noframes

Закрывающий тег: требуется.
Совместимость: все (если даже браузер не распознает не только FRAMESET и FRAME, но и NOFRAMES, он все равно покажет этот текст).
Вложение: недопустимо.
Уникальный: да.

Элемент IFRAME

Элемент IFRAME позволяет встраивать документы один в другой наподобие матрешки. Такие фреймы известны под названием встроенных.

Здесь создается плавающий фрейм, в который будет загружен файл test.html (рис. 2.6). Если файл, содержащий элемент IFRAME загрузить в браузер, не поддерживающий плавающие фреймы, то вместо фрейма будет показан текст, написанный между тегами IFRAME, подобно тому, как это происходит с обычными фреймами и элементов NOFRAMES.

Рис. 2.6. Элемент IFRAME в действии

Для элемента IFRAME применим тот же набор атрибутов, что и для FRAME, а так же несколько дополнительных, определяющих размеры окна встроенного фрейма и его положение на странице (таблица 2.11).

Свойства IFRAME

Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.

2011-05-21

« Структура документа – заголовок и тело | Ссылки в HTML »