Фреймы

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

  • Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов
  • Каждый фрэйм имеет собственное имя (параметр NAME), позволяющее обращаться к нему из другого фрэйма
  • Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра)

Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

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

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

<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML>

Бродя по Интернету, вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:

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

2. Создаются отдельные html-странички для каждого фрейма.

Попробуем создать html-файл, реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html-файла, например, с именами homepage.htm и menu.htm. Главный файл назовем, к примеру, index.htm, вот как он должен выглядеть:

<HTML>
<HEAD>
<TITLE>Название вашей странички</TITLE>
</HEAD>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm"NAME="frame1">
<FRAME SRC="menu.htm"NAME="frame2">
</FRAMESET>
</HTML>

Рассмотрим каждый тэг по отдельности:

<HTML></HTML>, <HEAD></HEAD> и <TITLE></TITLE> — стандартные тэги для всех html файлов


<FRAMESET> — в этом тэге задается количество рядов (ROWS) или столбцов (COLS), а также их размеры и расположение. Существует три способа задания размера:

  1. пикселы — необходимо указать высоту или ширину в пикселах.
  2. проценты — указываете сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак "%" (процент). Также позаботьтесь, чтобы все ваши проценты в сумме составляли 100%.
  3. звездочка — все оставшееся место в окне равняется значку *. Например, вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.

В нашем случае (<FRAMESET cols="*, 140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран


<FRAME> — здесь задаются атрибуты для каждого фрейма персонально.

Команда SRC задает имя файла, который будет загружен в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm"... )

Команда NAME задает имя данного фрейма, в нашем случае имя "frame1". Имя необходимо для того, чтобы в последствии можно было обратиться к этому фрейму, например загрузить в нем содержимое нового html- файла. Таким образом мы можем сделать так, чтобы нажимая на ссылку во фрейме, содержащем файл menu.htm, содержимое файла ссылки показывалось во фрейме, содержащем файл homepage.htm. Для этого нам необходимо откорректировать html- код ссылки:

<A HREF="file.htm">file</A> — что было
<A HREF="file.htm"TARGET="frame1">file</A> - что должно быть

А если вы хотите чтобы файл загрузился в главном окне браузера (т.е. на всем пространстве окна браузера), то напишите в ссылке TARGET="_top", но имейте в виду, что после этого разбиение на фреймы исчезает.

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


</FRAMESET> закрывающий тэг.


Вот несколько примеров создания фреймов:

* 140
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm"NAME="frame1">
<FRAME SRC="menu.htm"NAME="frame2">
</FRAMESET>
100 *
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAME SRC="menu.htm"NAME="Frame2">
</FRAMESET>
100
*
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAME SRC="menu.htm"NAME="Frame2">
</FRAMESET>
*
60
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAME SRC="menu.htm"NAME="Frame2">
</FRAMESET>
*
45% 55%
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm"NAME="Frame2">
<FRAME SRC="menu2.htm"NAME="Frame3">
</FRAMESET>
</FRAMESET>
*
15%
15%
70%
<FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm"NAME="Frame2">
<FRAME SRC="menu2.htm"NAME="Frame3">
<FRAME SRC="menu3.htm"NAME="Frame4">
</FRAMESET>
</FRAMESET>
50% 50%
50% 50%
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm"NAME="Frame1">
<FRAME SRC="homepage2.htm"NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm"NAME="Frame3">
<FRAME SRC="menu2.htm"NAME="Frame4">
</FRAMESET>
</FRAMESET>

Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAME описывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.


FRAMESET

<FRAMESET [COLS="value"| ROWS="value"]>

Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME> и </NOFRAME>, который позволяет строить двойные документы для браузеров, поддерживающих фрэймы или нет.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.

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

Синтаксис используемых видов описания величин подокон:

  • value Простое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные браузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна браузера вашего пользователя.

  • value% Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фрэймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально учеличиваются.

  • value* Вообще говоря, значение value в данном описании является необязательным. Символ "*"указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием "*"(например "*,*"), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз фрейм будет больше аналогично описанного с чистой звездочкой). Например, описание "3*,*, *", говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства для первого фрэйма и по 1/5 для двух других.

COLS="список-определений-горизонтальных-подокон" То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.


Внимание! Совместное использование параметров ROWS и COLS может привести к непредcказуемым результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%, 50%"> может привести к ошибочной ситуации.


Примеры:

<FRAMESET COLS="50,*,50"> — описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.

<FRAMESET ROWS="20%,3*,*"> — описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.

MARGINHEIGHT="value"

  • То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING="yes | no | auto"

  • Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр "yes" указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр "no" наоборот, что полос прокрутки не будет; "auto" определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).

NORESIZE

  • Данный атрибут позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрэйма установлен атрибут NORESIZE, то у соседних фрэймов тоже не может быть изменен размер со стороны данного.

NOFRAMES

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


А вот несколько интересных решений, которые вы можете попробовать использовать, на основе фреймов:

1). Если ваш сервер поддерживает кэширование можно создать один невидимый фрейм (толщиной в 0 пикселов) и загружать в нем разные картинки чтобы они в последствии моментально грузились в другом документе.

2). А еще можно создать фрейм соответствующий размеру картинки бэкграунда , выключить бордюр и окаймляющую рамку и тогда когда документ загрузится он будет выглядеть как обычный одно-экранный документ.

Copyright © 2002-2006 Максим Комогоров. Все права защищены.
Замечания, вопросы и предложения направляйте
по адресу: webscript@pisem.net
Поиск по сайту
О проекте
Архив
Hosted by uCoz