Macromedia Dreamweaver MX

Фреймы

Итак, простейший сайт мы создали. Первый шаг в Web-дизайне нами сде­лан. Пора двигаться дальше. В этой главе мы создадим новую версию наше­го сайта с использованием фреймов. Поэтому прежде, чем мы начнем изу­чать фреймы и работу с ними, создайте для нового сайта новую папку. На­зовите ее, скажем, Sample!. Внутри нее создайте подпапки HTMLs и Pics, как в старой версии сайта.

Но и старую папку со старой версией сайта пока оставьте — она нам еще пригодится. Мы позаимствуем из нее все графические изображения и большинство текстов.

Введение во фреймы

Так что же такое фреймы? Давайте выясним это.

Фрейм и набор фреймов

Откройте какую-нибудь из наших Web-страниц, созданных в предыдущих главах. Посмотрите на нее. Что она собой представляет? Правильно, тексто­вый документ. Обычный текстовый документ, возможно, "разбавленный" графикой и таблицами. Но, так или иначе, все это помещается в основном "потоке" текста и лишь изредка выбивается из него (например, изображе­ния, выровненные влево или вправо; подробнее см. главу 4). Все, абсолютно все "течет" в этом могучем "потоке": и основное (полезное) содержимое стра­ницы, и сведения об авторских правах, и заголовок, и набор гиперссылок.

А теперь представьте себе, что окно Web-обозревателя разбито на несколько меньших "форточек" и в каждой "форточке" загружается своя Web-страница. В одной — набор гиперссылок, в другой — заголовок, в третьей — сведения об авторских правах, а в самой большой — полезный текст, ради которого
и был создан этот сайт. Причем "форточки" эти ведут себя как независимые окна ¥еЬ-обозревателя: у них даже есть свои полосы прокрутки.

Когда вы щелкаете по гиперссылке, нужная страница сразу загружается в соответствующую ей "форточку". При этом она содержит только полезный текст — набор гиперссылок, заголовок сайта и сведения об авторских пра­вах находятся на страницах, отображаемых в других "форточках".

Схематично все это можно представить так, как показано на рис. 7.1.

Заголовок сайта

Сведения о правах разработчика сайта

Рис. 7.1. Классический набор из четырех фреймов

Это очень удобно. Когда посетитель сайта щелкает по гиперссылке, обнов­ляется только содержимое одной "форточки" (в которой отображается ос­новное содержимое). Такой подход дает Web-дизайнеру два главных пре­имущества. Во-первых, страницы загружаются значительно быстрее, т. к. содержат только полезную информацию, без набора гиперссылок, заголов­ка, сведений об авторских правах и прочей вспомогательной информации. Во-вторых, не нужно всю эту дополнительную информацию дублировать на каждой странице сайта — достаточно создать специальные странички, со­держащие ее части, а потом загрузить их в соответствующие "форточки". А если нам нужно изменить, скажем, адрес какой-нибудь гиперссылки, мы просто меняем его на одной-единственной страничке вместо того, чтобы просматривать все страницы сайта, на которых мы поместили данную ги­перссылку.

Отлично! Теперь давайте назовем вещи своими именами. "Форточки", иначе говоря, части, на которые делится окно Web-обозревателя, — это и есть фреймы (от англ. frame — кадр). А набор таких частей назовем набором фреймов (по-английски — frameset). Способ же разработки Web-сайтов с использованием фреймов называется фреймовым дизайном.

Как же формируется набор фреймов? Что для этого необходимо?

Для этого нужна специально написанная Web-страница, в которой, собст­венно, и задаются параметры набора фреймов и самих фреймов. Там же указываются размеры фреймов и интернет-адреса страниц, которые будут в них загружены. Эта ¥еЬ-страница практически всегда является главной, т. е. загружается при наборе адреса сайта в строке адреса ¥еЬ-обозревателя.

Запомните, что такая страница не должна содержать никаких полезных данных, никакого текста — только определение набора фреймов. Но даже если бы она и содержала какой-то текст, ¥еЬ-обозреватель все равно не отобразил бы его, т. к. он не знает, где его отобразить — все свободное про­странство его окна будет задано набором фреймов.

Фреймы — достаточно давнее дополнение, введенное в язык НТМ 1_. Одна­ко высокоученые головы из комитета ¥ЗС только недавно включили их в НТМЬ-стандарт. В результате такой политики неприятия весьма полезно­го нововведения фреймы на сегодняшний день стали, наверное, самым "не­стандартным" из элементов НТМ Ь. Старые программы ¥еЬ-обозревателей поддерживают их по-разному, хотя более новые их версии и пытаются со­блюдать стандарты.

А ¥еЬ-дизайнеры используют фреймы уже достаточно давно. И применяют их настолько часто, что среди снобов от ¥еЬ-дизайна они уже стали счи­таться банальностью. И зря!

Схемы наборов фреймов

Теперь поговорим о различных способах разделения окна ¥еЬ-обозревателя на отдельные фреймы и об информации, помещаемой в эти самые фреймы, иначе говоря, о разных схемах фреймового дизайна. Вообще, сколько суще­ствует ¥еЬ-дизайнеров, столько существует и схем фреймового дизайна, так что перечислять их все бесполезно. Однако за довольно долгую историю VWV было разработано несколько устоявшихся схем наборов фреймов, прошедших проверку временем и использующихся в подавляющем боль­шинстве сайтов, построенных по принципам фреймового дизайна. Эти ус­тоявшиеся схемы мы и рассмотрим.

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

Давайте рассмотрим эти фреймы подробнее.

Насчет полезного содержимого сайта все ясно. Ради него и создается сайт, поэтому оно обязательно должно присутствовать. Под него выделяют самый большой фрейм набора. Иногда, впрочем, полезное содержимое разделяется на части и "разбрасывается" по нескольким более мелким фреймам, но мы не будем рассматривать здесь такие специфические случаи. Запомните толь­ко, что под фрейм с основным содержимым сайта выделяется максимум места в окне ¥еЬ-обозревателя, и это логично.

Набор гиперссылок — второй по важности фрейм в схеме. Так как Veb - сайт отличается от простого набора ¥еЬ-страниц своей взаимосвязан­ностью, без гиперссылок, связывающих разнородные страницы в единое целое, не обойтись. Почти всегда набор гиперссылок помещается в верти­кальном фрейме, расположенном слева от основного содержимого, вдоль левой границы окна ¥еЬ-обозревателя. Иногда, правда, набор гиперссылок переносят вправо, как показано на рис. 7.2. А порой он "вытягивается" по горизонтали сверху или снизу (рис. 7.3) основного содержимого.

Заголовок сайта

Набор гиперссылок для перехода между страницами сайта

Полезное содержимое сайта

Сведения о правах разработчика сайта

Рис. 7.3. Набор фреймов с набором гиперссылок, расположенным сверху

Автору также встречались наборы фреймов с двумя разными наборами ги­перссылок, расположенными сверху и снизу (рис. 7.4) от основного содер­жимого. Верхний набор гиперссылок указывал на страницы с основным со-

Держимым сайта, а нижний — на страницы с дополнительным, неглавным содержимым (сведения о контакте, карта сайта и пр.).

Заголовок сайта

Набор гиперссылок 1

Полезное содержимое сайта

Набор гиперссылок 2

Сведения о правах разработчика сайта

Рис. 7.4. Набор фреймов с двумя наборами гиперссылок, расположенными сверху и снизу

Заголовок сайта — тоже достаточно важная вещь. Можно сказать, это лицо сайта. Поэтому его часто помещают в горизонтальный фрейм, расположен­ный сверху, вдоль верхней стороны окна ¥еЬ-обозревателя. Таким образом он хорошо виден, но и не бросается в глаза, если специально на него не смотреть. Иногда его разделяют на два фрейма, в одном из которых нахо­дится логотип сайта, а в другом — текст названия (рис. 7.5).

Впрочем, часто заголовок помещают в текст начальной страницы, отобра­жаемой в качестве основного содержимого. В этом случае он не занимает место на экране, оставляя его для основного содержимого сайта. Данный подход также правилен. Однако следует помнить, что тогда посетитель сайта может забыть, где он, собственно, находится в данный момент, иначе гово­ря, "заблудится". Поэтому сведения о сайте необходимо все-таки дублиро­вать на страницах основного содержимого. Компромиссным вариантом бу­дет объединение заголовка сайта и набора гиперссылок в одной странице и, как следствие, в одном фрейме, как показано на рис. 7.6.

Что касается сведений об авторских правах, то нужда в том, чтобы они по­стоянно присутствовали на экране, не так велика. Пожалуй, их помещают в отдельный фрейм только те, кто озабочен своими правами на сайт и опуб­ликованные на нем материалы. В этом случае лучше расположить их нена­вязчиво — в нижнем горизонтальном фрейме, как показано на рис. 7.1.

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

Кроме того, часто в отдельных фреймах помещают рекламу в виде банне­ров. Таким образом реклама отделяется от действительно полезной инфор­мации. Обычно фреймы с рекламой располагаются горизонтально сверху и (или) снизу окна ¥еЬ-обозревателя и не очень велики по размерам — как раз на один или два баннера (рис. 7.7).

Особенно часто рекламу во фреймах помещают ¥еЬ-серверы, бесплатно "раздающие" место под ¥еЬ-сайты пользователей. В качестве платы за бес­платность они либо заставляют вас поместить на ваши страницы рекламные баннеры (что не наш случай), либо "втискивают" ваши странички во фрейм, а в соседних фреймах набора "развешивают" свои баннеры. Иногда это бе­сит, но, в конце концов, надо же владельцам этих ¥еЬ-серверов на что-то жить. А реклама — иной раз единственный источник дохода в Интернете...

Рекламные баннеры

Остальное содержимое сайта

Рекламные баннеры

Рис. 7.7. Набор фреймов с двумя рекламными блоками

Здесь следует сказать еще о так называемых нулевых или невидимых фреймах. Так называются фреймы, чья ширина (для вертикальных фреймов) или вы­сота (для горизонтальных) равна нулю. Фактически такие фреймы не види­мы в окне ¥еЬ-обозревателя. Используются они, как правило, для всяче­ских неблаговидных целей: размещения рекламных баннеров, которые оп­лачиваются за факт показа (такой баннер как бы показывается, но на самом деле не видим), скрытия какой-либо важной информации и пр. Часто такие "фокусы" можно увидеть на хакерских и жульнических сайтах.

Здесь перечислены далеко не все схемы фреймовых наборов, имеющих хож­дение в Сети. Кроме общеупотребительных схем, существуют различные специфические случаи, которых также довольно много. Описываться в этой книге они не будут, т. к. уж очень специфичны и применимы далеко не всегда.

Сложные наборы фреймов

А теперь нужно рассказать об одной особенности фреймов, которую вам обязательно надо знать.

Как вы уже знаете, фреймы являются составными частями набора фреймов. Тег, задающий набор фреймов, определяет размеры и форму фреймов (бу­дут ли они располагаться горизонтально или вертикально), а тег, задающий фрейм, определяет параметры самого фрейма (в частности, интернет-адрес загружаемой в него ¥еЬ-страницы). При этом теги, задающие фреймы, вкладываются в тег, задающий набор фреймов.

Но проблема в том, что фреймы, входящие в один набор, могут распола­гаться либо только по горизонтали, либо только по вертикали. Но, скажете вы, как же сделать наборы фреймов, приведенные на рис. 7.1—7.7? Ведь их же кто-то делает, а если не делает, так зачем их было здесь приводить?

Да, вы правы. Но для этого используется одна особенность наборов фрей­мов НТМЬ — они могут вкладываться друг в друга, порождая вложенные наборы фреймов. Такая совокупность наборов фреймов обычно считается одним целым, одним сложным набором, состоящим из нескольких простых.

Взгляните на рис. 7.1. Давайте подумаем, как приведенный на нем набор фреймов можно реализовать на практике. Здесь мы имеем три фрейма, рас­положенных горизонтально и занимающих всю ширину набора, и один фрейм, занимающий часть среднего фрейма. Очевидно, что нам понадобят­ся два набора фреймов: один, внешний, делящий окно ¥еЬ-обозревателя на три части по горизонтали, и второй, внутренний, делящий средний фрейм надвое по вертикали. Рис. 7.8 иллюстрирует вышесказанное.

Заголовок сайта

Полезное содержимое сайта

Набор гиперссылок для перехода между страницами сайта

Сведения о правах разработчика сайта

Рис. 7.8. Сложный набор фреймов, состоящий из двух простых. Внешний набор фреймов обозначен сплошными линиями, внутренний — штриховыми

Пользуясь вложенностью, вы можете создавать сколь угодно сложные набо­ры фреймов. Это очень просто, если понять принцип. Хотя, чтобы создать совсем уж замысловатый набор фреймов, вам придется поломать голову.