Атрибут marginheight

Таким же образом поля можно ввести сверху и снизу документа с помощью атрибута marginheight="n". Значение в пикселях указывает величину свободного пространства между документом и нижним и верхним краем фрейма. Альтернативой использованию атрибутов marginwidth и marginheight является применение таблиц стилей для задания полей документов, которые выводятся во фрейме.

Атрибут marginwidth

Как и в случае полноразмерного окна браузера, информация выводится во всем фрейме, начиная от левого края до правого края с небольшим зазором свободного пространства, отделяющим текст от границ. Можно улучшить удобочитаемость документа, задавая поля с каждой стороны текста с помощью атрибута marginwidth="n". Значение атрибута задает число пикселей свободного пространства между документом и левой и правой границами фрейма.

Атрибут name

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

Имена фреймам присваиваются с помощью атрибута name. В следующем примере двум фреймам из frameset присваиваются имена "Frame1" и "Frame2". Позже будет показано, как загрузить в эти фреймы другие документы.

Листинг 10.6. Фреймы с именами (html, txt)

Атрибут noresize

Когда границы фреймов видимы, они являются также перемещаемыми. Когда курсор мыши перемещается на границу, то изображение курсора изменяется и пользователь может перетащить границу, чтобы изменить размер фрейма. Обычно желательно, чтобы настройка фреймов оставалась фиксированной и страницы появлялись в том виде, как это предполагалось. Поэтому, чтобы пользователи не могли изменять размеры фреймов, в теге <frame/> используется атрибут noresize, как показано ниже.

Листинг 10.7. Запрет перемещения границ (html, txt)

Задание noresize для левого фрейма имеет в результате запрет на изменение размера правого фрейма, так как они совместно используют одну границу.

Атрибут scrolling

Атрибут scrolling="auto|yes|no" позволяет создать фрейм с выводом или без вывода панелей прокрутки. По умолчанию фреймы выводят панели прокрутки, когда документ слишком большой и не помещается во фрейме.

Значением по умолчанию является scrolling="auto". Можно изменить это значение на scrolling="yes", чтобы всегда выводить горизонтальную и вертикальную полосу прокрутки, даже если документ умещается во фрейме. Можно также задать scrolling="no", чтобы отключить вывод панелей прокрутки, даже если документ слишком большой для фрейма. Как правило, надо всегда разрешать прокрутку документа, если нет убедительных причин этого не делать. Одним из случаев подавления прокрутки может быть верхний фрейм, содержащий баннер или заголовок без дополнительно содержимого.

Атрибут src

Фрейм может загружать в начале страницу Web, адрес URL которой определяют в атрибуте src="url". Задание этого атрибута гарантирует, что при первом выводе окна фрейм не будет пустым. Загружаемый предварительно во фрейм документ может быть локальным на сайте, или URL может указывать на внешний документ.

Следующий код показывает, что документ с именем Menu.htm загружается в начале в левом фрейме множества фреймов, а документ с именем Home.htm загружается в правый фрейм. Предполагается, что документы находятся в том же каталоге, что и страница frameset.

Листинг 10.5. Предварительная загрузка фреймов страницами Web (html, txt)

Атрибут target

Соединенные документы загружают во фреймы, задавая атрибут target="framename" в теге анкера <a>. Атрибут target определяет имя фрейма (заданное в теге <frame name="framename"/>), в котором открывается документ. Поэтому страница Menu.htm, которая загружается выше в левый фрейм, кодируется следующим образом, чтобы направлять соединенные страницы в именованный фрейм "Content".

Листинг 10.10. Код для направления ссылок в именованный фрейм (html, txt)

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

Документ frameset

Документ frameset описывает общую структуру окна, разделенного на фреймы. Это документ XHTML, в котором теги <frameset> заменяют теги раздела <body>. Тег <frameset> описывает число, расположение и размеры фреймов компонентов. Также внутри тега frameset находится два или более тегов <frame/> , которые идентифицируют и характеризуют фреймы и определяют исходные документы, заполняющие фреймы.

Общий формат тега

Листинг 10.1. Общий формат тега <frameset>

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Frameset Document</title> </head>

<frameset cols="20%,80%"> ... </frameset>

</html>

Листинг 10.2. Определение frameset с двумя столбцами (фреймами)

Закрыть окно

Листинг 10.3. Определение frameset с двумя строками (фреймами)

Закрыть окно

Листинг 10.4. Общий формат тега <frame/>

Закрыть окно

Листинг 10.5. Предварительная загрузка фреймов страницами Web

Закрыть окно

Листинг 10.6. Фреймы с именами

Закрыть окно

Листинг 10.7. Запрет перемещения границ

Закрыть окно

Листинг 10.8. Код вложенных фреймов

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title> Seven Wonders of the World</title> </head>

<frameset rows="20%,80%" frameborder="0" framespacing="0">

<frame src="Title.htm" scrolling="no"/>

<frameset cols="20%,80%" frameborder="0" framespacing="0"> <frame src="Menu.htm"/> <frame src="Home.htm" name="Content"/> </frameset>

</frameset>

</html>

Листинг 10.9. Код страницы множества фреймов

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Menu Page</title> <style type="text/css"> body {background-color:#F0F0F0} h2 {text-align:center} </style> </head> <body>

<h2>Menu</h2>

<div> <a href="Artemis.htm" target="Content">Artemis</a><br/> <a href="Colossus.htm" target="Content">Colossus</a><br/> <a href="Gardens.htm" target="Content">Gardens</a><br/> <a href="Halicarnassus.htm" target="Content">Halicarnassus</a><br/> <a href="Lighthouse.htm" target="Content">Lighthouse</a><br/> <a href="Pyramid.htm" target="Content">Pyramid</a><br/> <a href="Zeus.htm" target="Content">Zeus</a><br/> </div>

</body> </html>

Листинг 10.10. Код для направления ссылок в именованный фрейм

Закрыть окно

Листинг 10.11. Код страницы заголовка приложения

Закрыть окно

Листинг 10.12. Код примера страницы приложения с контентом

Закрыть окно

<a href="Page.htm" target="_top"> Open Page in Full Window</a>

Листинг 10.13. Направление страницы в полное окно браузера

Закрыть окно

<a href="Page.htm" target="_blank"> Open Page in New Window</a>

Листинг 10.14. Направление страницы в новое окно браузера

Закрыть окно

Листинг 10.15. Общая форма тега <iframe>

Закрыть окно

Листинг 10.16. Код линейного фрейма

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title> Seven Wonders of the World - Artemis Page</title>

<style type="text/css"> body {margin:0px; background-color:#F0F0F0} h1 {text-align:center} table {border:outset 1px; width:100%; height:100%} table td {border:inset 2px; vertical-align:top; padding:5px} table td#TITLE {height:40px; font-size:18pt; font-weight:bold; text-align:center} table td#MENU {width:20%} </style>

</head> <body>

<table> <tr> <td id="TITLE" colspan="2"> Seven Wonders of the World </td> </tr>

<tr> <td id="MENU"> <h3>Menu</h3>

<div> <a href="Home.htm">Home</a><br/> <a href="Artemis.htm">Artemis</a><br/> <a href="Colossus.htm">Colossus</a><br/> <a href="Gardens.htm">Gardens</a><br/> <a href="Halicarnassus.htm">Halicarnassus</a><br/> <a href="Lighthouse.htm">Lighthouse</a><br/> <a href="Pyramid.htm">Pyramid</a><br/> <a href="Zeus.htm">Zeus</a><br/> </div> </td>

<td> <img src="Artemis.gif" alt="Temple of Artemis"/><br/> The Temple of Artemis at Ephesus </td> </tr> </table>

</body> </html>

Листинг 10.17. Код структуры таблицы для эмуляции набора фреймов

Закрыть окно

<div style="width:350px; height:250px; float:left; padding:10px; margin-right:10px; background-color:black; color:white; border:ridge 5px">

<img id="Picture" src="Artemis.gif"/><br/> <span id="Text"> Temple of Artemis at Ephesus</span>

</div>

Листинг 10.18. Код раздела, содержащий теги <img/> и <span>

Закрыть окно

<a href="javascript:" onclick="Picture.src='Artemis.gif'; Picture.alt='Temple of Artemis at Ephesus'; Text.innerText='Temple of Artemis at Ephesus'">Artemis</a><br/> <a href="javascript:" onclick="Picture.src='Colossus.gif'; Picture.alt='Colossues of Rhodes'; Text.innerText='Colossus of Rhodes'">Colossus</a><br/> <a href="javascript:" onclick="Picture.src='Gardens.gif'; Picture.alt='Hanging Gardens of Babylon'; Text.innerText='Hanging Gardens of Babylon'">Gardens</a><br/> <a href="javascript:" onclick="Picture.src='Halicarnassus.gif'; Picture.alt='Mausoleum at Halicarnasus'; Text.innerText='Mausoleum at Halicarnasus'">Halicarnassus</a><br/> <a href="javascript:" onclick="Picture.src='Lighthouse.gif'; Picture.alt='Lighthouse of Alexandria'; Text.innerText='Lighthouse of Alexandria'">Lighthouse</a><br/> <a href="javascript:" onclick="Picture.src='Pyramid.gif'; Picture.alt='Great Pyramid of Giza'; Text.innerText='Great Pyramid of Giza'">Pyramid</a><br/> <a href="javascript:" onclick="Picture.src='Zeus.gif'; Picture.alt='Statue of Zeus at Olympia'; Text.innerText='Statue of Zeus at Olympia'">Zeus</a><br/>

Листинг 10.19. Код ссылок для замены изображений и текста

Закрыть окно

Использование таблицы

Использование фреймов можно симулировать с помощью таблицы, структурированной в виде множества фреймов. Рисунок 10.8 показывает такой тип страницы. Она выглядит и действует как набор фреймов; однако, это просто набор независимо выводимых страниц с одинаковой структурой, скомпонованных в виде таблицы XHTML.

Рис. 10.8. Использование таблицы для эмуляции фреймов

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<head> <title>Seven Wonders of the World - Artemis Page</title>

</head> <body>

<table> <tr> <td id="TITLE" colspan="2"> Seven Wonders of the World </td> </tr>

<div> <a href="Home.htm">Home</a><br/> <a href="Artemis.htm">Artemis</a><br/> <a href="Colossus.htm">Colossus</a><br/> <a href="Gardens.htm">Gardens</a><br/> <a href="Halicarnassus.htm">Halicarnassus</a><br/> <a href="Lighthouse.htm">Lighthouse</a><br/> <a href="Pyramid.htm">Pyramid</a><br/> <a href="Zeus.htm">Zeus</a><br/> </div> </td>

<td> <img src="Artemis.gif" alt="Temple of Artemis"/><br/> The Temple of Artemis at Ephesus </td> </tr> </table>

</body> </html>

Листинг 10.17. Код структуры таблицы для эмуляции набора фреймов (html, txt)

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

Используйте фреймы с осмотрительностью

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

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

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

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

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

Эмуляция фреймов

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

Кодирование документа

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

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<head> <title>Title Page</title> <style type="text/css"> body {background-color:#F0F0F0} h1 {text-align:center} </style> </head> <body>

<h1>Seven Wonders of the World</h1>

</body> </html>

Листинг 10.11. Код страницы заголовка приложения (html, txt) <?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<head> <title>Artemis.htm Page</title> <style type="text/css"> body {background-color:black; color:white"} </style> </head> <body>

<div> <img src="Artemis.gif" alt="Temple of Artemis at Ephesus"/><br/> The Temple of Artemis at Ephesus<br/> </div>

</body> </html>

Листинг 10.12. Код примера страницы приложения с контентом (html, txt)

Плавающие фреймы

Рис. 10.7. Плавающий фрейм

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

Линейные фреймы создают с помощью тега <iframe>, общая форма которого показана на листинге 10.15.

Листинг 10.15. Общая форма тега <iframe> (html, txt)

Атрибут src определяет страницу для начальной загрузки во фрейм. Атрибут name присваивает фрейму имя в качестве указателя для ссылок. Фрейм не обязательно соединять со ссылками. Можно просто вывести внутри фрейма один внешний документ, и в этом случае надо определить в атрибуте src фрейма без имени только URL.

По умолчанию вокруг фрейма выводятся границы. Можно отключить вывод границ с помощью атрибута frameborder="0". Если контент страницы, загружаемой во фрейм, больше фрейма, то автоматически выводятся панели прокрутки.

Можно отключить вывод панелей прокрутки с помощью атрибута scrolling="no" или постоянно выводить панели прокрутки с помощью scrolling="yes".

Остальные атрибуты - width, height, align, vspace, hspace, marginwidth, и marginheight - лучше задавать с помощью таблиц стилей. Они должны считаться исключенными атрибутами.

Отметим, что закрывающий тег </iframe> является обязательным, даже если он ничего не замыкает. На странице Web можно определить любое количество плавающих фреймов.

Следующий код используется для вывода и активации плавающего фрейма. Свойства таблицы стилей заменяют большинство атрибутов фрейма. Отметим, что в теге <iframe> атрибут src не задан. Поэтому фрейм открывается без вывода документа, оставляя фрейм пустым.

<div> <a href="Artemis.htm" target="TheFrame">Artemis</a> <a href="Colossus.htm" target="TheFrame">Colossus</a> <a href="Gardens.htm" target="TheFrame">Gardens</a> <a href="Halicarnassus.htm" target="TheFrame">Halicarnassus</a> <a href="Lighthouse.htm" target="TheFrame">Lighthouse</a> <a href="Pyramid.htm" target="TheFrame">Pyramid</a> <a href="Zeus.htm" target="TheFrame">Zeus</a> </div>

Листинг 10.16. Код линейного фрейма (html, txt)

Программирование тега <div>

Действие тега <iframe> можно симулировать с помощью использование небольшого кода JavaScript, применяемого в теге <div>. Различие в том, что тег <div> не позволяет загружать отдельные страницы Web, как <iframe>. Однако можно задать общую компоновку в разделе и использовать программирование для замены элементов страницы, содержащихся внутри раздела. Такая техника применяется в следующем примере, в котором ссылки изменяют в разделе графические изображения и текстовые строки.

Рис. 10.9. Программирование тега <div> для эмуляции <iframe>

Этот раздел содержит тег <img/> для изображений и тег <span> для сопровождающего текста. Код показан на следующем листинге.

<img id="Picture" src="Artemis.gif"/><br/> <span id="Text">Temple of Artemis at Ephesus</span>

</div>

Листинг 10.18. Код раздела, содержащий теги <img/> и <span> (html, txt)

В теге <div>задаются различные стили, чтобы сделать его похожим на <iframe>, хотя это в действительности не требуется; можно применять любое оформление для его содержимого. Раздел смещен на странице влево, так, чтобы ссылки для замены изображений и текста выводились справа. Вложенный тег <img/> сконфигурирован сначала с первым изображением; тег <span> задает начальное значение текста. Отметим, что обоим тегам <img/> и <span> присвоены значения id. Эти присваивания необходимы, так как с помощью этих id теги идентифицируются для замены изображения и текста в сценариях.

Этот раздел сопровождает множество ссылок <a>, которые запрограммированы для замены изображений и текста. Эти теги показаны на листинге 10.19.

Листинг 10.19. Код ссылок для замены изображений и текста (html, txt)

Этот код не такой сложный, как кажется. Необходимо понять только, что замена выполняется для выбранных свойств тегов <img/> и <span>. Программируемыми свойствами тега <img/> являются:

src - адрес URL выводимого изображения, и alt - альтернативный текст, выводимый при указании мышью на изображение.

Программируемым свойством тега <span> является:

innerText - текстовая строка между открывающим и закрывающим тегами.

Сценарии JavaScript, закодированные внутри ссылок, просто присваивают новые свойства src , alt и innerText этим тегам, чтобы их изменить. Взгляните, например, на одну из этих ссылок:

<a href="javascript:" onclick="Picture.src='Colossus.gif'; Picture.alt='Colossues of Rhodes'; Text.innerText='Colossus of Rhodes'">Colossus</a>

Атрибут href="javascript:", аналогично его использованию ранее для открытия страницы Web в новом окне браузера, аннулирует тег как ссылку URL и вместо этого указывает, что выполняется процедура JavaScript. Обработчик событий щелчка мыши включает вложенный сценарий (заключенный в двойные кавычки), когда происходит щелчок на ссылке. Выполняется три оператора JavaScript, закодированные здесь на трех отдельных строках для удобства чтения и разделенные точкой с запятой (;).

Первый оператор,

Picture.src='Colossus.gif'

присваивает текстовое значение 'Colossus of Rhodes' свойству alt тега с id="Picture" (снова тегу <img/>). Третий оператор,

Text.innerText='Colossus of Rhodes'

присваивает текстовую строку свойству innerText тега с id="Text" (тегу <span>). Эти три присваивания заменяют текущие значения этих свойств другими значениями, что приводит к выводу другого изображения, другого альтернативного текста и другого текста подписи, которые появляются в разделе.

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

Такая возможность программирования тегов XHTML и задания различных значений свойств после загрузки является сутью так называемого динамического HTML (DHTML). Показанное программирование является только крохотным примером множества изменений, которые можно делать на странице Web на основе взаимодействия пользователей с тегами на странице. DHTML заслуживает отдельного более полного рассмотрения и находится за рамками этой книги.

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

Создание множества фреймов

Примечание. В XHTML 1.1 создание и использование множества фреймов (frameset) не поддерживается. Консорциум WWW разрабатывает другой метод, разрешающий открывать несколько страниц внутри нескольких фреймов в основном окне браузера; однако, эти стандарты еще не завершены и не поддерживаются современными браузерами.

Этот учебник описывает использование фреймов, так как они являются популярными методами вывода страниц, которые часто можно встретить, и может возникнуть желание их использовать. Большинство современных браузеров поддерживают фреймы. Можно также сохранить объявления Определения типа документа (DTD) и пространства имен xhtml для XHTML 1.1, как часть кода страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Однако невозможно проверить такие страницы службами валидации XHTML 1.1. Тем не менее, страницы будут выводиться правильно при использовании одновременно frameset и линейных фреймов.

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

Множество фреймов работает обычно как обобщенный пример, показанный на рисунке 10.1. Щелкая на ссылках в левом фрейме, можно вывести в правом фрейме соответствующие соединенные документы.

Рис. 10.1. Использование фреймов

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

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

Тег <frame>

В то время как тег <frameset> делит окно на фреймы, эти фреймы заполняются страницами Web с помощью тегов <frame/> . Имеется по одному тегу <frame/> для каждого из фреймов, определенных во frameset.

Тег <frame/> содержит атрибуты для указания исходного содержимого фрейма вместе с внешним видом и поведением фрейма. Тег <frame/> не является контейнерным тегом, поэтому он не имеет парного замыкающего тега. Его общий формат показан ниже.

<frame src="url" name="framename" frameborder="1|n" bordercolor="color" scrolling="auto|yes|no" noresize

Исключены: marginwidth="n" marginheight="n" />

Листинг 10.4. Общий формат тега <frame/> (html, txt)

Отметим, что тег <frame/> использует те же самые атрибуты frameborder и bordercolor, что и тег <frameset>. Эти атрибуты задают в теге <frameset> для множества тегов в целом, их можно переопределить для определенных фреймов в теге <frame/>. Однако два фрейма, которые граничат друг с другом, не могут иметь конфликтующие атрибуты.

Тег <frameset>

Контейнерный тег <frameset> делит окно браузера на отдельные фреймы. Общий формат тега <frameset> показан ниже.

Листинг 10.1. Общий формат тега <frameset> (html, txt)

Атрибуты cols и rows определяют компоновку фреймов в окне браузера. cols используется для деления окна вертикально на два или более количество фреймов, а rows - для деления окна горизонтально на два или большее количество фреймов. Тег <frameset> может определять cols или rows , но не оба тега для одного и того же frameset.

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

Листинг 10.3. Определение frameset с двумя строками (фреймами)

Рис. 10.3. Вывод в браузере набора фреймов с двумя горизонтальными фреймами

Можно использовать звездочку (*) вместо задания размера, чтобы позволить браузеру определить размеры фреймов. Такая запись указывает на "все оставшееся пространство". Например, предыдущий набор фреймов можно было бы закодировать следующим видом:

<frameset rows="20%,*">

чтобы позволить браузеру вычислить вторую строку как занимающую оставшиеся 80% окна браузера.

По умолчанию множества фреймов имеют между фреймами границы. В теге <frameset> можно задавать атрибут frameborder="1|0", чтобы выводить (1) или скрывать (0) границы.

Толщину границ между фреймами можно задавать с помощью атрибута framespacing="n", где n задается в пикселях.

Если границы между фреймами видимы, то можно задать им определенный цвет с помощью атрибута bordercolor="color". Цвета определяются именами, шестнадцатеричными или RGB значениями.

Вложенные фреймы

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

Рис. 10.4. Вложенный frameset

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

</frameset>

Листинг 10.8. Код вложенных фреймов (html, txt)

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

Выход из множества фреймов

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

При создании ссылок из фреймов во внешние документы или сайты либо на локальные страницы, которые не были созданы специально для вывода во фреймах, необходимо предоставить средства для выхода из множества фреймов. Иначе соединенный документ откроется внутри множества фреймов. Эту проблему иллюстрирует метка меню на рисунке 10.4, помеченная как "Oops!". Это стандартная ссылка, не направленная во фрейм, которая по умолчанию открывается в текущем окне. Текущим окном, к сожалению, является фрейм меню.

Рис. 10.6. Неправильный выход из множества фреймов

Для выхода из множества фреймов при соединении со страницей в теге анкера используют атрибут target="_top". Такое кодирование задает во frameset фрейм "top", и это приводит к тому, что страница загружается вне фреймов в полном окне браузера.

<a href="Page.htm" target="_top">Open Page in Full Window</a>

Листинг 10.13. Направление страницы в полное окно браузера (html, txt)

Другим вариантом при соединении из фрейма является направление страницы в отдельное окно браузера. С помощью атрибута target="_blank" в качестве места назначения ссылки открывается другой экземпляр браузера, и в его основное окно загружается страница.

<a href="Page.htm" target="_blank">Open Page in New Window</a>

Листинг 10.14. Направление страницы в новое окно браузера (html, txt)

Задание фрейма в ссылке

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

Рис. 10.5. Задание фреймов в ссылках

Показанное выше приложение имеет приведенный ниже документ frameset. Этот документ Wonders.htm открывается в браузере, чтобы вывести набор фреймов.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<head> <title>Seven Wonders of the World</title> </head>

</frameset>

</html>

Листинг 10.9. Код страницы множества фреймов (html, txt)

Это составной набор фреймов с вложением. Внешний набор фреймов состоит из двух строк (rows ). Верхняя строка является фреймом, в который загружается заголовок документа (Title.htm); нижняя строка является вложенным набором фреймов. Это второе множество фреймов состоит из двух столбцов. В левый фрейм загружается документ меню (Menu.htm); в правый фрейм вначале загружается открывающая страница сайта (Home.htm). Для правого фрейма задано также имя (name="Content"), так как он является фреймом для вывода документов, соединяемых из фрейма меню.

Отметим, что множество фреймов не выводит границы, так как в тегах <frameset> задано frameborder="0" и framespacing="0" (framespacing необходимо задать равным 0, чтобы исключить незначительное свободное пространство между фреймами, даже когда границы не выводятся.) Также для верхнего фрейма задан атрибут scrolling="no", чтобы подавить выводимую по умолчанию полосу прокрутки.