После написания кода в HTML логично приступать к оформлению каскадных таблиц стилей. С CSS сейчас работают все без исключения веб-мастера, особенно это касается разработки тем для различных CMS. Только представьте себе, сколько надо было потратить времени, редактирую каждую страницу сто-, а то и тысячи страничного HTML-документа. Благодаря CSS достаточно внести изменения только в 1 файле и изменения появлятся на всех желаемых страницах. Сейчас с помощью CSS мы приведем макет нашего сайта в тот вид, какой мы изобразили в Photoshop в самом начале.

Начало

Для начала создайте файл style.css и расположите его в корневой папке вашего сайта. Затем нужно его привязать к HTML-документу. Делается этого очень просто. Откройте файл index.html и вставьте такую строчку между тэгами

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Затем откройте css файл в используемом вами редакторе и пишем первую строчку:

body { font-family: Arial, Helvetica, sans-serif; }

Это строчкой мы определили семейство шрифтов, которыми будет отображаться текст на экранах пользователей

Теперь напишите несколько правил для класса “container”

.container {
    width: 800px;
    margin: 0 auto;
}

Вот как преобразился наш текст:

Теперь нужно сделать сброс css стилей. Спросите зачем? Дело в том, что каждый браузер имеет свои установки по умолчанию для отображения тех или иных элементов. Для того, чтобы сайт открывался так как вы задумали во всех браузерах, нужно обязательно написать вот это:

*{margin:0px; padding:0px; }

под звёздочкой в CSS может пониматься любой тег (body, div, h1, img и т.д.).

Шапка

Работаем с шапкой. Вставляем код:

#main {
    background: url(images/header_slice.jpg) repeat-x;
}

Получаем:

Размещение логотипа

Вводим правило:

#logo {
    background: url(images/logo.png) no-repeat;
height: 84px;
    width: 235px;
}

Вы видите надпись “Logo” поверх самого логотипа. А мы не должны ее видеть. Для этого создайте правило для h1

#logo h1 {
    text-indent: -9999px;
}

В результате надпись уплывет далеко-далеко за пределы видимости документа, но останется видимой для поисковых роботов, что сыграет роль при продвижении сайта.

Теперь надо опустить логотип на 40 px.

#header {
    padding-top: 40px;
}

Размещение слогана

Допишем правила для логотипа:

#logo {
    background: url(images/logo.png) no-repeat;
    height: 84px;
    width: 235px;
    float: left;
}

Сейчас мы определили пусть к картинке, запретили повторение, определили размеры и обтекание слева.

Теперь управляем потоком слогана

#tagline {
    float: left;
}

Сделайте просмотр страницы в браузере -вы увидите, чо меню (в виде списка) следует за слоганом. А нам его нужно опустить ниже. Представьте себе как вы набираете текст в Microsoft Word – слова идут один за другим и автоматически переносятся на новую строчку когда эта самая строчка заканчивается. То же происходить и при задании

float: left;

-элементы выстраиваюстя друг за другом слева направо. Чтобы перенести нужные элементы вниз, в ворде мы бы нажали клавишу ввода (Enter). А в данном случае мы пишем строчку

<div style="clear:both"></div>

после дива со слоганом:

<div id="header">
    <div id="logo">
        <h1>Logo</h1>
    </div>
    <div id="tagline">
        <h3>And a little tagline, too.</h3>
    </div>

<div style="clear:both"></div>

Приводим слоган в тот вид, в каком он был разработан в Photoshop

#tagline h3 {font-size: 30px; color: #e4dfdf; }

Теперь задаем отступы для всего контейнера:

#tagline {
    float: left;
    padding-top: 20px;
    padding-left: 20px;
}

Навигация

Добавьте правил:

ul#menu {
    list-style: none;
}

ul#menu li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none;
}

Добавьте обтекание для списка:

ul#menu li {
    float: left;
}

И затем очистку после кода с ним в файле index.html

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
</div><!--end header -->

Теперь пишите эти строки, ниже я расшифрую что к чему

ul#menu {
    list-style: none;
    padding-top: 55px;
}

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 75px;
}

list-style: none; – этим мы убираем маркеры возле пунктов
float: left; – а этим делаем наше меню горизонтальным – каждый пункт идет идет один за другим слева направо. Всё остальное – отступы между пунктами.

Контент

Занимаемся оформлением:

#content h2 {
    font-size: 36px;
    color: #015878;
}

#content h3 {
    font-size: 24px;
    color: #444444;
}

#content h4 {
    font-size: 18px;
    color: #373737;
    font-weight: normal;
}

#content p {
    font-size: 14px;
    color: #595858;
}

#content small {
    font-size: 12px;
    color: #373737;
}

#content a {
    color: #0f6c8d;
    font-weight: bold;
    text-decoration: none;
}

В правило для тела документа допишите это:

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ebe8e8;
}

Просмотрите как выглядит ваш документ. Нравится? Уже виден результат, похожий на конечный. Но сейчас мы должны заняться отступами. Допишим правила.

#content h2 {
    font-size: 36px;
    color: #015878;
    padding-top: 25px;
}
#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
}
#content h3 {
    font-size: 24px;
    color: #444444;
    padding-top: 20px;
    padding-bottom: 20px;
}

#content p {
    font-size: 14px;
    color: #595858;
    padding-top: 20px;
}

Правим отступы для анонсов. Просмотрите вашу страницы, добавьте нижеследующий код и обновите вашу страницу в браузере. Результат будет виден налицо

#news {
    padding-top: 10px;
}

#news h3 {
    padding-bottom: 10px;
}

#news p {
    padding-top: 10px;
    padding-bottom: 14px;
}

Сайдбар

Поработаем с боковой колонкой. Для начала определите ширину первой колонки, а именно – поля с контентом (который и является 1й колонкой), а затем определите поток для самого сайдбара с помощью такого нехитрого кода:

#content {
    width: 510px;
    float: left;
}

#sidebar {
    float: left;
}

Затем по традиции делаем очистку:

<div id="contributors">
    <h3>Contributors</h3>
    <ul>
        <li><a href="#">John Smith, freelance writer</a></li>
        <li><a href="#">Jack McCoy, designer</a></li>
        <li><a href="#">Lenny Briscoe, editor</a></li>
        <li><a href="#">John Smith, martketing</a></li>
    </ul>
    <a href="#">Join Our Team</a>
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container-->

</div><!--end main-->

И занимаемся оформлением заголовков и списков

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838;
}

Добавьте в index.html кнопки подписки:

<ul id="subscribe">
    <li><a href="#">Subscribe via RSS</a></li>
    <li><a href="#">Get Email Updates</a></li>
    <li><a href="#">Follow us on Twitter</a></li>
</ul>

И правило для них в style.css

ul#subscribe li a {
    font-size: 18px;
}

Убираем маркеры

#sidebar ul {
    list-style: none;
}

Добавляем оступы, обтекание, цвет фона и обводку

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px;  
}

Добавьте полей в другие селекторы

#sidebar h3 {
    font-size: 24px;
    color: #044055;
    font-weight: normal;
    padding-bottom: 20px;
    padding-left: 15px;
}

#sidebar ul {
    list-style: none;
    padding-bottom: 25px;
}

#sidebar ul li a {
    font-size: 14px;
    color: #393838;
}

ul#subscribe li {
    padding-bottom: 5px;
}

ul#subscribe li a {
    font-size: 18px;
}

Допишите код для блока с подпиской

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 30px;
}

Теперь нужно добавить кнопки-иконки подписки на твиттер, css и мыло. Для начала надо в html ввести контейнеры для них, чтобы потом можно было работать в css с ними

<ul id="subscribe">
    <li id="rss"><a href="#">Subscribe via RSS</a></li>
    <li id="email"><a href="#">Get Email Updates</a></li>
    <li id="twitter"><a href="#">Follow us on Twitter</a></li>
</ul>
li#rss {
    background: url(images/rss_icon.png) no-repeat;
}

li#email {
    background: url(images/email_icon.png) no-repeat;
}

li#twitter {
    background: url(images/twitter_icon.png) no-repeat;
}

И еще одно правило:

ul#subscribe li {
    padding-bottom: 5px;
    padding-left: 35px;
}

Ссылку J”oin Our Team” надо сделать в виде кнопки. Добавляем класс для нее

<a href="#" class="button">Join Our Team</a>

В CSS задаем правила

a.button {
    color: #393838;
    text-decoration: none;
    background: url(images/button_slice.jpg) repeat-x;
    margin-left: 14px;
    padding: 13px 23px;
    border: 1px solid #c7c7c7;  
}

Где:
color: #393838; -цвет надписи
text-decoration: none; – отмена всех эффектов у текста (в том числе и подчеркивания у ссылок)
background: url(images/button_slice.jpg) repeat-x; – тут мы задаем фон для кнопки в виде файла button_slice.jpg, который повторяется по горизонтали, заполняя таким образом собой всю кнопку.
Так же мы задаем отступы, поля и обводку.

Добавляем правила для контейнера боковой колонки:

#sidebar {
    float: left;
    margin-left: 55px;
    margin-top: 35px;
    background: #d4d6d3;
    border: 1px solid #BEBDBD;
    padding: 15px 15px 30px 15px;
}

Подвал

Сперва назначим фон через CSS

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
}

Затем добавляем отступы и назначаем белый цвет для текста.

#footer {
    background: url(images/footer_slice.jpg) repeat-x;
    padding-top: 20px;
    padding-bottom:60px;
    margin-top: 40px;
    color: #fff;
}

Вот и всё! Готовый рабочий макет готов!

На сим пока заканчиваю, но возможно будет продолжение в виде создания темы wordpress на основе этого макета.

4 Комментариев на “Создаём веб-макет – IV этап: работа с CSS”

  1. YoS Says:
    октября 27, 2010 at 6:33 октября 27, 2010 at 6:33

    просто БОМБА!!!! с нетерпением жду обзор создания макета для ВП

  2. AndyMC Says:
    декабря 23, 2010 at 2:29 декабря 23, 2010 at 2:29

    Огромное Вам спасибо за ваш труд и за то, что поделились своими знаниями! Очень и очень помогли!

  3. gk Says:
    января 11, 2011 at 7:38 января 11, 2011 at 7:38

    Спасибо большое за статью! Очень помогла!

  4. Алекс Says:
    января 14, 2011 at 13:24 января 14, 2011 at 13:24

    Очень хороший цикл статей.Переделаю свой сайт
    http://popa.unovi.com согласно вашим урокам