Создание фреймов.

Фреймы - это окна независимого просмотра 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>

 

Задать вопрос.

 

 ТЕСТ   Практическое задание

Hosted by uCoz