4. Формы и фреймы

4.2. Использование фреймов

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

Структура фреймовых HTML документов существенно отличается от привычных нам документов, рассмотренных в предыдущих главах. В фреймовых документах структурный элемент <BODY>...</BODY> заменяется набором фреймов, определяемым в контейнере <FRAMESET>...</FRAMESET>, и контейнером <NOFRAMES>...</NOFRAMES>, определяющим альтернативное содержимое документа для пользователей броузеров не поддерживающих фреймы.

Таким образом фреймовый HTML-документ имеет следующую структуру:

Структура фреймового HTML документа

<HTML>
<HEAD>
ЗАГОЛОВОК ДОКУМЕНТА
</HEAD>
<FRAMESET>
НАБОР ФРЕЙМОВ
</FRAMESET>
<NOFRAMES>
АЛЬТЕРНАТИВНОЕ СОДЕРЖАНИЕ
</NOFRAMES>

</HTML>

Как это ни странно, но начнем с конца (чтоб потом не отвлекаться на мелочи) и рассмотрим контейнер <NOFRAMES>...</NOFRAMES>. Данный контейнер содержит альтернативное содержимое документа отображаемое в окне броузеров не поддерживающих технологию фреймов. Использование данного тега было актуально несколько лет назад, когда фреймы поддерживались только последними версиями MSIE & Navigator, но из вежливости к возможным пользователям продолжайте использовать альтернативный раздел.

Контейнер <NOFRAMES>...</NOFRAMES> может содержать единственную строку с извинениями, может представлять собой полноформатный элемент тела альтернативного документа, заключенный в контейнер <BODY>...</BODY>, но более правильно разместить в нем ссылку на альтернативный документ в котором для представления данных используются стандартные средства (например таблицы).

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

ROWS - описание строк фреймовой структуры (проценты высоты окна броузера, пропорции, высота в пикселах);
COLS - описание столбцов фреймовой структуры (проценты ширины окна броузера, пропорции, ширина в пикселах);
FRAMEBORDER - описывает сетку фреймовой структуры (по умолчанию значение YES- трехмерная сетка, NO-без сетки);
BORDER - ширина сетки фреймовой структуры (по умолчанию значение 5);
BORDERCOLOR - цвет сетки фреймовой структуры;

Пример:

<FRAMESET ROWS="15%, 70%, 15%"> </FRAMESET> - создается фреймовая структура (по умолчанию с сеткой шириной 5 пикселей) из трех строк: первая строка 15% высоты окна броузера, вторая 70% и третья 15%;

<FRAMESET COLS="*, 3*" BORDER=3 BORDERCOLOR=GRAY> </FRAMESET> - создается фреймовая структура из двух столбцов: первый ¼ ширины окна броузера, второй ¾ ширины, с сеткой шириной 3 пиксела, цвет сетки - серый;

<FRAMESET ROWS="50%, 50%" COLS="50%, 50%" FRAMEBORDER=NO> </FRAMESET> - создается фреймовая структура без сетки из двух столбцов и двух строк, делящих окно броузера на 4 равные части;

Каждый элемент фреймовой структуры описывается при помощи тега <FRAME>, имеющего следующие атрибуты:

SRC - URL содержимого фрейма;
NAME - имя фрейма (аналогия имени окна броузера), для осуществления доступа к фрейму и обновления его содержимого;
MARGINHEIGHT - ширина верхнего и нижнего свободного поля фрейма в пикселях;
MARGINWIDTH - ширина левого и правого свободного поля фрейма в пикселях;
SCROLLING - полосы прокрутки содержимого фрейма (AUTO/YES/NO, по умолчанию значение - AUTO);
NORESIZE - наличием данного атрибута, пользователю запрещается изменять размеры фрейма при просмотре документа (по умолчанию это возможно при помощи мыши);
FRAMEBORDER - описывает сетку фрейма (YES/NO);
BORDERCOLOR - цвет сетки фрейма;

Пример:

<FRAMESET ROWS="15%, 70%, 15%"> <FRAME SRC="header.htm" NORESIZE SCROLLING=NO> <FRAME SRC="body.htm"> <FRAME SRC="footer.htm" NORESIZE SCROLLING=NO> </FRAMESET>

Вышеприведенная фреймовая структура делит экран на три продольных части. Верхняя часть занимает 15% высоты окна броузера ее содержимым является документ - header.htm. Средний фрейм занимает 70% высоты окна и в него выводится содержание документа - body.htm. Оставшуюся нижнюю часть окна броузера занимает фрейм, в который выводится содержание документа - footer.htm.

Верхний и нижний фреймы данной структуры не содержат полос прокрутки содержимого и имеют постоянный размер. Атрибут NORESIZE для среднего фрейма не задается, поскольку наложив запрет на изменение размеров прилегающих фреймов мы не сможем изменить размер среднего фрейма.

Возможно использование вложенных фреймовых структур, например следующий код создает фреймовую структуру содержащую вложенный фрейм.

Пример:

<FRAMESET ROWS="15%, 70%, 15%"> <FRAME SRC="header.htm" NORESIZE SCROLLING=NO>

<FRAMESET COLS="*,*"> <FRAME SRC="left.htm"> <FRAME SRC="right.htm"> </FRAMESET>


<FRAME SRC="footer.htm" NORESIZE SCROLLING=NO>

</FRAMESET>

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

Header.htm
Left.htm	Right.htm
Footer.htm

Использование фреймов в HTML документах рассмотрим на конкретном примере. Организуем окно броузера следующим образом: в верхней и нижней части разместим стационарные фреймы для заголовка и итоговой части страницы, среднюю часть окна броузера разделим на две части, левую - навигационный фрейм и правую - фрейм просмотра данных. Фрейму просмотра данных, используя атрибут NAME, зададим имя и укажем его как имя окна назначения (См. раздел 2.2.) во всех ссылках навигационного фрейма, используя атрибут TARGET.

Пример 9. Использование фреймов. [просмотр примера в окне]

Главный документ фреймовой структуры.

<HTML> <HEAD> <TITLE>Демонстрация технологии фреймов</TITLE> </HEAD> <FRAMESET ROWS="25%, 50%, 25%" BORDERCOLOR=RED> <FRAME SRC="header.htm" NORESIZE SCROLLING=NO>

<FRAMESET COLS="20%,80%"> <FRAME SRC="navig.htm"> <FRAME SRC="empty.htm" NAME=field> </FRAMESET>


<FRAME SRC="footer.htm" NORESIZE SCROLLING=NO>

</FRAMESET>

<NOFRAMES>

<H1>Обновите броузер и вы увидите фреймы</H1>

</NOFRAMES>

</HTML>

Документ - header.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <P align=center><IMG SRC="blod.gif" ALT="кровавая река"> <H1 align=center>Ужасы нашего городка</H1> </BODY> </HTML>

Документ - footer.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <P align=center><IMG SRC="blod.gif" ALT="кровавая река"> <P ALIGN=CENTER><A HREF="mailto:myname@mail.ru">Пришлите свою историю</A> </BODY> </HTML>

Навигационный фрейм - navig.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <UL> <p><LI><a href="horror1.htm" target=field>Ужас 1</a> <p><LI><a href="horror2.htm" target=field>Ужас 2</a> <p><LI><a href="horror3.htm" target=field>Ужас 3</a> </UL> </BODY> </HTML>

Фрейм область просмотра данных - empty.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> </BODY> </HTML>

Документ для просмотра - horror1.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <H2>Ужасная история №1</H2> Здесь я вам расскажу очень страшную истории, в которую я попал будучи в командировке, в городе .... </BODY> </HTML>

Документ для просмотра - horror2.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <H2>Ужасная история №2</H2> Здесь я вам расскажу очень страшную истории, в которую я попал будучи в изрядном подпитии .... </BODY> </HTML>

Документ для просмотра - horror3.htm

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR ="WHITE", TEXT="RED", LINK="BLUE", ALINK="RED", VLINK="NAVY"> <H2>Ужасная история №3</H2> Здесь я вам расскажу очень страшную истории, в которую я попал будучи в компании администраторов NT .... </BODY> </HTML>

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

Ваши вопросы и замечания прошу направлять dmitriy_v_k@hotmail.com
© 2001 Дмитрий Красюк
Дата последней модификации: Пятница Март 30, 2001.