Суть фреймов в принципе проста: страница делится на несколько окон, в каждое
из которых загружается своя страничка (или картинка), со своим собственным адресом.
К примеру, в левом окне - "vasja.html", а в правом
- "pupkin.html" (которая физически может находиться
где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться
на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать
третью, в которой и будут определяться размеры и свойства этих окон. Для этого
используются только два тега - <FRAMESET>
и <FRAME> . Чтобы их объяснить, рассмотрим
пример:
Во-первых, создадим два файла - vasja.html и pupkin.html:
< html>
<head>
<title>фрейм</title>
</head>
< body> Меня зовут Вася! </body>
< /html> |
< html>
<head>
<title>фрейм</title>
</head>
< body> А фамилия моя Пупкин. Это звучит круто!</body>
< /html> |
Теперь делаем третий файл, назовем его index.html
(назвать можно и по другому):
<html>
<head>
<title>Страница с фреймами!</title>
</head>
<frameset cols="50%,50%">
<frame src="vasja.html">
<frame src="pupkin.html">
</frameset>
</html>
Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги <body>
и </body>. Можно сказать, их роль выполняет
тег <frameset>, хотя это не совсем верно.
Тег <frameset> (переводится как "набор фреймов")
с аттрибутом cols="50%,50%"
указывает браузеру, что страница должна быть поделена на два окна (фрейма),
каждый шириной в 50% от ширины страницы. Тег <frame>
определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего
тега). В данном случае указано, что содержимым первого фрейма является файл
vasja.html, второго - файл pupkin.html (фреймы
считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется
в новом окне). Все просто! Еще несколько примеров:
|
20%
30%
50%
|
Три фрейма разной ширины.
<frameset cols="20%,30%,50%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset> |
25%
75%
|
Фреймы можно расположить рядами так же легко, как и столбцами.
Просто меняем аттрибут cols на rows:
<frameset rows="25%,75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset> |
Значения аттрибутов cols и rows
могут выражаться не только в процентах. cols="150,*,100"
- страница разделена на три столбца, где ширина левого 150
пикселов, правого - 100
пикселов, а средний столбец - это все оставшееся между ними место (знак *).
Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину
(или высоту) одного из них определить значком *.
Можно, например, написать cols="150,550,100",
и все будет выглядеть отлично на вашем мониторе с разрешением 600*800.
Но стоит только изменить разрешение, и картина полностью изменится. Потому-то
и рекомендуется использовать "звездочку".
|
200
*
100
|
Пример:
<frameset cols="200,*,100">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset> |
|
150
*
2*
|
Можно устанавливать пропорции для окон. В этом примере левый фрейм будет
шириной в 150 пикселов, а остальную часть
страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет
в 2 раза шире первого.
<frameset cols="150,*,2*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset> |
|
*
15%
3*
|
То же, но для рядов: 2-й фрейм занимает 15%
от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
<frameset rows="*,15%,3*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset> |
Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные
конструкции страниц. Рассмотрим несколько примеров:
|
40%
60%
*
|
<frameset rows="25%,*">
<frameset cols="40%,60%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
<frame src="page3.html">
</frameset> |
В этом примере окно разбито на два фрейма: верхний занимает 25%
высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два,
где левый фрейм занимает 40% от ширины окна, а
правый - 60 процентов.
Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее
из левого фрейма шириной 200 пикселов, содержащего
меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть
логотип высотой в 150 пикселов, размещенный в отдельном
фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время
будет оставаться на месте. Должно получиться следующее:
|
Logo
Text
Menu
Banner
|
<frameset cols="200,*">
<frameset rows="150,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
< frameset rows="*,70">
<frame src="text.html">
<frame src="banner.html">
</frameset>
</frameset>
|
Рассмотрим аттрибуты тегов <frameset> и
<frame>. Первый из них, <frameset>
- парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать
следующие аттрибуты:
- cols и rows -
применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание!
Не рекомендуется одновременное использование аттрибутов cols
и rows, т.е. в некоторых браузерах конструкция
<frameset cols="50%,50%"
rows="30%,70%">
может привести к непредсказуемым результатам;
- border="x" - толщина
рамок фреймов в пикселах;
- frameborder="no|yes"
или "0|1" - определяет
отсутствие (no или 0)
или наличие (yes или 1)
рамок в определенном фреймсете. Например, таким образом в предыдущем примере
можно было бы убрать только рамки между баннером и текстом и между логотипом
и меню, а между левым и правым фреймами оставить;
- bordercolor="#hhhhhh"
- цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное
слово (red, blue,
teal, olive и т.д.);
Тег <frame> может включать следующие аттрибуты:
- src="имя" - указывает
браузеру, что и откуда надо загружать в данный фрейм;
- name="имя" - присваивает
имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по
ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее
в следующем абзаце);
- marginwidth="x" -
величина отступа содержимого фрейма (текста, графики и т.п.) от границ по
горизонтали. Выражается в пикселах, минимальное значение 1;
- marginheight="y"
- величина отступа по вертикали. Минимальное значение также 1;
- scrolling="yes"
- определяет наличие полос прокрутки у данного фрейма. Возможные значения
аттрибута:
- yes - полосы прокрутки присутствуют обязательно;
- no - полосы прокрутки отсутствуют всегда
- независимо от того, вмещается ли документ в фрейм целиком или нет;
- auto - автоматический режим (значение
по умолчанию): полосы прокрутки появляются при необходимости, т.е. если
документ не вмещается в фрейм;
- noresize - наличие этого аттрибута запрещает
изменение размеров фрейма пользователем (обычно любую границу фрейма можно
с легкостью переместить мышкой).
Как указывалось выше, аттрибут name тега <frame> позволяет присвоить
каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из
другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется
содержимое правого). Как это сделать, рассмотрим на примере:
|
Меню
Урок 1
|
В левом фрейме у нас меню, а в правом - урок первый:
<frameset cols="200,*">
<frame src="menu.html">
<frame src="urok1.html" name="content">
</frameset>
|
Правому фрейму мы присвоили имя "content" (можно
любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:
<html>
<head>
<title>menu</title>
</head>
<body>
<a href="urok1.html" target="content">Урок
1</a>
<a href="urok2.html" target="content">Урок
2</a>
<a href="urok3.html" target="content">Урок
3</a>
<a href="urok4.html" target="content">Урок
4</a>
</body>
</html>
Теперь клик по ссылке "Урок 2" вызовет загрузку
страницы "urok2.html" в фрейме с именем "content"
(т.е. в правом фрейме). При отсутствии аттрибута target
(перводится с английского как "цель") загрузка произошла бы в левом фрейме,
где находится сама ссылка. Этот аттрибут в данном примере можно указать только
один раз - как аттрибут тега <base> , т.е.
все ссылки по умолчанию будут загружаться в фрейме с именем "content".
В таком случае текст будет выглядеть так:
<html>
<head>
<title>menu</title>
</head>
<body>
<base target="content">
<a href="urok1.html">Урок
1</a> <br>
<a href="urok2.html">Урок
2</a> <br>
<a href="urok3.html">Урок
3</a> <br>
<a href="urok4.html">Урок
4</a> <br>
</body>
</html>
Кроме имени фрейма значением аттрибута target может
быть одно из следующих зарезервированных слов:
- _blank - браузер должен открыть новое окно
и загрузить в него документ (на который была ссылка) - обычно используется
для того, чтобы посетитель не уходил по ссылке с вашего сайта;
- _top - браузер должен загрузить документ в
этом же окне, предварительно очистив его от всех фреймов - аттрибут с этим
значением надо указывать обязательно, если вы делаете ссылку на другой сайт
из фрейма. В противном случае этот сайт будет загружен в фрейме;
- _self - документ загружается в том же фрейме,
где находится сама ссылка. Может потребоваться в случае, если в тексте есть
строка
;
- _parent - документ загружается в родительский
фреймсет текущего фрейма.
Все вышеперечисленные значения должны начинаться с символа подчеркивания и
набираться только прописными буквами.
Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры
могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для
них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта,
или хотя бы просто перечислить ссылки на страницы сайта. Пример:
<html>
<head>
<title>Уроки HTML</title>
</head>
<frameset cols="200,*">
<frame src="menu.html">
<frame src="urok1.html" name="content">
</frameset>
<noframes>
<body>
<p> Эта страница использует фреймы. Поскольку Ваш
браузер не может просматривать такие страницы, воспользуйтесь следующими ссылками:
<a href="urok1.html">Урок
1</a>
<a href="urok2.html">Урок
2</a>
<a href="urok3.html">Урок
3</a>
<a href="urok4.html">Урок
4</a>
</body>
</noframes>
</html>
В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только
фреймы с их содержимым и проигнорирует все, что находится между
<noframes> и </noframes> . Остальные
браузеры не обратят никакого внимания на содержимое контейнера
<frameset>, но воспоизведут содержимое <noframes>.
Еще одна причина, по которой следует обращать внимание на тег <noframes>
- далеко не все поисковые роботы понимают фреймы. Поэтому без <noframes>
ваша страница рискует остаться непроиндексированной.
Придерживайтесь следующего порядка размещения: сперва контейнер <frameset>,
а потом - <noframes> (т.е. как в примере).
В противном случае возможна ошибка Netscap'а.
Существует еще одна разновидность фреймов - встроенный фрейм (inline frame).
Он может быть вставлен непосредственно в текст страницы и выглядит следующим
образом:
Для встраивания такого фрейма используется тег <iframe>.
Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст
для браузеров, не поддерживающих фреймы. Аттрибуты:
-
src="filename.html"
- указывает адрес содержимого фрейма;
-
name="name" -
присвает имя фрейму;
-
width="x" - ширина
фрейма;
-
height="y" -
высота фрейма;
-
scrolling="yes|no|auto"
- наличие полос прокрутки;
-
frameborder="1|0|yes|no"
- наличие (yes или 1)
или отсутствие (no или 0)
рамки вокруг фрейма;
-
marginwidth="x"
- величина отступа содержимого фрейма от границ по горизонтали;
- marginheight="y" -
величина отступа по вертикали. Для примера выше был использован следующий
код:
<iframe src="iframe.htm"
width="300" height="70"
scrolling="auto" frameborder="1">
Ваш браузер не поддерживает фреймы. Здесь должен быть
размещен пример встроенного фрейма.
</iframe>
Размеры такого фрейма не могут изменяться пользователем. Поэтому аттрибут noresize
не используется.
И в заключение совет. Если ваш сайт будет построен с использованием фреймов,
то часто посетители будут к вам приходить с поисковиков, и чаще всего они будут
попадать на одну из внутренних страниц сайта. Естественно, сайт они увидят совсем
не в том виде, как это задумывалось вами. Чтобы этого не происходило, вставьте
в текст страниц такой код:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
document.writeln("Эту страницу лучше просматривать во
фрейме.");
document.writeln("Если ваш браузер поддерживает фреймы,
то");
document.writeln("<A HREF=\"index.html\">кликните
здесь.</A>");
// -->
</SCRIPT>
Или такой:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.html";
// -->
</SCRIPT>
Первый скрипт выводит предложение перезагрузить страницу, если она была загружена
не в фрейме. Второй делает то же самое, но без предупреждения.
Содержание
