Фреймы

Что такое фрейм?

Вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами.
Фреймовая технология в HTML позволяет просматривать в одном окне обозревателя сразу несколько гипертекстовых документов. Один фрейм отображает только один гипертекстовый документ.
Вводя тeг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате пользователи, просматривающие страницы, могут изучать одну часть страницы независимо от другой т.е меню может оставаться неизменной, а в другом окне может менятся информация взависимости от того, какую выберет пользователь в меню.
Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана.

Для чего можно использовать фреймы?

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

Как работают фреймы

Для того чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные теги и атрибуты, как работают фреймы, создадим простую Web-страницу с фреймами.

Создание простой страницы с фреймами

Итак начнём:

Создадим пару простых страничек и сохраним их с расширением HTML.

Cтраница первая: Оглавление c заголовками статей.(меню) Пример:1.1
Смотреть здесь.

Страница вторая: Страница с самими статьями(информация) Пример:1.2
Смотреть здесь.

Теперь построим страницу с двумя фреймами

. Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. К примеру, зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.
Ниже приводится код простой фреймовой структуры с использованием тeга <FRAMESET>.
Ещё один немаловажный момент это то что страница с фреймовой структурой не содержит тега <ВОDY>.

Синтаксис:

<HTML>
<HEAD>
<TITLE>Пример фреймов<TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="WEB-сайт\меню.html">
<FRAME SRC="WEB-сайт\информация.html" NAME="cadr">
</FRAMESET>
<NOFRAMES>
Вы видите эту страницу броузером не поддерживающим фреймы. </NOFRAMES>
</HTML>

Пример:1.3 Посмотреть здесь.
Вот и весь код, необходимый для задания фреймовой структуры.

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

Теперь мы рассмотрим подробнее как лучше всего проектировать страницы с фреймовой структурой при помощи атрибутов и их значений.

наверх

FRAMESET

Тeги <FRAMESET...> , описывают компоновку фреймов. Здесь размещается информация о количестве фреймов, их размерах и расположении (горизонтальной(ROWS) или вертикальной(COLS).
У тeга <FRAMESET> только два возможных атрибута:
ROWS="значение", задающий число строк и размер в процентах(%)или в пикселях от окна в котором они создаются.
СОLS="значение", задающий число столбцов и размер в процентах(%)или в пикселях от окна в котором они создаются.

Пример:
<Frameset rows=25%,75%> или <Frameset cols=25%,75%>

Между тeгами <FRAMESET> не требуется указания тeга <BОDY>, но его можно поместить в конце фреймовой структуры.
Между тeгами не должно быть никаких тегов или атрибутов, которые обычно используются между тeгами <ВОDY>.
Единственными тeгами, которые могут находиться между тeгами <FRAMESET> , являются тeги <FRAME> которые соответствуют количеству заданных значений в теге Frameset.

наверх

Атрибуты ROWS и СОLS

Атрибуты ROWS и СОLS похожи, только атрибут ROWS задаёт горизонтальное расположение фреймов(кадров),а атрибут COLS вертикальное расположение фреймов(кадров).
Но имейте в виду, что для каждой строки и столбца, упомянутых в тeге , должен быть свой набор тeгов <FRAME>.

ROWS

Атрибут ROWS тeга <FRAMESET> задает число и размер строк на странице.

После атрибута ROWS="значение"> можно определить размер каждой строки в пикселях или в процентах от высоты экрана, или в относительных величинах (обычно это указание занять оставшуюся часть места cоответствует знаку *).
Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов.

Количество тeгов <FRAME>определяет число строк оно должно соответствовать значениям заданом в теге <FRAMESET>.

наверх

SRC

Атрибут SRC="URL"> задаёт адрес страницы которая будет загруженна в данный фрейм.
Атрибут SRС применяется в теге<FRАМЕ> при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре.
Если вы зададите атрибутSRС не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые во фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу.
Если вы не укажете начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными.
Например, следующая запись формирует экран, состоящий из трех строк: высота верхней равна 20 пикселей, средней - 60 пикселей, нижней - 40 пикселей:

Cинтаксис:

<FRAMESET ROWS="20, 60, 40">
<FRAME SRC="URL">(верхняя строка 20)
<FRAME SRC="URL"> (средняя строка 60)
<FRAME SRC="URL">(нижняя строка 40)
<FRAMESET>
<NOFRAMES>
Вы видите эту страницу броузером не поддерживающим фреймы.
<NOFRAMES>
Cмотреть Здесь.

Следующий тег <FRAMESET> создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%.

Cинтаксис:

<FRAMESET ROWS="10%,60%,30%">
<FRAME SRC="URL">(верхняя строка 10%)
<FRAME SRC="URL">(средняя строка 60%)
<FRAME SRC="URL">(нижняя строка 30%)
<FRAMESET>
<NOFRAMES>
Вы видите эту страницу броузером не поддерживающим фреймы.
<NOFRAMES>

Пример:1.5 Cмотреть здесь.

А можно сделать так:

Синтаксис:

<FRAMESET ROWS="20,2*,*">
<FRAME SRC="URL">(верхняя строка 20)
<FRAME SRC="URL">(средняя строка 2*)
<FRAME SRC="URL">(нижняя строка *)
</FRAMESET>
<NOFRAMES>
Вы видите эту страницу броузером не поддерживающим фреймы.
</NOFRAMES>

Пример:Смотреть здесь.

Число перед знаком * показывает, что соответствующая строка (в данном случае - средняя) занимает в два раза больше оставшегося на экране места, чем нижняя.
Не забывайте, что значения относительны (они зависят от размера экрана). Это часто бывает удобно, ведь вы не всегда знаете, какой у вашего пользователя монитор и какое разрешение он использует.

наверх

COLS

Атрибут COLS тeга <FRAMESET> задает число и размер столбцов на странице.

С помощью атрибута COLS="значение"> можно определить размер каждого столбца в пикселях или в процентах от ширины экрана, или в относительных величинах (обычно это указание занять оставшуюся часть места cоответствует знаку *).
Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов.

Количество тeгов <FRAME>определяет число столбцов оно должно соответствовать значениям заданом в теге<FRAMESET>.

Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

наверх

Frame

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

NАМЕ=""-этот параметр задает имя фрейму, которое помогает организовать взаимодействие между фреймами
MARGINWIDTH=""-задает ширину поля в пикселях слева и справа.
MARGINHEIGHT=""-задает ширину поля (отступа от края, не рамки!) сверху и снизу фрейма в пикселях.
SCROLLING=""-разрешает или запрещает браузеру создавать во фрейме полосы прокрутки. Может принимать значения:
YES - вызывает появление полос прокрутки независимо от необходимости.
NO - запрещает создание полос прокрутки в любом случае.
AUTO - абсолютно бесполезное значение, т. к. браузер в этом случае действует так же, как и при полном отсутствии параметра SCROLLING.
NORESIZE-предотвращает возможность изменения пользователем размера фреймов. Не требует никаких значений. Естественно, при употреблении этого параметра в одном из фреймов, размеры смежных фреймов изменить будет также невозможно.
SRC=""-URL-адрес документа, который мы хотим загрузить в этот фрейм.

Теперь рассмотрим более подробно атрибуты тега FRAME

NAME="frame_name"

Данный параметр описывает имя фрейма.
Если вы хотите, чтобы при щелчке мышью на ссылке соответствующая страница отображалась в определенном фрейме, необходимо указать этот фрейм, чтобы страница "знала", что куда загружать. В предыдущих примерах мы назвали большой правый фрейм Пример 1.1html, и именно в нем появлялись страницы, выбранные из оглавления в левом фрейме. Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку:

<FRАМЕ SRC="my.html"NАМЕ="Пример 1.2html">

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

MARGINWIDTH="value"

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

MARGINHEIGHT="value"

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

SCROLLING="yes | no | auto"

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

наверх

NORESIZE

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

наверх

ТАRGЕТ

Чтобы разобраться с атрибутом ТАRGЕТ, необходимо вернуться к простому примеру с кадром Пример1.3.html. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления.
Целевые фреймы задаются в ссылках левого фрейма. Вот зачем всем кадрам во фреймовой структуре были присвоены имена.
Правый фрейм называется Cadr, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="Cadr", в результате чего соответствующая страница появится во фрейме Cadr.
Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="Cadr", который по щелчку мыши отображает страницу во фрейме Cadr.
Cadr специально выделен красным чтобы было понятней что это не(URL)адрес Web-страницы,а имя фрейма.

Атрибут ТАRGЕТ можно задавать для нескольких различных тегов. При использовании в теге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем не предусмотрено другое. Можно задать атрибут ТАRGЕТ в теге <АRЕА> в активном изображении или в теге <FОRМ>.
Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает, и появляется страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным способом навигации.

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней — еще одну структуру. Необходимо помнить, что тег <FRАМЕ> не имеет закрывающего тега. Вы, наверное, заметили, что при работе с фреймами не используются теги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой — из трех фреймов.

наверх
« Далее рассмотрим использование графики в HTML »