Создание меню

Выберите правую верхнюю ячейку таблицы, для которой отвели место под меню. В свойствах измените горизонтальное и вертикальное выравнивание налево и вниз соответственно. Курсор сместится в левый нижний угол ячейки. Напишите текст, состоя­щий из названий основных разделов и ссылок на них. Обратите внимание, что текст прижат к нижней части ячейки и целиком нахо­дит­ся на синем поле фона. После написания текста измените в свойствах его форматирование с None на Paragraph. В HTML это означает заключение текста в тег <P></P>. Это позволяет получить строку, с которой будет просто, удобно и легко работать в дальнейшем.

Внешний вид меню можно улучшить: немного приподнять над краем ячейки, покрасить в другой более контрастный цвет и т.п. Сделать это можно при помощи CSS Styles (CSS - стилей). Находятся они в правой нижней части окна Dreamweaver. Нажмите кнопку Show CSS Style, и появится окно CSS Style (рис. 1.10.8.1). Нажмем кноп­ку New Style, и появится окно New Style (рис. 1.10.8.2).

Рисунок - 1.10.8.3. Окно определения стиля меню

Выделяем наше меню нажатием на букву <P> в нижнем левом углу окна. В панели стилей просто выбираем наш стиль (Menu). Таким обра­зом, стиль на параграф текста мы назначили. Можно проверить, как все это выглядит в браузер, нажав клавишу F12.

Рисунок - 1.10.8.4. Окно New Style

Рисунок - 1.10.8.5. Окно New Style

Кроме параграфа, изменим теги a:link и a:hover. Эти теги отвечают за внеш­ний вид ссылки в стандартном состоянии и в состоянии при наве­ден­ной на нее мышки соответственно. Зададим цвет ссылок (белый) и при наведении сделаем изменение Decoration с None на Underline.

Укажем ссылки на основные страницы нашего сайта. Делается это просто - выделяете нужный текст (если это одно слово, то можно просто па­ру раз щелкнуть по нему мышкой) и пишете в свойствах ссылку. Самих фай­лов у нас пока (реально на диске) нет, поэтому мы именно пишем нужные нам названия (а не ищем их на диске).

Наша последняя задача - облегчить уста­новку и изменение (при необходи­мос­ти) на­шего меню. Ее можно решить при помо­щи удобного инструмента Dreamweaver под названием “Библи­оте­ка“ (Library).

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

Для создания стиля используется окно New Style (рис. 1.10.9.1).

Рисунок - 1.10.9.1. Окно создания нового стиля

Можно выбрать один из трех вариантов - создать новый стиль, переназначить свойства стандартного HTML-тега и использовать спе­циаль­ные расширения CSS.

После указания имени вашего стиля или выбора стандартного стиля для переназначения появится многостраничное окно настройки стиля. За результатами изменения стиля можно наблюдать в режиме Realtime. Если поле окна настройки помечено звездочкой, это означает, что данный вариант не отображается визуально в Dreamweaver и его нужно проверить в браузере. Рассмотрим страницы окна настройки.

Рисунок - 1.10.9.2. Страница Type

СтраницаBackground определяет фон всей странички или только заданного абзаца текста: цвет фона (выбираете вариант из стандартных 256 цветов или создаете свой цвет), файл с фоновым изображением, настройку повторения фонового изображения по странице (например, можно задать, чтобы изображение копировалось только по оси X)*, поведение фонового изображения при прокрутке страницы (прокручивается вместе с ней или стоит на месте)*, горизонтальную и вертикальную позицию начала фона, параметры блока текста (расстояние между словами, буквами, верти­каль­ное и горизонтальное выравнивание строки текста, отступ первой строки текста, расстановка дополнительных пробелов между словами и предложениями) (рис. 1.10.9.3).

Страница Box устанавливает ограничения данного куска текста на странице: ширина и высота прямоугольника с текстом, выключки влево или вправо и поведение текста при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект), отступ от края прямоугольника до расположенных рядом других элементов, отступ от краев прямоугольника до текста (Рисунок - 1.10.9.4).

Рисунок - 1.10.9.3. Страница Background

Рисунок - 1.10.9.4. Страница Box

Страница Positining задает местоположение объекта на страничке: тип позиционирования (относительное, абсолютное и т.д.), расположение по Z-координате (в каком слое будет находиться объект), видимый или невидимый объект (может использоваться для создания пустых полей в документе), обработка переполнения (текст весь не помещается), распо­ло­же­ние объекта (указание координат вершины, ширины и высоты), отступы со всех сторон в пикселях или других единицах.

Последняя страница задает указание обрыва страницы (в основном для печати) и визуальный эффект - при наведении на объект курсора он может менять свою форму или при загрузке объекта срабатывает один из стандартных фильтров (последнее верно только для Internet Explorer).

Пример создания “Буквицы” для каждого нового параграфа.

Зададим характеристики шрифта (рис. 1.10.9.2). В качестве фона вы­­берем более светлый цвет, чем цвет самого текста (рис. 1.10.9.3). На странице Box укажем, что сам элемент будет сдвинут влево, а элементы вокруг него будут сдвигаться вправо (рис. 1.10.9.4).