5. Применение css к фреймам

Мы рассмотрели задание характеристик фреймов с помощью атрибутов тегов <frameset> и <frame>. На практике этого вполне доста­точно для формирования раскладок фреймов с нужными свойствами. Вместе с тем можно применять и некоторые параметры CSS. Однако следует иметь в виду, что результат зависит от браузера. Рассмотрим лишь некоторые стилевые параметры.

Стилевые параметры border (граница) и padding (отступ) применительно к фрей­мам воспринимают браузеры Internet Explorer, Safari и Chrome, но не Firefox и Opera.

Параметр border, как известно, определяет характеристики границы HTML-элемента. Применительно к элементу <frame> он аналогичен атрибутам marginheight и marginwidth и не имеет отношения к рамкам между фреймами, которые в данной главе часто назывались границами. При этом в border можно указать не только размеры, но также цвет и тип (например, solid, dashed и т. п.).

Параметр padding устанавливает отступы от внутреннего края границы, заданной стилевым параметром border. Если задан цвет фона фрейма с помощью стилевого параметра background, то отступы имеют этот цвет, но только в браузерах Safari и Chrome. Internet Explorer игнорирует параметр background, a Firefox реагирует на него, если он задан для <frameset>. При этом указанный цвет получают только те фреймы, загруженные документы в которых не имеют цвета фона.

В листинге 2 приведен код установки фреймов, в котором параметры третье­го фрейма заданы посредством CSS, а на рис. показан результат его работы в Internet Explorer.

Л истинг 2.

П опытка установить размеры фрейма с помощью стилевых параметров width и height приведет к успеху только в Internet Explorer (рис. слева).

6. Пример макета фреймовой страницы

Рассмотрим в качестве примера создание макета трехфреймовой страницы. Речь идет о макете, а не самой странице, поскольку мы опустим множество деталей, чтобы лучше понять суть. В частности, мы не будем заботиться о внешне привле­кательном дизайне, а ограничимся лишь иллюстрацией.

Итак, раскладка будет состоять из трех фреймов: верхнего для заголовка сайта и двух нижних, из которых в левом располагается навигационная панель, а в пра­вом - информационное содержимое. Содержимое всех фреймов располагается в отдельных (Х)НТМL-документах.

Документ для верхнего фрейма может содержать строку текста заголовка и графическое изображение логотипа фирмы или чего-нибудь другого для украше­ния. Картинку можно вставить посредством тега <img>. Можно также подготовить заголовок сайта (текст и рисунки) в виде единого графического изображения, что­бы заполнить им фон документа с помощью стилевого параметра background (background-image: url("файл") ).

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

В листингах 3, 4 и 5 приве­дено содержимое соответственно ус­тановочного файла (это может быть index.html), файла для верхнего фрей­ма с заголовком сайта (toppane.htm) и файла для левого фрейма с навигаци­онной панелью (navpane.htm). Резуль­тат загрузки в браузер установочного файла показан на рис. ниже.

Р амки между фреймами не ото­бражаются (атрибут border="0").

Для верхнего и левого фреймов явно запрещено изменение размеров пу­тем перемещения границ мышью (атрибут noresize="noresize"); при этом правый фрейм также окажется защищенным от изменений размеров таким способом.

Для верхнего и левого фреймов запрещена прокрутка (атрибут scrolling="no").

Для всех фреймов указан атрибут name, но в нашем случае он необ­ходим только для правого фрейма, чтобы использовать значение right данного ат­рибута в ссылках, расположенных в навигационной панели.

В (Х)НТМL-документах, загружаемых в верхний и левый фреймы (toppane.htm и navpane.htm), установлен одинаковый цвет фона, чтобы выделить по­стоянную часть страницы от правого фрейма, содержимое которого может изме­няться. Разумеется, ваше дизайнерское решение может быть и иным.

Листинг 3. Раскладка фреймов (установочный файл index.html)

Листинг 4. Файл с заголовком файла для верхнего фрейма (toppane.htm)

Листинг 5. Файл с навигационной панелью для левого фрейма (navpane.htm)

В заключение следует отметить, что фреймы не войдут в специфи­кацию HTML 5. Очевидно, структуру фреймовой страницы нетрудно воспроизвести с помощью плавающих фреймов (элементов <iframe>), поддерживаемых и в HTML 5.