Используя фрэймы (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), а также их размеры и расположение. Существует три способа задания размера:
- пикселы — необходимо указать высоту или ширину в пикселах.
- проценты — указываете сколько процентов от окна браузера вы хотите отдать
фрейму и после цифр ставите знак "%" (процент). Также позаботьтесь, чтобы все
ваши проценты в сумме составляли 100%.
- звездочка — все оставшееся место в окне равняется значку *. Например, вы можете написать 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> закрывающий тэг.
Вот несколько примеров создания фреймов:
|
<FRAMESET cols="*,140"> |
|
<FRAMESET cols="100,*"> |
|
<FRAMESET rows="100,*"> |
|
<FRAMESET rows="*,60"> |
|
<FRAMESET rows="*,60"> |
|
<FRAMESET cols="*,55%"> |
|
<FRAMESET cols="50%,50%"> |
Общий контэйнер 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). А еще можно создать фрейм соответствующий размеру картинки бэкграунда , выключить бордюр и окаймляющую рамку и тогда когда документ загрузится он будет выглядеть как обычный одно-экранный документ.
