Фрейм - это неподвижная часть (неподвижное окно) web-страницы, которая
является элементом окна броузера. В каждом фрейме отображается свой
документ HTML.
Пример использования фреймов - область элементов перемещения, которая
обычно располагается слева или справа, а иногда снизу или вверху.
Создание стандартной страницы с фреймами требует по крайней мере трех
oтдельных страниц HTML.
Во-первых, нужен файл набор фреймов
(frameset),
невидимая страница кода HTML, который управляет расположением и работой
фреймов (назовем ее установочной, иногда ее называют страница-контейнер).
Во-вторых, нужны отдельные страницы кода для каждого фрейма.
Итак, если самая простая страница с фреймами содержит две видимые
страницы, то всего получается три страницы HTML; если в странице есть три
фрейма, всего получается четыре страницы и т. д.
В любом случае будет создаваться невидимая страница набора фреймов -
установочная страница.
В файле набор фреймов прежде всего определяется тем, какие строки и/или столбцы будут создаваться и какими страницами HTML будут заполняться эти строки или столбцы. Эти задачи выполняются с помощью двух основных тегов:
Примечание
У тега <frame> нет соответствующего закрывающего тега </frame>. Вся информация для отдельных фреймов располагается внутри тега и считается законченной, когда введена правая угловая скобка (>).
Как и таблицы, фреймы состоят из сетки столбцов и строк. Таблицы могут
быть сложными, с ячейками, занимающими несколько столбцов или строк.
В таблицах выбор горизонтальных и вертикальных точек отсчета лежит на
программисте. Фреймы более просты. Столбец несомненно вертикален, строка
- горизонтальна.
Синтаксис также понятен. Строки (rows) обозначаются атрибутом
rows, столбцы (columns) - атрибутом cols. Размер столбцов и
строк может быть задан как в пикселях, так и в процентах. Например,
cols="220, *" создает столбец слева шириной 220 пикселей и
столбец справа (обозначенный звездочкой), занимающий оставшееся
пространство.
Чтобы добавить дополнительные столбцы, просто определите
их по очереди. Например, если надо создать четыре столбца равной ширины,
можно применить такой синтаксис: соls5="25%,25%,25%,25%".
Если вы хотите создать строки, просто измените синтаксис на
rows="220, *", и в результате получится строка в верхней части
экрана высотой 220 пикселей. Чтобы создать четыре отдельных строки равной
высоты, понадобится код rows= "25%,25%,25%,25%".
Для создания комбинаций столбцов и строк надо просто расставить значения
в соответствующие теги.
Простой файл набора фреймов выглядит следующим образом:
<html> <frameset cols="220,*"> <frame src="leftmenu.htm"> <frame src=="welcome.htm"> </frameset> </html>
Конечно, чтобы страницу можно было просмотреть, файлы leftmenu.htm и welcome.htm должны быть доступны.
Аналогично организована и наша установочная страница. Результат вы видете в окне своего броузера.
Для тегов <frameset> и <frame> существует несколько мощных атрибутов:
Атрибуты тега <frameset>
Для управления отдельными фреймами используются следующие атрибуты тега <frame>:
Совет
Все фреймы обязательно должны иметь имена, если вы хотите, чтобы в них могли грузиться другие страницы.
Посмотрим в качестве примера первую страницу этого сайта, в котрой определяется набор фреймов.
<html>
<head>
<title>Изучаем HTML!</title>
</head>
<frameset cols="120,*" frameborder="0" framespacing="0">
<frame src="leftmenu.htm" name="Menu" scrolling="auto">
<frameset rows="44,*" frameborder="1" framespacing="0">
<frame src="navbar.htm" name="Navbar"
scrolling="no" noresize>
<frame src="welcome.htm" name="RIGHT">
</frameset>
<noframes>
<body>
Для просмотра необходим броузер, поддерживающий фреймы.
</body>
</noframes>
</frameset>
</html>
Вы заметили незнакомые теги <noframes> и </noframes>?
Поскольку теги поддерживаются не всеми броузерами, то необходимо использовать тег <noframes> перед тегом тела <body>, а в теле программы, т.е. между тегами <body> и </body>, можно вставить сообщение, которое будет появляться в окне, если броузер не поддерживает фреймы.
В нашем примере, как легко видеть в окне вашего броузера, организовано
три фрейма: "Menu","Navbar" и "RIGHT". Это имена фреймов.
Фрейм "Menu" - вертикальный - располагается в левой стороне окна
броузера, занимая постоянную ширину в 120 пикселей. Он не очерчен границей и не
имеет пустого пространства вокруг него. Исходным HTML-файлом для этого
фрейма является файл "leftmenu.htm" - меню (карта сайта).
Если этот файл не помещается на одной
странице вашего броузера (это зависит от вида броузера и его настроек),
то разрешена прокрутка информации в окне фрейма (атрибут scrolling="auto").
Фрейм "Navbar" - горизонтальный - расположен в верхней части окна
броузера, занимает в высоту 44 пикселя, очерчен границей. Запрещено менять
размеры этого фрейма (noresize),запрещена прокрутка (scrolling="no").
Исходным HTML-файлом для этого
фрейма является файл "navbar.htm". В нем описаны 3 навигационные "кнопки",
которые вы сейчас видете на экране: "Добро пожаловать!", "Содержание",
"Гостевая кника". Не конструктивно, не правда ли? Увы! Это были мои
первые шаги!
И наконец, самый информационно наполненный фрейм - "RIGHT". В момент
загрузки сайта в нем показывается файл "welcome.htm" (Добро пожаловать),
а потом...
Потом в эту область
окна броузера будет загружаться HTML-файл, который "закажет" пользователь,
щелкнув по пункту меню (ссылке) во фрейме "Menu".
Таким образом реализуется механизм управления навигации по сайту.
Причем при каждом щелчке по пункту меню, содержимое выводится в область
фрейм "RIGHT". В коде HTML файла "leftmenu.htm" это организовано так:
... <A href="content.htm#метка_0" target ="RIGHT" >Основы HTML</A><BR> <A href="content.htm#метка_2" target ="RIGHT">Приемы создания макетов</A><BR> <A href="content.htm#метка_3" target ="RIGHT">Работа с HTML</A><BR> <A href="content.htm#метка_4" target ="RIGHT">Каскадные таблицы стилей</A><BR> <A href="content.htm#метка_5" target ="RIGHT">Динамический HTML</A><BR> <A href="content.htm#метка_6" target ="RIGHT">Дизайн Web-страницы</A><BR> ...
Заметили - добавился ещё один атрибут в теге ссылки target ?
Именно атрибут target= "RIGHT" отвечает за то, в какой фрейме (окно) будет загружаться файл по ссылке.
Ссылки на фрейм имеют формат:
<a href="адрес_файла" target="имя_фрейма">ссылка</a>
В качестве значения атрибута target указывается то самое имя, которое
мы
присвоили нашему фрейму. Таким образом, мы можем открыть любую ссылку из
любого окна и в любом окне (фрейме). Достаточно лишь знать его имя.
Кроме имён, определяемых непосредственно нами, есть часть уже определённых, стандартных имен:
При создании этого сайта в качестве имени фрейма было использовано общее имя названия окна на странице Интернет-страницы (файл ref_internet.htm), а именно:
... <a href="http://w3.org/Style/CSS" target="_blank">http://w3.org/Style/CSS </a> ...
Таким образом обеспечивается загрузка спецификации многоуровневых
таблиц на сайте Консорциума W3C в новое окно.
Убедитесь сами!
Совет
Рекомендуется использовать теги <noframes> и </noframes> в установочной странице, а между ними помещать ссылки на другие страницы сайта. По этим ссылкам может пройтись поисковый робот и проиндексировать ваш сайт.
Совет
Для создания механизма навигации по сайту попробуйте использовать технологию SSI.Продолжение следует!
