Для начала давайте решим, для чего используются фреймы. Они появились ещЈ во второй версии 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>
<p>Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.</p>
</noframes>
</html>
И сразу напишем код для страничек, входящих в фреймовую структуру:
left.htm – страничка, содержащая меню
<html>
<head>
<title>Menu page</title>
</head>
<body>
<a href=”topic_1.htm” target=”content”>topic #1</a><br>
<a href=”topic_2.htm” target=”content”>topic #2</a><br>
<a href=”topic_3.htm” target=”content”>topic #3</a><br>
<a href=”topic_4.htm” target=”content”>topic #4</a><br>
</body>
</html>
right.htm – страничка, в которой будут отображаться основные статьи сайта
<html>
<head>
<title>Content page</title>
</head>
<body>
<p>Эта страничка будет грузиться по-умолчанию, и
на ней обычно размещают приветственный текст.</p>
</body>
</html>
Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> мы используем тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>. Давайте-ка подробнее разберЈм наш пример:
<frameset cols=”160,*”>
<frame src=”left.htm” name=”menu” scrolling=no noresize>
<frame src=”right.htm” name=”content” scrolling=no noresize>
</frameset>
В параметре тега <frameset> мы определяем, что страничка будет разделена по вертикали и состоять из двух колонок (если нам нужно разделить окно по горизонтали, то тогда вместо параметра cols нужно применять параметр rows).
В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделЈнные запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звЈздочки, обозначающей – “всЈ оставшееся пространство”. Вот примеры определения фреймов:
<frameset cols=”200,*”> – 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей;
<frameset rows=”25%, 50%, 25%”> – 3 строчки, высоты которых определены в процентах от высоты окна броузера;
<frameset rows=”*, 2* ,*”> – то же самое, что и предыдущая строчка, но записанная при помощи звЈздочек. Цифра перед звЈздочкой указывает количество повторов. Ширина одной звЈздочки определяется как среднее арифметическое между всеми звЈздочками в строке с учетом коэффициентов перед ними.
Как я уже сказал выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:
<frame src=”left.htm” name=”menu” scrolling=no noresize>
- 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>. В этом случае мы получаем т.н. вложенные фреймы. Вот пример:
<frameset rows=”40,*”>
<frame src=”up.htm” name=”logo” scrolling=no noresize>
<frameset cols=”160,*”>
<frame src=”left.htm” name=”menu” scrolling=no noresize>
<frame src=”right.htm” name=”content” scrolling=no noresize>
</frameset>
</frameset>
В данном случае определены три фрейма – один горизонтальный вверху, который мы можем использовать, например, как логотип. И два вертикальных, которые разделили второй горизонтальный фрейм.
В общем случае можно использовать сколько угодно фреймов (в пределах разумного, конечно).
Небольшое замечание. В принципе, в качестве источника фрейма может быть указана не HTML-страничка, а рисунок в формате GIF или JPEG, но применение такого механизма считается дурным тоном.
Теперь о подводных камешках. Самый большой из них следующий – Netscape Navigator неточно соблюдает ширину фрейма в пикселах и может принимать лишь некие кратные шаги. Поэтому в случае, если возникла такая проблема, нужно просто подкорректировать ширину фрейма под стандарты Netscape.
Кстати, рамку фрейма можно убрать, указав параметр frameborder=0.
И ещЈ одно! Для броузеров, которые не понимают фреймов, есть специальный тег <noframes>. Как раз он и определяет, что увидит пользователь с броузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, подобную той, что написал я, либо указывают список основных разделов сайта, чтобы человек всЈ же смог просмотреть странички.
Dixi.
www.cherry-design.spb.ru