Содержание

Плавающие фреймы | htmlbook.ru

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

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ (пример 13.10).

Пример 13.10. Использование тега <iframe>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><iframe src="hsb.html"></iframe></p>
 </body>
</html>

В данном примере ширина и высота фрейма устанавливается через атрибуты width и height. Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target (пример 13.11).

Пример 13.11. Загрузка документа во фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><a href="rgb.html" target="color">RGB</a> | 
     <a href="cmyk.html" target="color">CMYK</a> | 
     <a href="hsb.html" target="color">HSB</a></p>
  <p><iframe src="model.html" name="color"></iframe></p>
 </body>
</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE>.

Фреймы. Плавающий фрейм. Noframes. Учебник html frame

Глава 7

Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..

Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов.. так вот фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы — это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной «альтернативой» табличному способу верстки страницы.. в кавычки взял слово «альтернатива» потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта.. но обо всем по порядку..

Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:

Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне.. Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html , вторым документом будет некое содержание.. назовём menu.html , ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои.. так будет удобнее и мне и Вам.

Итак, есть три файла logotype.html, menu.html и text.html.. которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..

Пишем «крышу», главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.

<html>
<head>
<title>фреймы</title>

</head>
<body>
</body>
</html>

Вот привычная для нас структура документа которую мы пережевали ещё в самом начале нашего обучения.. Фреймы ломают сложившиеся стереотипы! Структура фрейм документа имеет вот такой вид:

<html>
<head>
<title>фреймы </title>
</head>
<frameset>
</frameset>
</html>

Отсутствие тега <body> компенсирует новый тег <frameset> — установить фрейм или набор фреймов.. с этим товарищем мы собственно и будем работать дальше.

Тег <frameset> имеет атрибуты rows и cols — эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера

rows — горизонтально                cols — вертикально

В нашем случае нам необходимо горизонтальное размещение фреймов.. значит пишем так:

<html>
<head>
<title>фреймы </title>
</head>
<frameset rows=»15%,15%,70%»>
</frameset>
</html>

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

Вот несколько примеров написания:
<frameset rows=»15%,15%,70%»> — такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 70% площади окна браузера, а первые два по 15%.
<frameset cols =»200,240,200″>

— здесь три окна расположены вертикально ширина которых указана в пикселях.
<frameset rows=»100,*,180″> — такая запись значит, что первое и третье окно будут иметь ширину 100 и 180 пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.

С размещением документов покончили, теперь собственно осталось их подключить и насладится первым результатом..

Тег <frame> и его атрибут src укажет браузеру путь к html документу который следует открыть в отведенном для него месте. У нас имеется три отдельных документа logotype.html, menu.html и text.html теперь к каждому нужно прописать путь, что мы собственно и делаем. (предполагаю, что у Вас все четыре файла находятся в одной папке и пути к ним имеют самую простую запись по типу:

<frame src=»logotype.html»>)

Пример:

Файл index.html
<html>
<head>
<title>фреймы</title>
</head>
<frameset rows=»15%,15%,70%»>
<frame src=»logotype.html»>
<frame src=»menu.html»>
<frame src=»text.html»>
</frameset>
</html>
Файл logotype.html
<html>
<head>
<title>фреймы</title>
</head>
<body>
<img src=»logotype.jpg» alt=»Кулинария»>
</body>
</html>
Файл menu.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor=»#e8e8e8″ background=»fon1.jpg»>
<font face=»Monotype Corsiva» size=»6″color=»#ff0000″>Меню:</font><br>
<font face=»Comic Sans MS» size=»3″>
<a href=»text.html»>Суп из шампиньонов</a><br>

<a href=»text1.html»>Бобы в горшочке по-итальянски</a><br>
<a href=»text2.html»>Австралийский летний салат</a><br>
… … …
</font>
</body>
</html>
Файл text.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor=»#f5f5f5″>
<center><font face=»Comic Sans MS» size=»3″>Суп из шампиньонов</font></center>
<br>
куча текста..

</body>
</html>

В данном примере я выложил все четыре HTML документа где index.html является основным, а остальные три, это подключаемые страницы, каждая из которых в принципе может работать автономно и содержать в себе всё что угодно картинки, таблицы, тексты, ссылки.. сделал я это для того что бы дать Вам понять принцип работы с фреймами. В дальнейших примерах я буду выкладывать лишь головной файл с фреймами, (а то уж больно много места на странице они все вместе занимают), а Вы знайте что у меня «где то там» есть все остальные файлы содержащие в себе графику, тексты, может быть ещё что ни будь.. ну и не отставайте за мной потихоньку редактируйте свои собственные странички к будущему тренировочному сайту.. Не знаю про что Вы будите писать свой, а я тут пообещался помочь одной девушке в написании сайта посвящённого кулинарии..)) так что решил так сказать сразу на двух зайцев замахнуться.. на девушку зайку и сайт..)) как-то так..))

В выше изложенном примере мы расположили все окна горизонтально, поменяв атрибут rows на cols можно расположить их в вертикальном порядке. А как быть, если требуется разместить наши окна


     вот так?:                                    или так?:                                    или даже так?:

Выход есть. Разберём на примерах.

Начнём с первого случая.. что мы видим? А видим мы две строки, где вторая поделена на два столбца.

A теперь по порядку:

<frameset rows=»20%,80%»> — делим окно браузера на две строки
<frame src=»logotype.html»>— в первую строку загружаем наш логотип
<frameset cols=»30%,70%»>— а вторую строку делим на два столбца
<frame src=»menu.html»> — в первом будет меню
<frame src=»text.html»>— а во втором куча текста
</frameset> — закрываем тег деления на столбцы
</frameset> — закрываем тег деления на строки

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

Ну да ладно, смотрим пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset rows=»15%,85%»>
<frame src=»logotype.html»>
<frameset cols=»20%,80%»>
<frame src=»menu.html»>
<frame src=»text.html»>
</frameset>
</frameset>
</html>

Во втором случае у нас имеется два столбца в котором второй поделен на две строки, значит будем писать так:

<frameset cols=»30%,70%»> — делим окно на два столбца
<frame src=»menu.html»> — в первом будет содержание
<frameset rows=»20%,80%»> — а второй делим на две строки
<frame src=»logotype.html»> — логотип
<frame src=»text.html»> — и основной текст
</frameset> — закрываем деление на строки
</frameset> — закрываем деление на столбцы

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»20%,80%»>
<frame src=»menu.html»>
<frameset rows=»15%,85%»>
<frame src=»logotype.html»>
<frame src=»text.html»>
</frameset>
</frameset>
</html>

Третий случай немного посложней, но бояться его не стоит.. тем более что именно такое построение лично я выбрал для сайта про кулинарное искусство, чуть ниже объясню почему. Что мы имеем? три столбца причем во второй столбец по сути заключён наш первый случай..

<frameset cols=»*,800,*»> — делим окно на три столбика (обратите внимание второй столбец занимает ровно 800 пикселей а два крайних точного размера не имеют и поделят пополам оставшееся место)
<frame src=»dekor.html»> -в первый столбец загружаем html документ который будет выполнять сугубо декоративную функцию

<frameset rows=»15%,85%»> —
<frame src=»logotype.html»> —
<frameset cols=»20%,80%»> — во второй столбец вставляем наш «первый случай»
<frame src=»menu.html»> —
<frame src=»text.html»> —
</frameset> —
</frameset> —

<frame src=»dekor.html»> — в третий столбец загружаем всё тот же файл с декорациями
</frameset> — захлопываем

Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*»>
<frame src=»dekor.html»>
<frameset rows=»120,*»>
<frame src=»logotype.html»>
<frameset cols=»200,600″>
<frame src=»menu.html»>
<frame src=»text.html»>
</frameset>
</frameset>
<frame src=»dekor.html»>
</frameset>
</html>

Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному.. и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется «поплывут» у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя.. даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет «товарный вид». Так как же быть? Приходится идти на маленькие хитрости.. Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода «пружин» на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?

На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.

В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling — тега <frame>, он может иметь одно из трёх значений:

  • no— никогда не показывать полосу прокрутки,
  • yes— всегда показывать,
  • auto— показывать в том случае если она необходима.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*»>
<frame src=»dekor.html» scrolling=»no»>
<frameset rows=»120,*»>
<frame src=»logotype.html» scrolling=»no»>
<frameset cols=»200,600″>
<frame src=»menu.html»>
<frame src=»text.html»>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no»>
</frameset>
</html>

Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега <frame>

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*»>
<frame src=»dekor.html» scrolling=»no»>
<frameset rows=»120,*»>
<frame src=»logotype.html» scrolling=»no» marginwidth=»0″ marginheight=»0″>
<frameset cols=»200,600″>
<frame src=»menu.html»>
<frame src=»text.html» marginwidth=»10″ marginheight=»10″>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no»>
</frameset>
</html>

Поговорим немного о рамках вокруг наших фреймов.

Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая «мобильность» границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега <frame> придумали атрибут noresize

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*»>
<frame src=»dekor.html» scrolling=»no» noresize>
<frameset rows=»120,*»>
<frame src=»logotype.html» scrolling=»no» marginwidth=»0″ marginheight=»0″ noresize>
<frameset cols=»200,600″>
<frame src=»menu.html» noresize>
<frame src=»text.html» marginwidth=»10″ marginheight=»10″ noresize>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no» noresize>
</frameset>
</html>

А вот давно нам знакомый атрибут border задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега <frameset>. Как и раньше значение border=»0″ вовсе избавит нас от рамок.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*» border=»0″>
<frame src=»dekor.html» scrolling=»no» noresize>
<frameset rows=»120,*» border=»0″>
<frame src=»logotype.html» scrolling=»no» marginwidth=»0″ marginheight=»0″ noresize>
<frameset cols=»200,600″ border=»0″>
<frame src=»menu.html» noresize>
<frame src=»text.html» marginwidth=»10″ marginheight=»10″ noresize>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no» noresize>
</frameset>
</html>

Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка <a href=»text1.html»>Бобы в горшочке по-итальянски</a> откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на    корявый пример..    кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.

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

пишется так:

<frame src=»text.html» name=»osnovnoe»> имя можно придумать любое.. главное его не забыть..

А теперь в документе с ссылками (в нашем случае это файл menu.html)необходимо указать цель то есть собственно определить в каком окне стоит открывать тот или иной документ

Пишется так:

<a href=»text1.html» target=»osnovnoe»>Бобы в горшочке по-итальянски</a>

Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…

Посмотрите пример:

Файл index.html
<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*» border=»0″>
<frame src=»dekor.html» scrolling=»no» noresize>
<frameset rows=»120,*» border=»0″>
<frame src=»logotype.html» scrolling=»no» marginwidth=»0″ marginheight=»0″ noresize>
<frameset cols=»200,600″ border=»0″>
<frame src=»menu.html» noresize>
<frame src=»text.html» name=»osnovnoe» marginwidth=»10″ marginheight=»10″ noresize>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no» noresize>
</frameset>
</html>
Файл menu.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor=»#e8e8e8″ background=»fon1.jpg» link=»#b40000″ alink=»#900000″ vlink=»#900000″>
<font face=»Monotype Corsiva» size=»6″color=»#ff0000″>Меню:</font><hr>
<font face=»Comic Sans MS» size=»3″>
<a href=»text.html» target=»osnovnoe»>Суп из шампиньонов</a><hr>
<a href=»text1.html» target=»osnovnoe»>Бобы в горшочке по-итальянски</a><hr>
<a href=»text2.html» target=»osnovnoe»>Австралийский летний салат</a><hr>
… … …
</font>
</body>
</html>

Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:

<a href=»text1.html» target=»_blank»>Бобы в горшочке по-итальянски</a>

Или же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на весь экран.. «обнулив» при этом всё что бы там не находилось.. пишется так:

<a href=»text1.html» target=»_top»>Бобы в горшочке по-итальянски</a>

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

Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег <iframe> — так называемый плавающий фрейм.

Данный тег имеет ряд атрибутов:

src — обязательный атрибут, указывающий путь к открываемой странице
width — ширина плавающего фрейма в пикселях или процентах
height — высота плавающего фрейма

scrolling — показ полосы прокрутки

  • no — никогда не показывать полосу прокрутки,
  • yes — всегда показывать,
  • auto — показывать в том случае если она необходима.
align — выравнивание плаваюшего фрейма
  • left — слева
  • right — справа
  • top — выше
  • bottom — ниже
frameborder — наличие рамки вокруг плавающего фрейма
  • 1 — включить рамку
  • 0— выключить рамку

Всё вместе пишется так:

<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″ ></iframe>

Пример документа с плавающим фреймом:

<html>
<head>
<title>Плавающий фрейм</title>
</head>
<body>
<center><h3>Плавающий фрейм</h3></center>
В эту страницу введён так называемый «плавающий фрейм».
В отдельном окне он открывает для показа другой документ html.
<br>
<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″></iframe>
<br>
… … …
<br>
</body>
</html>

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

Теперь представьте что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: «Фу.. ерунда какая то.. больше сроду сюда не зайду!».

Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег <noframes>.

Тег <noframes> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols=»*,800,*» border=»0″>
<noframes>Извините, но Ваш браузер не поддерживает фреймы..</noframes>
<frame src=»dekor.html» scrolling=»no» noresize>
<frameset rows=»120,*» border=»0″>
<frame src=»logotype.html» scrolling=»no» marginwidth=»0″ marginheight=»0″ noresize>
<frameset cols=»200,600″ border=»0″>
<frame src=»menu.html» noresize>
<frame src=»text.html» marginwidth=»10″ marginheight=»10″ noresize>
</frameset>
</frameset>
<frame src=»dekor.html» scrolling=»no» noresize>
</frameset>
</html>

Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. 🙂 если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.

Тег <noframes> должен быть расположен внутри тега <frameset>

С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между <iframe> </iframe> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы.

Вот так:

<iframe src=»primer.html» align =»left» scrolling=»auto» frameborder=»1″>Извините, но Ваш браузер не поддерживает фреймы..</iframe>

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

  • Используйте тег <noframes>. Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!



5.6. Плавающие фреймы. HTML, XHTML и CSS на 100%

5.6. Плавающие фреймы

Браузеры последних версий позволяют использовать плавающие фреймы, добавляемые с помощью элемента IFRAME. Плавающий фрейм находится внутри обычного

документа, не содержащего тегов <FRAMESET>. </FRAMESET>, и позволяет добавлять на страницу любые другие независимые документы. В элементе I FRAME можно указывать те же атрибуты, что и в элементах, описывающих обычные фреймы. Кроме того, можно использовать следующие атрибуты: width, height, hspace, vspace, align, значения которых совпадают со значениями соответствующих атрибутов элемента IMG.

<iframe src=page.HTML hspace=»5″ vspace=»5″ align=»left»>

Ваш браузер не поддерживает плавающие фреймы!

</iframe>

На рис. 5.8 изображено окно браузера, содержащее плавающий фрейм.

Рис. 5.8. Пример плавающего фрейма

Если браузер не поддерживает плавающие фреймы, то элемент IFRAME будет проигнорирован. Для таких браузеров можно указать альтернативный текст, расположенный между парой тегов <IFRAME> и </IFRAME>.

Данный текст является ознакомительным фрагментом.

Читать книгу целиком

Поделитесь на страничке

Следующая глава >

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

Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.

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

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

При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.

Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1).

Пример 13.1. Файл index.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=utf-8">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*">
  <frame src="menu.html" name="MENU">
  <frame src="content.html" name="CONTENT">
 </frameset>
</html>

В случае использования фреймов в первой строке кода пишется следующий тип документа.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Данный <!DOCTYPE> указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <head> содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.

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

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

Пример 13.2. Файл menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Навигация по сайту</title>
 </head>
 <body>
   <p>МЕНЮ</p>
 </body>
</html>

В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.

Пример 13.3. Файл content.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Содержание сайта</title>
 </head>
 <body>
  <p>СОДЕРЖАНИЕ</p>
 </body>
</html>

Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).

Рис. 13.2. Разделение страницы на три фрейма

В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 13.4).

Пример 13.4. Три фрейма

<!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=utf-8">
  <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> с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling=»no» и noresize.

фреймы | htmlbook.ru

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

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name (пример 13.5).

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

Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.

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

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

Предположим, у нас есть документ, состоящий из двух фреймов, названных MENU и CONTENT, как изображено на рис. 1.

Рис. 1. Вид документа с фреймами

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

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

Рис. 13.4. Плавающий фрейм на веб-странице

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

Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling тега <frame>.

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

По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться атрибутом noresize тега <frame> (пример 13.8).

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

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing=»0″.

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

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

Учебник HTML 5. Статья «Фреймы»

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

Не так давно фреймы использовались в качестве навигации по сайту, когда навигационная страница располагалась в одном окне, а страницы с контентом, располагались в других документах. В настоящее время использование фреймов на страницах сайтов можно встретить все реже, это как правило, какие-то примеры кода с «песочниц» (выделенная среда для исполнения компьютерного кода), участки Google Maps (необходимо задавать адрес в такой форме: https://maps.google.com?output=embed), либо видео, размещенное с видео хостинга YouTube.

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

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

В следующем примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

  • Элементом <iframe> создали фрейм, которому атрибутом name задали имя — «myframe», атрибутом width установили ширину фрейма «665px», а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng.com».
  • Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe»). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Рис. 27 Пример использования фреймов в HTML.

HTML аббревиатура и контактная информация

HTML тег <abbr> (HTML Abbreviation Element) определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковых машин, для пользователя применение этого элемента не видимо.

Как правило, тег <abbr> применяется совместно с глобальным атрибутом title, для отображения полного описания аббревиатуры пользователю при наведении.

HTML тег <address> определяет контактную информацию (автор / владелец) документа или статьи. Если элемент <address> находится внутри тега <body>, то представляет контактную информацию для документа, а если находится внутри элемента <article> (статья), то он представляет контактную информацию для этой статьи.

Текст внутри элемента <address>, как правило, отображается курсивом. Элемент не должен использоваться просто для описания почтового адреса, если он не является частью контактной информации. Элемент, чаще всего, используют с другой информацией в элементе <footer> (нижний колонтитул или «подвал» сайта).

Об элементах, добавленных в HTML 5 — <footer> и <article> мы поговорим в статье «Теги разметки страницы в HTML».

Пример использования:

<html>
	<head>
		<title>Аббревиатура и контактная информация</title>
	</head>
	<body>
		<p><abbr title = "ВСЕРОССИЙСКИЙ НАУЧНО-ИССЛЕДОВАТЕЛЬСКИЙ <!-- добавляем аббревиатуру с глобальным атрибутом title -->
		ГЕОЛОГИЧЕСКИЙ ИНСТИТУТ им. А.П. КАРПИНСКОГО">ВСЕГЕИ</abbr> является преемником и продолжателем традиций первого государственного геологического учреждения России –
		Геологического комитета, созданного в Санкт-Петербурге...
		<iframe src = "http://vsegei.ru"></iframe> <!-- добавляем фрейм с сайтом института -->
		<address style = "background-color: khaki"> 199106, Санкт-Петербург, Средний пр., 74</br> <!-- добавляем контактную информацию института -->
		E-mail: [email protected]</br>
		Сайт: http://vsegei.ru/ru/  </address>
	</body>
</html>

В данном примере мы:

  • Поместили аббревиатуру института в тег <abbr> и применили глобальный атрибут title, для того, чтобы при наведении на нее мышкой было понятно, что это высшее учебное заведение, а не то, что вы подумали.
  • Кроме того загрузили во фрейм сайт данного учебного заведения (в обязательном атрибуте src указали абсолютный адрес сайта).
  • Внизу страницы (внутри тега <address>) добавили адрес и контактные данные института, указанные на официальном сайте. Текст, помещенный внутрь этого тега, по умолчанию отображается курсивом. Кроме того для элемента <address> добавили глобальный атрибут style, которым задали встроенный CSS стиль (цвет заднего фона).

Рис 28 Аббревиатура и контактная информация в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

  • Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:

  1. Первая ссылка загружает сайт «Википедии», или любой другой.
  2. Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
  3. Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
  4. Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

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

  • Результат примера вы можете скачать после выполнения задачи для самопроверки:


Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.

Синтаксис

<iframe>...</iframe>

Атрибуты

align
Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowtransparency

Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder
Устанавливает, отображать границу вокруг фрейма или нет.
height
Высота фрейма.
hspace
Горизонтальный отступ от фрейма до окружающего контента.
marginheight
Отступ сверху и снизу от содержания до границы фрейма.
marginwidth
Отступ слева и справа от содержания до границы фрейма.
name
Имя фрейма.
sandbox
Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling
Способ отображения полосы прокрутки во фрейме.
seamless
Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc
Хранит содержимое фрейма непосредственно в атрибуте.
vspace
Вертикальный отступ от фрейма до окружающего контента.
width
Ширина фрейма.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IFRAME</title>
 </head>
 <body>  

 <iframe src="banner.html" align="left">
    Ваш браузер не поддерживает плавающие фреймы!
 </iframe>

 </body>
</html>

CSS Layout — плавать и очистить

Свойство CSS float указывает как элемент должен плавать.

Свойство CSS clear указывает, какие элементы могут плавать рядом с очищаемым элементом и на какой стороне.

Недвижимость с плавающей точкой

Свойство float используется для позиционирование и форматирование контента, например позвольте изображению плавать слева от текста в контейнер.

Свойство с плавающей точкой может иметь один из следующие значения:

  • слева — элемент плавает слева от своего контейнера
  • справа — элемент плавает справа от своего контейнера
  • нет — элемент не плавает (будет отображаться там, где это происходит в тексте).Это по умолчанию
  • наследовать — элемент наследует значение с плавающей точкой своего родителя

В простейшем случае свойство float можно использовать для обтекания текста вокруг изображений.

Пример — float: right;

В следующем примере показано, что изображение должно плавать до вправо в тексте :

Lorem Ipsum Dolor Sit Amet, Заклинатель Adipiscing Elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, краткие биографические данные, венозная лингула, венорский долор.Maecenas nislest, ultrices nec conget eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent Convallis Urna Lacus Interdum Ut Hendrerit Risus Congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …

Пример — float: left;

В следующем примере показано, что изображение должно плавать до , оставленных в тексте:

Lorem Ipsum Dolor Sit Amet, Заклинатель Adipiscing Elit.Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, краткие биографические данные, венозная лингула, венорский долор. Maecenas nislest, ultrices nec conget eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent Convallis Urna Lacus Interdum Ut Hendrerit Risus Congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …

Пример — No float

В следующем примере изображение будет отображаться именно там, где оно находится текст (float: none;):

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit.Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, краткие биографические данные, венозная лингула, венорский долор. Maecenas nislest, ultrices nec conget eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent Convallis Urna Lacus Interdum Ut Hendrerit Risus Congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …


,
Плавающих Рамок | HTML & XHTML: полный справочник (Osborne Complete Reference Series)

Плавающие кадры

До этого момента все показанные кадры были прикреплены к сторонам браузера (слева, справа, сверху или снизу). Еще одна форма фрейма, известная как плавающая рама , но более уместно называемая встроенным фреймом , была впервые представлена ​​Microsoft, но была включена в стандарты HTML и XHTML. Идея плавающего фрейма заключается в создании встроенной области или окна, которая действует аналогично любому другому внедренному объекту, поскольку вокруг него можно обтекать текст.Встроенный фрейм определяется элементом iframe и может находиться в любом месте в пределах документа HTML. Сравните это с элементом кадра , который должен встречаться только в элементе кадра .

Основные атрибуты для тега