Фреймы позволяют разбивать окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фрэймами пи необходимости можно организовать взаимодействие заключающиеся в том, что выбор ссылки в одном из фреймов может привести к загрузке документа в другой фрейм. При создании страниц с фреймами разрабатываются несколько HTML-файлов. Документы разкладки (layout), используются для создания структуры Web-страниц, то есть разделения их на несколько областей. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
Сфера применения фреймов.
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания подобластей экрана.
для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
Приведённый список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер.
Создание Web-страниц с фреймами.
Итак, как же создать Web-страницу с фреймами? Сначала необходимо продумать разбиение экрана на области. Вторым этапом является подготовка HTML-файлов для каждой области. Они создаются по тем же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой будет демонстрироваться каждый из них.
Тэг <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% |
Тэг <FRAME> .
Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тэгов <FRAMESET> и </FRAMESET> . Этот тэг не является контейнером и в отличии от <FRAMESET> не имеет завершающего тэга. Всё определение одиночного фрейма выполняется одной строчкой HTML-кода.
Тэг <FRAME> имеет шесть параметров: src , name , marginwidth , marginheight , scrolling и noresize .
На практике в тэге <FRAME> редко используются одновременно все параметры. Наиболее важный праметр - scr (сокращение от слова source). Довольно часто задается единственный параметр src. Например:
<FRAME src="url">
Значение параметра src определяет URL-адрес документа, который будет загружён изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:
<FRAME src="sample.htm">
Конечно, в качестве значения scr может быть задан любой допустимый 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 действует также, как и в случае отсутствия параметра scrolling . Значение yes вызывает появление полос прокрутки вне зависимости от необходимости этого, а no - запрещает их появление.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамки фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize . Этот параметр не требует никаких значений. Естественно, когда задан параметр noresize для одного из фреймов, то размер любого из смежных фреймов также не сможет быть изменён.
Тэг <NOFRAMES> .
Этот элемент используется, чтобы предусмотреть ситуацию, когда браузер не поддерживает фреймы. В этом случае нужно вывести на экран предупреждающее сообщение или адресовать клиента к другой странице. Фрагмент кода может быть записан следующим образом:
<NOFRAMES>
<P> Для просмотра этой страницы необходим, браузер
поддерживающий фреймы </p>
Вы можете просмотреть
<A href="без_фреймов.htm"> упрощенную версию </a> страницы
</NOFRAMES>
Разумеется, браузеры поддерживающие фреймы не станут воспроизводить этот код.
Создадим станицу разбитую на две области по горизонтали. Верхняя часть будет занимать 15% экрана, нижняя чать все остальное пространство. В верхнюю область загрузим эту страницу , а внижнюю фрагмент моего сайта CattynPlus - всё про кошек.
Вот код этой страницы:
<FRAMESET rows="15%, 85%" border="0">
<FRAME src="h9.2.htm" scrolling="no">
<FRAME src="http://webhtm.narod.ru/">
</FRAMESET>
Образец работы этого кода здесь.