Шаг 11 - Фреймы - это модно и легко

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

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

Разбиение задается с помощью тега <frameset>, используемого вместо <body>. У него есть следующие атрибуты :

rows
Задает разбиение на "строки",т.е. разбивает окно на горизонтальные области.
cols
Задает разбиение на "колонны",т.е. разбивает окно на вертикальные области.
frameborder
Имеет значение yes или no. Устанавливает признак окантовки фрейма.
border
Задает ширину окантовки фрейма в пикселах.
bordercolor
Задает цвет окантовки фрейма. Цвет задается как обычно в Hex виде.
Тут надо поговорить подробнее о том как задать разбиение с помощью cols и rows.

Для начала пример:

  <frameset cols=100,10%,*>
  ....
  </frameset>
Разбить окно можно на очень большое количество областей. После знака "=" указываются все размеры этих областей через запятую. Размер области может задаваться тремя способами: непосредственный размер в пикселах, размер в процентах от размера окна и произвольный. Именно так у меня указано в примере. В данном случае окно разделится на 3 вертикальные части, первая будет 100 пикселов в ширину, вторая 10% от размера окна, а размер последней будет зависеть от размеров предыдущих, т.е. ей останется все остающееся до полного размера окна.

Теперь важно указать страницы, которые будут загружаться во все области. Для этого предназначен тег <frame>, который должен находится внутри раздела <frameset>. У него также есть свои параметры.

name
В этом параметре указывается имя области, по которому потом можно будет к ней обращаться. Это имя должно быть уникальным и не должно повторяться.
src
Это источник этой области, т.е. имя файла или URL документа, который будет сюда загружен.
marginwidth и marginheight
Задают вертикальный и горизонтальный размер границы фрейма в пикселах.
frameborder
Устанавливает признак отображения границы фрейма. Имеет значение yes или no.
scrolling
Имеет значения yes, no или auto. Отвечает за использование скроллинга области, если ее сожержимое полностью не влезает. При использовании значения yes скроллинг будет присутствовать всегда, при auto скроллинг будет появляться только когда он нужен, ну а при no вы его не увидите никода.
noresize
Запрещает изменение размера фрейма. По умолчанию размер каждой области можно менять тасканием за границы мышкой.
bordercolor
Задает цвет окантовки фрейма.
До сих пор существуют браузеры, которые не поддерживают фреймы, но к ним как правило относятся текстовые или совсем старые. Специально для таких существует тег <noframes>...</noframes>, внутри которого размещается содержимое страницы не использующей фреймы. Как правило там попросту вежливо бракуют браузер посетителя, и предлагает его выбросить, естественно не забыв про указание ссылки, где взять новый :-) !!!

Теперь примерчик покрупнее, уже работоспособный:

<html>
 <frameset cols=100,* border=0>
   <frame name="menu" src="menu.html" noresize scrolling=no>
   <frame name="mainframe" src="title.html" scrolling=auto>
 </frameset>
 <noframes>
   <p>Sorry, your browser don't support frames mode.
   <br>Change Browser and come again !!!
 </noframes>
</html>
В этом примере мы разбиваем окно на 2 вертикальные части, и занружаем в них два соответствующих файла.

Раньше, когда я еще плохо знал фреймы, чтобы еще раз разбить фрейм я создавал второй файл, и загружал его. Но вскоре обнаружилось, что теги <frameset> могут быть вложенными. Таким образом разбивание стало для меня еще более простым.

Пример:

<html>
 <frameset cols=100,* marginwidth=0 marginheight=0>
   <frameset rows=100,* border=0>
     <frame name=left_up src=leftup.html noresize scrolling=no>
     <frame name=left_down src=leftdown.html scrolling=yes>
   </frameset>
   <frame name=right src=right.html scrolling=auto>
 </frameset>
 <noframes> 
   HE-HE-HE !!! You have COOL Browser !!!
 </noframes>
</html>

В этом примере будут создаваться две колонны, и при этом левая разобьется еще на две части. Я постарался подобрать нормальные имена, чтобы все было ясно.

Что-же делать с ссылками ???

Фреймы несколько усложняют работу с ссылками, но не на много. В каждом фрейме может содержаться своя страница, и на каждой из них могут быть (да впрочем и есть) различные ссылки. Если вы нажмете на любую из них, то этот документ будет загружаться в этом же фрейме, но что делать если ее надо загрузить в другом (например соседнем) фрейме ??? Ведь это все создавалось, для совметного использования, а не по отдельности !!! Иначе можно было бы просто открыть много окон.

А для этого мы как раз и присваивали каждому фрейму свое уникальное имя. Теперь настало время им воспользоваться !!!

Итак, чтобы загрузить страничку в определенном фрейме надо при описании ссылки воспользоваться атрибутом target, в котором как раз и указать имя требуемого фрейма.

Пример:

  <a href="left.html" target="left1">А эта ссылка загрузится
   во фрейме с именем left1 !!!</a>

Для того, чтобы обеспечить большую гибкость при работе с фреймами существуют несколько зарезервированных браузером имен, которые вы не можете использовать. Это имена _blank, _top, _self, _parent.

_top, _parent - эти имена используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются.

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

_blank - для загрузки страницы создается новое окно.

Фреймы очень помогают при создании хорошей навигации, т.к. не приходится много раз переписывать один и тот же код с кнопками и другими элементами. А также не придется сто раз загружать тоже самое. Для этого делаете один фрейм с ссылками (кнопками), а другие для оформления и загрузки страниц. Это намного проще.


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.