Фреймы

Фрейм (от английского слова Frame) - рамка, часть целого, окно.

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

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

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

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

Встроенный фрейм создается с помощью парного тега iframe.

Путь к загружаемой странице определяется с помощью атрибута src. Ширина фрейма (width) задана в относительных единицах (70% от ширины окна). Высота фрейма (height) определена в абсолютных единицах (300 пикселей).

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

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

Рассмотрим синтаксис описания страницы, которая содержит фреймы. Такая страница не содержит контейнер body.

Вместо него используется другой контейнер:

При описании размеров фреймов используются абсолютные единицы измерения (пиксели), проценты и относительные единицы. Если сделать запись:

то будет создано три вертикальных фрейма (три столбца, cols). При этом ширина крайнего левого столбца составит 150 пикселей, ширина среднего столбца составит 10% от оставшегося пространства, а третий столбец займет свободную справа площадь.

Аналогично формируются горизонтально расположенные фреймы:

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

Рассмотрим, как создать страницу с четырьмя фреймами. Очевидно, что конструкция должна содержать две строки и два столбца. Это задается следующим кодом:

Высота верхней полосы будет равна 80 пикселям, нижняя полоса займет оставшееся пространство. Ширина левого столбца составит 150 пикселей, правый столбец займет свободную площадь. Четыре фрейма будут образованы на пересечении рассмотренных строк и столбцов.

Далее нужно дать имена фреймам (например, frame name="l"), указать, какой документ должен загружаться в данный фрейм (например, src="logo.html"), определить величину отступа в ячейке по ширине (например, marginwidth-'11"), величину отступа по высоте (например, margin-height="22"), разрешить (yes) или запретить (по) скроллинг (scrolling), разрешить (1) или запретить (0) показ границ фреймов (frameborder). Если дополнительно в код включить атрибут noresize, то можно запретить пользователю изменять размеры фреймов с помощью мыши (технология Drag and Drop). Пример фрагмента кода, который реализует перечисленные действия, приведен ниже:

Завершается описание фреймов закрывающим тегом:

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

<аhref-'../freim_s.htm" target="_top">

то есть стандартный тег гиперссылок следует дополнить атрибутом tar-get="_top".

На следующем рисунке показаны некоторые разновидности фреймов, состоящих из двух областей (1 и 2), трех (3, 4 и 5) и четырех областей (6).

Опишем коды, которые позволяют создать подобные виды фреймов.

Для формирования двух вертикально расположенных фреймов (1) основные теги должны быть такими.

Ширина левого столбца будет составлять 10% от ширины окна. При этом туда будет загружен рисунок 1. JPG.

Правый столбец будет отображать рисунок 2.JPG.

Очевидно, что в указанные области можно поместить не только рисунки, но и, например, Web-CTpaHH4bi.

Если окно нужно разбить на две горизонтальные прямоугольные области (2), то основные теги будут выглядеть так.

Заметим, что высота верхнего фрейма будет равна 100 пикселям.

Рассмотрим код, предназначенный для формирования трех фреймов вида (3).

Приведем фрагмент программы, используемый для формирования трех фреймов вида (4).

Рассмотрим еще один способ размещения трех фреймов (5).

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

Краткие итоги

Фреймы позволяют создавать удобные системы навигации по сайту. Однако многие специалисты Web-дизайна рекомендуют воздерживаться от широкого использования фреймов.