Macromedia Dreamweaver MX

Работа с фреймами

Но хватит пустых разговоров! Давайте займемся делом и на конкретном примере рассмотрим принципы фреймового дизайна. Мы создадим новую версию нашего сайта, посвященного гипотетическому ¥еЬ-дизайнеру Ивану Ивановичу Иванову, версию, основанную на фреймах. И, не мудрствуя лу­каво, выберем для него схему, показанную на рис. 7.1.

Проверьте, создали ли вы новую папку Sample!. Также проверьте, не удали­ли ли вы старую версию сайта, находящуюся в папке Sample!. Ведь одна из важнейших заповедей 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.

Итак, давайте приступим к созданию нашего набора фреймов.

Прежде всего, создадим верхний фрейм, в котором у нас будет помещаться заголовок сайта. Нажмем кнопку Top Frame. В результате получатся два фрейма, расположенные горизонтально, друг над другом (рис. 7.10).

Теперь убедимся, что текстовый курсор стоит в нижнем фрейме, и нажмем кнопку Bottom Frame. В результате получим еще один фрейм, но располо­женный на этот раз ниже текущего (рис. 7.11).

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

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

Осталось создать еще один фрейм — левый, где будет помещаться набор гиперссылок. Его мы создадим немного по-другому, для чего воспользуемся подменю Frameset меню Modify.

Там находятся следующие пункты:

□ Split Frame Left — создание фрейма слева от текущего;

□ Split Frame Right — создание фрейма справа от текущего;

□ Split Frame Up — создание фрейма сверху от текущего;

□ Split Frame Down — создание фрейма снизу от текущего.

Итак, сделайте текущим средний фрейм и выберите в подменю Frameset меню Modify пункт... правильно, Split Frame Left. Вы получите последний фрейм, который как раз и был нам нужен. Уменьшите его ширину — это делается так же, как и в случае с горизонтальными фреймами. У вас должно получиться нечто, похожее на то, что изображено на рис. 7.12

Теперь дайте готовой странице с набором фреймов название "Иван И. Ива­нов" и сохраните ее, выбрав пункт Save All меню File — это позволит сохра­нить также содержимое всех фреймов. На экране появится стандартное диа­логовое окно сохранения файла Windows, предлагающее вам сохранить сам набор фреймов под именем UntitledFrameset-l. htm. Сохраните его в корне­вой папке нового сайта под именем default. htm.

Теперь Dreamweaver будет поочередно предлагать вам сохранить содержи­мое каждого фрейма набора (не забывайте, что содержимое фрейма задает отдельная Web-страница). При этом фрейм, содержимое которого сохраня­ется в данный момент, выделяется толстой штриховой линией (рис. 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 C0LS="1QQ,*" ...>

<FRAME...>

<FRAME...>

</FRAMESET>

</FRAMESET>

Web-страница, описывающая набор фреймов, не должна включать в себя тег <body> и его содержимое. Она должна содержать только описание набора фреймов.

Работа с фреймами и наборами фреймов

А теперь выясним, что Dreamweaver позволит нам сделать с наборами фреймов и отдельными фреймами.

Свойства наборов фреймов

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

В подменю Others меню Window или нажмите комбинацию клавиш <Shift>+<F2>. Сама панель Frames показана на рис. 7.14.

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

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

А теперь самое время рассказать, что Dreamweaver позволяет нам сделать с наборами фреймов. Выберите в панели Frames какой-либо набор фрей­мов, например, самый внешний. Вид редактора свойств в этом случае пока­зан на рис. 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.

В поле ввода Frame Name вводится имя фрейма. Dreamweaver по умолчанию подставляет туда автоматически сформированное имя, и часто оно оказыва­ется весьма удачным. Но иногда его следует изменить. Например, в нашем случае лучше всего будет дать ему имя Header, обозначив таким образом отображаемое в нем содержимое.

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

В поле ввода Src вводится имя файла Web-страницы, отображаемой во фрейме. Dreamweaver сам заполняет это поле при создании и сохранении страницы набора фреймов. Данное поле можно и не заполнять; в таком случае во фрейме ничего не будет отображаться.

Раскрывающийся список Scroll задает, будет ли фрейм содержать полосы прокрутки. Доступны четыре пункта:

□ Yes — полосы прокрутки есть всегда;

□ No — полос прокрутки нет даже тогда, когда содержимое фрейма не по­мещается в нем;

□ Auto — полосы прокрутки появляются только тогда, когда в них появля­ется необходимость (содержимое фрейма не помещается в нем);

□ Default — значение по умолчанию, зависящее от Web-обозревателя (как правило, аналогично Auto).

Флажок No Resize позволяет запретить пользователю изменять размеры фреймов перетаскиванием их границ. Обычно пользователь может перетас­кивать границы фреймов, изменяя их размеры. Для фреймов, отображаю­щих специальную информацию, таких как набор гиперссылок или заголо­вок сайта, лучше запретить это, иначе подобные фреймы будут выглядеть неаккуратно. Впрочем, Dreamweaver об этом за нас уже позаботился — включил данный флажок.

Раскрывающийся список Borders уже вам знаком. Однако его действие рас­пространяется только на данный фрейм. Таким образом, вы можете задать наличие или отсутствие границ и у отдельного фрейма. Пункт Default этого меню позволит вам вернуться к параметрам набора фреймов.

В селекторе цвета Border Color вы можете установить цвет границы фрейма.

Поля ввода Margin Width и Margin Height позволяют задать, соответственно, горизонтальное и вертикальное расстояния между границами фрейма и его содержимым. Значения по умолчанию — 14 пикселов.

Выберите поочередно все четыре фрейма и установите их параметры, как указано в табл. 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 нашего старого сайта.

Чтобы вернуться от текста замещения к набору фреймов, отключите в под­меню Frameset меню Modify пункт-выключатель Edit NoFrames Content.

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

Мы даже не знаем, когда у вас может возникнуть нужда в замещении. По­давляющее большинство сайтов в Сети, использующих фреймы, его не имеют. А некоторые, хоть и вспоминают, что не все ¥еЬ-обозреватели под­держивают их любимые фреймы, но ограничиваются одной-единственной фразой типа "Ваша программа не поддерживает фреймы, обновите ее".

( Примечание )

Замещение формируется с помощью парного тега <noframes>. Внутри этого те­га располагается тело Web-страницы (с тегом <body>), содержащей текст за­мещения.