Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"
Для чего применяются фреймы? Как правильно с ними работать? Когда их лучше избегать и какие подводные камни могут подстерегать нас на этом пути?
Для начала давайте решим, для чего используются фреймы. Они появились еще во второй версии Netscape Navigator-а и предназначались для облегчения навигации при создании страничек (так тогда казалось).
Техника использования фреймов заключается в том, что все окно броузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введен механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причем, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5... и т.д. Но пока не будем торопиться с обсуждением механизма работы фреймов, а поговорим об их недостатках и уместности применения.
Основные недостатки сайта, построенного с применением фреймов, следующие:
Честно говоря, есть очень мало задач, которые нельзя решить без использования фреймов. Первоначально введенные для того, чтобы облегчить создание механизма навигации по сайту, на данный момент они, по-моему, ясно показали, что не справляются с этой задачей. Для этой цели гораздо лучше подходит технология 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>
Обратите внимание на параметр name - он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился еще один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:
<a href="topic_1.htm" target="content">topic #1</a>
В качестве значения параметра указывается то самое имя, которое мы присвоили нашему фрейму. Таким образом, мы можем открыть любую ссылку из любого окна и в любом окне. Достаточно лишь знать его имя.
Кроме имен, определяемых непосредственно нами, есть часть уже определенных, и наиболее важные из них следующие:
До сих пор в качестве элементов контейнера <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.
Назад | Содержание | Вперед