Лекция: ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ФРЕЙМОВ.
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов. Фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы — это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной «альтернативой» табличному способу верстки страницы… в кавычки взял слово «альтернатива» потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта… но обо всем по порядку..
Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:
Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне… Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html, вторым документом будет некое содержание… назовём menu.html, ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои… так будет удобнее и мне и Вам.
Итак, есть три файла logotype.html, menu.html и text.html… которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..
Пишем «крышу», главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.
<html>
<head>
<title>фреймы</title>
</head>
<body>
</body>
</html>
Вот привычная для нас структура документа.
Структура фрейм документа имеет вот такой вид:
<html>
<head>
<title>фреймы </title>
</head>
<frameset>
</frameset>
</html>
Отсутствие тега <body> компенсирует новый тег <frameset> — установить фрейм или набор фреймов.
Тег <frameset> имеет атрибуты rows и cols — эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера
rows — горизонтально cols — вертикально
В нашем случае нам необходимо горизонтальное размещение фреймов… значит пишем так:
<html>
<head>
<title>фреймы </title>
</head>
<frameset rows=«15%,15%,70%»>
</frameset>
</html>
Проценты после знака равенства — это не что иное, как размеры наших окошек- фреймов в одном большом окне браузера, у нас предполагается размещение трёх окон — следовательно и значений через запятую тоже три. Вспомните как мы задавали размеры ячеек для таблицы, здесь тот же принцип… Как и в случае с ячейками таблицы, размеры фреймов можно указывать в процентах от общей площади и в пикселях.
Вот несколько примеров написания:
<frameset rows=«15%,15%,70%»> — такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 70% площади окна браузера, а первые два по 15%.
<frameset cols =«200,240,200»> — здесь три окна расположены вертикально ширина которых указана в пикселях.
<frameset rows=«100,*,180»> — такая запись значит, что первое и третье окно будут иметь ширину 100 и 180 пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.
С размещением документов покончили, теперь собственно осталось их подключить.
Тег <frame> и его атрибут src укажет браузеру путь к html документу который следует открыть в отведенном для него месте. У нас имеется три отдельных документа logotype.html, menu.html и text.html теперь к каждому нужно прописать путь, что мы собственно и делаем. (предполагаю, что у Вас все четыре файла находятся в одной папке и пути к ним имеют самую простую запись по типу: <frame src=«logotype.html»>)
Пример: Файл index.html
<html>
<head>
<title>фреймы</title>
</head>
<frameset rows=«15%,15%,70%»>
<frame src=«logotype.html»>
<frame src=«menu.html»>
<frame src=«text.html»>
</frameset>
</html>
Файл logotype.html
<html>
<head>
<title>фреймы</title>
</head>
<body>
<img src=«logotype.jpg» width=«800» height=«120» alt=«Кулинария»>
</body>
</html>
Файл menu.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor="#e8e8e8" background=«fon1.jpg»>
<font face=«Monotype Corsiva» size=«6»color="#ff0000">Меню:</font><br>
<font face=«Comic Sans MS» size=«3»>
<a href=«text.html»>Суп из шампиньонов</a><br>
<a href=«text1.html»>Бобы в горшочке по-итальянски</a><br>
<a href=«text2.html»>Австралийский летний салат</a><br>
…… ...
</font>
</body>
</html>
Файл text.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor="#f5f5f5">
<center><font face=«Comic Sans MS» size=«3»>Суп из шампиньонов</font></center>
<br>
куча текста..
</body>
</html>
смотреть пример
В данном примере я выложил все четыре HTML документа где index.html является основным, а остальные три, это подключаемые страницы, каждая из которых в принципе может работать автономно и содержать в себе всё что угодно картинки, таблицы, тексты, ссылки… сделал я это для того что бы дать Вам понять принцип работы с фреймами. В дальнейших примерах я буду выкладывать лишь головной файл с фреймами, (а то уж больно много места на странице они все вместе занимают), а Вы знайте что у меня «где то там» есть все остальные файлы содержащие в себе графику, тексты, может быть ещё что ни будь… ну и не отставайте за мной потихоньку редактируйте свои собственные странички к будущему тренировочному сайту… Не знаю про что Вы будите писать свой, а я тут пообещался помочь одной девушке в написании сайта посвящённого кулинарии..)) так что решил так сказать сразу на двух зайцев замахнуться… на девушку зайку и сайт..)) как-то так..))
В выше изложенном примере мы расположили все окна горизонтально, поменяв атрибут rows на cols можно расположить их в вертикальном порядке. А как быть, если требуется разместить наши окна
вот так?: или так?: или даже так?:
Выход есть. Разберём на примерах.
Начнём с первого случая… что мы видим? А видим мы две строки, где вторая поделена на два столбца.
A теперь по порядку:
<frameset rows=«20%,80%»> — делим окно браузера на две строки
<frame src=«logotype.html»> — в первую строку загружаем наш логотип
<frameset cols=«30%,70%»> — а вторую строку делим на два столбца
<frame src=«menu.html»> — в первом будет меню
<frame src=«text.html»> — а во втором куча текста
</frameset> — закрываем тег деления на столбцы
</frameset> — закрываем тег деления на строки
Вообще то говорить столбцы и строки неверно, так как фреймы никакого отношения к таблицам не имеют кроме как визуального подобия, правильно говорить горизонтальные и вертикальные фреймы… Ну да ладно, смотрим пример:
| <html> <head> <title>фреймы</title> </head> <frameset rows=«15%,85%»> <frame src=«logotype.html»> <frameset cols=«20%,80%»> <frame src=«menu.html»> <frame src=«text.html»> </frameset> </frameset> </html> |
Во втором случае у нас имеется два столбца в котором второй поделен на две строки, значит будем писать так:
<frameset cols=«30%,70%»> — делим окно на два столбца
<frame src=«menu.html»> — в первом будет содержание
<frameset rows=«20%,80%»> — а второй делим на две строки
<frame src=«logotype.html»> — логотип
<frame src=«text.html»> — и основной текст
</frameset> — закрываем деление на строки
</frameset> — закрываем деление на столбцы
Пример:
| <html> <head> <title>фреймы</title> </head> <frameset cols=«20%,80%»> <frame src=«menu.html»> <frameset rows=«15%,85%»> <frame src=«logotype.html»> <frame src=«text.html»> </frameset> </frameset> </html> |
Третий случай немного посложней, но бояться его не стоит… тем более что именно такое построение лично я выбрал для сайта про кулинарное искусство, чуть ниже объясню почему. Что мы имеем? три столбца причем во второй столбец по сути заключён наш первый случай..
<frameset cols="*,800,*"> — делим окно на три столбика (обратите внимание второй столбец занимает ровно 800 пикселей а два крайних точного размера не имеют и поделят пополам оставшееся место)
<frame src=«dekor.html»> -в первый столбец загружаем html документ который будет выполнять сугубо декоративную функцию
<frameset rows=«15%,85%»> -
<frame src=«logotype.html»> -
<frameset cols=«20%,80%»> — во второй столбец вставляем наш «первый случай»
<frame src=«menu.html»> -
<frame src=«text.html»> -
</frameset> -
</frameset> -
<frame src=«dekor.html»> — в третий столбец загружаем всё тот же файл с декорациями
</frameset> — захлопываем
Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами
Пример:
| <html> <head> <title>фреймы</title> </head> <frameset cols="*,800,*"> <frame src=«dekor.html»> <frameset rows=«120,*»> <frame src=«logotype.html»> <frameset cols=«200,600»> <frame src=«menu.html»> <frame src=«text.html»> </frameset> </frameset> <frame src=«dekor.html»> </frameset> </html> |
смотреть пример
Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному… и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется «поплывут» у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя… даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет «товарный вид». Так как же быть? Приходится идти на маленькие хитрости… Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода «пружин» на которых подвешен центральный столбец… Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?
На этом с размещением и размерами фреймов закончим… и так здесь долго задержались… идём дальше.