Создание
фреймов.
Фреймы - это окна независимого просмотра HTML-документов (например
этот сайт с левым меню).
Иногда бывает очень удобно организовать
навигацию по странице в виде меню,
оформленного в отдельном фрейме, и основного окна, где будет представлена вся
основная информация, определяемая действиями пользователя в области
меню.
Рассмотрим следующий пример основного HTML-файла:
<HTML> -
<FRAMESET cols="30%,70%"
border=0>
<FRAME src="menu.htm"
name="Menu">
<FRAME src="main.htm"
name="Main">
</FRAMESET> </HTML>
Здесь присутствует объявление двух фреймов, которые будут
располагаться вертикальными полосами и занимать соответственно 30 и 70
процентов рабочей области. Вертикальное расположение устанавливается параметром
cols="...",
а для горизонтальных полос используют параметр rows="...". Параметр border="..." определяет границу
между фреймами. Определение документа, изначально загружаемого при открытии
этого файла, задается атрибутом тега <FRAME> src="...", при этом необходимо
указать параметр name="...". Сам же документ является обыкновенной HTML-страницей.
Пример простой HTML-страницы, использующей фреймы, иллюстрирует исходный
код приведенный ниже.
Пример
15: Страница с
двумя горизонтальными фреймами.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="30%,70%">
<FRAME name="1" src="1.html">
<FRAME name="2" src="2.html">
</FRAMESET>
</HTML>
Как видно из листинга, сама страница не содержит какого-либо текста,
который присутствует в обычной Web-странице. В данном документе находятся только ссылки
на другие HTML-
, которые
будут загружены браузером при открытии страницы с фреймами.
Файл 1.html имеет следующую структуру:
<HTML><HEAD>
<TITLE></TITLE> </HEAD>
<BODY>
<Н1>Первый Frame.</Н1>
</BODY>
</HTML>
Файл 2.html также имеет указанную выше структуру. Следует сказать, что оба этих
файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Контейнеры <FRAMESET> и <BODY> являются
взаимоисключающими. Это
означает, что если в документе присутствуют оба указанных тега, то браузер игнорирует контейнер <FRAMESET> и отображает информацию,
заключенную в контейнер <BODY>.
Для
оформления вертикальных фреймов следует использовать параметр cols="..." тега <FRAMESET>
Пример
16: Страница
с двумя вертикальными фреймами.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET
cols="30%,70%">
<FRAME
name="1" src="1.html">
<FRAME name="2" src="2.html">
</FRAMESET>
</HTML>
Распространенное явление - комбинация
вертикальных и горизонтальных фреймов. Предположим, необходимо создать
вертикальную и горизонтальную панели навигации, а также основной фрейм, в который будет
загружаться требуемая страница. Для этого необходимо разбить страницу на три
фрейма следующим образом: допускается вложенность контейнеров <FRAMESET> друг в друга, при этом внутренний
контейнер воспринимается внешним контейнером как обычный фрейм. Другими
словами, вместо тега <FRAME> можно использовать
контейнер <FRAMESET> для
разбиения одного фрейма на
несколько фреймов.
Пример 17:
Комбинирование фреймов.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET cols="30%,70%">
<FRAME name="l" src="1.html">
<FRAMESET
rows="50%,50%"> <FRAMESET cols="50%,50%"> <FRAME name="2" src="2.html">
<FRAME name="3" src="3.html">
</FRAMESET>
<FRAME name="4" src="4.html">
</FRAMESET> </FRAMESET>
</HTML>
Как и при форматировании таблиц, при создании фреймов существует
возможность изменения внешнего вида фреймов. Для этого используются следующие
атрибуты форматирования:
§ bordercolor - задает цвет рамки, которая разделяет отдельные фреймы;
§ frameborder - указывает браузеру, отображать ли рамку у фреймов или нет;
§ border - определяет толщину всех фреймов данного набора.
Пример 18:
Форматирование фреймов.
<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<FRAMESET
rows="30%,40%,30%" bordercolor="#AB9570" frameborder="yes"
border="2">
<FRAME
name="l" src="1.html">
<FRAMESET cols="50%,50%" bordercolor="#AB9570"
Јrameborder="yes"
border="2"> <FRAME naroe="2" src="2.html"> <FRAME name="3" src="3.html"> </FRAMESET>
<FRAME name="4" src="4.html">
</FRAMESET> <NOFRAMES>
<BODY>
Ваш браузер не
поддерживает фреймы.
</BODY> </NOFRAMES>
</HTML>