Фреймы.

Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..

Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько 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 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода " пружин" на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?

На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.