Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru | Блог сайтостроителя

Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru

Прежде чем приступить к уроку по изменению оформления меню сайта, сделанного на Okis.ru, проверьте всё ли Вы сделали, что требовалось в предыдущем уроке.  Также, если Вы попали на эту страницу случайно, то рекомендую пройти уроки по созданию сайта на Okis с самого начала.

Внимание: данный урок посвящён изменению ПОДМЕНЮ. Если вы хотите знать, как поменять главные пункты меню, то перейдите в самый конец страницы, где представлен список CSS-кодов, которые меняют их оформление.

Перед тем, как продолжить, убедитесь, включён ли javascript в браузере, которым Вы пользуетесь, т.к. ПОДпункты показывают только при включённом javascript.

С чего начнем? Если Вы зайдете на наш сайт, который мы сделали в предыдущем уроке, то Вы увидите, что подменю не очень красиво сливается воедино, а подпункт «На основе шампанского» немного выходит за границы.

Подменю не очень красиво сливается воедино, а подпункт На основе шампанского немного выходит за границы - сейчас мы это исправим!!!

Давайте исправим это. Зайдите в раздел Редактировать CSS.

Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru: Зайдите в раздел Редактировать CSS

Перед Вами появится редактор CSS, где мы будем записывать разные коды, которые будут менять оформление нашего сайта. В ходе обучения Вы разберётесь, что к чему — мы будем одновременно менять дизайн сайта и изучать CSS. Справа или сверху (в зависимости от браузера) Вы увидите кнопки: Шапка сайта, Фон сайта, Зона контента и т.д. С помощью этих кнопок значительно упрощается процесс редактирования сайта. Но в этом блоке кнопок присутствуют не все элементы, например, там нет кнопки «Подменю». Поэтому в этом уроке мы не будем пользоваться данными кнопками, а поменяем оформление ПОДМЕНЮ вручную. Сейчас Вы поймёте, как именно.

В первую очередь мы сделаем так, чтобы подпункт «На основе шампанского» не выходил за границы подменю. Я предлагаю немного уменьшить размер текста ссылок в подменю — тогда всё будет выглядеть нормально. Для этого в редакторе CSS нужно прописать следующий код вручную:

.art-vmenublockcontent-body ul.art-vmenu li ul li a {font-size:10px;}

Нажмите «Обновить»

Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru: Напишите данный код вручную в редакторе CSS и нажмите обновить

Зайдите на главную страницу Вашего сайта, или, если она у Вас уже открыта, то просто обновите её (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 {background:url(ПУТЬ_К_ФАЙЛУ);}. Но шапкой мы займемся позже. Сейчас давайте вернемся к оформлению нашего подменю.

Как Вы поняли, команда font-size: задает размер шрифта. Вы можете поэкспериментировать немного — задайте размер шрифта не 10px, а, например, 15px, и Вы увидите что получится.
Важное правило: между числовым значение и px не должно быть пробелов
font-size:10px; — правильно
font-size:10 px; — неправильно

Теперь поменяем цвет текста подменю. Для этого добавьте в фигурные скобки после точки с запятой следующую команду:
color:#0e2734;

Т.е. наш код будет выглядеть так:

.art-vmenublockcontent-body ul.art-vmenu li ul li a {font-size:10px; color:#0e2734;}

Команда color сообщает браузеру о том, что цвет текста должен быть другим (по умолчанию он черный: #000000),
#0e2734 — код темно-синего цвета
Если Вы хотите подобрать свой цвет, то Вы можете посмотреть его код, с помощью программы Photoshop, либо с помощью бесплатной альтернативы фотошопа, например, на сайте splashup, где достаточно нажать на JUMP RIGHT IN и перед Вами откроется редактор изображений, чем-то напоминающий программу Photoshop. В правой колонке Вы можете подобрать свою цветовую гамму.

Код цвета в html

Также Вы можете посмотреть код цвета с помощью Яндекса или любых других сервисов.

Теперь давайте сделаем отступы между пунктами подменю, для этого после точки с запятой напишите следующую команду:
margin-top: 5px;

Т.е. общий код должен выглядеть так:

.art-vmenublockcontent-body ul.art-vmenu li ul li a {font-size:10px; color:#0e2734; margin-top: 5px;}

margin-top — это отступ сверху
5px — размер отступа

Сохраните изменения. Обновите страницу нашего сайта и обратите внимание на наши пункты подменю — между ними появились отступы в 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 {font-size:10px; color:#0e2734; margin-top: 5px; background: #86c0df; }

Если код большой, то не обязательно его писать в одну строчку, можно этот же код привести в следующий вид:

.art-vmenublockcontent-body ul.art-vmenu li ul li a {
font-size:10px;
color:#0e2734;
margin-top: 5px;
background: #86c0df;
}

Что означает background?

background — сообщает браузеру о том, что задний фон должен быть другим (по умолчанию он белый: #000000)
#86c0df; — код цвета

Сохраните изменения в редакторе CSS. Теперь наше меню должно выглядеть так:

Чтобы поменять фон меню, нужно в CSS указать background

Также я предлагаю сделать сплошную рамку темно-синего цвета вокруг каждого пункта подменю. Для этого в код .art-vmenublockcontent-body ul.art-vmenu li ul li a {…} нужно добавить следующую команду:
border: 1px solid #0e2734;

Т.е. наш код будет выглядеть так:

.art-vmenublockcontent-body ul.art-vmenu li ul li a {
font-size:10px;
color:#0e2734;
margin-top: 5px;
background: #86c0df;
border: 1px solid #0e2734;
}

Сохраните изменения. Теперь наше подменю выглядит так:

Чтобы сделать сплошную рамку темно-синего цвета вокруг каждого пункта подменю, нужно написать в CSS: border: 1px solid #0e2734;

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 {background: #0e2734;}

Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru: Код, который определяет стиль элемента подменю при наведении на него курсора мыши

Этот код перед фигурными скобками отличается от предыдущего (.art-vmenublockcontent-body ul.art-vmenu li ul li a) тем, что добавился :hover (.art-vmenublockcontent-body ul.art-vmenu li ul li a:hover)

a:hover — это стиль для ссылки, на которую наведен курсор мышки.

Сохраните изменения и посмотрим, что получилось. При наведении курсора мышки, задний фон пункта подменю меняется, но теперь пропадает текст ссылки, т.к. он одного цвета с задним фоном.

Учимся менять оформление меню сайта, сделанного на okis.ru

Теперь Вы знаете, как изменить цвет текста и можете сделать это сами. Я предлагаю сделать цвет текста таким: #86c0df;
Добавим команду:
color:#86c0df;

Т.е. общий код должен выглядеть так:

.art-vmenublockcontent-body ul.art-vmenu li ul li a:hover {background: #0e2734; color:#86c0df;}

Сохраните изменения и обновите главную страницу сайта. Наведите курсор мышки на любой пункт подменю и Вы увидите, что цвет заднего фона меняется на темно-синий, а цвет текста ссылки меняется на светло-голубой.

Учимся менять оформление меню сайта, сделанного на okis.ru

Нам нужно сделать так, чтобы активные ссылки тоже подсвечивались. Для этого на следующей строчке пропишем следующий код в редакторе CSS:

.art-vmenublockcontent-body ul.art-vmenu li ul li a.active {background: #0e2734; color:#86c0df;}

Сохраните изменения и зайдите, например, по ссылке «На основе джина». Как видите, задний фон подменю «На основе джина» подсвечивается, когда мы находимся на соответствующей странице.

Учимся менять оформление меню сайта, сделанного на okis.ru

Итак, что мы имеем. В редакторе CSS у нас есть стили для 3-х состояний подпунктов меню:
1) стили для неактивных пунктов подменю;
2) стили для пунктов подменю, на которые наводится курсор мыши;
3) стили для активных пунктов подменю.

Т.е у Вас в редакторе CSS должно быть так:

Урок№3. Как поменять оформление меню сайта, сделанного на okis.ru: стили элемента неактивного подменю, элемента подменю при наведении на него курсора мыши, элемента активного подменю

Поздравляю! Вы научились менять оформление подменю сайта.

Основное меню (у нас только один пункт основного меню — это «Коктейли») я не стал менять, но если Вам нужно поменять его, то используйте следующие коды:

.art-vmenublockcontent-body ul.art-vmenu li a span.t {…} — меняет оформление основного меню

.art-vmenublockcontent-body ul.art-vmenu li a:hover span.t {…} — меняет оформление основного меню, при наведении на него курсора мышки

.art-vmenublockcontent-body ul.art-vmenu li a.active span.t {…} — меняет оформление активного меню

Двигаемся дальше. В следующем уроке Вы узнаете, как поменять шапку сайта, сделанного на okis.ru.

Урок№4. Как поменять шапку сайта на okis.ru
Урок№5. Как поменять низ сайта на okis.ru
Урок№6. Как поменять фон сайта на okis.ru
Урок№7. Как поменять контур сайта на okis.ru
Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

Перейти в начало к урокам по созданию сайта на OKIS>>>

Ссылка на основную публикацию
Adblock
detector