|   |
Фреймы представляют собой независимые области окна броузера. Использование фреймовых структур в HTML-документах, позволяет (в некоторых случаях) существенно упростить просмотр материала и навигацию в Web, за счет удобной организации окна броузера и отделения областей просмотра данных от областей управления документами.
Структура фреймовых HTML документов существенно отличается от привычных нам документов, рассмотренных в предыдущих главах. В фреймовых документах структурный элемент <BODY>...</BODY> заменяется набором фреймов, определяемым в контейнере <FRAMESET>...</FRAMESET>, и контейнером <NOFRAMES>...</NOFRAMES>, определяющим альтернативное содержимое документа для пользователей броузеров не поддерживающих фреймы.
Таким образом фреймовый HTML-документ имеет следующую структуру:
<HEAD>
ЗАГОЛОВОК ДОКУМЕНТА
</HEAD>
<FRAMESET>
НАБОР ФРЕЙМОВ
</FRAMESET>
<NOFRAMES>
АЛЬТЕРНАТИВНОЕ СОДЕРЖАНИЕ
</NOFRAMES>
</HTML>
Как это ни странно, но начнем с конца (чтоб потом не отвлекаться на мелочи) и рассмотрим контейнер <NOFRAMES>...</NOFRAMES>. Данный контейнер содержит альтернативное содержимое документа отображаемое в окне броузеров не поддерживающих технологию фреймов. Использование данного тега было актуально несколько лет назад, когда фреймы поддерживались только последними версиями MSIE & Navigator, но из вежливости к возможным пользователям продолжайте использовать альтернативный раздел.
Контейнер <NOFRAMES>...</NOFRAMES> может содержать единственную строку с извинениями, может представлять собой полноформатный элемент тела альтернативного документа, заключенный в контейнер <BODY>...</BODY>, но более правильно разместить в нем ссылку на альтернативный документ в котором для представления данных используются стандартные средства (например таблицы).
Теперь рассмотрим контейнер <FRAMESET>...</FRAMESET> который определяет фреймовую структуру документа и содержит элементы фреймы, задаваемые тегом <FRAME>. Тег <FRAMESET>...</FRAMESET> имеет следующие атрибуты:
Пример:
<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>, имеющего следующие атрибуты:
Пример:
<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="footer.htm" NORESIZE SCROLLING=NO>
<FRAME SRC="left.htm">
<FRAME SRC="right.htm">
</FRAMESET>
</FRAMESET>
Данный пример является развитием вышеприведенной фреймовой структуры. Область окна броузера (70% высоты), отведенная под средний фрейм, содержит вложенную структуру фреймов разделяющих родительский фрейм на два равных столбца. Для наглядности приведем пример таблицы иллюстрирующей данную структуру фреймов:
Header.htm | |
---|---|
Left.htm | Right.htm |
Footer.htm |
Использование фреймов в HTML документах рассмотрим на конкретном примере. Организуем
окно броузера следующим образом: в верхней и нижней части разместим стационарные фреймы для
заголовка и итоговой части страницы, среднюю часть окна броузера разделим на две части,
левую - навигационный фрейм и правую - фрейм просмотра данных. Фрейму просмотра данных,
используя атрибут NAME, зададим имя и укажем его как имя окна назначения
Пример 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="footer.htm" NORESIZE SCROLLING=NO>
<FRAME SRC="navig.htm">
<FRAME SRC="empty.htm" NAME=field>
</FRAMESET>
</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.