Большинство современных броузеров могут показывать в одном окне несколько отдельных страниц. Достигается это разбиением страницы на кадры или фреймы. В каждом кадре может выводиться отдельная страница. Управляя кадрами, можно создать удобный и разнообразный интерфейс. Например, можно слева вывести узкий кадр с оглавлением страницы, справа сверху показать фирменную эмблему и кнопки для перемещения по оглавлению, а внизу все материалы страницы.
Для разбиения страницы на кадры создают главный файл, в котором описывается вся кадровая структура страницы. При просмотре страницы, соответствующей главному файлу,на экран выводятся все заданные кадры. Их размещение описано в кадровой структуре. Для задания структуры кадров используется тег <FRAMESET>.
В странице с кадровой структурой нет тега <BODY>. После тега </HEAD>, закрывающего описание "заголовка" этой страницы размещается тег <FRAMESET>. Он содержит информацию о количестве будущих кадров, их размерах и ориентации. У него могут быть только два атрибута: ROWS=, задающий количество и размер кадров, расположенных друг над другом вертикально, и COLS=, задающий число и размер кадров, расположенных друг за другом горизонтально. Рассмотрим в качестве примера тег <FRAMESET COL="20%, 80%">, указывающий на количество кадров, равное двум, и расположение окон в виде вертикальных полос. Их размер может быть указан в пикселях или процентах от размера окна броузера. В данном варианте тега выделяются два кадра: один слева шириной 20% от общего размера окна броузера, другой, правый, занимает оставшиеся 80% окна.
Тег <FRAME> определяет внешний вид кадров и их оформление. Он может иметь следующие атрибуты:
NAME= для задания имени кадра и для использования этой информации в ссылках при открытии ссылок именно в этом кадре;
MARGINWIDTH= для определения размера горизонтального отступа между содержимым кадра и его границами. Наименьшее значение равно 1. По умолчанию отступ равен 6;
MARGINHEIGHT= для определения размера поля в верхней и нижней части кадра;
SCROLLING= для управления прокруткой. Вариант значения этого тега SCROLLING=YES создает полосы прокрутки, даже если они не требуется с учетом размера окна и места, необходимого для вывода информации. Для варианта значения SCROLLING=NO полос прокрутки не будет никогда. Для варианта значения SCROLLING=AUTO вывод полос прокрутки выполняется автоматически, если это нужно для полного отображения информации. Этот вариант ответа задается по умолчанию.
NORESIZE = для устранения возможности изменения размера кадра с использованием мыши.
SRC= для задания страницы, показываемой в этом кадре. Это обязательный атрибут.
Тег <FRAME SRC="имя1"> для рассматриваемого примера задает описание кадра. В данном случае описан первый кадра. Наименование имя1 должно указать имя страницы, которая будет показана в этом кадре. При необходимости помимо имени указывается путь к файлу, содержащему эту страницу. Например, вместо "имя1" можно написать http://www.ltn.lv/~loft5/left.html или просто right.html, если этот файл находится в текущей директории рядом с главным файлом.
Тег <FRAME SRC="имя2" NAME="main"> дает описание второго кадра. В нем, помимо указания на страницу, задается имя кадра, пригодное для использования в дальнейшем. Оно будет использовано для указания, в каком кадре открывать вторую страницу. Тег </FRAMESET> закрывает тег <FRAMESET>, с которого начиналось описание структуры окна. Далее можно разместить теги <NOFRAMES> и закрывающий его тег </NOFRAMES>. Между этими тегами находится информация, которую увидит пользователь компьютера, броузер которого не поддерживает отображение фреймов или кадров. Обычно текст содержит пояснение и предложение обновить броузер. Например, текст может быть таким: "Вы смотрите на страницу, имеющую фреймовую структуру, с помощью броузера, не поддерживающего кадры. Рекомендуем установить обновленную версию броузера для просмотра этого и других подобных сайтов. Вы можете загрузить новые версии броузера по адресам:
http://www.microsoft.com/ie/ - Internet Explorer 3.0 или выше;
http://www.netscape.com - Netscape Navigator. "
Тег </HTML> согласно общим правилам закрывает главный файл.
Файлы, соответствующие выбранным страницам, представляют собой обыкновенные Web-страницы. Единственная особенность этих страниц в том, что им отводится меньше места, чем обычно. Простой пример показывает разбиение страницы на два фрейма.
Пример 6.
<HTML>
<HEAD>
<TITLE>
Создание фреймов
</TITLE>
</HEAD>
<FRAMESET COLS=”40%,*”>
<FRAME SRC=”left.htm” BORDER=10 BORDERCOLOR=”#202020”
NORESIZE SCROLLING=YES NAME=”LEFT” MARGINHEIGHT=20 MARGINWIDTH=30>
<FRAME SRC=”right.htm” NAME=”RIGHT”>
</FRAMESET>
<NOFRAME>
<BODY>
Для просмотра необходим броузер, поддерживающий фреймы
</BODY>
</NOFRAME>
</HTML>
Для более сложного размещения фреймов теги <FRAMESET> могут быть вложенными.
Для создания оглавления в одном окне и перелистываемого изображения в другом окне, необходимо правильно организовать ссылки на файлы, выводимые в окне. Для создания ссылок используются теги <A> и </A>. Ссылка может задаваться всеми известными методами: текст, графика, активное изображение. Для правильной работы ссылки необходимо задать название фрейма и обязательно при задании ссылки указать, в каком фрейме должен быть изображен тот файл, на который задана ссылка
В ссылки страницы с оглавлением добавляется атрибут TARGET="имя" для того, чтобы они открывались не в текущем кадре, а в основном кадре с выбранным именем. Возможны несколько вариантов указания имени фрейма.
TARGET=name. Этот атрибут используется в ссылке для открытия ссылки в кадре с именем name. Этот атрибут следует выбирать очень внимательно, т.к. если в ссылке будет задано несуществующее имя кадра, могут произойти непредсказуемые изменения, в частности, появление новых окон просмотра.
Кроме обыкновенных кадров существуют так называемые "волшебные кадры". Их имена начинаются с символа "_". Никакие другие кадры не могут начинаться с этого символа. К ним относится кадр "_blank". Если атрибут TARGET= ссылается на кадр с таким именем, то ссылка откроется в новом пустом окне. Кадр "_self". Ссылка, открытая в кадре с таким именем, откроется в текущем кадре, даже если до этого был указан атрибут BASE= (например, <BASE TARGET="main">), предписывающий открывать этот документ по умолчанию в кадре main. Кадр "_parent". Ссылка открывается в родительской кадровой структуре. Это очень непредсказуемый вариант открытия кадра. Лучше избегать его. Кадр "_top". Ссылка, открывающаяся в этом кадре, будет показывать соответствующую страницу в новом окне.
Существуют так называемые плавающие окна. Они выглядят как окно на странице, в котором показывается содержимое другой страницы. Создаются с помощью тега <IFRAME NAME=" content_frame " width=" x " height=" y " SRC="имя.htm "> Комментарий, который будет выводиться вместо окна в броузере, не поддерживащем плавающие окна </IFRAME>. Здесь x - ширина окна в пикселях, y - высота в пикселях, имя - имя страницы, отображаемой в окне. Этот тег применяется только в Internet Explorer 3.0 и выше.
В рассмотренном выше примере TARGET="main" (имя main в примере задано в описании второго кадра).