Как и обещал беремся за изготовление меню нашего сайта. Применять мы сегодня будем много чего, так что приготовьтесь к длительному чтению.
Для начала выберите ячейку таблицы (верхнюю правую) для которой мы отвели место под меню. В свойствах измените горизонтальное и вертикальное выравнивание на влево и вниз соответственно (см. рисунок слева).
Заметили, что курсор сместился в левый нижний угол ячейки? Так и должно быть.
Теперь напишите текст состоящий из названий основных разделов и ссылок на них. Обратите внимание, что текст прижат к нижней части ячейки и целиком находится на синем поле фона (что нам, собственно и нужно).
После написания текста измените в свойствах его форматирование с none на paragraph. В HTML это означает заключение текста в тег <P></P>. Для чего я это сделал? Чтобы получить строку, с которой мне затем будет просто, удобно и легко работать.
Не знаю как вас, а меня внешний вид нашего меню не устраивает. Хотелось бы его немного приподнять над краем ячейки, покрасить в другой (более контрастный) цвет + сделать еще кое-какие косметические вещи.
Сделать это можно при помощи CSS Styles (CSS - стилей). Находятся они в правой нижней части окна DreamWeaver.
В появившейся панели нажимаем на кнопку "создать" (она выделена на рисунке).
Затем в диалоге выбираем тип Make Custom Style (class), дадим нашему стилю название и приступим к его определению.
Укажите размер шрифта (Size), цвет (Color) и Decoration как показано на рисунке. Остальные настройки мы пока не трогаем.
Как видите настроек у стиля до черта. Нам они все пока не нужны. Перейдите в пункт box и задайте параметры отступов как показано у меня на картинке. Обращаю ваше внимание, что сами отступы в DreamWeaver могут не отобразиться как надо. Не пугайтесь, в браузере все будет в порядке.
Так, теперь выделяем наше меню нажатием на букву <P> в нижнем левом углу окна.
В панели стилей просто выбираем наш стиль (menu). Ну вот, стиль на параграф текста мы назначили. Можно проверить как все это выглядит в браузере. Для этого нужно лишь нажать F12.
Раз уж мы залезли в CSS-стили, давайте доведем наше черное дело до конца. Зададим параметры еще нескольким элементам.
В отличие от предыдущего раза, когда мы делали свой стиль, теперь мы будем переназначать уже готовый стиль. Например стиль параграфа (<P>). Для этого создаем новый стиль, выбираем пункт Redefine HTML Tag и выбираем тег p.
Для параграфа мы укажем конкретный шрифт (font), размер (size) и цвет (color). Остальное оставим как есть.
Кроме параграфа мы еще и парочку тегов a:link и a:hover изменим. Эти теги отвечают за внешний вид ссылки в стандартном состоянии и в состоянии при наведенной на нее мышки.
Зададим цвет ссылок (белый) и при наведении сделаем изменение Decoration с none на underline.
Пришло время указать ссылки на основные страницы нашего сайта. Делается это просто - выделяете нужный текст (если это одно слово, то можно просто пару раз щелкнуть по нему мышкой) и пишете в свойствах сслылку.
Самих файлов у нас пока (реально на диске) нет, по-этому мы именно пишем нужные нам названия (а не ищем их на диске).
Наша последняя задача - облегчить установку и изменение (по необходимости) нашего меню. Ее можно решить при помощи удобного инструмента DreamWeaver под названием "библиотека" (library). Где она находится вы видите на рисунке слева.
В появившемся окне выбираем создать новый элемент (наше меню должно быть целиком выделено!).
Сразу же вылетает предупреждение о том, что мы применяем к элементу меню особые стили, и он может не отображаться корректно на других страничках. Не пугайтесь, все в порядке, просто нажимайте OK.
Все, осталось только назвать наш элемент поудобнее и при необходимости вставлять его в любой документ при помощи кнопки Insert.
Кстати, все изменения, которые мы будем вносить в наш элемент будут автоматически вноситься во все страницы на которых он используется.
На результат сегодняшнего урока можно взглянуть вот здесь. На следующем шаге мы будем разбираться с особенностями форматирования текста в DreamWeaver и познакомимся поближе с CSS-стилями.
Назад | Содержание | Вперед
[an error occurred while processing this directive]