- Свойства наборов фреймов
- Свойства фреймов
- Замещение и работа с ним
- Создание содержимого фреймов
- Заполнение фреймов
- Создание остальных страниц сайта
- Цель гиперссылки
- Полоса навигации
- Оптимизация фреймов
- Уменьшение объема и сложности HTML-кода
- Ускорение обработки фреймов
- Решение проблем с фреймами
- Недостатки фреймов и их преодоление
- Проблема с фреймами в старых версиях Navigator
- Что дальше?
ЧАСТЬ II.
Занимаемся профессиональным Web-дизайном
· Глава 7. Фреймы
· Глава 8. Табличный дизайн
· Глава 9. Использование шаблонов
· Глава 10. Каскадные таблицы стилей
ГЛАВА 7.
Фреймы
Итак, простейший сайт мы создали. Первый шаг в Web-дизайне нами сделан. Пора двигаться дальше. В этой главе мы создадим новую версию нашего сайта с использованием фреймов. Поэтому прежде, чем мы начнем изучать фреймы и работу с ними, создайте для нового сайта новую папку. Назовите ее, скажем, Sample2. Внутри нее создайте подпапки HTMLs и Pics, как в старой версии сайта.
Но и старую папку со старой версией сайта пока оставьте — она нам еще пригодится. Мы позаимствуем из нее все графические изображения и большинство текстов.
Введение во фреймы
Так что же такое фреймы? Давайте выясним это.
Фрейм и набор фреймов
Откройте какую-нибудь из наших Web-страниц, созданных в предыдущих главах. Посмотрите на нее. Что она собой представляет? Правильно, текстовый документ. Обычный текстовый документ, возможно, "разбавленный" графикой и таблицами. Но, так или иначе, все это помещается в основном "потоке" текста и лишь изредка выбивается из него (например, изображения, выровненные влево или вправо; подробнее см. главу 4). Все, абсолютно все "течет" в этом могучем "потоке": и основное (полезное) содержимое страницы, и сведения об авторских правах, и заголовок, и набор гиперссылок.
А теперь представьте себе, что окно Web-обозревателя разбито на несколько меньших "форточек" и в каждой "форточке" загружается своя Web-страница. В одной — набор гиперссылок, в другой — заголовок, в третьей — сведения об авторских правах, а в самой большой — полезный текст, ради которого и был создан этот сайт. Причем "форточки" эти ведут себя как независимые окна Web-обозревателя: у них даже есть свои полосы прокрутки.
Когда вы щелкаете по гиперссылке, нужная страница сразу загружается в соответствующую ей "форточку". При этом она содержит только полезный текст — набор гиперссылок, заголовок сайта и сведения об авторских правах находятся на страницах, отображаемых в других "форточках".
Схематично все это можно представить так, как показано на рис. 7.1.
| Заголовок сайта | |
| Набор гиперссылок для перехода между страницами сайта | Полезное содержание сайта |
| Сведения о правах разработчика сайта | |
Рис. 7.1. Классический набор из четырех фреймов
Это очень удобно. Когда посетитель сайта щелкает по гиперссылке, обновляется только содержимое одной "форточки" (в которой отображается основное содержимое). Такой подход дает Web-дизайнеру два главных преимущества. Во-первых, страницы загружаются значительно быстрее, т. к. содержат только полезную информацию, без набора гиперссылок, заголовка, сведений об авторских правах и прочей вспомогательной информации. Во-вторых, не нужно всю эту дополнительную информацию дублировать на каждой странице сайта — достаточно создать специальные странички, содержащие ее части, а потом загрузить их в соответствующие "форточки". А если нам нужно изменить, скажем, адрес какой-нибудь гиперссылки, мы просто меняем его на одной-единственной страничке вместо того, чтобы просматривать все страницы сайта, на которых мы поместили данную гиперссылку.
Отлично! Теперь давайте назовем вещи своими именами. "Форточки", иначе говоря, части, на которые делится окно Web-обозревателя, — это и есть фреймы (от англ, frame — кадр). А набор таких частей назовем набором фреймов (по-английски — frameset). Способ же разработки Web-сайтов с использованием фреймов называется фреймовым дизайном.
Как же формируется набор фреймов? Что для этого необходимо?
Для этого нужна специально написанная Web-страница, в которой, собственно, и задаются параметры набора фреймов и самих фреймов. Там же указываются размеры фреймов и интернет-адреса страниц, которые будут в них загружены. Эта Web-страница практически всегда является главной, т. е. загружается при наборе адреса сайта в строке адреса Web-обозревателя.
Запомните, что такая страница не должна содержать никаких полезных данных, никакого текста — только определение набора фреймов. Но даже если бы она и содержала какой-то текст, Web-обозреватель все равно не отобразил бы его, т. к. он не знает, где его отобразить — все свободное пространство его окна будет задано набором фреймов.
Фреймы — достаточно давнее дополнение, введенное в язык HTML. Однако высокоученые головы из комитета W3C только недавно включили их в HTML-стандарт. В результате такой политики неприятия весьма полезного нововведения фреймы на сегодняшний день стали, наверное, самым "нестандартным" из элементов HTML. Старые программы Web-обозревателей поддерживают их по-разному, хотя более новые их версии и пытаются соблюдать стандарты.
А Web-дизайнеры используют фреймы уже достаточно давно. И применяют их настолько часто, что среди снобов от Web-дизайна они уже стали считаться банальностью. И зря!
Схемы наборов фреймов
Теперь поговорим о различных способах разделения окна Web-обозревателя на отдельные фреймы и об информации, помещаемой в эти самые фреймы, иначе говоря, о разных схемах фреймового дизайна. Вообще, сколько существует Web-дизайнеров, столько существует и схем фреймового дизайна, так что перечислять их все бесполезно. Однако за довольно долгую историю WWW было разработано несколько устоявшихся схем наборов фреймов, прошедших проверку временем и использующихся в подавляющем большинстве сайтов, построенных по принципам фреймового дизайна. Эти устоявшиеся схемы мы и рассмотрим.
Итак, что должен содержать типичный набор фреймов? Как мы уже выяснили, это набор гиперссылок для перемещения по страницам сайта, заголовок сайта, основное (полезное) содержимое и сведения об авторских правах. Как они размещаются в наборе фреймов, было показано на рис. 7.1.
Давайте рассмотрим эти фреймы подробнее.
Насчет полезного содержимого сайта все ясно. Ради него и создается сайт, поэтому оно обязательно должно присутствовать. Под него выделяют самый большой фрейм набора. Иногда, впрочем, полезное содержимое разделяется на части и "разбрасывается" по нескольким более мелким фреймам, но мы не будем рассматривать здесь такие специфические случаи. Запомните только, что под фрейм с основным содержимым сайта выделяется максимум места в окне Web-обозревателя, и это логично.
Набор гиперссылок — второй по важности фрейм в схеме. Так как Web-сайт отличается от простого набора Web-страниц своей взаимосвязанностью, без гиперссылок, связывающих разнородные страницы в единое целое, не обойтись. Почти всегда набор гиперссылок помещается в вертикальном фрейме, расположенном слева от основного содержимого, вдоль левой границы окна Web-обозревателя. Иногда, правда, набор гиперссылок переносят вправо, как показано на рис. 7.2. А порой он "вытягивается" по горизонтали сверху или снизу (рис. 7.3) основного содержимого.
| Заголовок сайта | |
| Полезное содержимое сайта | Набор гиперссылок для перехода между страницами сайта |
| Сведения о правах разработчика сайта | |
Рис. 7.2. Набор фреймов с набором гиперссылок, расположенным справа
| Заголовок сайта |
| Набор гиперссылок для перехода между страницами сайта |
| Полезное содержимое сайта |
| Сведения о правах разработчика сайта |
Рис. 7.3. Набор фреймов с набором гиперссылок, расположенным сверху
Автору также встречались наборы фреймов с двумя разными наборами гиперссылок, расположенными сверху и снизу (рис. 7.4) от основного содержимого. Верхний набор гиперссылок указывал на страницы с основным содержимым сайта, а нижний — на страницы с дополнительным, неглавным содержимым (сведения о контакте, карта сайта и пр.).
| Заголовок сайта |
| Набор гиперссылок 1 |
| Полезное содержимое сайта |
| Набор гиперссылок 2 |
| Сведения о правах разработчика сайта |
Рис. 7.4. Набор фреймов с двумя наборами гиперссылок, расположенными сверху и снизу
Заголовок сайта — тоже достаточно важная вещь. Можно сказать, это лицо сайта. Поэтому его часто помещают в горизонтальный фрейм, расположенный сверху, вдоль верхней стороны окна Web-обозревателя. Таким образом он хорошо виден, но и не бросается в глаза, если специально на него не смотреть. Иногда его разделяют на два фрейма, в одном из которых находится логотип сайта, а в другом — текст названия (рис. 7.5).
| Логотип | Название сайта |
| Набор гиперссылок для перехода между страницами сайта | Полезное содержимое сайта |
| Сведения о правах разработчика сайта | |
Рис. 7.5. Набор фреймов с заголовком, состоящим из двух частей
Впрочем, часто заголовок помещают в текст начальной страницы, отображаемой в качестве основного содержимого. В этом случае он не занимает место на экране, оставляя его для основного содержимого сайта. Данный подход также правилен. Однако следует помнить, что тогда посетитель сайта может забыть, где он, собственно, находится в данный момент, иначе говоря, "заблудится". Поэтому сведения о сайте необходимо все-таки дублировать на страницах основного содержимого. Компромиссным вариантом будет объединение заголовка сайта и набора гиперссылок в одной странице и, как следствие, в одном фрейме, как показано на рис. 7.6.