Как сверстать веб-страницу. Часть 1

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

6f8c1329b9daed544646698108998966

Структура файлов

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

  • Создаем папку с названием нашего проекта, например Whitesquare.
  • В ней создаем пустой файл index.html.
  • В папке проекта создаем папку css с пустым файлом styles.css.
  • В папке проекта создаем пустую папку images.

34962777c7d1f761d8f4eb4c306786b2

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

  • Как будут нарезаться изображения?
  • Какими будут основные стили?
  • Какой макет у нас получится?

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

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

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

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Прописываем все эти стили в styles.css:

body {
    color: #8f8f8f;
    font: 12px Tahoma, sans-serif;
    background-color: #f8f8f8;
    border-top: 5px solid #7e7e7e;
    margin: 0;
}
input[type="text"] {
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    height: 30px;
    color: #b2b2b2;
    padding: 0 10px;
    vertical-align: top;
}
button {
    color: #fff;
    background-color: #29c5e6;
    border: none;
    height: 32px;
    font-family: 'Oswald', sans-serif;
}
p {
    margin: 20px 0;
}

 

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Whitesquare</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
</body>
</html>

 

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

bc1edaf37b30b6946dbaa03c948fbdc6

Опишем это в теге body:

<body>
    <div id="wrapper">
        <header></header>
        <nav></nav>
        <div id="heading"></div>
        <aside></aside>
        <section></section>
    </div>
    <footer></footer>
</body>

 

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

#wrapper {
    max-width: 960px;
    margin: auto;
}
header {
    padding: 20px 0;
}

 

Логотип

ad1e15d92086ee83c396cb458509df2d

Вставляем логотип в тег header:

<header>
    <a href="/"><img src="" alt="Whitesquare logo"></a>
</header>

 

Дополнительных стилей не требуется.

Поиск

d87d5594013f6e7b6632e278ae34ef8c

Вставляем форму поиска в тег header:

<header>
…
<form name="search" action="#" method="get">
    <input type="text" name="q" placeholder="Search"><button type="submit">GO</button>
</form>
</header>

 

И стили выравнивания по правому краю для нее:

form[name="search"] {
    float: right;
}

 

Меню

5a06f5c4c53d63441028da668014d382

Для отображения меню необходимо создать список со ссылками внутри тега nav:

<nav>
    <ul class="top-menu">
        <li><a href="/home/">HOME</a></li>
        <li class="active">ABOUT US</li>
        <li><a href="/services/">SERVICES</a></li>
        <li><a href="/partners/">PARTNERS</a></li>
        <li><a href="/customers/">CUSTOMERS</a></li>
        <li><a href="/projects/">PROJECTS</a></li>
        <li><a href="/careers/">CAREERS</a></li>
        <li><a href="/contact/">CONTACT</a></li>
    </ul>
</nav>

 

CSS стили для него будут следующие:

nav a {
    text-decoration: none;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav li {
    list-style-position: inside;
    font: 14px 'Oswald', sans-serif;
    padding: 10px;
}

.top-menu li {
    display: inline-block;
    padding: 10px 30px;
    margin: 0;
}

.top-menu li.active {
    background: #29c5e6;
    color: #fff;
}

.top-menu a {
    color: #b2b2b2;
}

 

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

Заголовок страницы

728e3b83b915a000db114952b08c9b4c

Заголовок страницы помещается в div с идентификатором heading

<div id="heading">
    <h1>ABOUT US</h1>
</div>

 

Заголовок имеет следующие стили:

#heading {
    background: transparent url(../images/h1-bg.png);
    margin: 30px 0;
    padding-left: 20px;
}

h1 {
    display: inline-block;
    color: #7e7e7e;
    font: 40px/40px 'Oswald', sans-serif;
    background: url(../images/bg.png);
    margin: 0;
    padding: 0 10px;
}

 

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

aside {
    float: left;
    width: 250px;
}
section {
    margin-left: 280px;
    padding-bottom: 50px;
}

 

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

9d2568de6dcc13c044388e02ab540962

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

<aside>
<nav>
    <ul class="aside-menu">
        <li class="active">LOREM IPSUM</li>
        <li><a href="/donec/">DONEC TINCIDUNT LAOREET</a></li>
        <li><a href="/vestibulum/">VESTIBULUM ELIT</a></li>
        <li><a href="/etiam/">ETIAM PHARETRA</a></li>
        <li><a href="/phasellus/">PHASELLUS PLACERAT</a></li>
        <li><a href="/cras/">CRAS ET NISI VITAE ODIO</a></li>
    </ul>
</nav>
</aside>

 

И применяем к подменю следующие стили:

.aside-menu li {
    font-weight: 300;
    list-style-type: square;
    border-top: 1px solid #e7e7e7;
}

.aside-menu li:first-child {
    border: none;
}

.aside-menu li.active {
    color: #29c5e6;
}

.aside-menu a {
    color: #8f8f8f;
}

 

Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.

Контент сайдбара

В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.

2199c85fd7c784db07825362e9127eda

В html это выглядит так:

<h2>OUR OFFICES</h2>
<p><img src="images/sample.png" width="230" height="180" alt="Our offices"></p>

 

В стилях укажем шрифты, цвета и отступы:

aside > h2 {
    background: #29c5e6;
    font: 14px 'Oswald', sans-serif;
    color: #fff;
    padding: 10px;
    margin: 30px 0 0 0;
}

aside > p {
    background: #f3f3f3;
    border: 1px solid #e7e7e7;
    padding: 10px;
    margin: 0;
}

 

Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.

Цитата

Вёрстку контента начнём с добавления цитаты.

0694726a2814d93d8fe254ed799e4aef

Добавим код цитаты в раздел section

<section>
<blockquote>
    <p>
        “QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
    </p>
    <cite>John Doe, Lorem Ipsum</cite>
    </blockquote>
</section>

 

И применим для него стили:

blockquote {
    margin: 0;
    background: #29c5e6;
    padding: 10px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

blockquote p {
    color: #fff;
    font-style: italic;
    font-size: 33px;
    margin: 0;
}

blockquote cite {
    display: block;
    font-size: 20px;
    font-style: normal;
    color: #1d8ea6;
    margin: 0;
    text-align: right;
}

 

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

b1f744ae0b201687749cf1f2458747ff

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после<blockquote>.

<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>

 

Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :

<figure>
    <img src="images/sample.png" width="320" height="175" alt="">
</figure>
<figure>
    <img src="images/sample.png" width="320" height="175" alt="">
</figure>

 

зададим следующие стили:

figure {
    display: inline-block;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

figure img {
    display: block;
    border: 1px solid #fff;
    outline: 1px solid #c9c9c9;
}

figure figcaption {
    font-size: 16px;
    font-weight: 300;
    margin-top: 5px;
}

figure figcaption span {
    display: block;
    font-size: 14px;
    color: #29c5e6;
}
section > figure + figure {
    margin-left: 28px;
}

 

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

8ca5a4c2a0e62c06b70048e9bf7cb701

При верстке этого блока добавим сначала заголовок:

<h2>OUR TEAM</h2>

 

Со стилем:

section > h2 {
    background: #29c5e6;
    font: 30px 'Oswald', sans-serif;
    font-weight: 300;
    color: #fff;
    padding: 0 10px;
    margin: 30px 0 0 0;
}

 

А затем два блока-строки с карточками сотрудников

<div class="team-row">
    <figure>
        <img src="images/sample.png" width="96" height="96" alt="">
        <figcaption>John Doe<span>ceo</span></figcaption>
    </figure>
    <figure>
        <img src="images/sample.png" width="96" height="96" alt="">
        <figcaption>Saundra Pittsley<span>team leader</span></figcaption>
    </figure>
…
</div>
<div class="team-row">
    <figure>
        <img src="images/sample.png" width="96" height="96" alt="">
        <figcaption>Ericka Nobriga<span>art director</span></figcaption>
    </figure>
    <figure>
        <img src="images/sample.png" width="96" height="96" alt="">
        <figcaption>Cody Rousselle<span>senior ui designer</span></figcaption>
    </figure>
…
</div>

 

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

figure figcaption {
    font-size: 16px;
    font-weight: 300;
    margin-top: 5px;
}

figure div {
    font-size: 14px;
    color: #29c5e6;
}

.team-row figure {
    margin-top: 20px;
}

.team-row figure + figure {
    margin-left: 43px;
}

 

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

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

f9bc37824c697d8cae75d77b5c26b0ce

Для начала создадим контейнер футера с этим блоками:

<footer>
    <div id="footer">
        <div id="twitter"></div> 
        <div id="sitemap"></div>
        <div id="social"></div>
        <div id="footer-logo"></div>
    </div>
</footer>

 

И применим к нему оформление:

footer {
    background: #7e7e7e;
    color: #dbdbdb;
    font-size: 11px;
}

#footer {
    max-width: 960px;
    margin: auto;
    padding: 10px 0;
    height: 90px;
}

 

Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера

Верстаем содержимое ленты Твиттера:

e234915ece2470db55f7afee224a0927

<div id="twitter">
    <h3>TWITTER FEED</h3>
    <time datetime="2012-10-23"><a href="#">23 oct</a></time>
<p>
    In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>

 

Стили:

footer h3 {
    font: 14px 'Oswald', sans-serif;
    color: #fff;
    border-bottom: 1px solid #919191;
    margin: 0 0 10px 0;
}

#twitter time a {
    color: #b4aeae;
}

footer p {
    margin: 5px 0;
}

#twitter {
    float: left;
    width: 300px;
}

#twitter p {
    padding-right: 15px;
}

 

Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.

Карта сайта

Карта сайта представляет собой два блока со ссылками:

36cbf4582fb1a57847149147fbcf3bd2

<div id="sitemap">
    <h3>SITEMAP</h3>
    <div>
        <a href="/home/">Home</a>
        <a href="/about/">About</a>
        <a href="/services/">Services</a>
    </div>
    <div>
        <a href="/partners/">Partners</a>
        <a href="/customers/">Support</a>
        <a href="/contact/">Contact</a>
    </div>
</div>

 

Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.

footer a {
    color: #dbdbdb;
}

#sitemap {
    width: 150px;
    float: left;
    margin-left: 20px;
    padding-right: 15px;
}

#sitemap div {
    display: inline-block;
}

#sitemap div + div {
    margin-left: 40px;
}

#sitemap a {
    display: block;
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 5px;
}

#sitemap a:hover {
    text-decoration: underline;
}

 

Социальные ссылки

3180bde5365ad4a49e650518b530934f

Вставляем набор ссылок в контейнер <div id=”social”>

<div id="social">
    <h3>SOCIAL NETWORKS</h3>
    <a href="http://twitter.com/" class="social-icon twitter"></a>
    <a href="http://facebook.com/" class="social-icon facebook"></a>
    <a href="http://plus.google.com/" class="social-icon google-plus"></a>
    <a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
    <a href="http://youtube.com/" class="social-icon-small youtube"></a>
    <a href="http://flickr.com/" class="social-icon-small flickr"></a>
    <a href="http://instagram.com/" class="social-icon-small instagram"></a>
    <a href="/rss/" class="social-icon-small rss"></a>
</div>

 

И стилизуем их:

#social {
    float: left;
    margin-left: 20px;
    width: 130px;
}

.social-icon {
    width: 30px;
    height: 30px;
    background: url(../images/social.png) no-repeat;
    display: inline-block;
    margin-right: 10px;
}

.social-icon-small  {
    width: 16px;
    height: 16px;
    background: url(../images/social-small.png) no-repeat;
    display: inline-block;
    margin: 5px 6px 0 0;
}

.twitter {
    background-position: 0 0;
}

.facebook {
    background-position: -30px 0;
}

.google-plus {
    background-position: -60px 0;
}

.vimeo {
    background-position: 0 0;
}

.youtube {
    background-position: -16px 0;
}

.flickr {
    background-position: -32px 0;
}

.instagram {
    background-position: -48px 0;
}

.rss {
    background-position: -64px 0;
}

 

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

c058b55038e832fb39e6bef26deeb492

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

<div id="footer-logo">
    <a href="/"><img src="" alt="Whitesquare logo"></a>
    <p>Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation</p>
</div>

 

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

#footer-logo {
    float: right;
    margin-top: 20px;
    font-size: 10px;
    text-align: right;
}

 

На этом наши работы закончены. Готовый проект можно скачать здесь.