Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru
Прежде чем приступить к уроку по изменению оформления меню сайта, сделанного на Okis.ru, проверьте всё ли Вы сделали, что требовалось в предыдущем уроке. Также, если Вы попали на эту страницу случайно, то рекомендую пройти уроки по созданию сайта на Okis с самого начала.
Внимание: данный урок посвящён изменению ПОДМЕНЮ. Если вы хотите знать, как поменять главные пункты меню, то перейдите в самый конец страницы, где представлен список CSS-кодов, которые меняют их оформление.
Перед тем, как продолжить, убедитесь, включён ли javascript в браузере, которым Вы пользуетесь, т.к. ПОДпункты показывают только при включённом javascript.
С чего начнем? Если Вы зайдете на наш сайт, который мы сделали в предыдущем уроке, то Вы увидите, что подменю не очень красиво сливается воедино, а подпункт «На основе шампанского» немного выходит за границы.
Давайте исправим это. Зайдите в раздел Редактировать CSS .
Перед Вами появится редактор CSS, где мы будем записывать разные коды, которые будут менять оформление нашего сайта. В ходе обучения Вы разберётесь, что к чему — мы будем одновременно менять дизайн сайта и изучать CSS. Справа или сверху (в зависимости от браузера) Вы увидите кнопки: Шапка сайта, Фон сайта, Зона контента и т.д. С помощью этих кнопок значительно упрощается процесс редактирования сайта. Но в этом блоке кнопок присутствуют не все элементы, например, там нет кнопки «Подменю». Поэтому в этом уроке мы не будем пользоваться данными кнопками, а поменяем оформление ПОДМЕНЮ вручную. Сейчас Вы поймёте, как именно.
В первую очередь мы сделаем так, чтобы подпункт «На основе шампанского» не выходил за границы подменю . Я предлагаю немного уменьшить размер текста ссылок в подменю — тогда всё будет выглядеть нормально. Для этого в редакторе CSS нужно прописать следующий код вручную:
.art-vmenublockcontent-body ul.art-vmenu li ul li a
Зайдите на главную страницу Вашего сайта, или, если она у Вас уже открыта, то просто обновите её (F5). Как видите, размер шрифта уменьшился и фраза «На основе шампанского» больше не вылезает за границы.
Я не буду вдаваться в подробности и рассказывать о том, что означает код .art-vmenublockcontent-body ul.art-vmenu li ul li a , т.к. это отдельная тема для достаточно объемного курса по CSS. Просто знайте — чтобы поменять оформление текста в ПОДМЕНЮ , нужно сначала прописать .art-vmenublockcontent-body ul.art-vmenu li ul li a , а затем в фигурных скобках указать, например, размер шрифта или любые другие команды, которые мы ещё рассмотрим. Это касается любой темы оформления, которую Вы выбрали на сайте OKIS.RU. То же касается других составляющих сайта, таких как: шапка сайта, низ сайта, задний фон и т.д. Для всех них прописывается во всех шаблонах одинаковое значение перед фигурными скобками. Например, если мы хотим поменять шапку сайта, то мы прописываем div.art-header-jpeg . Но шапкой мы займемся позже. Сейчас давайте вернемся к оформлению нашего подменю .
Как Вы поняли, команда font-size: задает размер шрифта. Вы можете поэкспериментировать немного — задайте размер шрифта не 10px , а, например, 15px , и Вы увидите что получится. Важное правило: между числовым значение и px не должно быть пробелов font-size:10px; — правильно font-size:10 px; — неправильно
Теперь поменяем цвет текста подменю . Для этого добавьте в фигурные скобки после точки с запятой следующую команду: color:#0e2734;
Т.е. наш код будет выглядеть так:
.art-vmenublockcontent-body ul.art-vmenu li ul li a
Команда color сообщает браузеру о том, что цвет текста должен быть другим (по умолчанию он черный: #000000), #0e2734 — код темно-синего цвета Если Вы хотите подобрать свой цвет, то Вы можете посмотреть его код, с помощью программы Photoshop, либо с помощью бесплатной альтернативы фотошопа, например, на сайте splashup, где достаточно нажать на JUMP RIGHT IN и перед Вами откроется редактор изображений, чем-то напоминающий программу Photoshop. В правой колонке Вы можете подобрать свою цветовую гамму.
Также Вы можете посмотреть код цвета с помощью Яндекса или любых других сервисов.
Теперь давайте сделаем отступы между пунктами подменю , для этого после точки с запятой напишите следующую команду: margin-top: 5px;
Т.е. общий код должен выглядеть так:
.art-vmenublockcontent-body ul.art-vmenu li ul li a
margin-top — это отступ сверху 5px — размер отступа
Сохраните изменения. Обновите страницу нашего сайта и обратите внимание на наши пункты подменю — между ними появились отступы в 5px.
Если бы Вы указали просто margin: 5px; — то отступ в 5px был бы со всех сторон
Все значения margin: margin — отступ со всех сторон margin-top — отступ сверху margin-bottom — отступ снизу margin-left — отступ слева margin-right — отступ справа
Поменяем задний фон меню. Добавьте ещё одну команду после точки с запятой: background: #86c0df;
.art-vmenublockcontent-body ul.art-vmenu li ul li a
Если код большой, то не обязательно его писать в одну строчку, можно этот же код привести в следующий вид:
.art-vmenublockcontent-body ul.art-vmenu li ul li a
Что означает background?
background — сообщает браузеру о том, что задний фон должен быть другим (по умолчанию он белый: #000000) #86c0df; — код цвета
Сохраните изменения в редакторе CSS. Теперь наше меню должно выглядеть так:
Также я предлагаю сделать сплошную рамку темно-синего цвета вокруг каждого пункта подменю . Для этого в код .art-vmenublockcontent-body ul.art-vmenu li ul li a нужно добавить следующую команду: border: 1px solid #0e2734;
Т.е. наш код будет выглядеть так:
.art-vmenublockcontent-body ul.art-vmenu li ul li a
Сохраните изменения. Теперь наше подменю выглядит так:
border — позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента 1px — толщина рамки solid — сплошная линия #0e2734 — темно-синий цвет
Стили рамки могут быть не только сплошными, но и такими:
dotted — точечная рамка
dashed — пунктирная рамка
double — двойная рамка (хорошо видна при значении от 4px)
groove — вогнутая рамка (хорошо видна при значении от 4px)
ridge — выпуклая рамка (хорошо видна при значении от 4px)
inset — левая и верхняя часть рамки темнее, чем нижняя и правая (хорошо видна при значении от 4px)
outset — нижняя и правая часть темнее, чем левая и верхняя (хорошо видна при значении от 4px)
solid — сплошная рамка
Цвет заднего фона мы поменяли, рамку сделали, но при наведении курсора мышки, пункт меню не подсвечивается — это происходит потому, что мы взяли цвет #86c0df , точно такой же, какой должен показываться при наведении курсора мышкой на пункт подменю .
Давайте тогда поменяем тот цвет, который должен показываться при наведении курсора мышки. Для этого на следующей строчке в редакторе CSS пропишем следующий код:
.art-vmenublockcontent-body ul.art-vmenu li ul li a :hover
Этот код перед фигурными скобками отличается от предыдущего ( .art-vmenublockcontent-body ul.art-vmenu li ul li a ) тем, что добавился :hover ( .art-vmenublockcontent-body ul.art-vmenu li ul li a :hover )
a:hover — это стиль для ссылки, на которую наведен курсор мышки.
Сохраните изменения и посмотрим, что получилось. При наведении курсора мышки, задний фон пункта подменю меняется, но теперь пропадает текст ссылки, т.к. он одного цвета с задним фоном.
Теперь Вы знаете, как изменить цвет текста и можете сделать это сами. Я предлагаю сделать цвет текста таким: #86c0df; Добавим команду: color:#86c0df;
Т.е. общий код должен выглядеть так:
.art-vmenublockcontent-body ul.art-vmenu li ul li a:hover
Сохраните изменения и обновите главную страницу сайта. Наведите курсор мышки на любой пункт подменю и Вы увидите, что цвет заднего фона меняется на темно-синий, а цвет текста ссылки меняется на светло-голубой.
Нам нужно сделать так, чтобы активные ссылки тоже подсвечивались. Для этого на следующей строчке пропишем следующий код в редакторе CSS:
.art-vmenublockcontent-body ul.art-vmenu li ul li a .active
Сохраните изменения и зайдите, например, по ссылке «На основе джина». Как видите, задний фон подменю «На основе джина» подсвечивается, когда мы находимся на соответствующей странице.
Итак, что мы имеем. В редакторе CSS у нас есть стили для 3-х состояний подпунктов меню : 1) стили для неактивных пунктов подменю; 2) стили для пунктов подменю, на которые наводится курсор мыши; 3) стили для активных пунктов подменю.
Т.е у Вас в редакторе CSS должно быть так:
Поздравляю! Вы научились менять оформление подменю сайта.
Основное меню (у нас только один пункт основного меню — это «Коктейли») я не стал менять, но если Вам нужно поменять его, то используйте следующие коды: