Видеоуроки

Создание меню с помощью графических кнопок на CSS
дата: 6.06.2008

Методика создания такого меню позволяет использовать только одну графическую кнопку для оформления всех его пунктов. В период моего табличного сайтостроительства мне приходилось создавать отдельную кнопку для каждого слова, поскольку их ширина была разная. При этом я была вынуждена корректировать ширину какой-либо кнопки, если я изменяла слово в какой-то ссылке. Кроме того, представьте, какой получался код, ведь нужно было каждое слово связать с определенным изображением (в данной случае увеличивается и HTML-код, и CSS-файл). А ведь в одном меню может быть много ссылок.

На этом уроке я познакомлю Вас с оригинальным способом создания меню в среде визуального редактора Dreamweaver 8 с помощью каскадной таблицы стилей. Я буду пользоваться только одной заготовкой кнопки для оформления как самых коротких, так и длинных слов. Вы сможете изменять ссылки в меню так часто, как это потребуется. Ширина кнопок при этом будет изменяться автоматически в зависимости от содержания ссылок.

Посмотреть пример. Я предлагаю три варианта:

1. С применением квадратной кнопки — я использую HTML-код обычного списка (один выпуск уже был посвящен созданию горизонтального и вертикального меню на основе одного списка). Активная ссылка оформлена красивой кнопкой — посетитель не сомневается, на каком конретном разделе он сейчас находится. При наведении курсора мыши на ссылку появляется кнопка более светлого оттенка. Подчеркиваю, что используется только одно изображение для двух ссылок: активной и с наведенным курсором мыши. О том, как это сделать а помощью CSS, смотрите этот видеоурок.

2. С применением кнопки с закругленными уголками — технически это делается сложнее, но снова используется одна кнопка.

3. Кнопка с закругленными углами более светлого оттенка используется для оформления каждой ссылки, а при наведении курсора мыши кнопка темнеет (активная ссылка так же оформлена более темной кнопкой).

Добавление стилей на отдельной странице

На видеоуроке рассматривается так же вопрос, как использовать стили не в отдельном CSS-файле, а на HTML-странице. Это целесообразно в том случае, когда Вам нужно внести какое-то изменение в оформление отдельной страницы.

В качестве примера приведу страницы моего сайта:

1. http://rudolfnureyev.org/reminiscences/fracci.html
2. http://rudolfnureyev.org/reminiscences/lynn_seymour.html

Мне приходится корректировать местоположение сверху картинок, которые располагаются справа. В первом случае это требует местоположение картинки слева, во втором случае — начало картинки должно было совпасть с границей, которая применяется в основном контенте слева. Я могла бы добавить классы нужным блокам и прописать правила для него во внешнем файле, но это привело бы к его увеличению, так как таких случаев у меня много. Поэтому разумнее делать корректировку на HTML-странице (эти правила будет работать, даже если в основном файле прописаны другие правила).

Длительность видеоурока — 44мин. Размер ролика — 830 х 740. Формат —.wmv.

Просматривать можно в проигрывателях Windows Media, Media Player Classic. Не забывайте о полноэкранном режиме.
Как извлечь файл из архива: в программе WinRAR выбрать "Операции" > "Мастер" > указать папку для извлекаемого файла.

Урок упакован в rar архив lessons_5.rar (44.5 мб).