4.10. Фреймы
Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых, по сути, отдельное окно просмотра, и называются фреймами.
В HTML предусмотрено два вида фреймов: обычные и так называемые "плавающие". Если мы применяем обычные фреймы, то создается документ, который все окно просмотра разбивает на фреймы, и в них уже отображаются те или иные HTML-документы. Если же мы используем плавающий фрейм, то его можно включать в обычный HTML-документ без каких-либо особых ухищрений.
Документ с фреймовой структурой создается с помощью тэга “<frameset>” и его закрывающего двойника “</frameset>”. Внутри этих двух тэгов размещаются конструкции объявления отдельных фреймов и информация, отображаемая в окне просмотра браузера, если тот не распознает фреймы. Отдельные фреймы создаются с помощью пары тэгов “<frame>” и “</frame>”.
Функцией тэга <frameset> является разбиение окна просмотра на несколько частей. Для этого у тэга есть два основных параметра: “rows” и “cols”, которые указывают количество и размеры фреймов по вертикали и горизонтали. При этом задается прямоугольная табличная структура. Если нам необходимо сделать более детальное разбиение, например, один фрейм в левой части окна по вертикали, и два фрейма, отделенных друг от друга горизонтальной границей в правой части окна, то можно создать два тэга “<frameset>”, один внутри другого. Опишем параметры тэга “<frameset>” более детально.
Параметр “cols” предназначен для указания количества и размеров фреймов по горизонтали в окне просмотра. В качестве значения параметра используется список размеров фреймов, разделенных запятыми. Как обычно, для указания размера мы можем использовать абсолютные и кратные величины, а также процентные соотношения. По умолчанию используется значение 100%, т. е. основное окно просмотра по вертикали не разбивается.
Параметр “rows” позволяет указывать количество и размеры фреймов по вертикали в окне просмотра. Специфика задания значений полностью совпадает с параметром cols.
Рассмотрим на примере, как будет, выглядеть создание HTML-документов с фреймовой структурой.
<html>
<head>
<title>Фреймы</title>
</head>
<frameset cols=”150, *”>
<frame src=”Listing16.htm”>
<frame src=”Listuing22.htm”>
</frameset>
</html>
Листинг 1.29
Рисунок 73. Окно браузера с результатом отображения файла, приведенного в листинге 1.29.
Проанализируем внимательно приведенный код HTML-документа и то, как был отображен браузером этот документ. Прежде всего, следует обратить внимание, что в листинге отсутствуют тэги “<body>” и “</body>”. Эти тэги говорят о том, что все находящееся между ними является отображаемым кодом, а тэг “<frameset>” сигнализирует браузеру, что в данном документе приведена лишь структура разбиения окна просмотра.
В тэге “<frameset>” мы использовали единственный параметр “cols”. Значением его был список из двух обозначений размеров. Из листинга видно, что первый, т. е. левый фрейм обладает шириной в сто пятьдесят пикселов. Для второго фрейма мы установили ширину в виде кратной величины. Поскольку мы не указали, какому именно числу кратна эта ширина, фрейм занял все свободное место окна, чего мы и добивались.
Между стартовым и закрывающим тэгами “<frameset>” мы разместили два тэга “<frame>”. Эти тэги объявляют каждый фрейм отдельно и задают их свойства. В нашем случае мы использовали лишь один обязательный параметр “src”, значением которого является URL того HTML-документа, который будет отображаться в данном фрейме.
На иллюстрации видно, что окно просмотра действительно было разбито на две части, и в каждой из них отображался один из созданных нами ранее HTML-файлов. При этом пользователь может самостоятельно изменять размеры фреймов. Достаточно навести на нее курсор мыши, нажать основную кнопку, и, не отпуская ее, перенести границу в необходимое место.
Для того чтобы создать разбиение основного окна просмотра на три фрейма, два из которых расположены в одной колонке, друг под другом, а третий занимает все остальное свободное пространство, следует использовать следующий фрагмент кода:
<frameset cols="20%,*">
<frameset rows="*,*">
<frame src="filel.htm">
<frame src="file2.htm">
</frameset>
<frame src="file3.htm">
</frameset>
В этом примере видно, как один блок “<frameset>” мы встраиваем внутрь другого такого же блока. И естественно, следует использовать тэги “<frame>”.
Тэг “<frame>” предназначен для установки свойств отдельного фрейма. Поскольку ширина и высота фрейма устанавливаются в конструкции “<frameset>”, нам остается описать остальные свойства.
Параметр “name” позволяет устанавливать уникальное имя фрейма. Не следует путать его с параметром “id”. Имя, которое мы задаем с помощью параметра “name”, используется в тэгах гиперссылок, когда необходимо загрузить документ не в родительский фрейм, а в какой-либо другой.
Параметр src, как мы уже видели в предыдущем листинге, применяется для задания URL того HTML-документа, который должен быть отображен в описываемом фрейме.
Параметр “frameborder” используется для того, чтобы указать, будет ли отображаться граница данного фрейма или нет. Дело в том, что создавать видимую границу не обязательно. Значениями данного параметра могут быть нуль или единица. Единичное значение, установленное по умолчанию, обозначает, что данный фрейм будет иметь видимую границу. При использовании нулевого значения граница фрейма остается невидимой.
Параметр “marginwidth” позволяет задавать ширину полей данного фрейма в пикселах.
Параметр “marginheight” предназначен для установки размеров полей по вертикали в пикселах для данного фрейма.
Параметр “noresize” следует применять для запрета изменения размеров фрейма. Бели мы включаем его в состав тэга “<f rame>”, то пользователь не сможет изменять размеры данного фрейма, перемещая его границы. Параметр не имеет значения.
Параметр “scrolling” позволяет создателю Web-страницы управлять отображением полос прокрутки для данного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение “auto”, установленное по умолчанию, обозначает, что полосы прокрутки у фрейма будут появляться только в том случае, если содержимое данного фрейма не будет полностью помещаться в отображаемой области. Значение “yes” указывает браузеру, что для данного фрейма необходимо постоянно отображать полосы прокрутки, вне зависимости от того, насколько велика его отображаемая область и какая часть содержимого фрейма в ней помещается. Значение “no” заставляет браузер отображать фрейм вообще без полос прокрутки.
Кроме того, мы можем указать фрейм, в который загрузка HTML-документа будет происходить по умолчанию. Как мы знаем, тэг гиперссылки “<а>” обладает параметром “target”, в качестве значения которого записывается имя фрейма. В этом фрейме и будет отображаться содержимое HTML-документа, на который указывает гиперссылка.
Есть и другой вид фреймов, которые можно просто вставлять в обычный HTML-документ как стандартный объект. Больше всего это похоже на вставку графического изображения. Для вставки подобного встроенного фрейма используется тэг “<iframe>”. В отличие от процедуры вставки графики и иных объектов, для встроенных фреймов необходимо применять и закрывающий тэг “</iframe>”. Приведем пример включения встроенного фрейма в обычный HTML-документ и посмотрим, как выглядит этот документ, при просмотре его в браузере.
<html>
<head>
<title>Фреймы</tit1е>
</head>
<body>
<p>Текст со встроенным <iframe src="Listing26.htm">
</iframe>фреймом</p>
</body>
</html>
Листинг 1.30
Рисунок 74. Окно браузера с результатом отображения файла, приведенного в листинге 1.30.
Как видно из листинга 1.30 и рисунка 74, процедура использования встроенных фреймов проста. В листинге мы как всегда использовали простейший вариант по умолчанию, а ведь фрейм, пусть даже и встроенный, должен иметь достаточно обширный список свойств отображения, которые регулируются с помощью параметров. Их мы сейчас и рассмотрим.
Параметр “name” позволяет задавать имя встроенного фрейма. Значением параметра является обычная текстовая строка. После этого на данный фрейм можно указывать в гиперссылках. Таким образом, мы получаем возможность динамического изменения содержимого встроенного фрейма.
Параметр “src” предназначен для установки содержимого встроенного фрейма. Значением параметра является URL того HTML-документа, который будет загружен в этот встроенный фрейм.
Параметр “frameborder” наравне со многими другими параметрами явно унаследован из обычных фреймов. Точно так же, как и там, он указывает браузеру, следует или нет отображать границу у фрейма. В качестве значений используются нуль и единица. Единичное значение, установленное по умолчанию, обозначает, что границу встроенного фрейма необходимо отображать. Нулевое значение делает границу невидимой.
Параметры “marginwidh” и “marginheight” задают ширину и высоту полей встроенного фрейма соответственно. Значением параметров являются числа, выражающие размеры в пикселах.
Параметр “scrolling” регулирует отображение полос прокрутки встроенного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение “auto”, установленное по умолчанию, означает, что полосы прокрутки будут появляться только в том случае, когда размеры содержимого фрейма больше, чем сам фрейм. Значение “yes” принудительно отображает полосы прокрутки в любом случае, а значение “no” запрещает браузеру отображать эти полосы прокрутки для данного фрейма вообще.
Параметр “align” позволяет нам устанавливать выравнивание встроенного фрейма по вертикали или горизонтали относительно остального содержимого Web-страницы. Возможные значения точно такие же, как у одноименного параметра тэга “<img>”, поэтому не стоит их еще раз повторять. Результат действия этих значений тоже был нами рассмотрен ранее.
Параметр “height” предназначен для явной установки размеров встроенного фрейма по вертикали. Размер может быть задан в пикселах или в процентах.
Параметр “width” позволяет задавать ширину встраиваемого фрейма. Значение его задается так же, как у предыдущего параметра.