Фреймы при создании сайта
Использование парного тэга frame позволяет помещать в окна одной страницы несколько отдельных страниц, произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Парный тэг frameset в данном случае заменяет тэг body.
Внутри пары <frameset> могут быть использованы только тэги <frame>, <frameset> и <noframes>. По сути создается несколько отдельных страниц фреймов, которые выводятся на экран одновременно в виде нескольких окошек одного документа. Другими словами, прежде чем организовывать отдельные документы в виде фреймов одного документа, необходимо прежде всего создать сами документы. Для пользователей, чей броузер не поддерживает фреймы, необходимо создать альтернативный документ или сообщение о том, каким броузером нужно воспользоваться для прoсмотра данного документа и заключить его в тэги <noframe>
<frameset> позволяет задать относительный и абсолютный размер фреймов и может иметь атрибуты:
border - задает толщину обрамления в пикселах для всех производных фреймов.
Пример:
<frameset border="число">
cols - задает количество и размер колонок в создаваемом наборе кадров в пикселах, процентах или пропорционально другим кадрам. Значения ширины различных кадров перечисляются в кавычках и через запятую.
Пример:
<frameset cols="число, число или %">
rows - задает количество и размер строк в создаваемом наборе кадров в пикселах, процентах или пропорционально другим кадрам. Значения высоты различных кадров перечисляются в кавычках и через запятую.
Пример:
<frameset rows="число, число или %">
frameborder - задает наличие или отсутствие обрамления у фреймов. Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
Пример:
<frameset frameborder="1 или 0">
<frame> - определяет содержимое заданных фреймов. Он может иметь атрибуты:
src - задает документ, который должен быть отображен во фрейме.
Пример:
<frame src="URL">
marginheight - задает толщину верхнего и нижнего обрамления в пикселах.
Пример:
<frame marginheight="число">
marginwidth - задает толщину правого и левого обрамления в пикселах.
Пример:
<frame marginwidth="число">
name - задает любое имя фрейма, по которому можно будет обращаться к нему с помощью атрибута target в ссылках <a href>. Но существует четыре зарезервированных имени:
noresize - лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши.
Пример:
<frame noresize>
scrolling - задает наличие у кадра полос прокрутки, принимает значения yes, no и auto.
Пример:
<frame scrolling="значение">
<iframe> - позволяет вставить в тело body окно, в котором визуализируется другая страница, при этом тэг iframe, в отличие от тэга frame вставляется не между тэгами frameset, а между тэгами body и имеет следующие атрибуты:
src - задает документ, который должен быть отображен во фрейме.
Пример:
<iframe src="URL">
frameborder - задает наличие или отсутствие обрамления у фреймов. Может принимать значения: Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
Пример:
<iframe frameborder="1 или 0">
marginheight - задает толщину верхнего и нижнего обрамления в пикселах.
Пример:
<iframe marginheight="число">
marginwidth - задает толщину правого и левого обрамления в пикселах.
Пример:
<iframe marginwidth="число">
name - задает любое имя фрейма, по которому можно будет обращаться к нему в ссылках и направлять в него содержимое.
Пример:
<iframe name="имя">
align - позволяет позиционировать кадр по отношению к тексту, принимает значения left, right, middle, top и bottom.
Пример:
<iframe align="left">
scrolling - задает наличие у кадра полос прокрутки, принимает значения yes, no и auto.
Пример:
<iframe scrolling="значение">
width - определяет ширину кадра в пикселях.
Пример:
<iframe width="число">
height - определяет высоту кадра в пикселях.
Пример:
<iframe height="число">
Ну, а теперь на основании вышеизложенного поиграемся с фреймами. Для этого создадим три произвольных документа HTML, которые и будем подгружать во фреймы. В первом примере показан вывод трех вертикальных фрейма.
Пример:
<html> <!-- начало документа -->
<head> <!-- голова документа -->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> <!-- язык документа -->
<title>Примеры фрейма</title> <!-- заголовок -->
</head> <!-- закрытие головы документа -->
<frameset frameborder=1 border=4 cols="20%,*,20%"> <!-- разрешить рамку, толщина рамки, размеры вертикальных фреймов -->
<frame scrolling="auto" noresize src="frame1_1.html" name="1"> <!-- линейка прокрутки, запрет на изменение размера, подгружаемый файл, имя фрейма -->
<frame scrolling="auto" noresize src="frame1_2.html" name="2">
<frame scrolling="auto" noresize src="frame1_3.html" name="3">
</frameset>
</html>
Как Вы уже, наверное, заметили, в этом HTML-документе отсутствует тэг body. В данном случае парный тэг frameset заменяет тэг body. Размеры фреймов выбраны такими: 1-й и 3-й имеют размер в 20% от ширины экрана, а второму достается все что осталось. У Вас должно получиться так. Теперь сделаем три горизонтальных фрейма. Код документа тот же самый, только атрибут cols заменяем на атрибут rows со своими значениями. Попробуйте с этим справиться сами. У Вас должно получиться три горизонтальных фрейма, примерно так. Если это не так - внимательно просмотрите код или вернитесь к описанию тэгов создания фрейма.
А теперь мы немного усложним ситуацию. Разместим один фрейм горизонтально, а два других вертикально. Код будет выглядеть так:
Пример:
<html> <!-- начало документа -->
<head> <!-- голова документа -->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> <!-- язык документа -->
<title>Примеры фрейма</title> <!-- заголовок -->
</head> <!-- закрытие головы документа -->
<frameset frameborder=1 border=4 rows="150,*"> <!-- разрешить рамку, толщина рамки, размеры горизонтального фрейма -->
<frame scrolling="auto" noresize src="frame1_1.html" name="1"> <!-- линейка прокрутки, запрет на изменение размера, подгружаемый файл, имя фрейма -->
<frameset frameborder=1 border=4 cols="170,*"> <!-- разрешить рамку, толщина рамки, размеры вертикальных фреймов -->
<frame scrolling="auto" noresize src="frame1_2.html" name="2">
<frame scrolling="auto" noresize src="frame1_3.html" name="3">
</frameset>
</frameset>
</html>
Что должно получится, смотреть здесь. Результат что-то напоминает нам, не правда ли? В 1-ом фрейме размещаем логотип, во втором - меню, а в третьем размещаем контент (то бишь вашу информацию). Вот, в принципе, и готов шаблон сайта, но беда в том, что не все браузеры одинаково работают с фреймами, а поисковики настороженно относятся к сайтам, построенных на этих самых фреймах. Поэтому лучшим вариантом будет все же строительство сайта с применением таблиц.
Теперь рассмотрим, как можно использовать фреймы внутри кода HTML, т.е. внутри тэга body с применением тэга iframe.
- Пример:
<head> <!-- голова документа -->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> <!-- язык документа -->
<title>Примеры фрейма</title> <!-- заголовок -->
</head> <!-- закрытие головы документа -->
<body> <!-- тело документа -->
<center> <!-- выравнивание по центру -->
<iframe src="../examples/Текстовый документ.txt" name="frame1" width="70%" height="400" border="0"></iframe> <!-- путь к документу, имя фрейма, длина и высота фрейма и рамка -->
</center>
</body>
</html>
Укажите свой путь к документу и наслаждайтесь. Как видите, во фрейм можно загружать не только HTML документы, но и текстовые файлы, этим самым мы можем сэкономить место на страничке, если вам необходимо будет процитировать какой-то кусок текста или, как в данном, случае показать какой-либо код.
И в заключение...
Шадуро Николай 