Начинаем оформлять сайт с помощью стилей CSS
Здравствуйте, уважаемый посетитель!
Сегодня приступим к оформлению сайта с помощью стилей CSS и выполним следующие действия по формированию веб-страницы: установку параметры резиновой верстки, назначение основного фона страницы, формирования шапки сайта и размещения в ней фонового изображения, формирования областей контента и футера в соответствии с размерами разработанного дизайн-макета.
Назначение стилей CSS подразумевает постоянную работу с дизайн-макетом с целью получения от него данных для присваивания свойствам CSS необходимых значений. Поэтому, при оформлении сайта стилями CSS часть материала будет уделена работе с графическим редактором, что потребует, при подробном рассмотрении, дополнительного объема показа и изложения необходимых действий. В связи с чем, оформление веб-страницы будет рассматриваться в нескольких статьях.
Содержание
- Установка параметров резиновой верстки
- Создания файла фонового изображения для шапки сайта
- Формирование области шапки
- Формирование областей контента и футера
- Исходные файлы сайта
Установка параметров резиновой верстки
В предыдущей статье мы создали таблицу стилей и назначили их для сброса свойств CSS и установки базовых настроек.
Далее, будем продолжать эту таблицу c назначения стилей для блока "обвертки" с классом "wrapper", который был создан при составлении каркаса HTML-страницы.
-
/*----------начало назначения стилей css----------*/
-
.wrapper {
-
max-width: 1600px;
-
min-width: 1000px;
-
margin: 0 auto;
-
background: #f5f5f5;
-
border: 1px solid #ccc;
-
}
Рис.1
Сделаем некоторые пояснения свойствам, назначенным классу .wrapper (так обозначается класс в каскадной таблице стилей), которые определяют параметры резиновой верстки:
- в строке 3 свойством max-width определяем верхний предел резиновой верстки при значении в 1600px;
- в строке 4, аналогично, свойством min-width обозначаем нижний предел величиной 1000px;
- для того, чтобы при разрешения экрана больше верхнего предела резиновой верстки страница отображалась по центру, а не была бы сдвинута к левому краю, в строке 5 свойству margin, определяемому внешние отступы, устанавливаем 0 auto, где "0" - означает нулевые отступы по вертикали и "auto" - выравнивание по центру по горизонтали;
Кроме того, этот элемент с классом .wrapper можно также использовать и для оформления внешнего вида страницы, так:
- в строке 6 свойство background задаем основной фон для всей страницы, который в соответствии с дизайн-макетом должен иметь цвет в шестнадцатеричном коде, равный #f5f5f5;
-
Ниже на рис.2 показано как можно определить цвет фона на дизайн-макете, чтобы затем внести это значение в таблицу стилей.
Рис.2
- в строке 7 для обозначения границ страницы свойством border задаем бордюры по ее краям толщиной в 1px в виде сплошной линии светло-серого цвета, что соответствует значению 1px solid #ccc;;
-
Ниже, на скриншотах можно увидеть, что получилось после назначения данных стилей.
Вид веб-страницы после назначения параметров резиновой верстки |
|
Рис.3 При максимальном пределе резиновой верстки (разрешение 1600px) |
Рис.4 При разрешении более макс. предела резиновой верстки (1920px) |
Как видно из скриншотов, веб-страница приобрела свои очертания с основным фоном, соответствующим дизайн-макету, и при разрешении, достигающим максимального значения резиновой верстки, растягивается на всю ширину экрана, а при более высоком разрешении, центрируется по-середине, что и требовалось получить на этом этапе назначения стилей CSS.
Создания файла фонового изображения для шапки сайта
Для того, чтобы получить отдельную картинку, которую можно использовать для фоного изображения шапки, необходимо воспользоваться PSD-файлом дизайн-макета. Далее рассмотрим последовательность всех необходимых для этого действий.
- После открытия файла дизайн-макета отключаем слои, которые располагаются сверху слоя композиции шапки, а именно: фавикон, наименование сайта, ключевую фразу и меню, как показано на скриншоте.
-
Рис.5
- Далее, вырезаем картинку шапки, как показано на следующем скриншоте. При этом, следует отметить, что вместо, указанных на скриншоте действий 3 и 4, вырезать фрагмент можно также, если при наведении курсора на выделенное изображение 2 раза щелкнуть левой кнопкой мышки.
-
Рис.6
- Затем, через меню "Файл" выбираем режим сохранения для "Web".
-
Рис.7
- После, выбираем формат и параметры сохранения, в нашем случае целесообразно использовать формат "JPEG", который позволяет значительно сжать изображение, и получить на выходе вместо 984 кбайт всего 49,9 кбайт, что, практически в 20 раз меньше первоначального объема. А, это очень важно для уменьшения времени загрузки веб-страницы.
При этом, изменением уровня качества (в данном случае он установлен в пределах 75) можно настраивать баланс между качеством изображения и степенью сжатия (рис.8).
В случае, если изображение нужно сохранить в растровом формате, использующим сжатие без потерь, можно при выборе экспорта, вместо "Сохранить для Web" перейти на "Быстрый экспорт в PNG" (рис.7). Либо при экспорте для Web вместо режима "JPEG" выбрать "PNG" (рис.8). -
Рис.8
- Ну, и наконец, сохраняем полученный файл в папку "images" нашего сайта.
-
Рис.9
- Для того, чтобы вернуть наш дизайн-макет в первоначальное состояние, делаем один шаг назад, для чего одновременно нажимаем клавиши "Ctrl", "Alt" + "Z" (для шага "вперед" аналогично используется "Shift", "Ctrl", + "Z"). Можно также делать шаги "вперед/назад" через меню "Редактирование", как показано на следующем скриншоте.
-
Рис.10
Формирование шапки сайта
Теперь займемся формированием шапки, а именно: зададим ее размеры и назначим в качестве фона изображение, которое мы получили при создании композиции шапки.
Ниже, показано, какие необходимо для этого назначить свойства CSS для элемента
-
/*----------начало назначения стилей css----------*/
-
.wrapper {
-
max-width: 1600px;
-
min-width: 1000px;
-
margin: 0 auto;
-
background: #f5f5f5;
-
border: 1px solid #ccc;
-
}
-
header {
-
height: 210px;
-
background: url("/images/header.jpg") no-repeat;
-
background-size: 100% 100%;
-
border-top: 1px solid #ddd;
-
box-shadow: 0px 4px 5px 0px #aaa;
-
}
Рис.11
Сделаем некоторые пояснения по данной таблице:
- в строке 10 свойством height определяем вертикальный размер шапки, который в соответствии с дизайн-макетом, вместе с меню должен составлять 210px;
- в строке 11 свойством background устанавливаем фоновое, не повторяющееся изображение, где указываем путь к файлу изображения url("/images/header.jpg") no-repeat. В данном случае файл находится в папке "images" корневого каталога.
- в строке 12 свойством background-size задается размер для фонового изображения, в нашем случае он составляет 100% по вертикали и горизонтали;
- в строке 13 свойство border-top создает верхний бордюр для шапки со значениями : 1px solid #ddd, где "1px" - толщина линии, "solid" - сплошная линия и "#ddd" - цвет;
- в строке 14 свойством box-shadow задается дополнительная тень для шапки, придавая ему некую объемность. Значения 0px 4px 5px 0px определяет параметры тени. Более подробно о свойстве box-shadow можно посмотреть в справочнике Puzzleweb.скриншот 61
Теперь, если после заданных стилей мы обновим браузер, то получим страницу с изображением шапки сайта.
Рис.12
Формирование областей контента и футера
Для придания нашей страницы размерности в соответствии с дизайн-макетом на этом этапе лишь сформируем области контента и футера. Наполнение их элементами и оформление внешнего вида будет рассматриваться в следующих статьях.
Если посмотреть на HTML-сраницу, то после блока
для размещения ротатора; для основного содержания;
Для определения размеров этих областей воспользуемся дизайн-макетом и с помощью линейки и нанесенных ранее направляющих линий определим их высоту.
Как определять размеры элементов дизай-макета, показано ниже на примере ротатора.
Рис.13
Как видно из дизайн-макета, высота блока ротатора составляет 330px (570px - 240px). При этом, расстояние ротатора от шапки, как и для всех остальных блоков между собой имеет величину 30px. Таким образом, определим размеры по вертикали для следующих блоков:
- 330px (570px - 240px);
Для блока
С учетом полученных данных назначим соответствующие свойства вышеперечисленным элементам, причем каждому блоку добавим сверху отступ в размере 30px.
-
/*----------начало назначения стилей css----------*/
-
.wrapper {
-
max-width: 1600px;
-
min-width: 1000px;
-
margin: 0 auto;
-
background: #f5f5f5;
-
border: 1px solid #ccc;
-
}
-
header {
-
height: 210px;
-
background: url("/images/header.jpg") no-repeat;
-
background-size: 100% 100%;
-
border-top: 1px solid #ddd;
-
box-shadow: 0px 4px 5px 0px #aaa;
-
}
-
section {
-
height: 330px;
-
margin-top: 30px;
-
background: #e7e7e7;
-
}
-
aside {
-
height: 760px;
-
margin-top: 30px;
-
background: #e7e7e7;
-
}
-
footer {
-
height: 140px;
-
margin-top: 30px;
-
background: #51878a;
-
}
Рис.14
Кроме того, для того, чтобы визуально различать данные области, назначим им цвета фона - для футера цветом в соответствии с дизайн-макетом, для области контента (ротатор, основное содержание, сайдбар) временно, произвольным цветом, до того момента, когда они будут формироваться в соответствии с макетом.
Также, для более хорошего восприятия блоков области контента, временно разместим их наименования в теги заголовков, например 2-го уровня, для чего внесем дополнения в существующий файл "index.html" как показано ниже.
-
-
charset="utf-8" />
-
Заголовок страницы -
name="Description" content="Краткое описание содержания страницы">
-
"wrapper">
...
Ротатор Основное содержание
Рис.15
Если мы теперь обновим страницу, то увидим сформированную на этом этапе веб-страницу нашего сайта.
Рис.16
На этом по данному вопросу все. В следующей статье будем размещать элементы в шапке и футере в соответствии с дизайн-макетом.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов.
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
С уважением,