главная / HTML / Сага о фреймах

Сага о фреймах

Для чего применяются фреймы? Как правильно с ними работать? Когда их лучше избегать и какие подводные камни могут подстерегать нас на этом пути?

Нужно ли использовать фреймы?

Для начала давайте решим, для чего используются фреймы. Они появились ещё во второй версии Netscape Navigator-а и предназначались для облегчения навигации при создании страничек (так тогда казалось).

Техника использования фреймов заключается в том, что все окно броузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введён механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причём, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5 и т.д. Но пока не будем торопиться с обсуждением механизма работы фреймов, а поговорим об их недостатках и уместности применения.

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

странички сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида <a href="">...</a> и поисковые роботы, естественно, не могут попасть на внутренние странички. Приходится прикладывать дополнительные усилия, чтобы всё-же осуществить это. В частности, вводить вышеупомянутые ссылки именно для роботов;
в случае попадания не на первую страничку сайта не существует "официального" способа перейти на первую страничку сайта - приходится вручную редактировать путь в адресной строке броузера;
ввиду того, что фреймовая структура сайта придаёт ему достаточно узнаваемый вид, большинство подобных страничек выглядит достаточно однообразно;
невозможно поставить закладку на внутреннюю страничку сайта. А это уже серьёзно! Представьте, что Вы наткнулись на очень интересную статью и желаете, например, поместить ссылку в свою коллекцию или послать другу её адрес. Так вот, ни то, ни другое Вы сделать не сможете - фреймы скрывают истинный адрес странички. Ради справедливости нужно сказать, что этот адрес всё-же можно узнать, открывая ссылку в новом окне;
проблемы отображения странички в разных версиях броузеров. От этого уже никуда не уйти и это предложение можно автоматически добавлять практически к любым расширениям HTML.

В каких случаях уместно применять фреймы?

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

Тем не менее, в каких случаях оправданно их применение?

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

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

Механизм работы фреймов

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

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

index.htm - страничка-контейнер

<html>
<head>
<title>Frame page</title>
</head>

<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>

<noframes>
Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.
</noframes>

</html>

И сразу напишем код для страничек, входящих в фреймовую структуру:

left.htm - страничка, содержащая меню

<html>
<head>
<title>Menu page</title>
</head>

<body>

<a href="topic_1.htm" target="content">topic #1</a> 
<a href="topic_2.htm" target="content">topic #2</a> 
<a href="topic_3.htm" target="content">topic #3</a> 
<a href="topic_4.htm" target="content">topic #4</a> 

</body>
</html>

right.htm - страничка, в которой будут отображаться основные статьи сайта

<html>
<head>
<title>Content page</title>
</head>

<body>

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

</body>
</html>

Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> мы используем тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>. Давайте-ка подробнее разберём наш пример:

В параметре тега <frameset> мы определяем, что страничка будет разделена по-вертикали и состоять из двух колонок (если нам нужно разделить окно по-горизонтали, то тогда вместо параметра cols нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделённые запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звёздочки, обозначающей - "всё оставшееся пространство". Вот примеры определения фреймов:

<frameset cols="200,*"> - 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей;

<frameset rows="25%, 50%, 25%"> - 3 строчки, высоты которых определены в процентах от высоты окна броузера;

<frameset rows="*, 2* ,*"> - то же самое, что и предыдущая строчка, но записанная при помощи звёздочек. Цифра перед звёздочкой указывает количество повторов. Ширина одной звёздочки определяется как среднее арифметическое между всеми звёздочками в строке с учетом коэффициентов перед ними.

Как я уже сказал выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:

src - URL странички, которая будет помещена во фрейм;
name - имя странички, по которому к ней можно будет обращаться;
scrolling, noresize, ... - параметры, управляющие поведением фрейма, - возможностью изменять пользователем ширину фрейма и управлять появлением полосы прокрутки в случае, если содержимое странички не помещается на экране.

Обратите внимание на параметр name - он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился ещё один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

<a href="topic_1.htm" target="content">topic #1</a>

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

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

_blank - открывает ссылку в новом окне;
_top - открывает ссылку на всё окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во всё окно;
_parent - открывает ссылку в родительском окне.

До сих пор в качестве элементов контейнера <frameset> мы использовали простые теги <frame>, но мы также можем использовать и контейнер <frameset>. В этом случае мы получаем т.н. вложенные фреймы. Вот пример:

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

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

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

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

Кстати, рамку фрейма можно убрать, указав параметр frameborder=0.

И ещё одно! Для броузеров, которые не понимают фреймов, есть специальный тег <noframes>. Как раз он и определяет, что увидит пользователь с броузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, подобную той, что написал я, либо указывают список основных разделов сайта, чтобы человек всё-же смог просмотреть странички.

Источник: cherry-design.spb.ru

текущее:

Бойцы невидимого фронта

Как оформить таблицу?

Рисуем баннеры Версия для распечатки Версия для распечатки

НОВОСТИ

05.12.2013 - Уход за флэш-накопителем

05.12.2013 - Компьютер самопроизвольно выключается

05.12.2013 - Почему не запускается компьютер?

27.11.2013 - Canon Legria HF R406 - Описание видеокамеры

27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer

2011 г., «VisMech.ru»