Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе

42

Веб-дизайн / Практика
102948
25-10-2011

Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе Во втором уроке от Line25 мы научимся верстать шаблон сайта на основании psd файла, сделанного в фотошопе. Сначала мы создадим папку с необходимыми для шаблона изображениями. Потом создадим файл index. Потом мы создадим базовую HTML структуру шаблона и затем постепенно будем ее наполнять управляющими блоками для различных частей и элементов сайта. После этого мы создадим файл style. А уже после этого мы с помощью этого файла будем редактировать внешний вид сайта, до тех пока он не будет выглядеть в точности, как и задумывалось изначально.

Макет сайта в фотошопе
В предыдущем уроке из этого цикла мы шаг за шагом уже создали в фотошопе макет сайта для последующей верстки. Для того, чтобы посмотреть изображение макета сайта в большем размере, щелкните по картинке снизу. Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе

Изображение логотипа
Прежде всего нам надо сохранить отдельным файлом изображение логотипа. Отключаем все лишние слои, оставляем картинку логотипа и, используя команду «Сохранить для Web» (Save for Web…), сохраняем изображение лого. Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе

Файлы изображений
Помимо логотипа нам нужно сохранить еще несколько изображений. В основном это иконки, фоны, а также две картинки-предпросмотра для поста. Все изображения должны находиться в папке images. Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе

Кстати, что касается изображений, то файлы logo.png, temp-post-thumbnails1.png и temp-post-thumbnails2.png можно сохранить прямо с demo шаблона. Файлы back-top-icon.png, credits.png, rss-icon.png, search-icon.png, star.png и twitter-icon.png можно сделать со скриншота макета. О том, как сделать файл bg.png, рассказано в первом уроке. А файл faux.png представляет собой протяжку фона с зоной сайдбара, выделенной цветом. Это прямоугольник размером 958х22 пикселей. Первая часть, шириной 650 пикселей — закрашена белым, вторая часть, шириной 295 пикселя — закрашена цветом #f8f8f8 и третья часть шириной 15 пикселей снова белая.

Базовая HTML структура
В том же месте, где лежит папка images с файлами изображений макета, создаем простой текстовый документ. Для этого щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем index.htm. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл index, в который мы и будем вписывать все HTML коды.

Теперь копируем код, приведенный ниже, и вставляем в файл index. Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу index и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее.

Базовый HTML код содержит в себе описание типа документа, ссылку на файл стилей и глобальный контейнер div, для управления содержимым веб-страницы. Все наши локальные блоки (контейнеры) мы будем вставлять между основными тегами &#60div id=»container«&#62 и &#60/div&#62.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Ticket Stub</title>

<link href="style.css" rel="stylesheet" /></head>

<body><div id="container"></div>

</body>
</html>

HTML: шапка сайта
Сначала вставляем HTML код для шапки сайта &#60div id=»header»&#62. В тег &#60h1&#62 мы заключаем заголовок сайта в виде логотипа. Далее запись с тегами &#60ul&#62 и &#60li&#62 управляет блоком подписки через Твиттер и RSS.

<div id="header">
<h1><a href="#"><img src="images/logo.png" alt="Return to the homepage" id="logo" /></a></h1>
<ul id="subscribe">
<li class="rss"><a href="#">Subscribe by RSS</a></li>
<li class="twitter"><a href="#">Follow on Twitter</a></li>
</ul></div>

HTML: две колонки
Поскольку у нас тема двухколоночная, то мы задаем два дива. Первый — это основной контент, который состоит из анонсов постов и навигации сайта и второй- это сайдбар. В эти контейнеры мы будем вставлять соответствующие блоки, представленные в следующих пунктах.

<div id="main">
	<div id="content">
		<!--Main column-->
	</div>

	<div id="side">
		<!--Sidebar-->
	</div>
</div>

HTML: анонс поста
Отдельный анонс поста представляет собой заголовок, заключенный в тег &#60h2&#62, картинку-предпросмотр, текст и атрибуты поста (дата, категория и блок «читать дальше»). Вставляем код, представленный ниже, в контейнер из предыдущего шага после записи &#60!—Main column—&#62.

<div class="post">
	<h2><a href="#">Captain America Kicks Ass!</a></h2>

	<a href="#" class="post-thumbnail"><img src="images/temp-post-thumbnail1.png" alt="Read the full post" /></a>

	<p>Lorizzle ipsum dolor sizzle ghetto, consectetuer fizzle elit. Sheezy doggy velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit cool, own yo' vizzle, arcu. Pellentesque eget phat. My shizz erizzle. For sure izzle dolizzle for sure turpis tempizzle sizzle. Maurizzle i saw beyonces tizzles and my pizzle went crizzle nibh et turpizzle. Bizzle izzle i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eleifend pot nisi. In hac habitasse platea dictumst. Pimpin' dapibizzle. Cool tellus owned, pretizzle eu, mattis uhuh ... yih!, eleifend dang, nunc. Ma nizzle suscipizzle. Integizzle shizzlin dizzle away sizzle purus. Mammasay mammasa mamma oo sa at dope. Yo mamma erizzle. condimentizzle, turpizzle nizzle congue consectetuer, brizzle libero bling bling fizzle, sizzle ullamcorper sure for sure nizzle sizzle. </p> 

	<div class="post-info">
		<ul>
			<li class="date">18th August 2011</li>
			<li class="category">Posted in <a href="#">Reviews</a></li>
			<li class="read-more"><a href="#">Read more</a></li>
		</ul>
	</div>

</div>

HTML: навигация
После кода анонса поста вставляем код навигации шаблона, представленный ниже.

<div class="pagination">
	<p class="prev"><a href="#">Older articles</a></p>
	<p class="next"><a href="#">Newer articles</a></p>
</div>

HTML: сайдбар
Сайдбар у нас состоит из основного меню (pages), нескольких категорий (categories), блока поиска (search) и текстового блока (About). Заголовок текстового блока заключен в тег &#60h3&#62. Ранее в пункте этого урока «HTML: две колонки» мы уже заготовили место для дива сайдбара. Поэтому копируем код ниже и заменяем див с надписью &#60!—Sidebar—&#62 на этот код.

<div id="side">
	<ul id="pages">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<h3>Categories</h3>
	<ul id="categories">
		<li><a href="#">Movies</a></li>
		<li><a href="#">Reviews</a></li>
		<li><a href="#">Articles</a></li>
	</ul>

	<h3>Search</h3>

	<form method="get" id="search" action="#">
		<fieldset>
			<input type="text" class="searchbar" />
			<input type="button" class="searchbutton" value="Search" />
		</fieldset>
	</form>

	<h3>About</h3>

	<p>Ticket Stub is a WordPress Theme based on the idea of a movie reviews site, but the overall design and layout makes the theme a perfect choice for any type of blog. <a href="#">Read more…</a></p>

</div>

HTML: футер
Футер содержит ссылку на сайт wordpress.org, ссылку на сайт автора шаблона и кнопку Back to top. Копируем код и вставляем в основной HTML документ.

<div id="footer">
	<ul id="credits">
		<li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li>
		<li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li>
	</ul>

	<p id="back-top"><a href="#">Back to top</a></p>
</div>

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

Если на этой стадии два раза щелкнуть по файлу index, то в браузере откроется шаблон нашего сайта, который будет выглядеть так. Пока шаблон отдаленно напоминает то, что мы хотим увидеть. Поэтому следующие наши действия будут состоять в том, чтобы с помощью стилей css настроить внешний вид шаблона. Как с помощью HTML и CSS сверстать макет сайта, сделанный в фотошопе

Базовый CSS
Сначала создадим сам файл стилей. Для этого в той же папке, где у нас находится папка images и файл index, создаем текстовый документ. Щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем style.css. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл style, в который мы и будем вписывать все стили. Этот файл также нужно редактировать с помощью какого-нибудь текстового редактора. Подойдет и «Блокнот», в общем, кому что нравится.

Копируем код ниже и вставляем в созданный нами файл стилей. С помощью этого кода мы зададим некоторые общие установки, а также цвет, размер и тип основного шрифта (font), цвет заднего фона (background), цвет для ссылок (a) и общую ширину сайта (#container).

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font: 14px/24px Helvetica, Sans-Serif; color: #7e7e7e;
	background: #f5f5f5 url(images/bg.png);
}

a {
	color: #9f3a3a; text-decoration: none;
}
	a:hover {
		color: #792323;
	}

#container {
	width: 960px; margin: 0 auto;
}