|
ЧАСТЬ II. Занимаемся профессиональным Web-дизайном
Фреймы Итак, простейший
сайт мы создали. Первый шаг в 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) от основного содержимого. Верхний набор гиперссылок
указывал на страницы с основным содержимым
сайта, а нижний — на страницы с дополнительным, неглавным содержимым (сведения
о контакте, карта сайта и пр.).
Рис.
7.4. Набор фреймов с двумя наборами гиперссылок, расположенными сверху
и снизу Заголовок
сайта — тоже достаточно важная вещь. Можно сказать, это лицо сайта. Поэтому
его часто помещают в горизонтальный фрейм, расположенный сверху, вдоль верхней
стороны окна Web-обозревателя. Таким образом он хорошо виден, но и не бросается
в глаза, если специально на него не смотреть. Иногда его разделяют на два фрейма,
в одном из которых находится логотип сайта, а в другом — текст названия (рис.
7.5).
Рис.
7.5. Набор фреймов с заголовком, состоящим из двух частей Впрочем, часто
заголовок помещают в текст начальной страницы, отображаемой в качестве основного
содержимого. В этом случае он не занимает место на экране, оставляя его для
основного содержимого сайта. Данный подход также правилен. Однако следует помнить,
что тогда посетитель сайта может забыть, где он, собственно, находится в данный
момент, иначе говоря, "заблудится". Поэтому сведения о сайте необходимо
все-таки дублировать на страницах основного содержимого. Компромиссным вариантом
будет объединение заголовка сайта и набора гиперссылок в одной странице и, как
следствие, в одном фрейме, как показано на рис. 7.6.
Рис.
7.6. Набор фреймов с заголовком, объединенным с набором гиперссылок Что касается
сведений об авторских правах, то нужда в том, чтобы они постоянно присутствовали
на экране, не так велика. Пожалуй, их помещают в отдельный фрейм только те,
кто озабочен своими правами на сайт и опубликованные на нем материалы. В этом
случае лучше расположить их ненавязчиво — в нижнем горизонтальном фрейме, как
показано на рис. 7.1. В большинстве
случаев сведения об авторских правах располагают либо в тексте начальной страницы,
что отображается по умолчанию в основном фрейме, либо помещают в один фрейм
с набором гиперссылок, в самом его низу. Также можно поместить их в заголовок
сайта, если он расположен в отдельном фрейме. Кроме того,
часто в отдельных фреймах помещают рекламу в виде банне-ров. Таким образом реклама
отделяется от действительно полезной информации. Обычно фреймы с рекламой располагаются
горизонтально сверху и (или) снизу окна Web-обозревателя и не очень велики по
размерам — как раз на один или два баннера (рис. 7.7). Особенно часто
рекламу во фреймах помещают Web-серверы, бесплатно "раздающие" место
под Web-сайты пользователей. В качестве платы за бесплатность они либо заставляют
вас поместить на ваши страницы рекламные баннеры
(что не наш случай), либо "втискивают" ваши странички во фрейм, а
в соседних фреймах набора "развешивают" свои баннеры. Иногда это бесит,
но, в конце концов, надо же владельцам этих Web-серверов на что-то жить. А реклама
— иной раз единственный источник дохода в Интернете...
Рис.
7.7. Набор фреймов с двумя рекламными блоками Здесь следует
сказать еще о так называемых нулевых или невидимых фреймах. Так
называются фреймы, чья ширина (для вертикальных фреймов) или высота (для горизонтальных)
равна нулю. Фактически такие фреймы не видимы в окне Web-обозревателя. Используются
они, как правило, для всяческих неблаговидных целей: размещения рекламных баннеров,
которые оплачиваются за факт показа (такой баннер как бы показывается, но на
самом деле не видим), скрытия какой-либо важной информации и пр. Часто такие
"фокусы" можно увидеть на хакерских и жульнических сайтах. Здесь перечислены
далеко не все схемы фреймовых наборов, имеющих хождение в Сети. Кроме общеупотребительных
схем, существуют различные специфические случаи, которых также довольно много.
Описываться в этой книге они не будут, т. к. уж очень специфичны и применимы
далеко не всегда. А теперь нужно
рассказать об одной особенности фреймов, которую вам обязательно надо знать. Как вы уже
знаете, фреймы являются составными частями набора фреймов. Тег, задающий набор
фреймов, определяет размеры и форму фреймов (будут ли они располагаться горизонтально
или вертикально), а тег, задающий фрейм, определяет параметры самого фрейма
(в частности, интернет-адрес загружаемой в него Web-страницы). При этом теги,
задающие фреймы, вкладываются в тег, задающий набор фреймов. Но проблема
в том, что фреймы, входящие в один набор, могут располагаться либо только по
горизонтали, либо только по вертикали. Но, скажете вы, как же сделать наборы
фреймов, приведенные на рис. 7.1—7.7? Ведь их же кто-то делает, а если не делает,
так зачем их было здесь приводить? Да, вы правы.
Но для этого используется одна особенность наборов фреймов HTML — они могут
вкладываться друг в друга, порождая вложенные наборы фреймов. Такая совокупность
наборов фреймов обычно считается одним целым, одним сложным набором,
состоящим из нескольких простых. Взгляните
на рис. 7.1. Давайте подумаем, как приведенный на нем набор фреймов можно реализовать
на практике. Здесь мы имеем три фрейма, расположенных горизонтально и занимающих
всю ширину набора, и один фрейм, занимающий часть среднего фрейма. Очевидно,
что нам понадобятся два набора фреймов: один, внешний, делящий окно Web-обозревателя
на три части по горизонтали, и второй, внутренний, делящий средний фрейм
надвое по вертикали. Рис. 7.8 иллюстрирует вышесказанное.
Рис.
7.8. Сложный набор фреймов, состоящий из двух простых. Внешний набор
фреймов обозначен сплошными линиями, внутренний — штриховыми Пользуясь
вложенностью, вы можете создавать сколь угодно сложные наборы фреймов. Это очень
просто, если понять принцип. Хотя, чтобы создать совсем уж замысловатый набор
фреймов, вам придется поломать голову. Но хватит
пустых разговоров! Давайте займемся делом и на конкретном примере рассмотрим
принципы фреймового дизайна. Мы создадим новую версию нашего сайта, посвященного
гипотетическому Web-дизайнеру Ивану Ивановичу Иванову, версию, основанную на
фреймах. И, не мудрствуя лукаво, выберем для него схему, показанную на рис.
7.1. Проверьте,
создали ли вы новую папку Sample2. Также проверьте, не удалили ли вы старую
версию сайта, находящуюся в папке Sample 1. Ведь одна из важнейших заповедей
Web-дизайнера: не разбрасываться старыми материалами — они могут пригодиться
для нового сайта. Проверили? Все на месте? Тогда вперед! Прежде всего,
введем в Dreamweaver информацию о новом сайте. Вы можете просто взять сайт Sample
site 1 и заменить его имя, корневую папку и имя главной страницы, а можете и
создать новый сайт "с нуля". Как это делается, было рассказано в главе
6. На вкладке Remote Info диалогового окна Site Definition в
раскрывающемся списке Access выберите пункт None (см. рис. 6.3)
— мы с вами нигде не будем публиковать этот сайт. И имя нашего сайта будет Sample
site 2. После этого
создайте новую Web-страницу. Сейчас мы рассмотрим процесс создания фреймов... Да, мы рассмотрим,
как создаются фреймы в Dreamweaver. Но сначала
сделайте следующее. Включите в подменю Visual Aids меню View пункт-выключатель
Frame Borders. Это нужно, чтобы Dreamweaver показал нам границы наших
будущих фреймов. Дело в том, что границы между фреймами могут быть невидимыми,
что может создать нам немало проблем при написании текста страниц, отображаемых
в этих фреймах. Если же вы выберете названный пункт, Dreamweaver будет показывать
схематичные линии в тех местах, где проходят границы фреймов. Внимание! При открытии
страницы, определяющей набор фреймов, вам придется каждый раз включать пункт-выключатель
Frame Borders подменю Visual Aids меню View. К сожалению,
Dreamweaver не запоминает этой установки. Проще всего
набор фреймов можно создать, воспользовавшись вкладкой Frames панели
объектов. На рис. 7.9 показаны те ее кнопки, которые нам сейчас нужны. Голубым
(на рисунке — светло-серым) цветом закрашен текущий фрейм, т. е. тот,
в котором в настоящий момент стоит текстовый курсор. Также можно воспользоваться
пунктами подменю Frames меню Insert. В табл. 7.1 приведены описания
всех кнопок вкладки Frames панели объектов и соответствующих им пунктов
подменю Frames.
Рис.
7.9. Вкладка Frames панели объектов (показана частично) Таблица
7.1. Кнопки вкладки Frames панели объектов (в
порядке слева направо)
Итак, давайте
приступим к созданию нашего набора фреймов. Прежде всего,
создадим верхний фрейм, в котором у нас будет помещаться заголовок сайта. Нажмем
кнопку Top Frame. В результате получатся два фрейма, расположенные горизонтально,
друг над другом (рис. 7.10). Теперь убедимся,
что текстовый курсор стоит в нижнем фрейме, и нажмем кнопку Bottom Frame.
В результате получим еще один фрейм, но расположенный на этот раз ниже текущего
(рис. 7.11). Теперь поместите
курсор мыши на границу между верхним и средним фреймами (заголовок и основное
содержимое, соответственно). Вы увидите, что курсор примет вид двунаправленной
стрелки, что во всех Windows-программах означает только одно: вы можете перемещать
что-либо вверх-вниз. В данном случае вы можете перемещать границу между фреймами,
изменяя их размеры. То же самое вы можете делать с границей между средним и
нижним фреймами (основное содержимое и сведения об авторских правах). Измените размеры
фреймов так, чтобы средний фрейм занимал максимум места на экране. (Помните,
что мы говорили об основном содержимом сайта?) Верхний и нижний фреймы сделайте
совсем узкими. А если впоследствии содержимое не будет в них помещаться, мы
их увеличим. Осталось создать
еще один фрейм — левый, где будет помещаться набор гиперссылок. Его мы создадим
немного по-другому, для чего воспользуемся подменю Frameset меню Modify.
Рис.
7.10. Два горизонтальных фрейма
Рис.
7.11. Три горизонтальных фрейма Там находятся
следующие пункты:
Итак, сделайте
текущим средний фрейм и выберите в подменю Frameset меню Modify пункт...
правильно, Split Frame Left. Вы получите последний фрейм, который как
раз и был нам нужен. Уменьшите его ширину — это делается так же, как и в случае
с горизонтальными фреймами. У вас должно получиться нечто, похожее на то, что
изображено на рис. 7.12
Рис.
7.12. Готовый набор фреймов Теперь дайте
готовой странице с набором фреймов название "Иван И. Иванов" и сохраните
ее, выбрав пункт Save All меню File — это позволит сохранить также
содержимое всех фреймов. На экране появится стандартное диалоговое окно сохранения
файла Windows, предлагающее вам сохранить сам набор фреймов под именем UntitledFrameset-l.htm.
Сохраните его в корневой папке нового сайта под именем default.htm. Теперь Dreamweaver
будет поочередно предлагать вам сохранить содержимое каждого фрейма набора (не
забывайте, что содержимое фрейма задает отдельная Web-страница). При этом фрейм,
содержимое которого сохраняется в данный момент, выделяется толстой штриховой
линией (рис. 7.13),
Рис.
7.13. Толстая штриховая линия выделяет фрейм, чье содержимое сохраняется
в данный момент Все остальные
страницы сайта сохраните в папке HTMLs. Странице со сведениями об авторских
правах дайте имя Copyright.htm. Страницу, по умолчанию отображаемую во фрейме
с основным содержимым, назовите Main.htm, страницу со списком гиперссылок —
Nav.htm, а страницу с заголовком сайта — Header.htm. Внимание! Если вы
преобразуете уже готовую Web-страницу в набор фреймов, Dreamweaver поместит
содержимое этой страницы в текущий фрейм. Если это главная страница вашего сайта
(default.htm), то вам придется перед созданием набора фреймов переименовать
ее, иначе не удастся сохранить страницу с набором фреймов под именем default.htm. Существует
еще один способ создания фреймов. Сейчас мы с вами его рассмотрим. Взгляните
на рис. 7.12. Обратите внимание на толстую серую рамку, окружающую весь наш
набор фреймов. Вы можете создавать новые фреймы набора, не пользуясь ни панелью
объектов, ни меню, а просто захватив эту рамку мышью и перетащив на то место,
где должна находиться граница вновь создаваемых фреймов. В частности, вы можете
таким образом разбивать один фрейм на два. Теперь можно
сделать небольшой перерыв, после чего мы узнаем еще кое-что о фреймах и особенностях
их поддержки Dreamweaver. Примечание Наборы
фреймов описываются с помощью парного тега <FRAMESET>, который должен
содержать один из атрибутов: ROWS или COLS. Названные атрибуты задают список
значений высоты (для тега <ROWS>) или ширины (для <COLS>) всех фреймов
данного набора. Сами фреймы задаются одинарным тегом <FRAME>. И <FRAMESET>,
и <FRAME> поддерживают множество атрибутов, задающих различные свойства
набора фреймов и самих фреймов; эти атрибуты мы рассмотрим позднее. В частности,
код, определяющий набор из двух горизонтально расположенных фреймов, верхний
из которых занимает 20% пространства окна, а другой — 80%, выглядит так: <FRAMESET
ROWS="20%,80%" ...> <FRAME ...> <FRAME ...> </FRAMESET> Соответственно,
два вложенных набора фреймов будут выглядеть так: <FRAMESET ROWS="20%,80%" ...> <FRAME
...> <FRAMESET COLS="100,*" ...> <FRAME ...> <FRAME ...> </FRAMESET> </FRAMESET> Внимание! Web-страница,
описывающая набор фреймов, не должна включать в себя тег <BODY> и его
содержимое. Она должна содержать только описание набора фреймов. Работа
с фреймами и наборами фреймов А теперь выясним,
что Dreamweaver позволит нам сделать с наборами фреймов и отдельными фреймами. Для того чтобы
задать свойства наборов фреймов и отдельных фреймов, нужно сначала выбрать один
из них. Лучше всего это проделывать в панели Frames. Изначально она отсутствует
в доке, поэтому выберите пункт Frames в
подменю Others меню Window или нажмите комбинацию клавиш <Shift>+<F2>.
Сама панель Frames показана на рис. 7.14.
Рис.
7.14. Панель Frames Посмотрите
внимательно на эту панель. В ней показаны все фреймы и вся структура наборов
фреймов. Фреймы изображены в виде серых прямоугольников, внутри которых написаны
их имена (об именах фреймов мы поговорим ниже). Надпись "(no name)"
говорит о том, что фрейм не имеет имени. Наборы фреймов представлены в виде
толстых темно-серых границ, окружающих пары фреймов. На самом деле, это весьма
удобно — все сразу видно. Единственная сложность: поначалу трудно попасть мышью
в кажущуюся такой толстой границу фреймового набора. Да, вы можете
щелкать мышью по границам наборов фреймов, чтобы выбрать тот или иной набор.
Также вы можете щелкать мышью и по самим фреймам, выбирая их. При этом редактор
свойств отобразит параметры выбранного фрейма или набора фреймов. А теперь самое
время рассказать, что Dreamweaver позволяет нам сделать с наборами фреймов.
Выберите в панели Frames какой-либо набор фреймов, например, самый внешний.
Вид редактора свойств в этом случае показан на рис. 7.15.
Рис.
7.15. Вид редактора свойств при выделенном наборе фреймов Элементы управления,
расположенные в верхней части редактора свойств, позволяют установить параметры
самого набора фреймов. Сейчас мы их перечислим. Раскрывающийся
список Borders позволяет задать наличие или отсутствие границ между фреймами
набора. Здесь доступны три пункта: Yes — границы есть, No — границ нет и Default
— значение по умолчанию, зависящее от Web-обозревателя (как правило, границы
есть). Если вы выставили
параметр Borders в Yes или Default, проверьте установки параметра
Border Width. Поле ввода Border Width позволяет задать толщину
границы в пикселах; если она равна нулю, то граница невидима. И наоборот, если
вы выставили Borders в No, лучше установите Border Width в ноль,
иначе могут быть проблемы с отображением в некоторых программах Web-обозревателей.
Значение по умолчанию зависит от Web-обозревателя и операционной системы. Внимание! Границы
малой толщины (меньше двух пикселов) могут отображаться неправильно или не отображаться
вообще. Подробнее об особенностях границ фреймов см. в электронном руководстве
по HTML (атрибут BORDER тега <FRAMESET>). Селектор цвета
Border Color позволяет задать цвет границы. Разумеется, чтобы этот параметр
имел действие, граница между фреймами набора должна быть видимой. Значение по
умолчанию зависит от Web-обозревателя (как правило, серая граница с трехмерным
эффектом). Попробуйте
поэкспериментировать с этими параметрами и посмотрите, что получится. Для чистоты
эксперимента просмотрите полученную страницу в разных программах Web-обозревателей. Вообще, в
настоящее время фреймы с видимыми границами считаются дурным тоном. Сейчас в
моде фреймы с невидимыми или очень тонкими границами. Мы тоже сделаем такие. Теперь обратимся
к нижней части редактора свойств. Находящиеся там элементы управления позволят
вам задать размеры отдельных фреймов выбранного набора. В правой части
редактора свойств вы видите схематичное изображение набора и содержащихся в
нем фреймов. В общем, это похоже на уже знакомую вам панель Frames. Вы
можете выбрать любой фрейм простым щелчком мыши; при этом выбранный фрейм будет
закрашен темно-серым цветом. Однако запомните, что это все-таки не панель Frames:
вы не можете сделать выбранный фрейм текущим и задать все его свойства. В поле ввода
Value вводится значение высоты или ширины фрейма. Это значение может
быть задано в пикселах или процентах. Также вы можете ввести
туда знак звездочки ("*"), обозначающий все остальное доступное пространство,
оставшееся от других фреймов. Dreamweaver корректно обработает его. Раскрывающийся
список Units задает единицу измерения высоты или ширины фрейма. Доступны
три пункта: Pixels — пикселы, Percent — проценты и Relative
— все остальное пространство (аналогично вводу звездочки в поле Value). Надо сказать,
что уже при создании набора фреймов Dreamweaver достаточно "интеллектуально"
подставляет значения их параметров. Поэтому вполне возможно, что вам вовсе не
придется их изменять. Ну, так, может быть, чуть-чуть подправить... Загрузите
созданную ранее страницу default.htm (см. рис. 7.12), если она еще не загружена.
Выберите поочередно все наборы фреймов, проверьте значения их параметров и,
если нужно, измените их. Значение Borders должно быть установлено в No,
толщина границ Border Width — в ноль, а поле цвета границ Border Color
должно оставаться пустым. Установите высоты верхнего (заголовок) и нижнего
(сведения об авторских правах) фреймов в 30 пикселов, а ширину левого фрейма
— в 100 пикселов. Если потом эти фреймы окажутся малы, мы их увеличим. С наборами
фреймов мы разобрались. А что же с самими фреймами? Выберите в
панели Frames любой фрейм, скажем, самый верхний. Редактор свойств примет
вид, показанный на рис. 7.16.
Рис.
7.16. Вид редактора свойств при выделенном фрейме В поле ввода
Frame Name вводится имя фрейма. Dreamweaver по умолчанию подставляет
туда автоматически сформированное имя, и часто оно оказывается весьма удачным.
Но иногда его следует изменить. Например, в нашем случае лучше всего будет дать
ему имя Header, обозначив таким образом отображаемое в нем содержимое. Зачем фрейму
необходимо имя, мы выясним позднее. Сейчас скажем только, что мы можем сослаться
на нужный фрейм по его имени. Вообще-то, если на фрейм не надо ссылаться, можно
и не давать ему имени. В поле ввода
Src вводится имя файла Web-страницы, отображаемой во фрейме. Dreamweaver сам
заполняет это поле при создании и сохранении страницы набора фреймов. Данное
поле можно и не заполнять; в таком случае во фрейме ничего не будет отображаться. Раскрывающийся
список Scroll задает, будет ли фрейм содержать полосы прокрутки. Доступны четыре
пункта:
Флажок No
Resize позволяет запретить пользователю изменять размеры фреймов перетаскиванием
их границ. Обычно пользователь может перетаскивать границы фреймов, изменяя
их размеры. Для фреймов, отображающих специальную информацию, таких как набор
гиперссылок или заголовок сайта, лучше запретить это, иначе подобные фреймы
будут выглядеть неаккуратно. Впрочем, Dreamweaver об этом за нас уже позаботился
-включил данный флажок. Раскрывающийся
список Borders уже вам знаком. Однако его действие распространяется только
на данный фрейм. Таким образом, вы можете задать наличие или отсутствие границ
и у отдельного фрейма. Пункт Default этого меню позволит вам вернуться
к параметрам набора фреймов. В селекторе
цвета Border Color вы можете установить цвет границы фрейма. Поля ввода
Margin Width и Margin Height позволяют задать, соответственно, горизонтальное
и вертикальное расстояния между границами фрейма и его содержимым. Значения
по умолчанию — 14 пикселов. Выберите поочередно
все четыре фрейма и установите их параметры, как указано в табл. 7.2. Остальные
параметры оставьте в положении по умолчанию. Таблица
7.2. Параметры фреймов нашего набора
Установив
параметры наборов фреймов и самих фреймов, сохраните страницу, выбрав пункт
Save Frameset в меню File или нажав комбинацию клавиш <Ctrl>+<S>. Примечание Имя фрейма
задается атрибутом NAME тега <FRAME>. Адрес Web-страницы, которая будет
в нем отображаться, задается атрибутом SRC этого же тега. Остальные атрибуты
перечислены в электронном руководстве по HTML, поставляемом в составе Dreamweaver. Мы уже говорили,
что фреймы, хоть и стандартизированы совсем недавно, используются в Web-дизайне
и поддерживаются Web-обозревателями уже довольно давно. Но все когда-нибудь
делается в первый раз... И старейшие программы Web-обозревателей — Microsoft
Internet Explorer и Netscape Navigator — поддерживают фреймы далеко не с первой
версии. Кроме того, существует много программ, вообще ничего не знающих о фреймах.
Они их просто не поддерживают, а вес потому, что эти программы слишком старые. Что случится,
если в таком Web-обозревателе открыть Web-страницу, представляющую собой набор
фреймов? Скорее всего, он отобразит пустую страницу без всяких следов содержимого.
Как вы помните, согласно стандартам HTML, Web-обозреватель обязан игнорировать
неизвестные ему теги. Он их и проигнорирует. А поскольку опять по тем же стандартам
страница с набором фреймов не должна иметь содержимого (тега <BODY>),
то в результате мы получим пустое окно. Каков же выход
из этого положения? Для таких
программ можно сформировать так называемое замещение — особое содержимое,
которое будет игнорироваться современными программами, "знакомыми"
с фреймами, но будет выводиться старыми. Это замещение помещается в той же странице,
где определяется набор фреймов. В результате программа, не поддерживающая фреймы,
игнорирует теги, определяющие набор фреймов, и выводит на экран текст замещения.
А программы, поддерживающие фреймы, игнорируют замещение, т. к. "знают"
о его существовании. Как же можно
сформировать замещение в Dreamweaver? Как всегда, очень просто. Включите в подменю
Frameset меню Modify пункт-выключатель Edit NoFrames Content.
Окно документа очистится; в верхней его части появится серая полоса с надписью
NoFrames Content. Введите в окно документа текст замещения. Как должен
выглядеть текст замещения? Исходите из того, что пользователи устаревших программ,
просматривая ваш сайт, не должны испытывать никаких неудобств. Возьмите за основу
главную страницу нашего предыдущего сайта default.htm. Поместите здесь набор
гиперссылок и сведения об авторских правах. Вы можете
делать с текстом замещения все, что угодно. Вы можете помещать сюда внедренные
элементы и таблицы, можете форматировать текст любыми доступными в HTML способами,
можете задавать параметры текста замещения, как будто это обычная Web-страница,
выбрав пункт Page Properties меню Modify. В частности, обязательно
измените параметры текста замещения так, чтобы они совпадали с параметрами остальных
страниц нового сайта (черный фон, белый текст и т. д.). (Помните: единообразие
оформления прежде всего!) Вы только не можете создавать здесь фреймы. Понятно,
почему. Посмотрите,
например, что сделал автор (рис. 7.17). Он скопировал сюда текст страницы default.htm
нашего старого сайта.
Рис.
7.17. Текст замещения Чтобы вернуться
от текста замещения к набору фреймов, отключите в подменю Frameset меню
Modify пункт-выключатель Edit NoFrames Content. В каких случаях
стоит задавать замещение? Только тогда, когда вы точно уверены, что среди посетителей
вашего сайта будут обладатели старых программ Web-обозревателей. Причем, таких
посетителей должно быть достаточно много, чтобы ради них выполнять дополнительную
работу. Но учтите, что во всем мире таких ретроградов очень и очень мало; абсолютное
большинство интернетчиков пользуются программами, поддерживающими фреймы. Мы даже не
знаем, когда у вас может возникнуть нужда в замещении. Подавляющее большинство
сайтов в Сети, использующих фреймы, его не имеют. А некоторые, хоть и вспоминают,
что не все Web-обозреватели поддерживают их любимые фреймы, но ограничиваются
одной-единственной фразой типа "Ваша программа не поддерживает фреймы,
обновите ее". Примечание Замещение
формируется с помощью парного тега <NOFRAMES>. Внутри этого тега располагается
тело Web-страницы (с тегом <BODY>), содержащей текст замещения. Создав набор
фреймов и установив все параметры, можно приступать к наполнению фреймов содержимым. Давайте используем
для нашего сайта стильный дизайн, который сейчас в большой моде. Это белый или
светло-желтый текст на черном или темно-сером фоне. Гиперссылки при этом выделяются
интенсивно-желтым или слабо-красным цветом. Это выглядит довольно эффектно на
фоне классических цветовых решений: темный текст на светлом фоне. Да, человечество
за всю свою историю не придумало ничего лучше черных чернил и белой бумаги,
но до чего же это красиво — белое на черном! И не забывайте,
что содержимое фрейма — на самом деле обычная Web-страница, сохраненная в отдельном
файле. Поэтому работа с содержимым фрейма осуществляется таким же образом, как
с любой страницей, т. е. вам необходимо задать ее параметры (цвета фона и текста
и т. д.), набрать текст, отформатировать его, разместить нетекстовые элементы
(горизонтальные линии, таблицы и т. п.) и графические изображения. Ну а это
вам уже знакомо. Если вам неудобно
работать со страницей в маленьком фрейме, вы всегда можете открыть эту страницу
в отдельном окне документа Dreamweaver. Сначала займемся
верхним фреймом, содержащим заголовок сайта. Мы поместим в него имя нашего героя,
выровненное по центру фрейма. Для этого используем таблицу из одной ячейки,
занимающую все свободное пространство фрейма. Но сначала уберем промежутки между
границей фрейма и его содержимым, устанавливаемые по умолчанию. Для чего выделите
верхний фрейм в панели Frames и установите параметры Margin Width
и Margin Height равными нулю. Это позволит нам отвести нашей таблице действительно
все свободное пространство. Теперь задайте
цвета текста и фона страницы (гиперссылок здесь не будет). Поместите во фрейм
текстовый курсор и вызовите диалоговое окно Page Properties (выберите
пункт Page Properties в меню Modify или контекстном меню или нажмите
комбинацию клавиш <Ctrl>+<J>). Задайте черный цвет фона (селектор
цвета Background) и желтый цвет текста (селектор цвета Text). Также
задайте нулевое значение для параметров Left Margin, Top Margin, Margin Width
и Margin Height (расстояния от границы окна до границы содержимого страницы)
и нажмите кнопку ОК. Название страницы можно не задавать — все равно
в любом случае Web-обозреватель выведет в заголовке своего окна название страницы
набора фреймов. Поместите
во фрейм таблицу из одной-единственной ячейки, занимающей всю его ширину и высоту.
Задайте для содержимого ее ячейки выравнивание по центру, по горизонтали и вертикали.
Установите флажок No Wrap -это запретит Web-обозревателю перенос текста
в ячейке таблицы по строкам. Введите в
ячейку текст "Иван Иванович Иванов". Установите подходящий размер
шрифта. Поэкспериментируйте с разными шрифтами. У вас получилось следующее (рис.
7.18).
Рис.
7.18, Готовый заголовок сайта Теперь приступим
к сведениям об авторских правах. Поставьте в нижний фрейм текстовый курсор и
вызовите диалоговое окно Page Properties. Задайте опять черный цвет фона,
желтый цвет текста, ярко-синий цвет гиперссылок (селектор цветов Links; цвет
#00FFFF), тускло-синий цвет посещенных гиперссылок (селектор цветов Visited
Links; #00CCFF) и светло-зеленый цвет активной гиперссылки (селектор цветов
Active Links; #99FF00). Опять задайте нулевое значение для параметров
Left Margin, Top Margin, Margin Width и Margin Height. После этого нажмите
кнопку ОК. И наберите
соответствующий текст. Но лучше сделайте так. Найдите страницу default.htm старого
сайта и откройте ее в Web-обозревателе. Выделите текст сведений об авторских
правах, расположенный внизу этой страницы, скопируйте его в буфер обмена Windows
и вставьте в нижний фрейм. Значения по
умолчанию параметров Margin Width и Margin Height фрейма слишком велики
(14 пикселов). Выберите нижний фрейм в панели Frames и установите значения
равными 2 пикселам. Так будет лучше. После этого
вам останется только выделить его курсивом или отформатировать как-то особо,
чтобы отделить от обычного текста. (Впрочем, он и так у нас отделен от всего
остального.) И, возможно, изменить размер фрейма, чтобы содержащийся в нем текст
отобразился полностью. У вас получится нечто, похожее на рис. 7.19.
Рис.
7.19. Готовые сведения об авторских правах Сохраните
набор фреймов и все содержимое фреймов, выбрав пункт Save All Frames меню
File. Вообще-то "сохраняться" нужно как можно чаще — запомните
это. И напоследок
займемся основным содержимым. По умолчанию в этом фрейме будет отображаться
страничка с приветствием и текстом, описывающим сайт. Мы возьмем этот текст
опять же со страницы default.htm
Рис.
7.20. Готовое основное содержимое сайта, отображаемое по умолчанию старого сайта.
Откройте ее в Web-обозревателе, если еще не открыли или уже закрыли. В свойствах
страницы основного содержимого укажите те же параметры, что и для страницы со
сведениями об авторских правах. Значения параметров Margin Width и Margin
Height для фрейма не меняйте. Далее переключитесь в окно Web-обозревателя,
где открыта страница default.htm старого сайта, выделите весь текст вплоть до
сведений об авторских правах, скопируйте его в буфер обмена Windows и вставьте
во фрейм основного содержимого сайта. Немного подредактируйте текст, в частности
уберите цветовое выделение слов "Macromedia Dreamweaver MX", преобразуйте
библиотечный элемент в обычный текст и удалите наконец давно не нужный комментарий. В результате
у вас должно получиться то, что показано на рис. 7.20. А как же набор
гиперссылок? Потерпите, мы создадим и его. И для этого используем замечательные
способности Dreamweaver по созданию полосы навигации. Но сначала
создадим остальные страницы нашего сайта. Создание
остальных страниц сайта Мы не будем
подробно рассказывать, как это делается, всецело полагаясь на вашу фантазию.
Можем только посоветовать не слишком усердствовать с дизайном страниц и обязательно
соблюдать единство их оформления. Когда мы делали
наш предыдущий сайт, мы натворили столько пестрых, разнообразных по оформлению
страниц, что у посетителей сайта, который мы уже опубликовали в Интернете, сейчас
рябит в глазах. Хотя эту пестроту можно объяснить: мы тогда учились делать различные
вещи и экспериментировали на страницах нашего сайта. Но сейчас-то нам не нужно
учиться элементарным вещам. Так что давайте больше не будем гнаться за пестротой. Возьмите за
образец страничку основного содержимого сайта Main.htm и делайте остальные страницы,
держа ее перед глазами. Вы даже можете просто открыть страницу Main.htm в отдельном
окне Dreamweaver, удалить весь текст и ввести новый. Только не сохраняйте страницу!
А сделайте так: выберите пункт Save As в меню File или нажмите комбинацию клавиш
<Ctrl>+<Shift>+<S>. На экране появится диалоговое окно сохранения
файла Windows; введите новое имя файла и нажмите кнопку ОК. Все — теперь
вы сохранили новую страницу под новым именем. После этого
вам останется только "позаимствовать" текст уже созданных вами страниц
старого сайта. Откройте необходимую страницу в окне Web-обозревателя (или Dreamweaver),
выделите нужный текст, скопируйте его в буфер обмена
и вставьте в новую страницу. Подредактируйте его, если нужно. И сохраните готовую
страницу. Имена файлов
новых страниц сделайте такими же, как у файлов страниц старого сайта. А именно:
Останется
только открыть страницу Main.htm и исправить гиперссылки. Ну что, закончили?
Теперь откройте страницу default.htm нового сайта в окне Web-обозревателя и
щелкните по любой гиперссылке. Что произойдет? Нечто ужасное и совершенно не
то, что нам нужно. Страница, на которую ссылается гиперссылка, загрузится и
займет все окно вместо того, чтобы "втиснуться" в отведенный ей фрейм.
Что делать? Для того чтобы
гиперссылки открывали соответствующую Web-страницу в нужном нам фрейме, надо
правильно выставить некоторые их свойства. Откройте страницу
default.htm. Установите текстовый курсор на любой гиперссылке, находящейся во
фрейме с основным содержимым. Пусть это будет гиперссылка, ведущая на страницу
сведений об авторе About.htm. И обратите внимание на редактор свойств. А именно
на раскрывающийся список Target, позволяющий задать цель гиперссылки.
В развернутом виде он показан на рис. 7.21.
Рис.
7.21. Раскрывающийся список Target, содержащий имена фреймов Вы уже знаете,
что этот список позволяет задать, где будет отображаться страница, на которую
указывает гиперссылка. В частности, пункт _blank этого списка позволит
загрузить ее в новое окно Web-обозревателя, а пункт _self — в то же самое
окно (по умолчанию). Но что мы видим на рис. 7.21? Там перечислены все созданные
нами фреймы! А что если выбрать пункт Main (фрейм основного содержимого
сайта)? Давайте попробуем: выберем и снова
загрузим страницу в окне Web-обозревателя. Ура, гиперссылка работает как надо! Теперь поочередно
выберите каждую гиперссылку в странице и установите параметр Target в Main,
за исключением гиперссылки, ведущей на сайт фирмы Macromedia, и почтовой
гиперссылки: для первой установите значение _blank (пусть их сайт открывается
в новом окне), а для второй оставьте все, как было — все равно для нее параметр
Target роли не играет. Теперь давайте
подытожим все, что мы узнали о значениях параметра Target:
Здесь нужны
некоторые пояснения, В самом деле, чем отличаются значения _parent и
_top параметра Target? А вот чем. Предположим,
мы создали сложный набор фреймов, состоящий из вложенных друг в друга простых
наборов, которые назовем внешним и внутренним. Теперь давайте
попытаемся загрузить какую-либо Web-страницу в один из фреймов внутреннего набора.
И загружать мы ее будем с разными значениями параметра Target. Итак...
Остальные
значения параметра Target в комментариях не нуждаются. Теперь, зная,
как загрузить Web-страницу в нужный фрейм, можно заняться полосой навигации. Полоса
навигации — это обычный набор гиперссылок, организованный в виде вертикальной
или горизонтальной полосы и расположенной вдоль края окна Web-обозревателя.
Как правило, полоса навигации располагается в специально выделенном фрейме.
И очень часто формируется с использованием таблицы: либо в виде набора текстовых
ссылок, либо в виде составного изображения. Во втором случае очень часто гиперссылки
полосы навигации делаются "живыми", т. е. реагирующими на наведение
курсора мыши и щелчок по ним. Это делается, как вы уже поняли, с помощью активных
изображений. Сделать полосу
навигации с текстовыми гиперссылками проще простого. Достаточно вставить в левый
фрейм таблицу из пяти строк и одного столбца, занимающую всю его ширину и высоту,
вписать в ячейки нужные слова и превратить их в гиперссылки. Конечно, вы можете
помудрить над таблицей: "приделать" ей границу, как было описано в
главе 5, сделать графический фон и т. п. Но, согласитесь, это делается
намного проще, чем графическая полоса навигации. По крайней мере не нужно заготавливать
уйму графических изображений для каждой гиперссылки. Вы, наверное,
уже задали себе вопрос: зачем нужна пятая ссылка? Для страницы Main.htm. В старом
сайте мы ни на одной странице не предусмотрели ссылки для возврата на первую
страницу. И зря. А что же графическая
полоса навигации? Она делается с помощью той же таблицы. В ячейках таблицы размещаются
графические изображения, выполняющие роль гиперссылок (просматривается аналогия
с составным изображением). Вы можете использовать различные визуальные эффекты,
например установить большие промежутки между изображениями, манипулируя параметрами
Cell Padding и Cell Spacing каждой ячейки таблицы, или разместить их
вплотную друг к другу. Опять же, вы можете задать для таблицы отдельный цвет
фона или графический фон. В общем, все в ваших руках. Вы можете
использовать набор обычных статичных изображений для гиперссылок. Но такие статичные
ссылки давно вышли из моды; вспомните, что важнейшим признаком современной Всемирной
паутины являются динамичность и интерактивность. Чтобы "оживить" ваши
гиперссылки, вы можете использовать надписи или кнопки Flash (прекрасная идея!)
или активные изображения. Второй подход более популярен, вероятно, потому, что
не требует модуля проигрывателя Flash. Так или иначе Dreamweaver позволит вам
сделать и то, и другое исключительно просто. Более того,
Dreamweaver HMeet встроенные средства создания полосы навигации из набора активных
изображений. Вам нужно будет только заготовить соответствующее количество графических
изображений, представляющих каждую гиперссылку. Это самая трудоемкая часть работы
— все остальное возьмет на себя Dreamweaver. Давайте же
сделаем для нашего сайта такую полосу навигации. Сначала заготовим
набор графических изображений. На каждую гиперссылку нам понадобятся четыре
изображения:
Создадим набор
небольших графических изображений в любом графическом редакторе, поддерживающем
формат GIF. Он будет включать:
Создадим в
папке Pics подпапку Navbar. Сохраним все полученные файлы в ней, дав им имена
в соответствии со следующим соглашением:
Всего у вас
должно получиться 20 файлов изображений. Что ж, вам придется здорово потрудиться...
(Вообще-то для таких дел лучше использовать специализированные пакеты Web-графики,
например Macromedia Fireworks. Они автоматически формируют все необходимые изображения
для полос навигации и создают соответствующий HTML-код и JavaScript-код, "оживляющий"
их. Но описание этих пакетов выходит за рамки данной книги.) Подготовив
изображения, задайте параметры Web-страницы. Как и в других страницах, отображаемых
в остальных фреймах, цвет фона будет черным, цвет текста — белым... Короче говоря,
подставьте те же значения, что и у страницы основного содержимого. Помните:
все страницы сайта должны выглядеть идентично. Чтобы создать
полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку
Navigation Bar (рис. 7.22) страницы Common панели
объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive
Images меню Insert. На экране появится диалоговое окно Insert
Navigation Ваг, показанное на рис. 7.23.
Рис.
7.22. Кнопка Navigation Bar панели объектов
Рис.
7.23. Диалоговое окно Insert Navigation Bar В списке Nav
Bar Elements перечислены все элементы полосы навигации, которые уже имеются.
(Изначально там находится один элемент, созданный для нас Dreamweaver.) Вы можете
выбрать любой из элементов и посмотреть либо изменить его параметры. В поле ввода
Element Name вводится имя элемента. Советуем давать элементам "говорящие"
имена, например Projects или Links. В поле ввода
Up Image вводится имя файла изображения, отображаемого в обычном случае.
Вы также можете щелкнуть кнопку Browse, расположенную справа от поля
ввода, и выбрать нужный файл в диалоговом окне открытая
файла Dreamweaver. Точно так же в поле ввода Over Image вводится имя
файла изображения, отображаемого, когда пользователь помещает над гиперссылкой
курсор мыши, в поле Down Image — имя файла изображения "нажатой"
гиперссылки, а в поле Over While Down Image — имя файла изображения "нажатой"
гиперссылки, над которой пользователь поместил курсор мыши. Справа от каждого
поля ввода находится спасительная кнопка Browse. В поле ввода
Alternate Text вводится альтернативный текст. К сожалению, Dreamweaver
неправильно обрабатывает русские буквы, поэтому вам или придется править сам
код HTML, или вводить альтернативный текст на английском, как это сделали мы. В поле ввода
When Clicked, Go To URL вводится имя файла Web-страницы, на которую осуществляется
переход при щелчке на гиперссылке. В раскрывающемся списке in, расположенном
справа от поля ввода, выбирается фрейм, в котором будет отображена страница.
Пункт Main Window этого списка позволяет открыть страницу во всем окне. Если вы хотите,
чтобы данный элемент полосы навигации изначально отображался "нажатым",
включите флажок Show "Down Image" Initially, находящийся в
группе Options. В частности, его нужно включить для элемента, обозначающего
начальную страницу (в нашем случае это страница Main.htm). А вот флажок
Preload Images, находящийся в этой же группе, лучше всегда держать включенным.
Он указывает Dreamweaver создать код, заставляющий Web-обозреватель загружать
заранее все изображения, задействованные в полосе навигации, и сохранять их
на жестком диске в своем кэше. Благодаря чему подстановка нужных изображений
будет происходить мгновенно, не ожидая, пока они загрузятся с сайта. В противном
случае Web-обозреватель будет вынужден загружать каждое изображение непосредственно
перед его отображением. С одной стороны, это позволит ускорить загрузку страницы
(не нужно будет загружать все изображения полосы навигации), а с другой — замедлит
реакцию полосы навигации на действия пользователя, т. к. Web-обозревателю придется
каждый раз загружать с сайта нужное изображение, а не брать его с кэша. Раскрывающийся
список Insert позволит задать расположение полосы навигации: горизонтальное
(пункт Horizontally) или вертикальное (пункт Vertically). Флажок
Use Tables заставит Dreamweaver создать полосу навигации на основе таблиц.
Этот флажок по умолчанию включен, и отключать его не стоит. Осталось рассказать
о кнопках, расположенных над списком Nav Bar Elements. Кнопка со знаком
"плюс" добавляет новый элемент в полосу навигации, а кнопка со знаком
"минус" удаляет выбранный в списке элемент. Кнопка вверх перемещает
выбранный в списке элемент на строку выше, а кнопка вниз— на строку ниже. Закончив формирование
полосы навигации, нажмите кнопку ОК. Если вы передумали вставлять полосу
навигации, нажмите кнопку Cancel. Введите в
окно вставки полосы навигации данные о пяти элементах полосы навигации согласно
табл. 7.3. В поля ввода Up Image, Over Image, Down Image и Over While Down
Image введите соответствующие имена файлов: если вы дали им такие имена,
какие автор советовал, у вас не будет проблем с поиском необходимого файла.
Проследите при этом, чтобы в раскрывающемся списке Relative To диалогового
окна Select File был выбран пункт Document (отсчет интернет-адресов
относительно текущей страницы) — задание адресов от корневой папки сайта работает
только под программой Web-сервера. Элементы должны быть введены в таком порядке,
в каком они перечислены в таблице. (Это общепринятый порядок перечисления элементов
полосы навигации в подобных сайтах.) Таблица
7.3. Данные полосы навигации
В раскрывающемся
списке in должен быть выбран пункт Main (имя фрейма основного
содержимого сайта). Для элемента Main (страница основного содержимого сайта,
отображаемая по умолчанию) включите флажок Show "Down Image" Initially,
т. к. он должен быть по умолчанию "нажатым". В раскрывающемся
списке Insert выберите пункт Vertical, т. к. полоса навигации
в нашем случае должна быть вертикальной. Остальные элементы управления не трогайте.
После этого нажмите кнопку ОК. Осталось немного
подредактировать фрейм и его содержимое вручную. Установите значения параметров
Margin Width и Margin Height для фрейма в ноль, чтобы не было этих отвратительных
отступов слева и сверху. Потом выделите таблицу и установите параметр Width
в 100%, чтобы она заняла всю ширину фрейма. Осталось выделить все ячейки
таблицы и выставить параметр Horz в Center, a Vert — в Middle. Вы помните,
что обозначают эти параметры? Посмотрите
на рис. 7.24. Как видите, Dreamweaver здорово постарался, сделав за нас всю
сложную работу по созданию "живой" полосы навигации. Если вы просмотрите
сгенерированный им HTML-код, то увидите, как много
работы пришлось ему проделать: сформировать таблицу, разместить в ней все указанные
вами графические изображения, превратить их в гиперссылки и — главное — создать
сценарии, которые будут ими управлять. Согласитесь, вручную такое не сразу сделаешь.
Рис.
7.24. Готовая полоса навигации Теперь сохраните
все фреймы, выбрав пункт Save All Frames в меню File. И откройте
страницу в окне Web-обозревателя. Попробуйте поместить курсор мыши над каким-нибудь
элементом полосы навигации и посмотрите, что получится. Пощелкайте по нему. Как видите,
даже очень сложные вещи делаются в Dreamweaver исключительно просто. Например,
полоса навигации с активными изображениями для начинающего Web-дизайнера — весьма
сложная задача: нужно хорошо знать не только язык описания Web-страниц HTML,
но и язык написания сценариев JavaScript. И если с HTML, как правило, проблем
нет, то с JavaScript — есть... Хорошо! Мы
сделали полосу навигации и поместили ее во фрейме. Но сайт наш, как и все на
свете, изменяется. Что если нам вдруг понадобится добавить новый элемент или
изменить графические изображения? Для этого просто выделите полосу навигации
(любой ее элемент) и выберите в меню Modify пункт Navigation Bar.
На экране появится диалоговое окно Modify Navigation Ваг, аналогичное
уже знакомому вам окну Insert Navigation Bar (см. рис. 7.23), в котором
вы сможете изменить все, что нужно. Создав наш
первый работающий набор фреймов, можно подумать о его оптимизации. Уменьшение
объема и сложности HTML-кода Если вы создаете
достаточно сложные наборы фреймов, то можете столкнуться с тем, что Dreamweaver
не очень оптимально формирует соответствующий HTML-код. В частности (да вы и
сами это видели), Dreamweaver не может формировать наборы более чем из двух
фреймов. Судя по всему, разработчики программы облегчили себе задачу за счет
увеличения объема и сложности получаемого HTML-кода. Конечно, это можно стерпеть,
если учесть, как хорошо Dreamweaver справляется со своими задачами в других
случаях, но все же проблема остается. Взгляните
на код, сформированный Dreamweaver для нашего набора фреймов (автор слегка сократил
его, убрав не относящиеся к делу атрибуты тегов): <FRAMESET
ROWS="*,54"> <FRAMESET ROWS="30,*"> <FRAME NAME="Header" SRC="/HTMLs/Header.htm"> <FRAMESET
COLS="100,399"> <FRAME NAME="Nav" SRC="/HTMLs/Nav.htm"> <FRAME NAME="Main" SRC="/HTMLs/Main.htm"> </FRAMESET> </FRAMESET> <FRAME
NAME="Copyright" SRC="/HTMLs/Copyright.htm"> </FRAMESET> Как видите,
Dreamweaver формирует только простые наборы из двух фреймов. А если фреймов
в одном простом наборе должно быть больше, используются сложные наборы с многократным
вложением. В частности,
нам был нужен набор из трех горизонтальных фреймов. Поскольку Dreamweaver формирует
только двухфреймовые простые наборы, он создал два вложенных набора, по два
фрейма в каждом. (Соответствующий код выделен полужирным шрифтом.) Давайте немного
упростим этот фрагмент кода. У нас получится вот что: <FRAMESET
ROWS="30,*,54"> <FRAME NAME="Header" SRC="/HTMLs/Header.htm"> <FRAMESET
COLS="100,399"> <FRAME
NAME="Nav" SRC="/HTMLs/Nav.htm"> <FRAME NAME="Main" SRC="/HTMLs/Main.htm"> </FRAMESET> <FRAME NAME="Copyright" SRC="/HTMLs/Copyright.htm"> </FRAMESET> Если раньше
у нас была трехкратная вложенность фреймов, то теперь мы обошлись двукратной,
совместив два двухфреймовых простых набора в один трехфреймовый. (Этот фрагмент
кода выделен полужирным шрифтом.) Как видите, HTML-код набора фреймов стал проще
и компактнее. Откройте страницу
default.htm в окне документа, переключитесь в режим кода и внесите эти изменения,
после чего снова переключитесь в режим страницы. Что мы видим? В окне документа
ничего не изменилось. Как видите, Dreamweaver правильно обрабатывает простые
наборы из любого количества фреймов. Вы можете щелкать по ним мышью в окне фреймов,
устанавливать значения параметров в редакторе свойств, заполнять их текстом
в окне документа. Более того, если вы выберете набор из трех фреймов, Dreamweaver
правильно отобразит его структуру в редакторе свойств (рис. 7.25). Получается,
что Dreamweaver все-таки поддерживает простые наборы с количеством фреймов более
двух.
Рис.
7.25. Структура набора из трех фреймов Приведем несколько
советов, которые помогут Web-обозревателю быстрее обработать и отобразить наборы
фреймов.
Как вы знаете,
ничего идеального на свете не бывает. Это утверждение относится и к фреймам. Недостатки
фреймов и их преодоление Вроде бы,
фреймы всем хороши. Они позволяют разделить окно Web-обозревателя на несколько
независимых "форточек", в каждой из которых может отображаться своя
Web-страница. Таким образом, одна большая Web-страница делится на несколько
маленьких, содержащих какую-либо часть большой страницы: заголовок, полосу навигации,
сведения об авторских правах и основное содержимое. При этом когда пользователь
щелкает по гиперссылке, происходит обновление только фрейма с основным содержимым;
содержимое всех остальных фреймов остается неизменным. Достоинства
такого подхода очевидны. Во-первых, не нужно дублировать заголовок, полосу навигации
и сведения об авторских правах на всех страницах сайта — достаточно поместить
их один раз в соответствующие фреймы, где они и останутся. Во-вторых, сами страницы
уменьшатся в размерах и станут быстрее загружаться. На этом достоинства
фреймов кончаются, и начинаются недостатки. Недостаток
первый: невозможность обновления содержимого сразу двух или нескольких фреймов.
Давайте рассмотрим гипотетический сайт — каталог программ, структура фреймов
которого показана на рис. 7.26.
Рис.
7.26. Структура фреймов сайта — каталога программ Предположим,
пользователь щелкает одну из позиций списка категорий, расположенного в левом
фрейме. Вам необходимо обновить содержимое фрейма списка программ, относящихся
к выбранной категории, и вы это сделаете. Но, кроме того, нужно будет обновить
содержимое фрейма описания выбранной программы, скажем, вывести описание первой
или самой популярной программы в списке. Ведь если оставить в нем описание программы,
относящейся совсем к другой категории, это будет, мягко говоря, некрасиво. К несчастью,
средствами HTML это сделать невозможно. Обычная гиперссылка HTML, описываемая
парным тегом <А>, может указывать только на один файл. Если вы хотите
по щелчку загружать сразу две страницы (или более — в данном случае это несущественно)
в разные фреймы, вам придется писать сценарий на языке JavaScript. А это уже
довольно сложная задача для начинающего Web-дизайнера. На первый раз можем посоветовать
только постараться избежать использования таких наборов фреймов или же отказаться
от фреймов вообще. Недостаток
второй: невозможность задания текста, который Web-обозреватель помещает в заголовок
своего окна. Как вы знаете, он помещает туда название отображаемой в окне Web-страницы.
Но поскольку страница набора фреймов никогда не меняется (меняется только содержимое
одного из фреймов), текст в заголовке окна Web-обозревателя остается неизменным.
В принципе, это не очень страшно — мало кто из посетителей сайтов обращает внимание
на заголовок окна Web-обозревателя. Но если вы собираетесь выводить в заголовке
окна какую-либо важную информацию, имейте это в виду. Недостаток
третий: "несовместимость". Путь фреймов к признанию комитетом WWWC
был так долог и тернист, что за это время успели появиться несколько программ
Web-обозревателей, их поддерживающих. Но поскольку единого стандарта на фреймы
не было, поддерживали они их по-своему. В результате фреймы стали одним из самых
"несовместимых" элементов HTML. В данном случае
можно посоветовать только тщательно тестировать страницы наборов фреймов в разных
программах Web-обозревателей. Конечно, Dreamweaver старается генерировать максимально
совместимый код, но все-таки не помешает лишний раз проверить, что он сгенерировал. Недостаток
четвертый. О нем мы поговорим в главе 14, когда будем рассматривать поисковые
системы и "раскрутку" вашего сайта с их помощью. Проблема
с фреймами в старых версиях Navigator А вот это
уже не "функциональная особенность" некогда известной программы, а
элементарная ошибка разработчиков. Старые версии Navigator неправильно отображают
страницы наборов фреймов после того, как пользователь
изменит размеры окна. И разработчики Dreamweaver, чтобы компенсировать невнимательность
разработчиков фирмы Netscape, ввели в свой Web-редактор специальную функцию
исправления данной ошибки. Откройте в
окне документа Dreamweaver страницу набора фреймов и выберите в меню Commands
пункт Add/Remove Netscape Resize Fix. На экране появится небольшое
окно-предупреждение, кратко описывающее проблему с фреймами в Navigator и то,
что Dreamweaver может сделать для ее решения (рис. 7.27).
Рис.
7.27. Окно, предупреждающее о проблеме с фреймами в Navigator и предлагающее
путь ее решения Если вы нажмете
кнопку Add, Dreamweaver добавит в код страницы небольшую программу-сценарий
на языке JavaScript, перезагружающую страницу набора фреймов после изменения
размеров окна Navigator. Если вы нажмете кнопку Cancel, Dreamweaver ничего
не сделает. Может случиться
так, что вы захотите удалить эту программу-сценарий, для чего вам необходимо
просто еще раз выбрать пункт Add/Remove Netscape Resize Fix в меню Commands.
На экране появится другое окно-предупреждение, показанное на рис. 7.28.
Нажмите кнопку Remove для удаления данного кода или кнопку Cancel
— для отказа от этого.
Рис.
7.28. Окно, предлагающее удалить сценарий перезагрузки страницы Следует ли
этим пользоваться? Вероятно, да. Поскольку старые версии Netscape Navigator
все еще используются некоторой частью интернетчиков, нужно предусмотреть все,
чтобы они могли без проблем просматривать ваши страницы. Тем более что это не
отнимет у вас никаких усилий — за вас все сделает Dreamweaver. А помещаемый
им сценарий очень мал и не может существенно увеличить размер страницы набора
фреймов. Вот мы и познакомились
с фреймами и фреймовым дизайном. И даже создали новый вариант сайта с их использованием. Но, как уже
говорилось, фреймы потихоньку устаревают. Сейчас в моде дизайн с использованием
таблиц. Табличный дизайн позволяет создавать Web-страницы, больше напоминающие
печатные документы, например газеты. Они включают в себя несколько колонок с
текстом, множество графических иллюстраций, линеек, т. е. всего того, к чему
привыкли дизайнеры-полиграфисты. Таблицы позволяют сделать все это с легкостью.
А уж как Dreamweaver обращается с таблицами! Одним словом, вы должны узнать это. ← к предыдущей главе
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 Обратная@связь | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
