htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум Графика для Web
Главная страница > Статьи > Фреймы > Создание фреймов

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

Влад Мержевич

Текстовая версия   Добавить комментарий

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

Рис. 1

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

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

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

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фреймы</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>

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

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

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

Рис. 2

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

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

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

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фреймы</title>
</head>
<frameset rows="25%,75%">
<frame src="top.html" name="TOP" scrolling="no" noresize>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>

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

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

Статья опубликована: 12.09.2005 Последнее обновление: 16.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

  1. Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
  2. Удаляются любые комментарии, которые:
    • включают множество ошибок;
    • написаны безграмотно;
    • не имеют отношения к данной статье;
    • не содержат никакой полезной информации для посетителей.
  3. Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
  4. Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

maks

26.10.2006

я поддерживаю ваш сайт. ни чего лишнего.

Михаил Жуков

26.10.2006

Мне кажется фреймы это удобно. Но вот вопрос. Когда загружается страница с приминением фреймов, размер загруженных страниц суммируется? А то трафик кусачий сильно sad

Влад Мержевич

26.10.2006

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

Flik

13.11.2006

вот такой вапрос появился у меня: можно ли фрэйм вставить в ячейку таблици?

Влад Мержевич

14.11.2006

Только плавающий фрейм (тег IFRAME).

Леонид

16.12.2006

У меня такой вопрос: как можно (и можно ли вообще) сделать так (*может скрипт добавить какой?*), чтобы загружаемая по ссылке "со стороны" страница сайта подгружала бы ещ? и заглавный фрейм с менюхой и открывалась уже в н?м?

Влад Мержевич

18.12.2006

Леонид, почитай статью "Ссылки внутри фреймов", в ней описывается подобное.

Альберт

06.01.2007

Книгу на работе оставил, от туда всегда смотрел фреймы, потому что в работе часто не использовал их, а теперь понадобились, я помню и мне он нужен до ужаса тег <iframe> своего рода фрейм во фрейме, вот теперь думаю на работу ехать или что sad!!!?

Mir

21.09.2007

Непонятно зачем вообще было нужно создавать эти фреймы, когда их лишили, казалось бы, главного достоинства - прозрачности.
Прозрачный фрейм - вот настоящий изюм для дизайнера - а не прозрачный - головная боль. Фрейм обещает, такаю красивую функциональность, - а потом обламывает. Может быть кто-нибудь
все таки знает как сделать его прозрачным, может быть Java или
API Плиз помогите

DreadfuL

12.02.2008

Ч?т я не понял зачем этот тэг нужен smile

Вера

26.05.2008

Спасибо за информацию у Вас оччччччччч хороший понятный сайт.
Я из "чайников" html работаю недавно.Вам очень благодарна.

Андрей

01.06.2008

Отлично +1

Михалыч

29.07.2008

Ни тево не понимаю.создал фрейм а он глупый какойто!Его можно делать больше или менше(прям на сайте).Как это убрать?такое лажево получается вечно

Добавить комментарий

Имя
Комментарий

Сохранить имя (используется cookie)

Поиск по сайту

Фреймы
Разделы
Теги по теме

BODY
Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

FRAME
Тег FRAME определяет свойства отдельного фрейма, на которые делится окно браузера.

FRAMESET
Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME.

Copyright 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект