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

Mirantus

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

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

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

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

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

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

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

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

После создания структуры файлов открываем 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="/go.asp?url=-3D-41-52-17-22-18-3E-25-D3-BA-8C-32-79-9D-8D-80-9A-C2-CF-46-07-74-C3-A9-64-0E-56-4B-BF-39-73-B8-99-4D-5F-33-84-17-B7-78-BE-89-06-E4-39-2F-96-52-96-AE-7C-0E-44" type="text/css">  </head> <body> </body> </html>

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

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

Макет

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

Опишем это в теге 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; }

Логотип

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

<header> <a href="http://www.interface.ru/"><img src="" alt="Whitesquare logo"></a> </header>

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

Поиск

Вставляем форму поиска в тег 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; }

<nav> <ul class="top-menu"> <li><a href="http://www.interface.ru/home/">HOME</a></li> <li class="active">ABOUT US</li> <li><a href="http://www.interface.ru/services/">SERVICES</a></li> <li><a href="http://www.interface.ru/partners/">PARTNERS</a></li> <li><a href="http://www.interface.ru/customers/">CUSTOMERS</a></li> <li><a href="http://www.interface.ru/projects/">PROJECTS</a></li> <li><a href="http://www.interface.ru/careers/">CAREERS</a></li> <li><a href="http://www.interface.ru/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; }

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

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

Заголовок страницы помещается в 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 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

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

<aside> <nav> <ul class="aside-menu"> <li class="active">LOREM IPSUM</li> <li><a href="http://www.interface.ru/donec/">DONEC TINCIDUNT LAOREET</a></li> <li><a href="http://www.interface.ru/vestibulum/">VESTIBULUM ELIT</a></li> <li><a href="http://www.interface.ru/etiam/">ETIAM PHARETRA</a></li> <li><a href="http://www.interface.ru/phasellus/">PHASELLUS PLACERAT</a></li> <li><a href="http://www.interface.ru/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; }

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

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

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

В 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; }

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

Цитата

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

Добавим код цитаты в раздел 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; }

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

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после <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"

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

<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; }

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

Футер

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

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

<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 пикселей.

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

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

<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; }

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

Карта сайта

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

<div id="sitemap"> <h3>SITEMAP</h3> <div> <a href="http://www.interface.ru/home/">Home</a> <a href="http://www.interface.ru/about/">About</a> <a href="http://www.interface.ru/services/">Services</a> </div> <div> <a href="http://www.interface.ru/partners/">Partners</a> <a href="http://www.interface.ru/customers/">Support</a> <a href="http://www.interface.ru/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; }

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

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

<div id="social"> <h3>SOCIAL NETWORKS</h3> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-37-CB-BD-8C-35-32-88-CC-8C-92-C3-85" class="social-icon twitter"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-25-DD-B7-9D-23-38-95-89-C1-9E-C1-C7-08" class="social-icon facebook"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-33-D0-A1-8B-6F-30-95-8D-88-91-CB-84-44-18-70-9F" class="social-icon google-plus"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-35-D5-B9-9D-2E-79-99-8D-82-D2" class="social-icon-small vimeo"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-3A-D3-A1-8C-34-35-9F-CC-8C-92-C3-85" class="social-icon-small youtube"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-25-D0-BD-9B-2A-25-D4-81-80-90-81" class="social-icon-small flickr"></a> <a href="/go.asp?url=-3D-41-52-17-22-18-3E-2A-D2-A7-8C-20-30-88-83-82-D3-CD-C5-4A-58" class="social-icon-small instagram"></a> <a href="http://www.interface.ru/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 сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

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

<div id="footer-logo"> <a href="http://www.interface.ru/"><img src="" alt="Whitesquare logo"></a> <p>Copyright © 2012 Whitesquare. A <a href="/go.asp?url=-3D-41-52-17-22-18-3E-33-DF-BF-94-20-35-D4-81-80-90">pcklab</a> creation</p> </div>

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

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

На этом наши работы закончены.