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

Выберите правую верхнюю ячейку таблицы, для которой отвели место под меню. В свойствах измените горизонтальное и вертикальное выравнивание налево и вниз соответственно. Курсор сместится в левый нижний угол ячейки. Напишите текст, состоящий из названий основных разделов и ссылок на них. Обратите внимание, что текст прижат к нижней части ячейки и целиком находится на синем поле фона. После написания текста измените в свойствах его форматирование с 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.1. Окно SCC Styles Рисунок - 1.10.8.2. Окно New Style

Выбираем Make Custom Style и опеределим его (рис. 1.10.8.3).

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

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

Зададим параметры еще нескольким элементам. В отличие от предыдущего раза, когда мы делали свой стиль, теперь мы будем переназначать уже готовый стиль, например стиль параграфа (<P>). Для этого создаем новый стиль, выбираем пункт Redefine HTML Tag и тег P (рис. 1.10.8.4).

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

Для параграфа мы укажем конкретный шрифт (Font), размер (Size) и цвет (Color) (рис. 1.10.8.5).

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

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

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

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

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

1.10.9. Форматирование текста

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

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

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

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

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

Рисунок - 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

СтраницаBorder позволит создать бордюр вокруг элемента со всеми необходимыми вам настройками: ширина и цвет бордюра слева, справа, сверху и снизу, стиль бордюра, настройка списков (нумерованного, маркерованного), формат маркера, использование в качестве маркера картинки, позиционирование маркера.

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

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

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

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