Фреймы. Разделение окна веб-браузера на несколько областей

Фреймы позволяют разбить окно веб-браузера на несколько прямоугольных областей, в каждую из которых можно загрузить отдельный HTML-документ.

Разделение окна веб-браузера на несколько областей

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

Создадим веб-страницу с такой структурой. Для этого создадим 5 файлов:

HTML-документ, содержащий заголовок (93.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок</title>
</head>

<body bgcolor="#CCFFFF">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<h1>Заголовок</h1>
</td>
</tr>
</table>
</body>
</html>

HTML-документ, содержащий панель навигации (94.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Панель навигации</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Оглавление</h3>
<ul type="disc">
<li><a href="95.html">Глава1</a></li>
<li><a href="96.html">Глава2</a></li>
</ul>
</body>
</html>

HTML-документ содержащий основное содержание главы1 (95.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глава1</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Глава1</h3>
<p>Содержание главы1</p>
</body>
</html>

HTML-документ содержащий основное содержание главы2 (96.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глава2</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Глава2</h3>
<p>Содержание главы2</p>
</body>
</html>

HTML-документ , описывающий фреймовую структуру (97.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования фреймов</title>
</head>

<frameset rows="100, *">
<frame src="93.html" scrolling="no">
<frameset cols="20%, 80%" >
<frame src="94.html">
<frame src="95.html" name="charter">
</frameset>
</frameset>
<noframes>
Ваш веб-браузер не отражает фреймы
</noframes>
</html

Все созданные файлы сохраним в одной папке. Откроем файл 97.html.

В окне веб-браузера это будет выглядеть ТАК.

Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней — расположена панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Если теперь посмотреть HTML-код документа (Вид > Просмотр HTML-кода), то мы увидим только код структуры веб-страницы, не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла 97.html. Чтобы увидеть исходный код заголовка (файл 93.html), необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода. Чтобы посмотреть исходный код файла 94.html, необходимо правой кнопкой мыши щелкнуть по области, содержащей оглавление и т.д.

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

Структура HTML-документа, содержащего фреймы

Структура HTML-документа с фреймами отличается от обычной структуры.

Структура HTML-документа с фреймами

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок страницы</title>
</head>

<frameset rows="100, *">
<frame>
<frameset cols="20%, 80%" >
<frame>
<frame>
</frameset>
</frameset>
<noframes>
Ваш веб-браузер не отражает фреймы
</noframes>
</html>

Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html>, а в разделе <head> и </head> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами отсутствует раздел body, отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела body и наоборот, обычный HTML-документ не может содержать фреймовую структуру.

Вместо тега <body> применяется парный тег <frameset>, описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame>. Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Рассмотрим эти теги подробно.

Описание фреймовой структуры

Парный тег <frameset> описывает фреймовую структуру. Внутри тегов <frameset> и </frameset> могут содержаться только теги <frame> или другой набор фреймов, описанный тегами <frameset> и </frameset>. Тег <frameset> имеет следующие параметры:

Описание отдельных областей

Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:

Тег noframes

Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. В противном случае содержимое этих тегов будет проигнорировано.

Пример:

<noframes>
Ваш веб-браузер не отражает фреймы
</noframes>

Загрузка документа в определенный фрейм

Для загрузки документа в определенный фрейм существует параметр target тега <a>. В параметре target указывается имя фрейма (которое задается с помощью параметра name тега <frame>) или одно из зарегистрированных значений:

Если нужно загрузить документ во фрейм с именем charter, то ссылка будет такой:

<a href = "filel.html" target = "charter">Текст ссылки</a>

Тег iframe. Добавление фрейма в обычный документ

С помощью парного тега <iframe> можно вставлять фреймы в обычный HTML-документ. Если тег <iframe> не поддерживается, то будет выведен текст между тегами <iframe> и </iframe>. Иногда такие фреймы называют плавающими. Тег <iframe> имеет следующие параметры:

Пример применения плавающих фреймов

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример применения плавающих фреймов</title>
</head>

<body>
<h1 align="center">Название документа</h1>
<br>
<iframe src="../htmpage11.php" name="chapter" width="900" height="300" align="right"scrolling="auto">
Ваш браузер не отображает фреймы
</iframe>
<h2>Оглавление</h2>
<ul>
<li><a href="../htmpage10.php" target="chapter">Таблицы</a></li>
<li><a href="../htmpage9.php" target="chapter">Разметка страницы</a></li>
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Здесь заголовок и панель навигации остаются в неизменном состоянии, а при переходе по ссылкам соответствующая страница загружается в окно фрейма.

Очень часто тег <iframe> используется в ходе сетей обмена банерами и коде рекламных сетей. В других целях использование тега очень ограниченно из-за отсутствия поддержки большинством веб-браузеров.



  • Другие |

Похожие материалы по теме: Окна и фреймы.
Фреймы
Предотвращение использования фреймов. Плавaющие фреймы. Всплывающие окна.

назадвверхвперед
Rambler's Top100