Открытие файла CSS в редакторе Notepad++
Установка цвета и изображения для общего фона страницы
Оформление бордюров (границ) страницы
Изменение цвета фона за границами страницы
Оформление бордюров вокруг модулей
Оформление элементов при помощи Инструментов разработчика
Оформление бордюров для основного контента
Оформление раскрывающихся списков меню
Итак, теоретическая часть изучена, все необходимые инструменты готовы к работе. Можно начинать! Но для начала несколько слов о построении самих таблиц.
В принципе, по большому счёту для браузера абсолютно всё равно, как вы будете оформлять таблицу: будете ли вы писать комментарии, делать пробелы, писать всё на отдельных строках и так далее! Браузеру важно, что бы в таблице не было допущено ошибок. А вот для разработчика хорошее оформление играет важную роль, так как разобраться в хорошо оформленной таблице намного проще, чем, к примеру, в такой, где всё написано в одну строчку и без пробелов. Даже комментарии в большой таблице имеют важную роль, помогая быстро найти нужные данные. Поэтому не забывайте при внесении новых строк в уже готовые таблицы вписывать их в "правильные" места, а не где попало, и делать комментарии.
А теперь приступим!
Открытие файла CSS в редакторе Notepad++
Как было сказано в предыдущей главе, во время работы в отдельном окне должен быть открыт текстовый редактор (редактор кода) Notepad++. Этот редактор приспособлен в первую очередь именно для работы с файлами кода: HTML, CSS, HPH и т.д.; все подобные файлы должны быть настроены таким образом, что бы они сразу открывались данным редактором.
На внешний вид элемента влияют сразу несколько файлов CSS, которые подключаются при создании страницы. Это:
- Библиотеки Bootstrap.
- Файлы, находящиеся в папке по адресу template > system > css.
- Файлы, находящиеся в папке CSS шаблона.
Файлы, указанные в первых двух пунктах, влияют на оформление элементов страницы "по умолчанию", но их правила могут быть переопределены файлами CSS, находящимися в шаблоне и в коде, управляющем работой самих элементов. Поэтому трогать файлы, указанные в первых двух пунктах не стоит; намного проще и удобнее работать с файлами CSS шаблона.
В установленном шаблоне wds_template_v1 (OSPanel > domains > папка с вашим сайтом > templates > wds_template_v1) откройте папку css. Здесь находятся три файла.
- err_cs.css - отвечает за внешний вид страницы "Ошибка 404".
- main-menu.css - отвечает за внешний вид главного меню.
- stl_tpl_wds_v1.css - отвечает за внешний вид всех остальных элементов сайта.
Откройте в вышеуказанном редакторе последний из указанных файлов. Для этого откройте окно редактора и в меню выберите File > Open, после чего в открывшемся диалоговом окне найдите нужный файл и кликните на него. Если всё сделано правильно, на экране появится следующее:
На самом верху прописан полный путь к файлу, под блоком меню показаны открытые вкладки (на данном рисунке - одна вкладка), слева отображаются номера строк. В данном редакторе определённые элементы кода выделяются каждый своим цветом, что довольно удобно.
В данном файле в начале идёт название и содержание (оформляется как комментарии, которые в редакторе показываются всегда зелёным цветом), однако наличие этих данных не является обязательным и сделано для удобства изучения данного файла. Правила расположены приблизительно в том же порядке, в котором обычно располагаются элементы на странице, но опять же, это не является обязательным.
Для получения информации о свойствах CSS и их значениях откройте в главном меню Программирование > CSS > Свойства CSS. Так же вы можете просмотреть все свойства, разбитые по группам ("Фон", "Бордюры", "Позиционирование элементов", Оформление текста и шрифта" и т.д.) в разделе Программирование > CSS > Свойства CSS по группам.
Установка цвета и изображения для общего фона страницы
Устанавливать или нет изображение для фона? Менять ли цвет фона или оставить белым? Это уже решать вам! В каждом варианте есть свои "плюсы" и "минусы", но согласитесь, что красиво оформленный сайт намного приятнее воспринимается, чем скучный текст на белом фоне! Поэтому - экспериментируйте! В конце концов любые изменения обратимы, поэтому если не понравится - можно легко вернуться к белому фону просто удалив все изменения.
За оформление фона отвечают несколько различных свойств; просмотреть и изучить эти свойства вы можете на странице Фон. Эти свойства позволяют установить цвет (свойство background-color), изображение (свойство background-image), а так же произвести необходимые настройки или установить сразу несколько различных свойств в одной строке (свойство background).
Что бы поэкспериментировать с цветом и/или изображением для фона страницы, откройте в браузере какую-либо страницу сайта, на другой вкладке при помощи сочетания клавиш Ctrl + Shift + Delete откройте страницу настроек браузера "Очистка истории".
Если внесённые в файл CSS изменения не влияют на внешний вид страницы или элемента, то прежде всего произведите очистку истории в браузере. При этом будут удалены файлы, сохранённые в кэше (проверьте настройки на странице очистки и при необходимости выставите нужные чекбоксы), которые могут быть причиной данной проблемы.
Теперь снова вернитесь в окно с открытым в редакторе файлом stl_tpl_wds_v1.css (см. выше) и найдите правило для #b-container (строки 45-54):
45 /* Оформление блока-контейнера b-container */
46 #b-container {
47 background-color: RGB(255,255,255);
48 border-left: 2px solid RGB(51,51,51);
49 border-right: 2px solid RGB(51,51,51);
50 min-height: 100%;
51 margin: 0 auto;
52 text-align: left;
53 width: 1000px;
54 }
Этот код отвечает за оформление внутри страницы, в том числе и за фон. Свойство background-color устанавливает цвет (в данном случае - белый). Вы можете просто изменить это значение, или же, если вы хотите установить в качестве фона рисунок, применить другое свойство, позволяющее изменять сразу несколько значений в одной строке: background. Для этого стираем то, что написано в 47 строке и прописываем:
47 background: RGB(0,0,255);
Теперь для фона внутри страницы установлен синий цвет (вы можете установить цвет по своему усмотрению!). Вопрос: зачем нужен цвет внутри страницы, если далее будет установлено изображение? Всё просто: иногда по каким-либо причинам браузер не может отобразить изображение, поэтому в качестве фона будет отображаться установленный цвет.
Сохраните внесённые изменения сочетанием клавиш Ctrl + S, перейдите на вкладку браузера со страницей сайта и перезагрузите сайт. В результате на странице должен измениться фон:
Вполне возможно, что после перезагрузки цвет не изменится. В этом случае перейдите на вкладку "Настройки" и очистите историю (проверьте, что бы очистился кэш!), после чего снова перезагрузите страницу сайта - всё должно получиться!
Теперь можно вставить изображение. Какие требования предъявляются к таком изображениям?
Как и к любым изображениям на сайте, основное требование - оптимальное соотношение качества и "веса", т.е. количества килобайт. Но фоновые изображения имеют существенное отличие от обычных: совершенно не обязательно создавать такое изображение в полный размер страницы, тем более, что все страницы имеют разную высоту! Для фоновых изображений можно установить настраиваемые повторы, например, повторять только по горизонтали, повторять только по вертикали и так далее; за это отвечает свойство background-repeat (по умолчанию стоит повторение по горизонтали и по вертикали). Так же, в какой-то степени, на такие изображения влияет свойство background-size, позволяющее менять размеры этого изображения. Более подробно об этих свойствах читайте в соответствующем разделе.
Как вы поняли из вышесказанного, для фонового изображения достаточно создать только небольшой фрагмент (это зависит от того, что изображено) и правильно настроить повторы. Например, на этом сайте установлено фоновое изображение размером 1002px на 100px (т.е. во всю ширину страницы) и "весом" всего 18,4 kB:
Это изображение будет автоматически повторяться браузером столько раз, сколько это потребуется.
При установке небольшого фрагмента всегда следите за тем, как совпадают рисунки на границах изображения!
Загрузите изображение на сайт при помощи медиа-менеджера (Глава 8, "Как загрузить и вставить изображение?"), а затем пропишите адрес изображения в той же строке, что и цвет для фона:
47 background: url(/images/System/fon.png) RGB(0,0,255);
где:
- images - папка с изображениями (в корне сайта);
- System - вложенная папка (это уже зависит от того, как вы организовали хранение изображений);
- fon.png - название файла с изображением.
Обратите особое внимание на синтаксис:
url(адрес изображения),
а самое главное на то, как правильно прописывается адрес (начинается со слэша - косой черты), иначе изображение не будет выведено:
/images/System/fon.png.
Сохраните введённые изменения, перейдите в браузер и перезагрузите страницу. Если всё сделано правильно (не забудьте при необходимости очистить кэш!), то вы увидите результат на экране:
Как видите, несмотря на то, что исходное изображение имело всего 100px в высоту, весь фон равномерно заполнен. При необходимости вы можете настроить повторы изображения (см. Фон).
Оформление бордюров (границ) страницы
Так как страница имеет определённую, строго установленную ширину (в коде - строка 53), вы можете установить цвет и толщину бордюров слева и справа, т.е. чётко обозначить её размеры.
Нужно ли устанавливать бордюры вокруг элементов? Это решать вам! Бордюры показывают чёткие границы элемента, позволяют красиво его оформить за счёт применения различных стилей, цвета и толщины; такой сайт выглядит намного приятнее, чем сайт с лаконичным, скучным серо-белым дизайном. Если же вы не хотите устанавливать бордюры, то просто удалите из таблицы соответствующие строки (см. ниже).
За оформление бордюров отвечают свойства border-left и border-right:
48 border-left: 2px solid RGB(51,51,51);
49 border-right: 2px solid RGB(51,51,51);
Эти свойства позволяются установить в одной строке сразу несколько значений для разных свойств: толщину линии (свойство border-width), стиль линии (свойство border-style) и цвет линии (свойство border-color). В данный момент в коде установлена обычная линия толщиной 2px тёмно-серого цвета. Эти значения вы можете поменять по своему усмотрению, сохранить изменения и посмотреть, что получилось. На данном сайте в этих строках будет изменён цвет линии на RGB(0,255,255), и толщина (3px) но из-за бокового белого фона его пока ещё плохо видно:
Изменение цвета фона за границами страницы
Если вы установили для фона какой-либо цвет или рисунок, то скорее всего возникнет необходимость изменить и фон за пределами страницы, так как согласитесь, красивая страница на белом фоне выглядит не очень хорошо!
Для изменения фона за пределами страницы откройте в редакторе правило для body (строки 30-35):
30 /* Оформление body */
31 body {
32 background-color: RGB(255,255,255); /* цвет фона за пределами страницы */
33 text-align: center;
34 height: 100%;
35 }
Здесь, как вы уже наверное, поняли, нужно изменить значение свойства background-color, просто вписав выбранный вами цвет. На данном сайте применено значение RGB(0,0,255) - синий цвет. После сохранения изменений и перезагрузки страницы получается такой результат:
Данный вариант оформления в какой-то степени способствует концентрации внимания пользователя на основном материале сайта.
Оформление бордюров вокруг модулей
Так как для страницы установлены слева и справа бордюры, то вполне правильным решением будет применить такой же вариант и для оформления бордюров модулей, т.е. получится всё выдержано в одном стиле.
Настройки внешнего вида можно установить сразу для всех модулей, а так же внести коррективы для каждого модуля отдельно. Для начала о том, как установить свойства сразу для всех.
В редакторе откройте правило для .moduletable (строки 281 - 289):
281 /** Оформление модулей */
282 /* Общее оформление всех модулей */
283 .moduletable {
284 margin: 0 5px 15px;
285 padding: 0 3px 0 3px;
286 border: 2px solid RGB(90,90,90); /* толщина, тип и цвет бордюра */
287 border-radius: 4px; /* радиус углов бордюра */
288 background-color: RGB(255,255,255); /* цвет фона */
289 }
Здесь для оформления бордюров применено универсальное свойство border, позволяющее установить сразу несколько свойств в одной строке (см. строку 286); в данном случае установлены стиль, цвет и толщина. Именно цвет и нужно поменять на тоже значение, что и для бордюров по краям страницы.
О том, как создать правило что бы установить свойства для отдельно взятого элемента, будет рассказано в следующей главе.
Оформление элементов при помощи Инструментов разработчика
Все изменения, описанные выше, производились без использования Инструментов разработчика. Теперь пора подключить и этот важный и удобный инструмент, при помощи которого можно не только легко найти нужные правила для оформления любого элемента, но и на время изменить их, что бы посмотреть на результат.
Для начала - самый простой пример, который объясняет весь алгоритм действий при оформлении того или иного элемента с использованием Инструментов.
Оформление бордюра для основного контента
Итак, ранее были оформлены бордюры для модулей и самой страницы сайта, но при этом контейнер для основного контента не изменился, так как он не относится к модулям. Как изменить оформление этого элемента?
1.Откройте вкладку браузера со страницей сайта, затем откройте панель инструментов при помощи сочетания клавиш Ctrl + Shift + I.
2.Для перехода в режим просмотра кода и таблиц CSS кликните на кнопку 1, затем точно наведите курсор на выбранный элемент (2) и кликните левой кнопкой мыши; вверху появится HTML-код, внизу - правила, касающиеся оформления данного элемента (рис.214):
При наведении курсора внимательно смотрите за тем, какие области выделяются определёнными цветами; должна быть выделена именно та область (тот элемент), которая вам нужна.
3.Найдите правила, находящиеся в CSS-файле шаблона. В данном случае это следующие строки:
где:
1 - само правило;
2 - название файла;
3 - номер строки, с которой правило начинается.
Что бы открыть это правило, просто перейдите в редакторе к указанной строке, где вы увидите следующее:
157 /* Настройка позиции contentleft - контент слева */
158 .contentleft {
159 background-color: RGB(255,255,255); /* цвет фона */
160 float: left; /* положение */
161 padding: 10px 14px 0 14px; /* настройка полей внутри */
162 margin: 0 0 0 5px; /* настройка отступа от соседних элементов */
163 width: 760px; /* ширина контента */
164 border: 2px solid RGB(90,90,90); /* Размер, тип, цвет бордюров */
165 border-radius: 7px; /* настройка радиуса углов бордюра */
166 }
Далее всё просто: измените значения в свойстве border, как это было описано выше, сохраните изменения и перезагрузите сайт.
Однако если вы ещё не определились с цветом, или хотите поэкспериментировать с толщиной и стилем линий, то прежде, чем что-то изменять в самом файле, попробуйте сделать всё тоже самое при помощи Инструментов разработчика, что даст вам возможность не изменяя значений в файле посмотреть на полученный результат и принять верное решение. Как это делается, подробно описано в предыдущей главе ("Временное изменение правил CSS"): кликните на нужное значение свойства и в открывшемся окошке измените его, после чего просто посмотрите на страницу сайта и оцените полученный результат. В любом случае эти изменения являются временными и никак не влияют на файлы, поэтому можете смело проводить любые эксперименты; в случае необходимости просто перезагрузите страницу и всё изменения будут сброшены.
Для ввода нового свойства и установки для него значения кликните на пустое пространство в правиле, затем в открывшемся окошке введите название свойства и нажмите "Enter"; далее введите значение и смотрите результат.
Так же в этом правиле вы можете:
- изменить цвет фона (свойство background-color);
- настроить поля внутри, т.е. установить отступы от края (бордюра) до самого контента (свойство padding);
- изменить положение самого контейнера за счёт установки внешних отступов (свойство margin);
- изменить ширину контейнера (свойство width);
- установить скруглённые уголки (свойство border-radius).
Подробно узнать об этих свойствах вы можете в разделе Программирование > Свойства CSS или просто кликнув на выбранное свойство.
Принцип работы с этими свойствами точно такой же: вы изменяете их значения в Инструментах разработчика и, когда найдёте оптимальный вариант, просто прописываете эти значения в файле и сохраняете.
Оформление меню
За оформление главного меню отвечает другой файл - main-menu.css; именно его нужно открыть в редакторе.
Вы можете настроить довольно большое количество свойств, например:
- определить высоту (свойство height);
- определить цвет для пунктов (свойство background), причём можно установить разные цвета для пунктов с разными уровнями, а так же для пункта, который в данный момент активирован (строки 56 - 59, "Активная кнопка");
- определить тип курсора при наведении его на меню;
- определить шрифт и цвет текста;
- оформить раскрывающиеся списки
и много чего ещё! Просто открывайте файл, изучайте имеющиеся свойства и настраивайте их по своему усмотрению! При этом не забывайте очищать кэш браузера и сохранять изменения, которые вам понравились!
Работать с этим файлом нужно точно так же, как и с любым другим файлом CSS (см. примеры ниже).
Оформление раскрывающихся списков меню
При работе с раскрывающимися списками меню вы можете столкнуться с небольшой проблемой. Дело в том, что когда панель Инструментов разработчика находится в режиме выбора, т.е. нажата кнопка 1 (рис.216), вы не сможете раскрыть эти списки, так как при наведении курсора будет показываться только то, что связано непосредственно с элементом, на который наведён курсор. Эта проблема решается довольно просто: при открытой панели в обычном режиме наведите курсор на меню так, что бы список открылся; далее наведите курсор на нужный пункт из этого списка (рис. 216, позиция 2) и нажмите комбинацию клавиш Ctrl + Shift + C. В результате откроется HTML-код и правила CSS, касающиеся именно этого пункта:
Как видно из рисунка 216, список первого уровня накладывается на список второго уровня, что, естественно, нужно исправить: сдвинуть второй список вправо. Для этого смотрим имеющиеся правила (рис.217):
Здесь находится довольно большое количество правил, но нужно выбрать именно то, которое отвечает за оформление списков второго уровня. К сожалению, для того, что бы это быстро сделать, нужно иметь определённый уровень знаний HTML, поэтому, если вы пока не сильны в этом вопросе, вы можете просмотреть по порядку все теги, относящиеся к элементу, вверху таблицы, открытой в панели (рис.217, самая верхняя строка) или просто ориентируйтесь по комментариям в файле CSS.
Теоретически, правило, отвечающее за списки второго уровня, должно быть записано так:
#main_menu ul li ul li ul {
свойства
}
где:
#main_menu - это селектор для идентификатора main_menu;
ul li ul li ul - это контекстный селектор (селектор потомков), указывающий, что данное правило будет применено к содержимому последнего тега ul списка второго уровня (см. пример ниже, строка 6), который вложен в теги ul, li списков первого уровня (строки 4, 5), которые так же вложены в список высшего уровня, т.е. в список корневых пунктов меню (теги ul, li, строки 2, 3); в HTML-коде это выглядит так:
1 <nav id="main_menu">
2 <ul class="nav"> /* Список корневых пунктов */
3 <li class="item-101"> /* Пункт списка */
4 <ul> /* Список первого уровня */
5 <li class="item-104"> /* Пункт списка первого уровня */
6 <ul> /* Список второго уровня */
7 <li class= "item-107> /* Пункт списка второго уровня */
8 </li>
9 </ul>
10 </li>
11 </ul>
12 </li>
13 </ul>
14 </nav>
Нужное правило расположено в файле на 115 - 120 строках:
Здесь необходимо подобрать значение свойства left таким образом, что бы списки находились рядом и не перекрывали друг друга. Это легко сделать: просто введите значение и сразу увидите результат. Как только списки окажутся на своих местах, просто откройте редактор и измените это значение в файле, сохраните и перезагрузите страницу сайта; если не допущено ошибок, то списки окажутся на правильных позициях (рис.219):
Работа с псевдоклассами
Некоторые элементы страницы, например, кнопки или пункты меню, могут изменять свой цвет при наведении курсора, а так же может меняться вид самого курсора; этот эффект достигается за счёт применения псевдоклассов.
Псевдоклассы применяются для определения динамического (т.е. меняющегося) состояния элемента.
Что бы просмотреть, как меняется пункт меню при наведении на него курсора или при его активации, откройте файл main-menu.css и перейдите к соответствующему правилу (ориентируйтесь по комментариям):
56 /* Активная кнопка */
57 #main_menu ul li.active {
58 background: RGB(0,0,0);
59 }
Это правило при помощи свойства background изменяет цвет активированной кнопки меню (в данном случае - чёрный). Для того, что бы изменить цвет кнопки при наведении курсора откройте другое правило:
61 /* Кнопка при наведении курсора */
62 #main_menu ul li:hover {
63 background: RGB(100,100,100);
64 }
Сюда же, при желании, вы можете вписать и свойство cursor, за счёт чего курсор будет так же менять внешний вид при попадании на кнопку меню.
Оформление текста и шрифта
Все свойства, влияющие на текст и шрифт, вы можете просмотреть на странице "Оформление текста и шрифта", доступной так же через главное меню (Программирование > CSS > Свойства по группам). Вы можете установить тип, размер шрифта, расстояние между буквами и строками, добавить тень и многое, многое другое.
Работа с текстом и шрифтами ни чем не отличается от работы с другими элементами страницы. К примеру, вам не нравится цвет и/или шрифт, применяемый для ссылок. В этом случае необходимо открыть любую станицу, на которой есть ссылки, затем открыть Инструменты разработчика, кликнуть на кнопку перехода в режим выбора (рис.220, 1) и навести курсор на ссылку (рис.220, 2):
Строка вверху (на чёрном фоне) показывает, что этот элемент имеет тег <a>. Соответственно, в открывшейся справа таблице CSS найдите правило для этого тега, которое расположено в файле CSS шаблона:
Однако, как видно из рисунка 221, такого правила в этом файле нет! Поэтому его нужно создать самостоятельно и тогда созданное правило будет иметь приоритет перед уже имеющимся по умолчанию!
Но о том, как составлять правила, будет подробно рассказано в следующей главе!
