Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей - фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>:
rows - указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%.
cols - указывает разбить окно на вертикальные области.
Внутри тегов <frameset></frameset> располагаются одиночные теги <frame>, причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега <frame> на примерах.
src - самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:
А теперь на странице menu.html сделаем первый пункт меню ссылкой на эту страницу и укажем, что открывать страницу other.html следует во фрейме с именем content:
Теперь при щелчке по первому пункту меню, во фрейм content будет загружаться страница other.html
Параметру target можно задать и другие значения: _self - загружать в тот же фрейм из которого ссылаются. _top - загружать в полное окно, закрывая остальные фреймы (обычно используется для ссылок на другие сайты).
marginwidth - определяет отступ во фрейме от левого края до содержимого.
marginheight - определяет отступ во фрейме от верхнего края до содержимого.
scrolling - если содержимое фрейма не помещается в окно, то будут появляться полосы прокрутки, иногда это нарушает дизайн. Этот параметр помогает управлять отображением полос прокрутки. Может принимать значения: yes, no, auto.
noresize - если установить курсор мыши на рамки фрейма, то можно выполнить его перемещение. Для предотвращения этой возможности и используется этот параметр.
Давайте внесем последние четыре параметра в код нашей страницы index.html:
Теперь, когда вы имеете представление о фреймах, пришло время сказать о достоинствах и недостатках сайтов с фреймовой структурой.
Безусловным преимуществом является сокращение количества загружаемой на компьютер пользователя информации. Ведь шапка и меню сайта загружаются только один раз, а далее меняется только контент. Конечно, это сокращает время загрузки.
Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться.
Во-вторых, наше меню лежит в отдельном файле. А это значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее, ведь никаких ссылок и пунктов меню на этой странице нет.
И наконец, фреймовую структуру поддерживают не все браузеры. Поэтому существуюте теги <noframes> </noframes>, они располагаются внутри тегов <frameset> </frameset> и содержат альтернативную информацию для браузеров не поддерживающих фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них.
Отсюда вывод - не используйте фреймы без острой необходимости.
Примеры фреймовых структур
Как вы помните за разделение на фреймы отвечают два параметра: rows и cols. Комбинируя их, можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.
Получим два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство. Второй горизонтальный фрейм разобьем на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место. Это достигается с помощью вложенных тегов <frameset> </frameset>.
Получим два вертикальных фрейма. Ширина первого - 25%, а второго - все остальное пространство. Второй вертикальный фрейм разобьем на два одинаковых горизонтальных.