Осваиваем HTML. Обманчивая красота фреймов

Вспомните, как туристы, наперебой щелкая фотозатворами, торопятся сохранить хоть крохи отпускной радости, солнца, счастья! Как будто все это можно смотать в рулончик пленки и положить в карман...
Вам не кажется, что посетители сайтов частенько делают нечто подобное?
Вспомните, как туристы, наперебой щелкая фотозатворами, торопятся сохранить хоть крохи отпускной радости, солнца, счастья! Как будто все это можно смотать в рулончик пленки и положить в карман...
Вам не кажется, что посетители сайтов частенько делают нечто подобное?
Ну, конечно же, делают: сохраняют понравившиеся веб-страницы. Причем с гораздо большим успехом. Но иногда случаются промашки. Бывает, что сохраняется не весь код, а какой-то непонятный обрывок, и в окне браузера вместо яркой и емкой страницы видим окно, разделенное на две-три части, в каждой из которых написано: "Невозможно отобразить страницу". И длинный список бесполезных советов...
Когда подобное случается с фотографиями, и вместо довольных физиономий видишь только собственные пальцы сквозь проявленную пленку, как правило, все ясно: засветка. То ли пленка старая, то ли "мыльницу" пора на мыло. Но почему не сохраняется веб-страница? Точнее, почему одни страницы сохраняются, а другие нет? При более пристальном рассмотрении выясняется, что на самом деле сохранить такие страницы можно. Нужно только сохранять все, а не только HTML-код. В Internet Explorer для этого используется режим "Веб-страница, полностью".
Результат такого сохранения - целый выводок файлов, один из которых - "главный" - вытягивает в окно браузера остальные.
Этот "главный" файл обычно самый маленький и содержит примерно такой код:

<FRAMESET параметры>
<FRAME src="source1.htm" name="frame1">
<FRAME src="source2.htm" name="frame2">
...
</FRAMESET>


Первое, за что цепляется глаз в этой абракадабре - имена файлов. Именно эти файлы "выкачиваются" из интернета вместе с "главным". Вот они-то, как правило, и содержат нужную информацию.
Что же, в таком случае, содержится в "главном" файле?
Фреймовая структура.
Ну вот, еще один терминологический монстр.
Но, с другой стороны, надо же это как-то называть!
Собственно, все беды от того, что слово фрейм разделило судьбу слова файл: оба они так и остались без нормального перевода на русский. Результат - барьер между теми, кто уже освоил эту премудрость (кстати, в остальном несложную), и теми, кто еще не дошел до этого блаженного состояния. Подозреваю, что именно подобным барьерам обязано своим появлением слово "чайник" в применении к homo sapiens.
Но вернемся к нашим баранам.
У английского слова frame слишком много вариантов перевода на русский - "скелет", "костяк", "каркас", "рама"... И это далеко не все, а только наиболее употребительные. Остановимся на последнем варианте - "рама", "рамка".
Веб-дизайнеры любят делить окно браузера на более мелкие области и размещать в них логически обособленные части веб-страницы. Получается и красиво, и удобно. Один из способов такого разбиения - таблицы. Но у него есть свои недостатки. Главный из них - отсутствие прокрутки. Если содержимое ячейки не помещается в ней, то либо ячейка расширяется, либо посетитель чего-то не увидит. Средства стандартного HTML не позволяют снабдить каждую ячейку своей полосой прокрутки.
И тут-то на помощь приходят фреймы.

Фреймовая структура
Как явствует из приведенного выше примера, фреймовая структура состоит из нескольких файлов, объединенных при помощи конструкции < FRAMESET > (рис. 1 ).
Иллюстрация: L_frameset.cdr Рис. 1. Фреймовая структура объединяет отдельные файлы с HTML-кодом
Предположим, нам нужно сделать сайт некоей фирмы, страницы которого делятся на две части: в левой находится одна и та же панель ссылок, а в правой - содержимое, которое меняется от страницы к странице.
Те, кто регулярно читает статьи цикла "Осваиваем HTML", вероятно, заметили сходство этого примера с описанным в предыдущем выпуске, посвященном таблицам. Это неудивительно: фреймы и таблицы занимают в виртуальном мире очень близкие ниши и часто соперничают за место под солнцем. Что ж, попробуем:

<FRAMESET> <FRAME src="references.htm"> <FRAME src="news.htm"> </FRAMESET>


Ах нет, конечно же, так ничего не выйдет. Кроме самой фреймовой структуры, нужны еще сами файлы references.htm и news.htm. Но все равно ничего не получается! Ссылки видны, а новости - нет.
Почему не видно второго фрейма?
Потому что мы не задали параметры фреймовой структуры, в частности - способ разбиения окна на фреймы (вдоль или поперек) и размеры областей.
Этот способ задается параметром cols при вертикальном разбиении (на столбцы) или rows - при горизонтальном (на строки). Значениями этих параметров служат размеры областей - высота и ширина, соответственно.
Существует несколько способов задать эти размеры.
В пикселях. Например, так:

<FRAMESET cols=250,550>
<FRAME src="references.htm">
<FRAME src="news.htm">
</FRAMESET>


Соответственно, если окно делится на три фрейма, то после знака "=" будут идти через запятую три цифры. И так далее...
Конечно, это неудобно. Хотя бы потому, что размеры окон у разных посетителей разные. А если у браузера что-то не сходится, то он делит окно по-своему.
В процентах. Это уже лучше. Считая, что ширина всего окна составляет 100%, можем разместить фреймы по принципу "золотого сечения" (рис. 2):

<FRAMESET cols=30%,70% >




Рис. 2. Двухфреймовая страница

Неопределенный. А если нам все равно, какого размера будут области? Нам нужно только указать, сколько их, а там уж пускай пользователь сам разбирается. Если ему что-то не видно - пусть возьмет в руки мышку и перетащит границу туда, куда хочет.
Можно и так: "звездочка" вместо размера фрейма указывает именно на это. Например, в этом случае окно браузера разделится на две равные части:

<FRAMESET cols=*,* >


Комбинированный. Описанные выше способы редко применяются в чистом виде. Гораздо чаще встречаются их комбинации. В самом деле, если мы хотим разделить окно на две части, из которых одна занимает 30% окна, зачем высчитывать и указывать явно, что вторая часть занимает 70%? Гораздо проще и логичнее написать, что первая часть занимает 30%, а вторая - все оставшееся пространство:

< FRAMESET cols=30%,* >


Наконец, есть еще один любопытный способ комбинированного задания размеров - специально для тех, кто не в ладу с процентами. Если перед "звездочкой" стоит цифра n, то окно делится так, чтобы эта часть была в n раз больше, чем остальные. Например:

<FRAMESET cols=*,2* >


означает, что окно будет поделено на две части, из которых вторая вдвое больше первой (соответственно, первая часть займет 1/3, а вторая - 2/3 ширины окна).
Ну, хорошо, а как разбить окно и по горизонтали, и по вертикали? Например, поместить вверху узкую горизонтальную панель с названием фирмы, а под ней две вертикальные: поуже - со ссылками и пошире - с новостями?
Можно ли сделать, например, так:

< FRAMESET rows=100,* cols=*,2* >


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

<FRAMESET rows=100,*>
      <FRAME src="head.htm">
      <FRAMESET cols=*,2*>
            <FRAME src="references.htm">
            <FRAME src="news.htm">
      </FRAMESET>
</FRAMESET>


А как же ссылки?
Да, в какой же из частей окна теперь будут выводиться страницы, на которые посетитель перешел по гиперссылке?
Эта задача решается при помощи именованных фреймов. Имя фрейму присваивают при помощи параметра name тега <FRAME>:

<FRAME src="news.htm" name=mframe >

В данном случае mainframe - имя правого фрейма, предназначенного для основной информации. Чтобы при переходе по ссылке новая страница открывалась на том месте, где раньше были новости, нужно воспользоваться параметром target тега <A >:

<A href="prod.html" target=mframe>Наша продукция</A>


Имена фрейма строятся по тем же правилам, что и подавляющее большинство компьютерных имен: они состоят из латинских символов и цифр без пробелов (первый символ - буква), должны быть уникальными в пределах данной фреймовой структуры. Вместо имен значениями параметра target иногда служат такие ключевые слова: Здорово! Настолько здорово, что немедленно возникает идея: а можно по одной ссылке обновить сразу несколько фреймов? И тут же вянет: нельзя. То есть, конечно, можно, но уже другими средствами. Например, при помощи JavaScript.

Если браузер не поддерживает фреймы
Говорят, что существуют браузеры, в которых фреймы не отображаются. Мне такие не попадались. Может, слишком молода... Или мой компьютер слишком молод. Однако на тот случай, если у посетителя компьютер постарше, можно предусмотреть альтернативный код страницы, без фреймов. Этот код заключается между тегами <NOFRAMES >:

<FRAMESET rows=70,* frameborder=0 noresize border=0>
      <FRAME src="head.htm" scrolling=no>
      <FRAMESET cols=*,2*>
            <FRAME src="references.htm">
            <FRAME src="news.htm" name=mframe>
      </FRAMESET>
<NOFRAMES>
</td></tr></table>
            У вас слишком старая версия браузера,
            поэтому всех красот этой страницы вы не увидите :(
</NOFRAMES>
</FRAMESET>


Рамки и цвета
За наличие, ширину и цвет рамок фреймов "отвечают" параметры framespacing, border, frameborder и bordercolor. Первые два употребляются только в теге ; последние - в , где они описывают вид всей структуры, и в , где с их помощью можно переопределить вид данного фрейма. Кроме того, в теге есть параметры noresize и scrolling, определяющие подвижность рамки и режим отображения полосы прокрутки (табл. 1).
Удачное сочетание этих параметров может сделать страницу прекрасной, а неудачное - отвратительной. Как добиться первого и избежать второго? Для этого нужно всего лишь проверять, как выглядит то или иное "украшение" при разных размерах окна и шрифта. А можно сделать так, чтобы все фреймы были одного цвета, причем этот цвет задавался в одной точке кода? Например, так:

<BODY bgcolor=pink>
<FRAMESET rows=100,*>
      <FRAME src="head.htm">
      <FRAMESET cols=*,2*>
            <FRAME src="references.htm">
            <FRAME src="news.htm">
      </FRAMESET>
</FRAMESET>
<BODY>


Нет, нельзя. Тег <FRAMESET> нельзя располагать внутри <BODY>. Более того, тега <BODY > в файлах, описывающих фреймовую структуру, часто вообще нет.
Как же быть с цветом и другими общими параметрами?
К сожалению, никак - только указывать в каждом фрейме отдельно. Или воспользоваться каскадными таблицами стилей. В одном из следующих выпусков мы поговорим о них.

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

<BODY bgcolor=pink>
<H1 align=center>Название фирмы</H1>
<TABLE>
<TR>
<TD>
<A href="prod.htm" >Наша продукция</A>
<P><A href=serv.htm>Наши услуги</A>
<P><A href=price.htm>Прайс-лист</A>
<P><A href=contacts.htm>Адреса и телефоны</A>
<P><A href=history.htm>История компании</A>
<P><A href=press.htm>Для прессы</A>
<P><A href=map.htm>Карта сайта</A>
</TD>
<TD>
<H3 align=center> Новости <H3>
<P><IFRAME src=news.htm>
Здесь должен был быть плавающий фрейм.
Но ваш браузер его не поддерживает. Извините.
</IFRAME> </TD></TR>
</TABLE>
</BODY>




Рис. 3.
"Плавающий" фрейм

Таблица 1. Параметры тегов <FRAMESET>, <FRAME> и <IFRAME>
Параметр Значения Описание <FRAMESET> <FRAME> <IFRAME>
rows пикс., %, * размеры горизонтальных областей + - -
cols пикс., %, * размеры вертикальных областей + - -
framespacing пикс. ширина области между фреймами + - -
border пикс. ширина рамок фреймов + -
frameborder* yes/no или 1/0 наличие рамок у фреймов:
yes (1) - отображать рамки;
no (0) - не отображать
+ + +
bordercolor #RRGGBB цвет рамки фрейма + + -
scrolling yes/no/auto режим отображения полосы прокрутки:
yes - полоса прокрутки есть всегда;
no - никогда;
auto - по мере необходимости (по умолчанию)
- + +
noresize - запрет на изменение размера фрейма при помощи мыши - + -
marginwidth пикс. расстояние между содержимым и боковыми границами фрейма - + +
marginheight пикс. расстояние между содержимым и верхней и нижней границами фрейма - + +
name имя/ключевое слово имя фрейма для ссылки на него из других документов с помощью параметра target тега <A>. - + +
src URL файл, который будет загружаться в данный фрейм при открытии страницы. Обязательный параметр - + +
height пикс., % высота "плавающего" фрейма - - +
width пикс., % ширина "плавающего" фрейма - - +


Восьмая статья из цикла для начинающих веб-дизайнеров. Начало см. в №4/2001.

Елена ПОЛОНСКАЯ