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

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

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы – где расположить фреймы и какого они будут размера. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тега <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тега <ВОDY>.

<HTML><HEAD><TITLE>Пример фреймов</TITLE></HEAD><FRAMESET COLS="25%, 75%"><FRAME SRC="menu.html"><FRAME SRC="main.html" NAME="main"></FRAMESET></HTML>

Вот и весь код, необходимый для того, чтобы задать фреймовую структуру. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25% экрана и содержит страницу с названием menu.html. Окно справа займет 75% экрана и содержит файл main.html. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что браузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали "main" (<главная>) с помощью строки:

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

Подготовка содержимого фрейма

Теперь загрузим фреймы с содержимым. Зададим страницу menu.html в левом фрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. menu.html — это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть спроектирована соответствующим образом. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET (TARGЕТ="main") в тег ссылки. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все теги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, — в левом фрейме.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы. Ваша задача — спроектировать их так, чтобы они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром оглавления. Но больше эти страницы ничем не примечательны.

Использование тега <NOFRAMES>

У некоторых пользователей еще остались браузеры, не умеющие обращаться с фреймами. По этой причине разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с устаревшим браузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тегами <NOFRAMES> и </NOFRAMES>, будет выглядеть отлично — браузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать теги <ВODY> </ВОDY>. Возможно, экран без фреймов придется организовать иначе.

Пример страницы с фреймовой структурой с добавленным в конце разделом <NOFRAMES>.

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

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

Макетирование фреймов — тег <FRAMESET>

Теги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и СОLS, задающий число столбцов. Между тегами <FRAMESET> не требуется указывать тег <ВОDY>, но его можно поместить между тегами <NOFRAMES> в конце фреймовой структуры. Между тегами <FRAMESET> не должно быть никаких тегов или атрибутов, которые обычно используются между тегами <ВОDY>. Единственными тегами, которые могут находиться между тегами <FRAMESET> и </FRAMESET>, являются теги <FRAME>, <FRAMESET> и <NOFRAMES>. Это упрощает задачу. В основном все связано с тегами <FRАМЕ> и их атрибутами. Если же вы хотите поэкспериментировать, можно создать вложенные друг в друга теги <FRAMESET> аналогично тегам <ТАВLЕ>.

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

Для каждой строки и столбца, упомянутых в теге <FRAMESET>, необходим свой набор тегов <FRАМЕ>.

Атрибут ROWS

Атрибут ROWS тега <FRAMESET> задает число и размер строк на странице. Количество тегов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака "=" можно определить размер каждой строки в пикселах, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Следует пользоваться кавычками и запятыми, а также оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней — 20 пикселов, средней — 80 пикселов, нижней — 20 пикселов:

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

Можно задать относительные значения в комбинации с фиксированными, выраженными в процентах или пикселах. Например, следующий тег создает экран, на котором верхняя строка имеет высоту 20 пикселов, средняя — 80 пикселов, а нижняя занимает все оставшееся место:

Атрибут СOLS

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

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: