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% высоты), отведенная под средний фрейм, содержит вложенную структуру фреймов разделяющих родительский фрейм на два равных столбца. Для наглядности приведем пример таблицы иллюстрирующей данную структуру фреймов:

Использование фреймов в 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=centerIMG 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=centerIMG SRC="blod.gif" ALT="кровавая река"
P ALIGN=CENTERA 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
pLIa href="horror1.htm" target=fieldУжас 1/a
pLIa href="horror2.htm" target=fieldУжас 2/a
pLIa 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-сайты.