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

Если все же решено применять фреймы, то давайте разберемся с тем, как правильно писать 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="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.

Содержание раздела