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

 

Достоинства фреймов

 

Простота

 

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

 

Быстрота

 

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

 

Размещение

 

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

 

Изменение размеров областей

 

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

 

Загрузка

 

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

 

Недостатки фреймов

 

Навигация

 

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

 

Плохая индексация поисковыми системами

 

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

 

Внутренние страницы нельзя добавить в «Избранное»

 

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

 

Несовместимость с разными браузерами

 

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

 

Непрестижность

 

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

 

---

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

Ссылки во фреймах

Границы между фреймами

Изменения размеров фреймов

Полосы прокрутки

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

 

---

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

Несмотря на то, что сайты с фреймами встречаются все реже, изучение 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  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 style="background: #f0f0f0">    <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.

---

Ссылки во фреймах

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

Пример 13.5. Ссылка на другой фрейм

<!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="menu2.html" name="MENU">   <frame src="content.html" name="CONTENT">  </frameset> </html>

В приведенном примере фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется конструкция target="CONTENT", как показано в примере 13.6.

Пример 13.6. Содержимое файла menu2.html

<!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 style="background: #f0f0f0">   <p>МЕНЮ</p>   <p><a href="text.html" target="CONTENT">Текст</a></p>  </body> </html>

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

• _blank — загружает документ в новое окно;
• _self — загружает документ в текущий фрейм;
• _parent — загружает документ во фрейм, занимаемый родителем, если фрейма-родителя нет значение действует также, как _top;
• _top — отменяет все фреймы и загружает документ в полное окно браузера.

 

---

Границы между фреймами

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

Пример 13.6. Убираем границу между фреймами

<!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,*" frameborder="0" framespacing="0">    <frame src="menu.html" name="MENU">    <frame src="content.html" name="CONTENT">   </frameset> </html>

Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 13.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.

Пример 13.7. Изменение цвета границы

<!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,*" bordercolor="#000080" border="5">    <frame src="menu.html" name="MENU">    <frame src="content.html" name="CONTENT">  </frameset> </html>

Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рис. 13.3).

Internet Explorer	Opera	Firefox

Рис. 13.3. Вид границы между фреймами в разных браузерах

Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.

---

Изменение размеров фреймов

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

Пример 13.8. Запрет на изменение размера фреймов

<!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" noresize>    <frame src="content.html" name="CONTENT">  </frameset> </html>

Атрибут noresize не требует никаких значений и используется сам по себе. Для случая двух фреймов этот атрибут можно указать лишь в одном месте. Естественно, если у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры тоже меняться не будут.

---

Полосы прокрутки

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

Пример 13.9. Запрет на изменение размера фреймов

<!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" noresize scrolling="no">    <frame src="content.html" name="CONTENT">  </frameset> </html>

При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому scrolling="no" следует использовать осторожно.

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

---

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

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 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" width="300" height="120"></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" width="100%" height="200"></iframe></p>  </body> </html>

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

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

htmlbook.ru