Фреймы и фреймсодержащие документы
В этой главе:
Помимо обычных 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.
Атрибут | Примечание | Описание |
---|---|---|
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.
Атрибут | Примечание | Описание |
---|---|---|
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, вряд ли они вам понадобятся, поскольку примитивные браузеры, не распознающие фреймы, скорее всего, не воспримут и эти атрибуты.
Атрибут | Примечание | Описание |
---|---|---|
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.
Рис. 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