Фреймы
Как мы знаем, в одном окне просмотра браузера мы не можем одновременно загрузить два HTML-документа. Таким образом, если у нас на всех страницах есть одинаковое меню навигации, то абсолютно одинаковый фрагмент кода пользователь будет загружать каждый раз, когда будет переходить с одной Web-страницы сайта на другую. Даже если само меню невелико, это не самый удобный вариант, так как те каналы связи, которые есть у российских пользователей, не слишком велики, и загрузка меню может занять как минимум несколько секунд. Можем ли мы сделать так, чтобы неизменяемые элементы сайта всегда оставались в окне просмотра пользователя без перезагрузки? Можем.
Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых является, по сути, отдельным окном просмотра, и называются фреймами.
Таким образом, мы можем оставить левое и/или верхнее меню навигации постоянно находиться " окне просмотра, а перезагружать только ту часть сайта, которая необходима.
Как любое окно просмотра, фреймы могут обладать полосами прокрутки, которые позволяют пользователю увидеть все содержимое фрейма, если оно не умещается полностью в видимой зоне. Именно эта особенность фреймов и вызывает постоянные споры между Web-мастерами. Кто-то утверждает, что подобные элементы управления не должны находиться во внутреннем пространстве основного окна просмотра, так как они занимают бесценное пространство и рассеивают внимание пользователя. Кто-то утверждает, что эти недостатки– не слишком большая цена за облегчение перезагрузки Web-страниц в условиях медленных каналов связи. Так или иначе, вопрос о возможности применения фреймов каждый должен решать самостоятельно.
В HTML предусмотрено два вида фреймов: обычные, и, так называемые, "плавающие". Если мы применяем обычные фреймы, то создается документ, который все окно просмотра разбивает на фреймы, и в них уже отображаются те или иные HTML-документы. Если же мы используем плавающий фрейм, то его можно включать в обычный HTML-документ без каких-либо особых ухищрений. Разницу между двумя этими типами фреймов мы увидим на примере.
Документ с фреймовой структурой создается при помощи тега <frameset> и его закрывающего близнеца </frameset>. Внутри этих двух тегов размещаются конструкции объявления отдельных фреймов и информация, отображаемая в окне просмотра браузера, если тот не распознает фреймы. Отдельные фреймы создаются при помощи пары тегов <frame> и </frame>. А информация, отображаемая, когда браузер не поддерживает фреймы, закладывается в HTML-документ при помощи тега <nof rames>. Но все по порядку.
Основой тега <frameset> является разбиение окна просмотра на несколько частей. Для этого у тега есть два основных параметра: rows и cols, которые указывают количество и размеры фреймов по вертикали и горизонтали. При этом задается прямоугольная табличная структура. Если нам необходимо сделать более детальное разбиение, например, один фрейм в левой части окна по вертикали и два фрейма, отделенных друг от друга горизонтальной границей в правой части окна, то можно создать два тега <frameset>, один внутри другого. Но все-таки, рассмотрим параметры тега <frameset> более детально.
- Параметр cols предназначен для указания количества и размеров фреймов по горизонтали в окне просмотра. В качестве значения параметра используется список размеров фреймов, разделенных запятыми. Как обычно, для указания размера мы можем использовать абсолютные и кратные величины, а также процентные соотношения. По умолчанию используется значение100%, т. е. основное окно просмотра по вертикали не разбивается.
- Параметр rows позволяет указывать количество и размеры фреймов по вертикали в окне просмотра, Специфика задания значений ложностью совпадает с параметром cols.
Но рассмотрим на примере, как будет выглядеть создание HTML-документов с фреймовой структурой. Предположим, что нам необходимо один фрейм слева выделить под навигационное меню, а оставшееся пространство использовать для отображения информации с основных страниц Web-сайта. В этом случае, мы разделим окно просмотра на две части. Для меню мы выделим фрейм шириной в сто пятьдесят пикселов, а оставшееся пространство должен занять второй фрейм. Подобная структура Web-страницы реализуется при помощи кода, приведенного в листинге 1.31.
Листинг 1.31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ''http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Фреймы</title></head> <frameset cols="150,*"> <frame src="l-27.htm"> <frame src="l-30.htm"> <nofremes> <p>К сожалению, ваш браузер не поддерживает фреймы. Воспользуйтесь более свежей версией ПО</p> </noframes></frameset> </html>Рассмотрим внимательно приведенный код HTML-документа и то, как был отображен браузером этот документ. Прежде всего, следует обратить внимание, что в листинге отсутствуют теги <body> и </body>. Эти теги говорят о том, что все находящееся между ними является отображаемым кодом, а тег <frameset> сигнализирует браузеру что в данном документе приведена лишь структура разбивка окна просмотра.
В теге <franieset> мы использовали единственный параметр cols. Значением его был список из двух обозначений размеров. Из листинга видно, что первый, т. е. левый фрейм обладает шириной в сто пятьдесят пикселов. Для второго фрейма мы установили ширину в виде кратной величины. То, так как мы не указали, какому именно числу будет кратна эта ширина, фрейм занял все свободное место, чего мы и добивались.