Фреймы как альтернативное средство навигации

Совсем недавно я писал о применении карт-изображений (image maps) в процессе создания веб-узлов и называл их одним из средств навигации по разветвленной структуре сайта. Одним, но не единственным: помимо использования возможностей карт-изображений, навигационное меню можно представить в виде простых текстовых гиперссылок или реализовать с помощью фреймов. Особенностей создания текстовых меню, как таковых, не существует, поэтому не станем на этом акцентировать наше внимание, а перейдем к описанию фреймовой структуры HTML-документов.

Справка
Фрейм (от англ. "frame" - рамка, каркас, кадр) представляет собой отдельное рабочее окно в браузере, в ряде случаев разделенное еще на несколько различных по параметрам и размеру фреймам. Чаще всего такие структуры называют просто "окнами" (или же в соответствии с "родным" названием - фреймы). Фреймовая структура позволяет разбивать основную область на сколько угодно составляющих подфреймов (подобластей), причем по необходимости определяя внутреннее поведение подфреймов. Впервые возможность отображения фреймов была реализована компанией Netscape в одноименном браузере версии 2.0. Но ничего особенного первоначальный вариант поддержки подобной структуры не предлагал своим пользователям. Но уже с выходом версии 3.0 в браузере Netscape появился ряд нововведений, расширивших диапазон параметров к основным тегам описания фреймов. "Контора" Билла Гейтса тоже не тратила время впустую, и, решив потеснить Netscape от "кормушки" на перспективном рынке веб-браузеров, выпускает летом 1996 года свой новый продукт - Microsoft Internet Explorer 3.0, который поддерживал практически все основные расширения Netscape и к тому же предполагал реализацию так называемых "плавающих" фреймов (о них речь пойдет чуть ниже). Далее история развивалась таким же образом: и та и другая компания старались перещеголять друг друга за счет расширения возможностей фреймовых структур, которые поддерживались только собственными браузерами. Сегодня ситуация не изменилась настолько, чтобы можно было быть на сто процентов уверенным в том, что веб-узел, созданный с применением оконной структуры, одинаково корректно отобразится в браузерах обеих компаний.

Где применяются фреймы
Диапазон применения фреймов не настолько широк, как, например, у карт-изображений или текстовых меню. Чаще всего прибегают к фреймовой структуре в следующих случаях:

• Создание неподвижной или прокручиваемой навигационной панели управления.
• Одновременное отображение информации в нескольких местах.
• Постоянное визуальное присутствие определенного текстового, графического или иного объекта.
• Разработка веб-интерфейса для online-игр.

Далее более подробно рассмотрим каждый из вариантов.

Панель навигации
Независимо от типа веб-ресурса (корпоративный сервер, персональная страница, общественная организация, контент-сайты), в последнее время стало весьма популярным применение фреймов для создания привлекательных и удобных навигационных панелей (меню), которые могут быть статичными, то есть не зависящими от действий посетителя, и динамическими, когда какое-либо действие со стороны пользователя - нажатие кнопкой мыши, комбинации клавиш и пр. - приводит к различным по виду и масштабу изменениям (начиная с замены внешнего вида навигационных кнопок - эффект RollOver/MouseOver и заканчивая исполнением сложных сценариев. Удобна такая реализация фреймов прежде всего тем, что она позволяет посетителю перемещаться по сайту и независимо от его месторасположения (двадцать страниц он пролистал или всего одну), постоянно иметь перед глазами панель управления с перечнем всех или основных разделов сайта.

Реализовать интерпретацию панели управления можно двумя способами: либо обозначить только основные разделы узла (например, выбрав в навигационном меню каталога ресурсов объект "Искусство", посетитель попадает на страницу, содержащую более разветвленную иерархию: "Литература", "Живопись", "Архитектура" и т.д.) - в этом случае внешний вид и компоновка узла может меняться. В качестве примера может служить сайт любительского дизайн-объединения - Независимой Группы D-ZINE. Там стартовая страница состоит из одного единственного графического изображения, использованного как карта-изображение для описания активных областей. После щелчка на одной из ссылок вы видите совсем другую структуру, а именно - фреймовую: верхний фрейм - навигация (без изменений), нижний фрейм - изменяющееся содержание. Здесь же хочу привести другой пример, который с первого взгляда может показаться кому-то абсолютно аналогичным предыдущему. Посетив сайт профессиональной студии веб-дизайна PostScriptum, вы, возможно, скажете с полной уверенностью: "Здесь то же самое: сначала карта-изображение, затем фреймы!" - и будете в корне не правы. Так как ни того, ни другого создатели сайта не использовали. То, что вы примете за image map, окажется таблицей с размещенными в ней графическими заготовками, а перейдя по любой ссылке вперед, вы увидите структуру, по всем признакам напоминающую фреймы. Однако фреймов там нет, а реализована такая навигация с помощью тех же таблиц (для этого нужно всего лишь определить значения параметров TOPMARGIN, BOTTOMMARGIN, RIGHTMARGIN и LEFTMARGIN тега <BODY> как "0").

Примечательно то, что по необходимости или если это не загромождает общую структуру сайта, можно комбинировать несколько вариантов реализации средств навигации. Например, разбив основное окно на два фрейма, вы помещаете в одном графический объект, служащий картой-изображением, по щелчку на одной из активных областей которой, содержание конкретного HTML-документа загружается во второй фрейм. А в нижней части каждой страницы контент-фрейма помещаете текстовое меню (на случай если у пользователя браузер без графической поддержки или эта опция отключена). Помимо этих средств навигации, существуют еще простые ниспадающие меню (например, на финансовом сайте Sergey Investments Magazine, раздел "Sitemap"), динамические drop-down меню (на официальном сайте Microsoft) и разнообразные меню в виде дерева каталогов и программных закладок (база данных "Деловой Хабаровск-2000"). Одновременно, возрастает сложность создания и функционирования подобных средств навигации: соответственно, используется HTML, DHTML и JavaScript.

Возвращаясь к фреймам, хочу сказать пару слов о полосе прокрутки, которая может появиться в определенных случаях. Если указать значение YES или AUTO у параметра SCROLLING тега FRAME, то в первом случае полоса прокрутки будет отображаться всегда - независимо от того, помещается ли содержимое фрейма в окне браузера или нет, а во втором - она появится по необходимости (содержимое фрейма не помещается в окне браузера).

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

Постоянное визуальное присутствие объекта
Иногда создатели того или иного узла ставят перед собой задачу размещения конкретного объекта на странице таким образом, чтобы он был хорошо виден посетителям независимо от их действий (конечно, в пределах данного сайта). То есть что бы ни делал посетитель: переходил из одного раздела в другой, заполнял гостевую книгу, копировал интересный материал, прокручивал документы и т.д., объект всегда будет им доступен в визуальном плане. В качестве такого объекта могут выступать фирменные логотипы, эмблемы, фотографии, рекламные баннеры, навигационные меню, надписи, рубрикаторы и многое другое. Что касается навигационных меню и баннеров, то возможно создание таковых при помощи DHTML и JavaScript, что позволяет веб-мастеру таким образом определить характеристики того же меню, что оно всегда будет видно пользователю: например, пользователь немного прокрутил окно вниз - меню автоматически тоже опускается чуть-чуть вниз, документ прокручивается вверх - движение меню полностью повторяет поведение страницы. То многих такое "дрейфующее" положение рекламы и меню сильно раздражает, а порой мешает рассмотреть некторые элементы на самой веб-странице. Аналогом, хотя не и динамическим являются фреймы: не важно, что и где вы делаете на странице - баннер прекрасно будет вам виден из любого раздела или рубрики сайта; чтобы вы ненароком не забыли, на узле какой фирмы вы находитесь, перед взором постоянно будет маячить их логотип; удобно отображать вверху основные разделы рубрикатора, а внизу - подразделы; анализ картины или скульптуры немыслим без соответствующего фотографического материала - чтобы последний был всегда перед глазами и текст- рядом, можно использовать фреймовую структуру.

Веб-интерфейс для online-игр
Наконец, фреймы применяются не только на контент-сайтах и коммерческих серверах. С их помощью можно создавать веб-интерфейс для самых разнообразных игр в режиме online. Например, структура интерфейса виртуальной игры, состоящего из десяти фреймов, реализована на сервере Cyber Dungeon.

Описание фреймов
К сожалению, я не могу посвятить рассказу о том, какие теги используются для построения фреймов и какие существуют особенности навигации по фреймам, целую статью - она все-таки ориентирована не на перечисление всех HTML-тегов, а на рассмотрение такого средства навигации, как фреймы, в общем аспекте. Тем не менее, опустить этот момент тоже нельзя, поэтому давайте кратенько об используемых тегах.

Если вы откроете страницу с фреймовой структурой в любом текстовом редакторе, то увидите, что основой описания служит тег-контейнер <FRAMESET>. Сразу хочу предупредить всех любителей JavaScript, CSS и подобных возможностей: в "родительском" документе, где описана ТОЛЬКО структура, а никакого наполнения нет и в помине, не допускается вставка тегов <SCRIPT>, <STYLE> и прочих. Ниже приведен пример документа, состоящего из трех фреймов:

<HTML>
<FRAMESET COLS="20%, 80%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="leftframe" SRC="menu.htm" SCROLLING=NO NORESIZE>
<FRAMESET ROWS="18%, 82%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="mainframe1" SRC="ad.htm">
<FRAME NAME="mainframe2" SRC="content.htm">
</FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы.
</NOFRAMES>
</HTML>

Давайте теперь разберемся в этом HTML-коде. Параметр COLS тега-контейнера FRAMESET показывает, что "родительский" документ поделен на два столбца - в соотношении 20 процентов к 80 (также размеры фреймов можно указывать в относительных единицах:

<FRAMESET COLS="*, 2*, 3*">

и т.д., где "звездочка" представляет собой одну часть целого.

Пока пропуская другие параметры этого тега, видим еще один тег <FRAMESET> - уже с параметром ROWS и его соответствующими значениями. Это означает, что правый вертикальный фрейм на нашем примере поделен еще на два окна. Параметр SRC определяет расположение HTML-документа, который должен будет загрузиться в установленный ему фрейм. Параметр SCROLLING имеет значения YES, NO и AUTO и определяет, соответственно, разрешена ли прокрутка документа, запрещена или производится автоматически в случае необходимости. Параметр NAME очень важен, так как присваивает каждой странице, включенной в фреймовую структуру, отдельный идентификатор, который необходим для разпознавания браузером тех документов, которые нужно загрузить в конкретном окне. Например, если у вас есть три фрейма с именами "mainframe1", "mainframe2" и "leftframe" и вы хотите из файла последнего фрейма сделать ссылку на документ, который должен будет открыться во втором фрейме, то код должен быть следующим:

<A HREF="file.htm" TARGET="mainframe2">Текст ссылки</A>

Параметр NORESIZE запрещает пользователю самому изменять размеры фреймов, что может в ряде случаев привести к сбою в компоновке страницы. Если данный параметр опущен, то по умолчанию изменение размеров окон возможно вручную. Параметры FRAMEBORDER и FRAMESPACING определяют, соответственно: наличие и толщину границы между смежными фреймами (в пикселах) и расстояние между фреймами (браузер от Netscape не поддерживает этот параметр; в пикселах). После закрывающего тега </FRAMESET> необходимо дать информацию для тех браузеров, которые не поддерживают фреймовые структуры:

<NOFRAMES>
Ваш браузер не поддерживает фреймы.
</NOFRAMES>

Также еще используются параметры MARGINWIDTH и MARGINHEIGHT (которые не указаны в данном примере) для определения пространства внутри самого фрейма. Важно помнить, что в пределах этого пространства не должно располагаться никакой информации.

Особенности навигации между фреймами
Работа с фреймовыми структурами имеет свои специфические особенности, которые следует знать всякому, кто решил использовать данное средство навигации для своего веб-узла. Взаимодействие между отдельными фреймами происходит посредством загрузки документа по соответствующей ссылке в установленное окно. Реализуется это действие с помощью параметра TARGET тега <A>. По умолчанию вызванный по гиперссылке документ будет загружаться в текущий фрейм. Но чаще всего этого нужно избежать и сделать так, чтобы страница появлялась в соседнем окне. Существуют специальные зарезервированные имена действий, по которым происходит загрузка документов на узлах с фреймовой структурой: "_blank", "_self", "_parent" и "_top".

Действие <A HREF="имя_файла1.htm" TARGET="_blank"> осуществляет загрузку документа в новое окно без имени, определяемого параметром тега NAME, поэтому этот вариант исключает изменение содержимого созданного окна.

Действие <A HREF="имя_файла2.htm" TARGET="_self"> открывает документ в текущем окне.

Действие <A HREF="имя_файла3.htm" TARGET="_parent"> производит загрузку документа в область, занимаемую "родительским" фреймом текущего фрейма.

Действие <A HREF="имя_файла4.htm" TARGET="_top"> вызывает загрузку документа в полном окне.

"Плавающие" фреймы
"Плавающие" фреймы являются стандартом, который поддерживается только браузерами Microsoft Internet Explorer. Netscape Navigator подобные фреймы просто-напросто не отображает. Суть "плавающих" фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющимися в сущности документами HTML, в другие документы HTML. Пример HTML-кода для "плавающего фрейма" приведен ниже:

<HTML>
<BODY>
<CENTER><H2>Пример использования "плавающих" фреймов</H2><CENTER>
<IFRAME SRC="frame.htm" NAME="frame1" HEIGHT=300 WIDTH=40% HSPACE=10 SCROLLING=YES ALIGN=RIGHT>
Ваш браузер не отображает плавающие фреймы.
</IFRAME>
"Плавающие" фреймы являются стандартом, который поддерживается только браузерами Microsoft Internet Explorer. Netscape Navigator подобные фреймы просто-напросто не отображает. Суть "плавающих" фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющимися в сущности документами HTML, в другие документы HTML.
</BODY>
</HTML>

Из кода видно, что тег <IFRAME>, применяемый для загрузки "плавающего" фрейма, имеет почти те же самые параметры, что и тег <FRAMESET>, за исключением HSPACE, WIDTH и HEIGHT. Два последних определяют ширину и высоту "плавающего" фрейма (возможно как процентное соотношение, так и число в пикселах), а параметр HSPACE предназначен для указания расстояния, которое будет оставлять браузер, интерпретируя документ, между "плавающим" фреймом и боковыми границами окна браузера.

Утилиты по созданию фреймов
Все-таки, что ни говорите, а человек в эпоху глобальной компьютеризации и интернетизации совсем обленился: даже такую элементарную вещь, как фрейм, ему уже стало трудно создать! В связи с чем (так же, как и в случае с картами-изображениями) придумал кучу утилит, создающих и описывающих любые по сложности фреймовые структуры. О некоторых из них я и расскажу.

FrameGang
Программа FrameGang от австралийской компании-разработчика Sausage Software, известной своим HTML-редактором HotDog и утилитой для создания карт-изображений CrossEye, представляет собой простенькое приложение. После загрузки программы вы выбираете количество столбцов и рядов в будущей фреймовой структуре и определяете уже известные вам параметры: ширину, высоту, идентификатор, открываемый документ и прочее. Далее автоматически компилируется HTML-код, который после вставки в буфер обмена помещается в нужном месте веб-страницы.

Frame-It
Работа с Frame-It от компании GME Systems Pty Ltd во многом аналогична FrameGang. Для каждого фрейма задаются параметры посредством заполнения соответствующих полей. Отличительная особенность: возможность настраивать параметры MARGINWIDTH и MARGINHEIGHT. Конечный код будет уже готов для сохранения (в отличие от FrameGang, которая создает код без основных тегов-контейнеров <HTML> и </HTML>).

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

ПЛЮСЫ:

1. Фреймы позволяют экономить на объеме пересылаемых пользователю файлов, так как после активизации ссылки изменяется только один фрейм.
2. Возможность перехода по другим ссылкам в пределах узла при неизменном доступе к панели навигации заметно облегчает веб-серфинг как таковой.
3. Возможность работы сразу с несколькими информационными массивами в пределах одного окна позволяет сэкономить время и повышает эффективность посещений.
4. Использование правил описания фреймовых структур позволяет веб-мастеру как угодно варьировать размеры полей фреймов, что дает более широкий спектр возможностей пространственного размещения объектов.

МИНУСЫ:

1. Некоторые поисковые механизмы не в состоянии индексировать документы с фреймовой структурой (что приводит к индексации одного из составляющих фреймов в качестве начального, а не "родительского" фрейма, как требуется).
2. Компоновка страниц с фреймами часто выглядит неуклюже и грубо, многие не понимают, куда нужно нажать, чтобы где-то что-то отобразилось.
3. На узлах с использованием фреймовых структур при перемещении назад-вперед (с помощью соответствующих кнопок) в адресной строке ничего не меняется - там постоянно указан начальный URL сайта.
4. Некоторые малоизвестные браузеры (а также ранние версии популярных) при попытке перейти назад к предыдущему документу, который вы просматривали, возвращались в начало узла. То же происходит, если попробовать обновить страницу с фреймовой структурой.

Заключение
Как видите, силы оказались приблизительно равны. В любом случае, если вы хотите, чтобы ваш ресурс был оформлен с использованием различных возможностей языка HTML и др., но вы опасаетесь просчитаться в отношении тех, у кого браузер не поддерживает фреймы, мой вам совет: определитесь с выбором, просчитав все "за" и "против". А потом создавайте!