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

При создании фреймов весь процесс можно разделить на два этапа. На первом этапе создается страница содержания (content page) – это обычная страница HTML, с которыми вы работали при изучении всего предыдущего материала. На втором этапе – страница настройки фреймов, или страница наборов фреймов (frameset page), которая предназначена разделять окно браузера на набор фреймов, определять размер каждого фрейма, а также определяет, какие именно страницы содержания отображаются в этих фреймах. Таким образом, страница настройки фреймов – это своеобразная пустая оболочка, которая делит экран браузера на два или несколько фреймов, так что вам остается наполнить эти ячейки отдельными страницами содержания.

В случае применения фреймов HTML-документ несколько отличается от обычного. При использовании фреймов раздел BODY меняется на раздел FRAMESET, который использует парный тег < FRAMESET > < /FRAMESET >.

Структурный HTML-документ (тот, который определяет структуру фреймов) не может содержать никаких тегов форматирования или любых HTML-документов. Тег < FRAMESET > содержит атрибуты, указанные в табл. 4.1.

Таблица 4.1

Атрибуты тега < FRAMESET>

Тег < FRAMESET > может содержать два основных атрибута ROWSи COLS. Эти атрибуты определяют количество горизонтальных и вертикальных фреймов. Их можно задавать различными способами: в пикселях, процентах, относительных длинах. Причем число значений соответствует количеству фреймов. Если атрибут ROWSв теге < FRAMESET > не указан, то каждый столбец будет занимать всю длину страницы; если не указан COLS, каждая строка растянется на всю видимую ширину экрана.

Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз – для вертикальных.

< FRAMESET ROWS=" 30%, 70%" >

разбивает весь экран браузера на два горизонтальных фрейма, один из которых (верхний) занимает 30 % рабочей области браузера, второй (нижний) – 70 % (общая сумма всегда должна составлять 100 %).

< FRAMESET COLS=" 50%, 50%" >

разделит страницу вертикально на две равные части.

Формат записи в относительных единицах выглядит следующим образом:

< FRAMESET COLS=" *, 2*, 3*" >

Символ «*» является одной частью целого числа и осуществляет пропорциональное разделение окна браузера на указанное количество фреймов (в нашем случае это три вертикальных фрейма). Чтобы подсчитать, какую часть окна занимает каждый фрейм, нужно сложить все цифры, стоящие перед звездочкой и поставить получившуюся сумму в качестве знаменателя от целого числа. Таким образом, 1 + 2 + 3 = 6, т. е. первый фрейм занимает 1/6 окна, второй – 2/6 (1/3) окна и третий – 3/6 (1/2) окна браузера.

Язык разметки HTML позволяет для атрибутов ROWSи COLSзадавать смешанные значения.

< FRAMESET ROWS =" 250, 10%, *" >

задает горизонтальное разделение страницы на три части: 1-я – с фиксированной высотой 250 пикселов, 2-я – высотой 10 % от оставшегося пространства, 3-я – займет все пространство, которое останется свободным после создания первых двух окон.

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

В теге < FRAMESET > можно одновременно указывать атрибутыROWSи COLS. При этом каждый горизонтальный фрейм браузер разобьет на заданное вами число вертикальных фреймов.

< FRAMESET ROWS =" 40%, 60%" COLS=" 50%, 50%" >

разбивает окно браузера на фреймы, верхние и нижние из которых имеют одинаковую высоту.

Пользователь при желании может сам изменить размеры фреймов. Делается это простым перетаскиванием мышью границы между фреймами, если в теге < FRAMESET > отсутствует специальный атрибут для фиксации размеров фрейма.

Тег < FRAME > описывает свойства отдельного тега, входящего в состав фреймовой структуры. Количеству фреймов должно соответствовать такое же количество тегов < FRAME >, которые включаются внутрь тега фреймовой структуры < FRAMESET >. < FRAME > не требует закрывающего тега и может содержать атрибуты, представленные в табл. 4.2.

Если содержимое фрейма не помещается в отведенную ему область окна браузера, то по умолчанию появляется полоса прокрутки вдоль границы фрейма. Управлять полосой прокрутки можно с помощью атрибута SCROLLING, которыйопределяет наличие (yes), отсутствие (no) или отображение по мере необходимости (auto устанавливается автоматически) полос прокрутки в текущем фрейме.

Таблица 4.2

Атрибуты тега < FRAME >

Пример 1. Структура фреймов одной высоты и разной ширины в HTML (рис. 4.1):

< HTML>

< HEAD> < TITLE> создание простых фреймов

< /TITLE>

< /HEAD> < FRAMESET ROWS =" 40%, 60%" COLS =" 50%, 50%"

BORDER=" 5" >

< FRAME> < FRAME> < FRAME> < FRAME> < /FRAMESET>

< /HTML>

Приведенная запись разбивает окно браузера на четыре пустые рамки-фреймы, которые отделены друг от друга границей шириной в 5 пикселов. Цвет рамки по умолчанию светло-серый.

Рис. 4.1. Отображение фреймовой структуры примера 1

Полученные пустые рамки фреймов заполняем содержанием. Для этого используется атрибут SRC, который укажет адрес web-страницы. Воспользуемся текстом предыдущего примера, куда добавим адреса страниц в соответствующие фреймы и просмотрим изменения (рис. 4.2).

< HTML>

< HEAD> < TITLE> создание простых фреймов

< /TITLE>

< /HEAD> < FRAMESET ROWS =" 40%, 60%" COLS =" 50%, 50%"

BORDER=" 5" >

< FRAME SRC=" page1.htm" > < FRAME SRC=" page2.htm" >

< FRAME SRC=" page3.htm" > < FRAME SRC=" page4.htm" >

< /FRAMESET>

< /HTML>

Рис. 4.2. Отображение фреймовой структуры

с включенным содержанием фреймов

Атрибуты MARGINWIDTHиWARGINHEIGH предназначены для определения горизонтальных и вертикальных отступов внутри фрейма. Значения указываются в пикселах и являются равнозначными для обеих сторон.

< FRAME MARGINWIDTH=" 5" WARGINHEIGH=" 3" >

В данном случае горизонтальный отступ будет равен 5 пикселам, а вертикальный – 3.

Остались нерассмотренными еще атрибутыNAMEиTARGET, но к ним мы вернемся чуть позднее, когда будем рассматривать взаимодействие фреймов.