Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

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

Для создания фрейма используется тег <FRAMESET>, который заменяет тег <BODY> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <FRAME>, которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 1).

MENU CONTENT

Рис. 1. Пример разделения окна браузера на фреймы

Для размещения фреймов, как показано на рис. 1, код будет следующий.

Пример 1. Создание двух фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<frameset cols="200,*">
 <frame src="menu.php" name="MENU">
 <frame src="content.php" name="CONTENT">
</frameset>
</html>

Заметьте, что в примере 1 используется другой тег <!DOCTYPE>, чем в обычных HTML-документах, это связано с применением фреймов. Указанный <!DOCTYPE> применяется только для главной страницы, определяющей структуру фреймов.

В данном примере окно браузера разбивается на две колонки, левая занимает 200 пикселов, а правая — оставшееся пространство заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге <FRAME> задается имя HTML-файла, загружаемого в указанную область, с помощью параметра src. В левое окно будет загружен файл, названный menu.php, а в правое — content.php. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно.

TOP
MENU CONTENT

Рис. 2. Пример разделения окна браузера на фреймы

Если нужна более сложная структура фреймов, например, как показано на рис. 2, теги <FRAMESET> можно вкладывать один в другой (пример 2).

Пример 2. Создание трех фреймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<frameset rows="10%,90%">
 <frame src="top.php" name="TOP">
 <frameset cols="200,*">
  <frame src="menu.php" name="MENU">
  <frame src="content.php" name="CONTENT">
 </frameset>
</frameset>
</html>

Первый тег <FRAMESET> разбивает окно браузера на две строки шириной 10 и 90 процентов. А следующий, вложенный — создает две колонки, как и в примере 1.

Обратите внимание, что тег <BODY> при использовании фреймов не указывается, поскольку его функцию выполняет тег <FRAMESET>.





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!