Для чего можно использовать фреймы?

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

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

Как работают фреймы?

На первый взгляд, фреймы – это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: тэги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и тэг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset). Содержимое же фрейма – это отдельная HTML-страница, которая может находиться где угодно – в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика, – она описывает только кадровую структуру экрана. Когда документ загружается во фрейм, можно щелкнуть мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных во фреймовой структуре.

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL-страницы с фреймами и для чего нужны основные тэги и атрибуты.

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.

Задание фреймовой структуры

Для начала необходимо представить себе общий вид страницы, – где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тэга <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тэга <ВОDY>.

Это весь код, необходимый для задания фреймовой структуры. Обратите внимание на тэг <NOFRAMES> (к нему еще вернемся). В результате получается экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием a.html. Окно справа займет 75 процентов и вначале покажет файл b.html. Пока их нет, видна страница с двумя пустыми фреймами. Прежде чем она появится, необходимо пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Правую страницу мы назвали <main> (<главная>) с помощью строки:

<FRAME SRC="b.html" NAMЕ="main"> 

Это означает, что фрейм под именем main будет содержать страницу b.html. Поскольку нет необходимости в показе в левом фрейме никаких страниц, кроме menu.html, его не нужно называть.

Подготовка содержимого фрейма

Нужно загрузить фреймы с содержимым и задать страницу menu.html в левом фрейме, где нужно щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл menu.html – это обычная НТМL-страница, построенная как оглавление. На самом деле можно взять готовую страницу с оглавлением и использовать ее. Нужно запомнить, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь необходимо определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Если нужно, чтобы они отображались в правом фрейме, то необходимо добавить атрибут ТАRGET= (TARGЕТ="main") в тэг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется во фрейме main. Если все страницы будут отражаться во фрейме main, нужно добавить атрибут ТАRGЕТ="main" во все тэги ссылок в оглавлении. Если не определить атрибут ТАRGЕТ, то страница появится там, где щелкнули мышкой, – в левом фрейме, что в данном случае не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, можно добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление длиннее, чтобы пользователи видели как можно больше ссылок. Ниже приведен код для левого фрейма menu.html.

Здесь ничего не говорится о фреймах. О них все сказано во фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся во фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Необходимо, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы.

На приведенных страницах нигде тайно не запрограммирован фрейм. Это значит, что можно без особых проблем конвертировать все документы Web-сервера для использования во фреймовой структуре.

8.2.4 Использование тега <NOFRAMES>

У многих пользователей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии основных страниц без фреймов. Если пользователь с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тэгами <NOFRAMES> и </NOFRAMES>, будет выглядеть отлично – броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать тэги <ВODY></ВОDY>. Возможно, придется иначе организовать экран без фреймов.

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

На тот случай, если нет уверенности при использовании <NOFRAMES>, ниже приведен пример страницы с фреймовой структурой с добавленным в конце разделом <NOFRAMES>.

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