2.8.1. Сфера применения фреймов
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
при необходимости организовать управление загрузкой документов в одну из областей окна просмотра браузера при работе в другой области;
для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других областей экрана.
для представления информации, которую удобно расположить в нескольких смежных областях окна, каждая из которых может просматриваться независимо.
Приведённый список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер.
2.8.2. Создание Web-страниц с фреймами
Итак, как же создать Web-страницу с фреймами? Сначала необходимо продумать разбиение экрана на области. Вторым этапом является подготовка HTML-файлов для каждой области. Они создаются по тем же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой будет демонстрироваться каждый из них.
2.8.2.1. Элемент <FRAMESET>
Фреймы определяются в структуре <FRAMESET> , которая используется для страниц, содержащих фреймы, вместо раздела <BODY> обычного документа. Web-страницы составленные из фреймов, не могут содержать раздел <BODY> в своём HTML-коде. В свою очередь, страницы с разделом <BODY> не могут использовать фреймы.
Контейнер из тегов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только теги <FRAME> и вложенные тэги <FRAMESET> .
Тэг <FRAMESET> имеет два параметра: rows и cols . Горизонтальное деление экрана задаётся при помощи атрибута rows , а вертикальное - при помощи атрибута cols . Значение атрибута могут быть выражены в пикселах или процентах. Кроме того используется симвод *, для обозначения оставшейся части экрана.
Приведём несколько примеров:
cols= 50%, 50% |
деление области просмотра по вертикали пополам (принцип программы Norton Commander); |
rows=150, 30%, * |
для верхней горизонтальной области отведенно 150 пикселов, для средней - 30% доступного пространства, а для нижней всё что остаётся; |
cols=*, 4* |
стиль для любителей головоломок, правая вертикальная область в четыре раза шире левой; эту формулу можно записать так: cols=20%, 80% |
2.8.2.2. Элемент <FRAME>
Элемент разметки <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тегов <FRAMESET> и </FRAMESET> . Этот контейнер не имеет завершающего тега. Всё определение одиночного фрейма выполняется одной строчкой HTML-кода.
Тег <FRAME> имеет шесть атрибутов: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING И NORESIZE.
На практике в теге <FRAME> редко используются одновременно все атрибуты. Наиболее важный атрибут - SRC (сокращение от слова source). Значение этого атрибута определяет URL-адрес документа, который будет загружён изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:
<FRAME src="sample.htm">
Разумеется, в качестве значения SRC может быть задан любой допустимый URL-адрес.
Атрибут NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задаётся из другого фрейма, располагающегося на той же самой странице. Например:
<FRAME src="sample.htm" name="frame_1">
Такая запись создаёт фрейм с именем "frame_1", на который может быть выполнена ссылка. Например:
<A href="other.htm" target="frame_1"> Кликните здесь для загрузки документа other.htm во фрейм с именем frame_1 </a>
Обратите внимание на атрибут TARGET , который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.
Атрибуты MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Например:
<FRAME src="sample.htm" marginwidth="5" marginheight="7">
Данный фрейм имеет поля сверху и снизу по 5 пикселей, а слева и справа по 7 пикселей. Не забудьте, что здесь идёт речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.
Для фреймов будут автоматически создаваться и отображаться полосы прокрутки, если содержимое фрейма не помещается полностью в отведённом пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется атрибут SCROLLING . Форма записи:
<FRAME src="sample.htm" scrolling="yes|no|auto">
Атрибут SCROLLING может принимать три значения: yes , no или auto . Значение auto действует также, как и в случае отсутствия атрибута. Значение yes вызывает появление полос прокрутки вне зависимости от необходимости этого, а no - запрещает их появление.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамки фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize . Этот параметр не требует никаких значений. Естественно, когда задан параметр noresize для одного из фреймов, то размер любого из смежных фреймов также не сможет быть изменён.
2.8.2.3. Элемент <NOFRAMES>
Этот элемент используется, чтобы предусмотреть ситуацию, когда браузер не поддерживает фреймы. В этом случае нужно вывести на экран предупреждающее сообщение или адресовать клиента к другой странице. Фрагмент кода может быть записан следующим образом:
<NOFRAMES> <P> Для просмотра этой страницы необходим, браузер поддерживающий фреймы </p> Вы можете просмотреть <A href="без_фреймов.htm"> упрощенную версию </a> страницы </NOFRAMES>
Разумеется, браузеры поддерживающие фреймы не станут воспроизводить этот код.
Пример страницы с фреймами приведен на рис. 8.1. Обратите внимание на логику вложения фреймовой структуры, состоящей из двух вертикальных фреймов, внутрь среднего фрейма фреймовой структуры, состоящей из трех горизонтальных фреймов.
Р
ис.
2.41. Пример страницы с фреймами