SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

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

В этой главе:

  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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"> <html> <head> <title>Документ с фреймами</title> </head> <frameset cols="50%,*"> <frame src="left.html" name="LeftFrame" /> <frame src="right.html" name="RightFrame" /> </frameset> </html>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>Документ для левого фрейма</title> </head> <body> <h2>Документ левого фрейма - left.html</h2> </body> </html>

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

<style type="text/css"> body {background-color: silver} </style>

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

<frameset cols="40%,35%,25%">

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

<frameset rows="100,*">

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

<frameset rows="50%,50%" cols="33%,33%,34%"> ...1,2,3 фреймы 1-й строки, затем 1,2 и 3-й фреймы 2-й строки </frameset>

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

<frameset rows="50%,50%"> <frameset cols="33%,33%,34%"> ...фреймы первой строки </frameset> <frameset cols="33%,33%,34%"> ...фреймы второй строки </frameset> </frameset>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"> <html> <head> <title>Три фрейма</title> </head> <frameset rows="80,*"> <frame src="top.html" /> <frameset cols="33%,*"> <frame src="left.html" /> <frame src="right.html" /> </frameset> </frameset> </html>

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

Документ из трех фреймов

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

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

Таблица 2.8 Атрибуты элемента FRAMESET
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
title, styleОбщиеОпределяет заголовок и стиль элемента
rows-Задает расположение фреймов по вертикали
cols-Задает расположение фреймов по горизонтали
onload-Определяет действие, которое должно быть выполнено после загрузки документов во все фреймы
onunload-Определяет действие, которое должно быть выполнено в момент покидания страницы
borderНестандартный, поддерживается всеми браузерамиУказывает толщину рамки (в пикселях) между фреймами
bordercolorНестандартный, поддерживается всеми кроме OperaУказывает цвет рамки между фреймами
frameborderНестандартный, поддерживается всеми браузерамиУказывает, плоская или объемная должна быть рамка (MSIE, Opera, Netscape 4.x), или должна она быть или нет (Mozilla, Netscape 6-7)
framespacingНестандартный, поддерживается всеми, кроме MozillaАналогичен атрибуту border, значение 0 подразумевает отсутствие бордюра

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

<frameset rows="100,200,300" border="0">

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

Свойства frameset

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

Элемент FRAME

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

<a href="top.html" target="RightFrame">Ссылка на правый фрейм</a>

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

Таблица 2.9 Атрибуты элемента FRAME
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
title, styleОбщиеОпределяет заголовок и стиль элемента
srcОбязательный атрибутЗадает имя документа, который должен быть загружен во фрейм
name-Задает имя фрейма
longdescНе актуален для графических браузеровСсылается на документ, описывающий содержимое фрейма
scrolling-Определяет можно или нет создавать полосу прокрутки, может принимать 3 значения: Auto (принято по умолчанию), Yes и No
noresize-Если этот атрибут определен, то пользователь не сможет изменять размеры фрейма
marginwidth-Определяет ширину отступа слева и справа в пикселях между границей фрейма и собственно его содержимым
marginheight-Определяет ширину отступа сверху и снизу в пикселях между границей фрейма и собственно его содержимым
frameborder-Указывает, выводить или нет рамку между данным и соседними фреймами, может иметь значение 1 (принято по умолчанию) или 0
bordercolorНестандартный, поддерживается всеми кроме OperaУказывает цвет рамки по границе данного фрейма

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"> <html> <head> <title>Три фрейма</title> </head> <frameset rows="80,*"> <frame src="top.html" noresize /> <frameset cols="33%,*"> <frame src="left.html" frameborder="0" scrolling="No" /> <frame src="right.html" frameborder="0" scrolling="Yes" /> </frameset> </frameset> </html>

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

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

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

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

Свойства FRAME

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

Элемент NOFRAMES

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

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

<html> <head> <title>Если ваш браузер слишком старый...</title> <frameset cols="1*,4*"> <frame src="contents.html" /> <frame src="doc1.html" /> </frameset> <noframes> Для просмотра данного сайта рекомендуется использовать браузер с поддержкой фреймов. Если это невозможно, перейдите на <a href="frame-free.html">бесфреймовый</a> вариант сайта. </noframes> </html>

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

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

Таблица 2.10 Атрибуты элемента NOFRAMES
АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
lang, dirОбщиеИнформация о языке и направление текста
title, styleОбщиеОпределяет заголовок и стиль элемента
alignУстаревший, только для DIVОпределяет выравнивание содержимого блока.
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup ОбщиеОпределяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя

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

Свойства noframes

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

Элемент IFRAME

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

<iframe src="test.html"> Текст, который покажет браузер, не поддерживающий элемент IFRAME. </iframe>

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

Элемент IFRAME

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

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

АтрибутПримечаниеОписание
id, classОбщиеИдентификаторы элемента
title, styleОбщиеОпределяет заголовок и стиль элемента
srcОбязательный атрибутЗадает имя документа, который должен быть загружен во фрейм
name-Задает имя фрейма
width-Задает ширину фрейма в пикселях
height-Задает высоту фрейма в пикселях
longdescНе актуален для графических браузеровСсылается на документ, описывающий содержимое фрейма
scrolling-Определяет можно или нет создавать полосу прокрутки, может принимать 3 значения: Auto (принято по умолчанию), Yes и No
alignУстаревшийОпределяет горизонтальное выравнивание фрейма относительно окружающего его текста
marginwidth-Определяет ширину отступа слева и справа в пикселях между границей фрейма и собственно его содержимым
marginheight-Определяет ширину отступа сверху и снизу в пикселях между границей фрейма и собственно его содержимым
frameborder-Указывает, выводить или нет рамку между данным и соседними фреймами, может иметь значение 1 (принято по умолчанию) или 0
Свойства IFRAME

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

2011-05-21

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru