DreamWeaver шаг за шагом

модульные картины в кемерово купить | Металлические водостоки аквасистем еще на сайте. |

Шаг 6


Как и обещал беремся за изготовление меню нашего сайта. Применять мы сегодня будем много чего, так что приготовьтесь к длительному чтению.

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

Заметили, что курсор сместился в левый нижний угол ячейки? Так и должно быть.

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

После написания текста измените в свойствах его форматирование с none на paragraph. В HTML это означает заключение текста в тег <P></P>. Для чего я это сделал? Чтобы получить строку, с которой мне затем будет просто, удобно и легко работать.

Не знаю как вас, а меня внешний вид нашего меню не устраивает. Хотелось бы его немного приподнять над краем ячейки, покрасить в другой (более контрастный) цвет + сделать еще кое-какие косметические вещи.

Сделать это можно при помощи CSS Styles (CSS - стилей). Находятся они в правой нижней части окна DreamWeaver.

В появившейся панели нажимаем на кнопку "создать" (она выделена на рисунке).

Затем в диалоге выбираем тип Make Custom Style (class), дадим нашему стилю название и приступим к его определению.

Укажите размер шрифта (Size), цвет (Color) и Decoration как показано на рисунке. Остальные настройки мы пока не трогаем.

Как видите настроек у стиля до черта. Нам они все пока не нужны. Перейдите в пункт box и задайте параметры отступов как показано у меня на картинке. Обращаю ваше внимание, что сами отступы в DreamWeaver могут не отобразиться как надо. Не пугайтесь, в браузере все будет в порядке.

Так, теперь выделяем наше меню нажатием на букву <P> в нижнем левом углу окна.

В панели стилей просто выбираем наш стиль (menu). Ну вот, стиль на параграф текста мы назначили. Можно проверить как все это выглядит в браузере. Для этого нужно лишь нажать F12.




- Начало -    - Вперед -



Книжный магазин