Наверх

Верстка сайта из PSD макета

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

Руссификация шаблона

В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

Вообще подходов к подготовке шаблонов существует множество: кто-то сначала досконально прорисовывает шаблон и только потом занимается вёрсткой, кто-то отрисовывает дизайн приблизительно, добавляя штрихи во время вёрстки; одни сначала рисуют, затем занимаются нарезкой, другие (как мы в прошлой статье) сохраняют графические объекты непосредственно в процессе создания дизайна. Даже инструменты вёрстки и рисования у каждого свои: одни ставят плагины и работают в визуальных редакторах, другие используют стандартный набор возможностей и верстают в простом редакторе… в общем, ниже будет приведён всего лишь один способ из многих.

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

  • back_all — подложка сайта.
  • header_top — фон шапки.
  • big_pic — логотип.
  • title — фон заголовков левой панели.
  • footer — заливка низа сайта.
  • 1mini — первое фото для основной части страницы.
  • 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шаблон сайта</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
</body>
</html>

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

Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер <body> вставьте следующий код):

<div id="content">
<!-- Шапка -->
	<div id="header">
	  <div id="menu">
	  </div>
	  <div id="logo">
	  </div>
	</div>
<!-- Конец шапки -->
<!-- Основной блок -->
	<div id="right">
	</div>
<!-- Конец основного блока -->
<!-- Левая панель -->
	<div id="left">
	<div>
<!-- Конец левой панели -->
<!-- Ноги сайта -->
	<div id="footer">
	</div>
<!-- Конец -->

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

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

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

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

a:link {
	color: #D72020;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:visited {
	color: #D72020;
}

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

body {
	background: #FFD723 url(images/back_all.jpg) repeat-x;
	font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Страница и фон

Оформляем горизонтальное меню

Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.

Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

#header {
	background: #ffffff;
	height: 306px;
	text-align: left;		
}

Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.

Страница и фон

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top.gif) repeat-x;
}

Страница в обозревателе тут же преобразится и будет выглядеть так.

Страница преображается

Теперь можно добавить и само меню в файл index.html:

<table id="menu">
		<tr>
			<td><a href="#"  title="">Главная</a></td>
			<td><a href="#"  title="">Галерея</a></td>
			<td><a href="#"  title="">Договор</a></td>
			<td><a href="#"  title="">Прайс</a></td>
			<td><a href="#"  title="">Образцы</a></td>
			<td><a href="#"  title="">Контакты</a></td>
		</tr>
		</table>

Обновив страницу можно увидеть, что оно действительно появилось.

Меню добавилось

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

#menu a {
	float: left;
	width: 99px;
	height: 46px;
display: block;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	padding-top: 35px;
}

#menu a:hover {
	color: #D72020;
	text-decoration: underline;
}

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Отредактированное меню

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Поведение пункта меню при наведении курсора

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}

Логотип вставлен ровно по размеру.

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

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

  <div id="logo">
		<h1><a href="#">Имя сайта</a></h1>
		<h2><a href="№" id="metamorph">Слоган сайта</a></h2>
	  </div>

Текст появился, но его тоже нужно оформлять.

Добавляем текст

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

#logo a {
	text-decoration: none;
	text-transform: lowercase;
	font-style: italic;
	font-size: 36px;
	color: #FFFFFF;
}
#logo h2 a
{
font-size: 24px;
}

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Разметка у контента

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h4
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

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

Заполним контейнер right. Изображения поместим в простую таблицу.

<h2>Галерея</h2><br />
		<h2>Кухни</h2><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Изменили внешний вид текста

Создание левой панели

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

Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.

В файл CSS впишите следующий код.

#left
{
	padding: 10px;
	width: 237px;
	padding-right: 1em;
}

#left h3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	width: 100px;
	font-size: 18px;
}

#left li ul {
	position: absolute;
	left: 90px;
	top: 0;
	display: none;
}

#left ul li {
	position: relative;
	margin-bottom:20px;
} 

#left ul li a {
	display: block;
	text-decoration: none;
	color: #ffffcc;
	background: #ff9900;
	padding: 5px;
	border: 1px solid gold;
	border-bottom: 0;
} 

#left li:hover ul {
	display: block;
}

#left li li {
	margin-bottom:0px;
	width: 150px;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

В контейнер left HTML-документа добавим сначала информационный блок без меню.

<h3>Информация</h3>
	<p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br />
	<h3>Меню</h3>

Белый фон распространился ещё ниже по странице.

Увеличили белый фон

Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.

<ul>
			<li><a href="#">Галерея</a>
					<ul>
						<li><a href="#">Кухни</a></li>
						<li><a href="#">Кровати</a></li>
						<li><a href="#">Стенки</a></li>
						<li><a href="#">Прихожие</a></li>
						<li><a href="#">Шкафы-купе</a></li>
						<li><a href="#">Компьютерные столы</a></li>
					</ul>
				</li>
				<li><a href="#">Договор</a></li>
				<li><a href="#">Прайс</a>
					<ul>
						<li><a href="#">Кухни</a></li>
						<li><a href="#">Кровати</a></li>
						<li><a href="#">Стенки</a></li>
						<li><a href="#">Прихожие</a></li>
						<li><a href="#">Шкафы-купе</a></li>
						<li><a href="#">Компьютерные столы</a></li>
					</ul>
				</li>
				<li><a href="#">Образцы</a>
					<ul>
						<li><a href="#">Стекло</a></li>
						<li><a href="#">ДСП</a></li>
						<li><a href="#">Фурнитура</a></li>
						<li><a href="#">И т.д.</a></li>
					</ul>
				</li>
				<li><a href="#">Контакты</a>
				<li><a href="#">Важно</a>
			</li>
		</ul>

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

Список

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

Работающее подменю

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

#footer {
	height: 44px;
	clear: both;
	padding-top: 20px;
	background: url(images/footer.gif) repeat-x;
	border-top: 5px solid #A6640E;
}

#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #ffffff;
}

#footer a {
	color: #ffffff;
}

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

<p>Copyright © 2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a></p>
	<p>+7-(777)-777-77-77 | <a href="#">Москва</a></p>

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

Завершенная верстка

Получившийся код здесь приводить не буду — вы можете просто скачать весь шаблон.

You must have Javascript enabled to use this form.