Бесплатные видеоуроки
Создание меню с помощью графических кнопок на CSS
Выпуск #5 от 6 июня 2008 г.
Методика создания такого меню позволяет использовать
только одну графическую кнопку для оформления всех его пунктов.
В период моего табличного сайтостроительства мне приходилось
создавать отдельную кнопку для каждого слова, поскольку их ширина
была разная. При этом я была вынуждена корректировать ширину какой-либо
кнопки, если я изменяла слово в какой-то ссылке. Кроме того, представьте,
какой получался код, ведь нужно было каждое слово связать с
определенным изображением (в данной случае увеличивается и HTML-код,
и CSS-файл). А ведь в одном меню может быть много ссылок.
На этом уроке я познакомлю Вас с оригинальным способом создания меню в среде визуального
редактора Dreamweaver 8 с помощью каскадной таблицы стилей. Я
буду пользоваться только одной заготовкой кнопки для оформления как самых коротких,
так и длинных слов. Вы сможете изменять ссылки в меню так часто, как это потребуется. Ширина
кнопок при этом будет изменяться автоматически в зависимости от содержания ссылок.
Прежде всего, пожалуйста, посмотрите, о каком меню идет речь. Я предлагаю три варианта:
1. С применением квадратной кнопки — я использую HTML-код обычного списка (один выпуск уже был посвящен созданию горизонтального и вертикального меню на основе одного списка). Активная ссылка оформлена красивой кнопкой — посетитель не сомневается, на каком конретном разделе он сейчас находится. При наведении курсора мыши на ссылку появляется кнопка более светлого оттенка. Подчеркиваю, что используется только одно изображение для двух ссылок: активной и с наведенным курсором мыши. О том, как это сделать а помощью CSS, смотрите этот видеоурок.
2. С применением кнопки с закругленными уголками — технически это делается сложнее, но снова используется одна кнопка.
3. Кнопка с закругленными углами более светлого оттенка используется для оформления каждой ссылки, а при наведении курсора мыши кнопка темнеет (активная ссылка так же оформлена более темной кнопкой).
На видеоуроке рассматривается так же вопрос, как использовать стили не в отдельном CSS-файле, а на HTML-странице. Это целесообразно в том случае, когда Вам нужно внести какое-то изменение в оформление отдельной страницы.
В качестве примера приведу страницы сайта, над которым работаю в настоящее время:
- http://rudolfnureyev.org/reminiscences/fracci.html
- http://rudolfnureyev.org/reminiscences/lynn_seymour.html
Мне приходится корректировать местоположение сверху картинок, которые располагаются справа. В первом случае это требует местоположение картинки слева, во втором случае — начало картинки должно было совпасть с границей, которая применяется в основном контенте слева. Я могла бы добавить классы нужным блокам и прописать правила для него во внешнем файле, но это привело бы к его увеличению, так как таких случаев у меня много. Поэтому разумнее делать корректировку на HTML-странице (эти правила будет работать, даже если в основном файле прописаны другие правила).
Длительность видеоурока — 44мин. Размер ролика — 830 х 740.
Просматривать можно в проигрывателях Windows
Media, Media Player Classic. Не забывайте о полноэкранном режиме.
Как извлечь файл из архива: в программе WinRAR выбрать "Операции" > "Мастер" > указать папку для извлекаемого файла.
Уроки до 4 выпуска были записаны в формате .swf, для просмотра которых
требуется Flash Player.
Урок упакован в rar архив lessons_5.rar (44.5 мб).
Как скачать?
Cкачать бесплатно по ссылке http://www.sharemania.ru/0196873.
- Первый выпуск от 7 декабря 2007 г.
- Второй выпуск от 13 января 2008 г. — создание горизонтального и вертикального меню на основе списка.
- Первый выпуск из серии «Результаты моих экспериментов».
- Третий выпуск от 7 марта 2008 г.
- Четвертый выпуск от 21 марта 2008 г.