Сайты - строим сами
Сайты - строим сами

Главная	Введение	Основы HТМЛ	Формат и цвет	Картинки и ссылки	Таблицы	Фреймы	Основы CSS

Вёрстка сайта	Формы в html

Что такое фреймы?

Это когда на одной странице открывается сразу две или больше. Экранное пространство делится на части и в каждой из них открывается отдельная страница.
<frameset cols="20%,*">
<Frame src="logo.html">
<Frame src="index.html"
</Frameset>

Это пример наипростейшего фрейма. Если к примеру автор сайта хочет, чтобы его логотип находился на странице постоянно. Настоятельно советую проверить этот код на практике. Как это сделать Вы уже знаете, не забудьте создать страницы с такими названиями как в примере или в коде вставить названия своих страниц.

Итак, более подробно, тег <frameset> определяте разбиение страницы на части, далее идет обязательный атрибут cols - колонки, то есть вертикальное деление или rows - похоже на русское "ров", то есть горизонтальное деление. Далее в кавычках указывается какое именно должно быть деление. В нашем примере cols="20%,*" - деление на две части одна 20% пространства, вторая что осталось. Деление может быть на большее количество частей и определяться в % или пикселях.

Затем уже знакомый нам атрибут border, то есть граница, если она не нужна, то border=0 или указать толщину линии границы в пикселях. С помощью не менее знакомого bordercolor границу можно ещё и раскрасить.

Для лучшего понимания придется создать действующую модель страницы с фреймами. Итак нам нужна страница с логотипом logo.html, страница с меню menu.html, главную страницу main.html, и пару рабочих 01.html и 02.html .

Создаем страницу с логотипом logo.html
<html>
<head>
</head>
<body bgcolor="gray">
<center>
<font size="7">Мой великолепный сайт</font>
</center>
</body>
</html>

Страница с фреймами будет называться index.html и содержать следующий код:

<html>
<head>
<title> Фреймы </title>
<frameset rows="30%,*">
<Frame src="logo.html">
<frameset cols="20%,*">
<Frame src="menu.html">
<Frame src="main.html" name="main">
</Frameset>
</Frameset>
</head>
<body>
</body>
</html>

Обратите внимание, всё, что касается фреймов помещается в голову страницы, между тегами <head> и </head>, одному из фреймов присвоено имя с помощью атрибута name, это сделано для того, чтобы все страницы грузились в этот фрейм(раздел, область) при нажатии ссылок в меню. А указание на это будет содержаться на странице с меню, которая выглядит так:
<html>
<head>
<base target="main">
</head>
<center>
<body bgcolor="silver">
<a href="main.html">Главная</a> <br> <br>
<a href="01.html">Первая</a> <br> <br>
<a href="02.html">Вторая</a>
</center>
</body>
</html>

В голове страницы дано указание в какую область загружать страницы по ссылкам. Это распространяется на все ссылки на странице меню, если в самой ссылке не будет указано иное. Но об этом чуть позже. Теперь сделаем три рабочих страницы. main.html будет выглядеть так:
<html>
<head>
</head>
<body>
<h1>Главная страница</h1>
</body>
</html>

А две другие будут отличаться только текстом между тегами <h1> и </h1> на странице 01.html напишите Первая страница, а на странице 02.html напишите Вторая страница. Проще всего создать одну а две других получить скопировав её в проводнике и заменив затем текст. Ну и переименовать, конечно не забыть. Если всё сделали верно, должно получиться следуещее:

Теперь об атрибутах. Если Вам не нужна полоса прокрутки (скроллинг), а зачем он к примеру в окне с логотипом, избавимся от него с помощью атрибута scrolling значения могут быть yes, no, auto.Например: <Frame src="logo.html" scrolling="no"> Кстати, обычно в качестве логотипа используется графический файл (рисунок). Как его вставить в тело страницы Вы уже знаете, а вот чтобы не было полей вокруг, используются атрибуты marginwidth="0" и marginheight="0". Картинка должна прижаться в левый верхний угол. Тут ещё важно чтобы размеры картинки и фрейма совпадали. Это достигается указанием размеров картинки на странице logo.html Например <img scr="logo.jpg" width="840" height="135"> и подбором нужного размера фрейма. Если же нужен и рисунок и текст тогда рисунок лучше вставить в тег <body background="logo.jpg">, как фоновый рисунок. Правда в этом случае нужен точный размер самого рисунка.

И вернёмся к атрибуту target, который указывает в какое окно загрузить страницу по ссылке. Он может применяться прямо в теле самой ссылки <a href="01.html" target="_top">Первая</a> в этом случае страница загрузиться во всё окно, браузера, фреймы исчезают, а, если target="_blank" (не упустите нижнее подчеркивание), страница загрузиться в отдельном окне. При значении target="_self", страница грузиться в то окно, в котором находиться ссылка. И наконец target="_parent", загрузка идет в окно, в котором были фреймы. Правда я как чайник так и не понял разницы между _top и _parent, если разберётесь сами, Напишите мне не сочтите за труд. Кроме того можно вставить в тело ссылки имя другого окна-фрейма, если таковые есть. Атрибут в теле тега имеет преимущество перед атрибутами в голове страницы.

Если говорить о фреймах вообще, то поначалу я был от них в полном восторге. Мне казалось очень удобным, что меню и логотип грузиться один раз, а потом меняешь только страницы. Даже сайт я начал конструировать с использованием оных. Но потом я уведел, что процентов 20-25 рабочего пространства обозревателя (браузера) постоянно занято тем, что уже не нужно это на большом мониторе, при высоком расширении. А, например, при расширении 800х600 занято уже процентов 30-40. Вобщем я от фреймов отказался, вы решайте сами.

Поделиться с друзьями На главную Дальше