Учебник Macromedia Dreamweaver (стр. 50 из 135)

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

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

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

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

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

Рис. 7.10. Два горизонтальных фрейма

Рис. 7.11. Три горизонтальных фрейма

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

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

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

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

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

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

Рис. 7.12. Готовый набор фреймов

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

Теперь Dreamweaver будет поочередно предлагать вам сохранить содержимое каждого фрейма набора (не забывайте, что содержимое фрейма задает отдельная Web-страница). При этом фрейм, содержимое которого сохраняется в данный момент, выделяется толстой штриховой линией (рис. 7.13),
благодаря чему вы будете знать, что сохраняет Dreamweaver, и какое имя дать той или иной странице.

Рис. 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>

Соответственно, два вложенных набора фреймов будут выглядеть так:

</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: вы не можете сделать выбранный фрейм текущим и задать все его свойства.