15. Фреймы. Сферы применения фреймов.

Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера. Возможность работы с фреймами впервые была реализована в браузере Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.

Сферы применения фреймов

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

• Создание неподвижной или прокручиваемой навигационной панели управления.

• Одновременное отображение информации в нескольких местах.

• Постоянное визуальное присутствие определенного текстового, графического или иного объекта.

• Разработка веб-интерфейса для online-игр.

Разработчикам HTML-документов предоставляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы (frames). В ряде русскоязычных описаний языка HTML вместо термина фреймы используется термин кадры. Частота использования обоих терминов примерно одинакова. Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях: при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти; для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана; для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо. Приведенный список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер. Рассмотрим сначала типичные варианты использования фреймов на примерах реально существующих HTML-документов, а затем обратимся к правилам разработки документов, содержащих фреймы. На этой странице окно браузера разбивается на три фрейма. Нижняя часть окна занимает 20% высоты всего окна и содержит постоянную информацию, которая в данном случае представляет собой графическое меню, позволяющее в любой момент обратиться к наиболее важным разделам. Этот фрейм не может изменять своих размеров по командам пользователя и не имеет полос прокрутки. Верхняя часть окна (составляющая 80% высоты) разделена по горизонтали на два фрейма.

Левый фрейм содержит оглавление документов, которые могут быть просмотрены пользователем. Правый фрейм, занимающий большую часть окна просмотра, предназначен для отображения самих документов. При первоначальной загрузке эти два фрейма делят окно браузера по горизонтали в соотношении 15% на 85%. Это соотношение может изменяться пользователем при просмотре, что позволяет выбрать оптимальные размеры фреймов с учетом содержимого загруженных документов. Каждый из этих фреймов имеет свою полосу прокрутки, обеспечивающую возможность просмотра всего содержимого фрейма вне зависимости от размера самого фрейма, всего окна браузера и используемых шрифтов. При выборе любой ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и содержимое выбранного документа. Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:

<FRAMESET ROWS="80%,20%"> <FRAMESET COLS="15%, 85%"> <FRAME SRC="LIST.htm"> <FRAME scrolling=auto SRC="empty.htm" name="pages"> </FRAMESET> <FRAME SRC = "toolbar.html" scrolling=noresize> </FRAMESET>

Данный пример показывает наиболее типичное использование фреймовых структур, когда один фрейм служит оглавлением документов, а другой используется для загрузки их содержимого. Решение такой задачи без применения фреймов обычно выполняется следующим образом. На одной из страниц располагают оглавление, состоящее из ссылок на другие документы или их отдельные фрагменты. При переходе по такой ссылке оглавление исчезает, а на его место загружается нужный документ, после прочтения которого обычно необходимо вновь вернуться к оглавлению. При использовании фреймов такой возврат становится ненужным, так как оглавление постоянно располагается на части экрана. Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:

<FRAMESET COLS="100,*" frameborder="0" framespacing="0" border="0"> <FRAME NAME="Menu window" SRC="menu.htm" noresize> <FRAME NAME=content SRC="sql.idc" noresize> </FRAMESET>

Фреймы очень похожи на таблицы - и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа.  Кроме того, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Каждый фрейм по существу является отдельным «мини-браузером». В отличие от фреймов, вся структура которых всегда представлена на экране, таблицы могут полностью не помещаться в окне и быть просмотрены только по частям. Отсюда следует вывод, что если в HTML-таблицах общее число ячеек практически не ограничено и может достигать нескольких сотен, то число фреймов в документе обычно не превосходит нескольких единиц. Если требуется только отформатировать документ, то для этого достаточно ограничиться применением таблиц. Если же необходимо решить более сложные задачи, например, организовать взаимодействие между подобластями окна или создать подобласти, постоянно расположенные на экране, то здесь удобно применить   фреймы. В конечном итоге, выбор структуры документа - табличной или фреймовой - зависит от многих факторов и не может быть однозначно предопределен.  Адрес сервера http://www.tucows.com. Заметим, что имя сервера определила аббревиатура, полученная от сокращения полного названия сборника - The Ultimate Collection of Winsock Software. Поскольку сокращение tucows оказалось созвучным словосочетанию two cows (две коровы), то на страницах сервера сплошь и рядом встречается изображение коров, а рейтинг программных продуктов оценивается в количестве мычаний («Моо») и графически изображается в виде ряда из соответствующего числа коров. Большинство страниц сервера построено однотипно - в левой части окна приводится список доступных разделов, а в правой части - перечень программных продуктов выбранного раздела. На первый взгляд структура документа должна иметь примерно такой же вид, как и в предьщущих примерах. Однако в этом документе фреймы не используются! Данная страница построена при помощи таблицы, которая состоит всего лишь из одной строки с двумя ячейками. Таблица не имеет обрамления и лишь преследует цель форматирования страницы.

Впечатление разделения экрана на две части по вертикали создано путем использования фонового графического изображения, содержащего вертикальную линию, а вовсе не сеткой таблицы. В этом можно убедиться, если выполнять просмотр страницы без загрузки изображений. Использование таблицы здесь, видимо, обусловлено соображениями большей доступности документов, поскольку фреймы позволяют отображать не все браузеры. Недостатком такого подхода в данном случае является необходимость повторения в каждом документе всего списка разделов (левая часть страницы), что незначительно увеличивает размер файлов. Сравнение приведенных примеров показывает, что использование таблиц и фреймов может иногда быть взаимозаменяемым и определяется пожеланиями разработчиков. Заметим, что часто при взгляде на страницу с отображенным на ней документом невозможно определить, как она построена. Конечному пользователю знание внутренней структуры документа не требуется, однако при разработке собственных Web-страниц ознакомление с исходным кодом существующих документов было бы крайне полезно. В первом примере фреймовая структура документа сразу же видна -наличие двух вертикальных полос прокрутки уже определяет присутствие отдельных фреймов. Последующие два примера внешне очень схожи, причем при взгляде невозможно определить, что первый из них построен с помощью фреймов, а второй - с помощью таблиц. при прокрутке документа левая часть окна будет оставаться на месте, что возможно только при наличии фреймовой структуры. Посмотреть структуру документа при работе с браузером Netscape можно воспользовавшись пунктом Page Info (в версиях 3.x браузера Netscape этот пункт меню назывался Document Info) меню View  

Кроме того, всегда можно ознакомиться с исходным HTML-кодом всего документа, воспользовавшись пунктом Page Source меню View (или пунктом View Frame Source контекстного меню, вызываемого мыши, для просмотра HTML-кода документа, загруженного правой кнопкой в выбранный фрейм). АТС АдреСНО-ТелефоННЫЙ СпраВОЧНИК has the following structure:

http://www.allpetersburg.ru/ Frame: http://www.allpetersburg.ru/menu.htm Background Image: http://www.allpetersburg.ru/IMAGES/textures/veHowl.JPG Image: http://www.allpetersburg.nl/images/info.ipg Image: http://www.allpetersburg.ru/IMAGES/help2.JPG Image: http://www.allpetersburg.ru/IMAGES/cool.JPG Image:http://www.allpetersburg.ru/IMAGES/list.JPG Image: http://www.allpetersburg.ru/IMAGES/toplO.JPG Image: http://www.allpetersburg.ru/IMAGES/NEVA/nevasms.gif Frame: http://www.allpetersburg.ru/sql.idc Form 1:  Action URL:

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

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