Фреймы

Фреймы

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

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

Если обобщить данный пример, то можно вывести правило использования фреймов.

Правило

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

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

Вот код файла index.html, который создает документ из трех фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD>

<Т1ТЬЕЖомпания "Страйк Лефт"</Т1ТЬЕ> </HEAD>

В верхний фрейм загружается документ top.html, в левый — menu.html, а в правый — content.html. Внешний вид такой страницы показан на рис. 1.9.

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

Код файла top.html:

.<BODY BGCOLOR="#FFFFFF">

<Н1>Компания "Страйк Лефт"</Н1> </BODY>

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

Код файла menu.html:

<А HREF="index.html" TARGET="content">Главная</А><ВК> <A HREF="about.html" TARGET="content">0 компании</А><ВК> <A HREF="product.html" TAGRET=" content ">Продукция</АХВК> <A HREF="contact.html" TARGET=" content "Жонтакт</А><ВК>

</BODY>

Этот документ формирует панель навигации. На белом фоне друг за другом следуют четыре ссылки. После каждой стоит тег <br>, который обеспечивает перевод строки, вследствие чего ссылки идут столбцом.

Код файла content.html: ,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> .

<HTML>

<HEAD>

<TITLE>KoMnaHHH "Страйк Лeфт"</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> '

<H3>0 компании</НЗ>

<РЖомпания "Страйк Лефт" основана в 1999 году.</Р>

<Р>Основные направления деятельности:

<UL>

<LI>CnopTHBHbM MHBeHTapb</LI> <LI>MewiKaMekTU</LI> <LI>KopM для KomeK</LI>

</UL>

</P>

<Р>Мы будем рады .сотрудничать с активными деловыми людьми.

Мы стремимся стать лучшими в своем деле.</Р> </BODY> </HTML>

Это и есть информация главной страницы байта компании. На белом фоне выводится заголовок раздела. Затем идет краткое описание и перечисление основных направлений в виде списка.

А теперь построчно разберем код файла index.html. Обратите внимание, что в коде отсутствует элемент <body>, а на его месте стоит <frameset>.

В этой строке окно браузера разбивается на два горизонтальных фрейма (на тот факт, что фреймы именно горизонтальные, указывает атрибут rows). Первый фрейм занимает 20% от высоты всего окна браузера, а второй — 80% от высоты окна браузера. Атрибут frameborder="o" указывает на то, что объемной рамки у этого фрейма нет, а атрибут border="i" устанавливает ширину рамки в один пиксел (на самом деле в браузере ширина границы будет больше).

В этой строке мы задаем содержимое верхнего фрейма (у которого высота 20%). Атрибут src содержит URI файла, который будет загружаться в этот фрейм (в данном случае это файл top.html), а атрибут scROLLiNG="no" указывает на то, что фрейм не будет иметь полос прокрутки.

Далее по коду должно идти содержимое второго фрейма (у которого высота 80% от высоты всего окна). Вот оно:

</FRAMESET>

Таким образом, второй фрейм мы разбиваем еще на два фрейма, на этот раз вертикальных. Первый из них будет занимать 20% от всей ширины окна браузера, а второй — 80%. Далее мы формируем содержимое каждого из этих двух фреймов. В левый фрейм будет загружаться файл menu.html, а в правый — content.html.

Таким образом, у нас получилось три фрейма и три HTML-страницы, которые загружаются в соответствующий фрейм. В левом фрейме находится меню, в правом —- основной контент страницы. Обратите внимание, что правый фрейм имеет имя name=" content". Оно необходимо для организации навигации по сайту. Ссылка в левом фрейме имеет вид:

<A HREF="product.html" TARGET""content">Продукция< /А>.

Атрибут target указывает, в каком окне откроется файл product.html. В данном случае этот файл откроется во фрейме, который имеет имя content, т. е. в правом большом фрейме.

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

Имеется несколько проблем глобального плана.

D Если вы во фрейме сделаете ссылку на другой сайт, то он откроется в этом же фрейме. Во избежание подобных проблем надо для каждой внешней ссылки прописывать атрибут TARGET="_top", тогда страница откроется в целом окне.

["I Зачастую возникает проблема с поисковыми машинами. Для браузеров, которые не поддерживают фреймы (большая редкость в Сети, надо сказать), существует элемент <noframes>. В нем пишут текст для таких браузеров. Что-то типа "Этот сайт сделан с использованием фреймов, так что обновите ваш браузер". Часто поисковая машина индексирует именно эту фразу, потому что не понимает фреймовой структуры, как и очень древние версии браузеров. Как вариант, можно в элемент <noframes> вставлять небольшое описание сайта.

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

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

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

В начало … Назад … Далее