A. Гончаров. WEB-ДИЗАЙН. HTML, JavaScript и CSS. Карманный справочник2.15. Фреймы

2.15. Фреймы

<FRAMESET> <FRAME> </FRAMESET>

Фреймы — это области, которые создаются в окне броузера для одновременной демонстрации нескольких Web-страниц. При создании страниц с фреймами разрабатываются, как правило, три и более Web-страниц. Сами HTML-файлы в данном случае отличаются по типам. Документы раскладки (layout) используются для создания структуры окна, то есть описание, как оно должно быть разделено. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
Простейший шаблон документа раскладки показан ниже:
<HTML>
<HEAD>
<TITLE>Заголовок страниц</TITLE>
</HEAD>
<FRAMESET frameborder=1 framespacing=0 cols="120,*">
<FRAME name="lev" src="page001.htm">
<FRAME name="prav" src="page002.htm">
<NOFRAMES>
<P>Ваш броузер не поддерживает фреймы
</NOFRAMES>
</FRAMESET>
</HTML>
На рис. 2.30 показано окно броузера, разделенное при помощи этого шаблона на две зоны. Для отображения информации необходимы два документа содержания (файлы page001.htm и page001.htm). Заголовок окна броузера определяется содержанием элемента TITLE в документе раскладки.

Рис. 2.30. Окно броузера с фреймами

Горизонтальное деление экрана задается при помощи атрибута rows, а вертикальное — при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процентах. Кроме того, используется символ * для обозначения оставшейся части экрана. Вот несколько примеров:
cols=50%, 50% — деление области просмотра по вертикали пополам (принцип программы Windows Commander);
cols=25%, 75% — левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете: в левом фрейме обычно находится меню сайта или набор гиперссылок;
rows=120, 30%, * — для верхней горизонтальной области отведено 120 пикселов, для средней — тридцать процентов доступного пространства, а для нижней — оставшееся пространство окна;
Символ * может использоваться для разделения пространства страницы в определенных пропорциях. В ниже показаны два способа определения фреймов, когда правый фрейм в три раза шире, нежели правый:
<FRAMESET cols="25%, 75%">
<FRAMESET cols="1*, 3*">
В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunload.
Документы содержания создаются по таким же правилам, как и другие гипертекстовые документы, за одним исключением: текст из элемента TITLE этих страниц не отображается. При разработке сайта необходимо учитывать реальные размеры областей, и соответствующим образом подготавливать данные для Web-страниц. В документе раскладки секция FRAMSET заменяет секцию BODY.

Рис. 2.31. Окно броузера с книгой в электронном формате

Если для каждой главы используется отдельная Web-страница, документ раскладки может быть таким:
<HTML>
<HEAD>
<TITLE>Заголовок окна броузера</TITLE>
</HEAD>
<FRAMESET frameborder=1 framespacing=0 cols="20%,*">
<FRAME name="oglav" src="oglavlenie.htm">
<FRAME name="text" src="glava01.htm">
<NOFRAMES>
<P>Ваш броузер не поддерживает фреймы
</NOFRAMES>
</FRAMESET>
</HTML>
Этот файл должен иметь имя index.htm (index.html), если он является стартовым в своей папке или может иметь произвольное имя, если доступ к нему осуществляется с помощью гиперссылок.
Файл oglavlenie.htm (оглавление) в этом случае должен содержать набор гиперссылок с указанием имени другого фрейма (в котором размещается текст книги). Например, ссылка на главу 1 может быть такой:
<A target="text" href="glava01.htm" >
<B>Заголовок главы 1</B></A><BR>
Если глава содержит разделы, перед заголовком каждого раздела может быть поставлена метка, например:
<A name="razdel_1_1">
Тогда файл оглавления может содержать ссылки и на разделы, например:
<A target="text" href="glava01.htm# razdel_1_1" >
<B>Заголовок раздела 1.1</B></A><BR>
Web-страницы с главами книги полезно дополнить (в начале и в конце) ссылками на соседние главы. Например, для главы 2 ссылки могут быть такими:
<A href="glava01.htm"> Предыдущая глава</a>
  <A href="glava03.htm"> Следующая глава</a>
В остальном документы содержания подготавливаются как обычные Web-страницы.

Пример использования фреймов для главной страницы сайта

Фреймовую структуру удобно использовать и для организации сайта. В Интернете часто можно встретить утверждения, что фреймы мешают индексации страниц в поисковых машинах и, следовательно, снижают посещаемость сайта. Но практика показывает, что это не так. Наоборот, если деление на фреймы позволит увеличить количество Web-страниц, то посещаемость может даже повыситься (известно, что рейтинги поиска различных страниц сайта отличаются).
Выгода от использования фреймов заключается в упрощении структуры отдельных страниц и легкости создания меню сайта (по аналогии с предыдущим примером).
Часто для сайта используют деление на три зоны, как показано на рис. 2.32.

Рис. 2.32. Окно броузера с фреймами для сайта

Для этого необходимо использовать два вложенных элемента FRAMESET (см. ниже). Вначале окно разделяется по горизонтали, затем — нижний фрейм разделяется на две зоны по вертикали.
<HTML><HEAD><TITLE>Заголовок страницы</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE type=text/css>
FRAME {
border-right: #CFA050 1px groove;
border-top: #CFA050 1px groove;
border-left: #CFA050 1px groove;
border-bottom: #CFA050 1px groove }
</STYLE>
</HEAD>
<FRAMESET border=0 frameSpacing=0 rows=95,* frameBorder=NO cols=*>
<FRAME border=0 name=frame1 marginWidth=5 frameSpacing=0 marginHeight=5
src="page1.htm" frameBorder=NO noResize scrolling=NO>
<FRAMESET border=0 frameSpacing=0 rows=*
frameBorder=NO cols=160,*>
<FRAME border=0 name=frame2 marginWidth=5
frameSpacing=0 marginHeight=5 src="page2.htm" frameBorder=NO noResize scrolling=AUTO>
<FRAME border=0 name=frame3 frameSpacing=0 src="page3.htm" frameBorder=NO scrolling=AUTO>
</FRAMESET>
</FRAMESET>
</HTML>
Цвета деталей рамки вокруг фрейма задаются с помощью четырех параметров CSS (элемент STYLE):
border-right — справа;
border-top — сверху;
border-left — слева;
border-bottom — снизу.
Здесь же можно задать толщину рамки в пикселах. Для указания формы рамки можно рекомендовать параметр groove.
Если для элементов FRAME не будут указаны атрибуты frameSpacing=0, то между фреймами останутся белые полосы. Кроме того, для правильной прорисовки рамки должны быть использованы атрибуты border=0 и frameBorder=NO.
Для того чтобы точно задать расстояние от рамки фрейма до данных на странице сверху и сбоку необходимо задать значения атрибутов marginHeight и marginWidth. Данные не должны касаться рамок, но и значения этих атрибутов по умолчанию не всегда приемлемы (пустые поля получаются слишком большими), поэтому значения атрибутов надо подбирать опытным путем.
Верхний фрейм, для которого запрещено изменение размеров мышью, обычно используется для размещения заголовка сайта, рисунков или баннеров. Левый фрейм удобен для меню сайта, а информативные страницы загружаются в правый фрейм. Для того чтобы страницы появлялись в нужных фреймах, в гиперссылках необходимо указывать имена фреймов по принципу target="имя_фрейма".
Необходимо также учитывать, что пользователь увидит в заголовке окна броузера только текст из элемента TITLE документа раскладки, а все данные из элементов TITLE других страниц будут скрыты (эти данные все же полезно использовать для облегчения поиска страниц).

Создание невидимых рамок фреймов

Иногда разработчик сайта использует фреймы, но хочет, чтобы границы (рамки) между фреймами не были видны. Этого можно добиться, включив сразу три атрибута в элемент FRAMESET:
<FRAMESET border=0 frameborder=0 framespacing=0 ... >
В этом случае необходимо учитывать, что полосы прокрутки могут «повиснуть в воздухе».

Особенности ссылок для ресурсов с фреймами

При использовании сайтов с фреймами и при создании ссылок на такие сайты необходимо учитывать несколько правил. Все они касаются атрибутов в элементе гиперссылки A.
1. При создании ссылки на сайт с фреймами, в ссылке указывается документ раскладки, например:
<A href="http://www.xxx.zz/index.htm"> Полезный сайт </A>
2. При адресации страницы в пределах сайта с фреймами (как уже указывалось выше), обязательно указание имени фрейма, например:
<A href="price.htm" target="right_frame"> Прайс-лист </A>
3. При ссылке на страницу, которая должна быть открыта в том же фрейме, в котором находится страница с гиперссылкой, можно воспользоваться правилом умолчания и не указывать имя фрейма. Иными словами, ссылки внутри одного фрейма не требуют использования атрибута target.
4. При адресации страницы сайта, которая не предназначена для показа внутри какого-либо фрейма (сайт может иметь и систему фреймов и набор автономных страниц) или адресации другого сайта необходимо использование атрибута target со стандартным значением _parent, например:
<A href="photos.htm" target="_parent"> Фотографии </A>
<A href=" http://www.xxx.zz/index.htm " target="_parent"> Полезный сайт </A>
5. В необходимых случаях используется атрибут target со стандартными значениями:
_self — явное указание на то, что страница должна быть открыта в том же фрейме (аналог правила умолчания, указанного в п. 3);
_top — аналог значения _parent (значение _parent обозначает «родительское» окно, из которого выполнена гиперссылка, значение _top обозначает главное в иерархии объектов окно (окно броузера), и в большинстве случаев эти значения указывают на одно и то же окно);
_blank — указание на то, что страницу надо открыть в новом окне броузера.

<IFRAME> </IFRAME>

Этот элемент позволяет создать на странице область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы. Шаблон для использования элемента такой:
<IFRAME src="имя_файла.htm" width="n" height="m">
Ваш броузер не поддерживает фреймы. Эту страницу можно просмотреть
<A href="имя_файла.htm">отдельно.</A>
</IFRAME>
Атрибуты width и height определяют ширину и высоту фрейма соответственно. По умолчанию используется окно размером 300(150 пикселов.
Атрибут scrolling управляет полосами прокрутки и может иметь следующие значения:
auto — полосы прокрутки появляются в случае необходимости;
yes — полосы прокрутки присутствуют;
no — полосы прокрутки не используются.
По аналогии с обычными фреймами используются атрибуты frameborder, longdesc, marginwidth, marginheight, name, target (в необходимых случаях), а также другие стандартные атрибуты: align, class, id, style, title.
На рис. 2.33 показано, как выглядит этот элемент.

Рис. 2.33. Вид элемента IFRAME

Предыдущий раздел | Следующий раздел

2.15. Фреймы

<FRAMESET> <FRAME> </FRAMESET>

<FRAME>

<NOFRAMES> </NOFRAMES>

Простой пример использования фреймов

Пример использования фреймов для главной страницы сайта

Создание невидимых рамок фреймов

Особенности ссылок для ресурсов с фреймами

<IFRAME> </IFRAME>