Верстаем PSD в HTML. Простой шаблон в CSS

13
Просмотров: 7 434

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

И так давайте приступим.


Сам макет я нарисовал быстро, ничего заумного в нем не придумывал. Как получилось так и начал верстать.
И так для начала, давайте создадим папку, где будем держать все наши файлу и картинки. Затем в это же папке создадим еще одну папку и назовем ее Images, именно в этой папку мы будем держать все наши картинки.
Теперь давайте создадим два файла, один будет называться index.html, а второй style.css.
Вот так выглядит моя папка:

Теперь давайте откроем любой HTML редактор. Лично я пользуюсь Dreamweaver. В нем откроем наш файл  index.html.
Первое, что нам нужно в нем написать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Raptor theme design</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>

Как вы заметили, мы добавили строку:

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

которая будет тянуть все данные с файла style.css. После добавления этой строки Dreamweaver, сам откроет еще одну закладку, где будет это самый файл.

Теперь давайте добавим в index.html строки, которые будут отвечать за шапку блога и за меню.
Пишем следующее в файле index.html:

<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Clear blog </a></h1>
<p>Еще одна тема от <a href="#">Raptor</a></p>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><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>
</div>
</div>
</div>

Продолжаем дальше и добавим сам контент для блога и информацию о блоге которую я на макете размести в самом низу над футером (подвалом):

<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Как создать контент для читателей</a></h2>
<p class="meta"><span class="author"><a href="#">Raptor</a></span> <span class="date">Сент.10/09/2010</span>&nbsp;<span class="links"><a href="#" title="">Коммнетарии</a></span></p><br />
<div><img src="images/postimg.jpg" alt="" width="540" height="225" /></div>
<div class="entry">
<p>Люди заходят в интернет для того что бы получить быстрый доступ к интересующей их информации. У них абсолютно нет ни какого желания тратить свое время на поиски лишней информации. Посетители хотят найти то, что они ищут, отбросив всю не нужную шелуху и как можно быстрее найти то зачем они пришли. </p>
<p>Когда посетители попадают на одну из наших статей, большинство их них не собирается тратить свое время и читать пост полностью. Да же я, как пример, зайдя на какой то блог, почти ни когда не читаю весь пост от начала до конца. Читаю его бегло и только по абзацам.</p>
<div><span class="links"><a href="#" title="">Читать дальше</a></span></div>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Прогулка по блогосфере</a></h2>
<p class="meta"><span class="author"><a href="#">Raptor</a></span> <span class="date">Сент.08/09/2010</span>&nbsp;<span class="links"><a href="#" title="">Коммнетарии</a></span></p>
<div><img src="images/img2.jpg" alt="" width="540" height="225" /></div>
<div class="entry">
<p>Ну вот и настало воскресенье, и пришло время, просмотреть записи в блогах которые были сделаны разными блогерами. Может кто то из этой подборки, уже читал эти посты, а может и нет. Подборка интересных записей, будет исходить из моего риадера, а так же из Twitter, так как и в этом сервисе, встречаются интересные записи.</p>
<p>И так приступим:</p>
<div><span class="links"><a href="#" title="">Читать дальше</a></span></div>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Залог успеха блога-уникальные посты </a></h2>
<p class="meta"><span class="author"><a href="#">Raptor</a></span> <span class="date">Сент.08/09/201</span>&nbsp;<span class="links"><a href="#" title="">Коммнетарии</a></span>
</p>
<div><img src="images/img3.jpg" alt="" width="540" height="225" /></div>
<div class="entry">
<p>Вы пишете в блоге? Одним из ключевых аспектов в блогах является тот факт, что написанный вами пост должен привлекать внимание тех кто вас читает. Если ваши посты не интересны читателям, то какой смысл тогда писать. И все же, если вы пишите уникальные и интересные статьи, и каждый день к вам на блог приходят посетители, то это еще не повод расслабляется и радоваться успеху. Вам еще надо удержать на своем блоге этих читателей, сделать так что бы они продолжали заходить к вам. Посты на вашем блоге должны удерживать читателей, прочитав такой интересный и уникальный контент просто будут обязаны высказать свою мысль оставив комментарий. Вы слышали это много раз, что без хорошего содержания у вас просто нет статьи.</p>
<div><span class="links"><a href="#" title="">Читать дальше</a></span></div>
</div>
</div>

<div id="about">
<h2>Информация о блоге</h2>
<p>Зачем ? Интересный вопрос. Да просто так , сидел читал инет…….. , нет даже не так было. Всегда была идея поделиться с другими интересными статьями , картинками , юмором и рассказать <a href="#">все обо всем</a> всем. Думал сделать сайт , но быстро остыл от этой идеи , а тут увидел платформу для блога <strong>Wordpress</strong> зарегистрировался и понеслось. </p>
</div>
</div>

Обратите внимание на строки:

}<p class="meta"><span class="author"><a href="#">Raptor</a></span> <span class="date">Сент.08/09/201</span>&nbsp;<span class="links"><a href="#" title="">Коммнетарии</a></span>

Они отвечают за имя автора, дату написания поста и комментарии.

Теперь займемся нашим сайд баром (sidebar), там у нас будет поле для поиска, инфа обо мне, категории, блогролл и архив блога.
А вот и сам код:

<div id="sidebar">
<ul>
<li>
<h2>Поиск</h2>
<div id="search" >
<form method="get" action="#">
<div>
<input type="text" name="s" id="search-text" value="" />
<input type="submit" id="search-submit" value="GO" />
</div>
</form>
</div>
<div style="clear: both;">&nbsp;</div>
</li>
<li>
<h2>Обо мне</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nulla justo, iaculis non congue semper; congue adipiscing metus. Nullam tempus molestie ante, et ultricies risus commodo eu! Nunc imperdiet libero sed purus blandit bibendum.</p>
</li>
<li>
<h2>Категории</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Blogroll</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Арxив блога</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
</ul>
</div>

<div style="clear: both;">&nbsp;</div>
</div>

</div>

И заканчиваем весь этот код нашим футером:

<div id="footer">
<p>Copyright (c) 2010 Clear blog. All rights reserved. Design by <a href="#">Raptor</a>.</p>
</div>

На этом с файлом index.html мы закончили и получили вот такой результат:

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

Начнем с того, что дадим нашему шаблону размер, разместим его по центру, пропишем бэкграунд нашего шаблона, зададим параметры для тегов h1, h2, h3, а так же обозначим цвета для ссылок
Убедитесь, что файл style.css у вас открыт и пишем следующий код:

body {
margin: 0;
padding: 0;
background: #fff url(images/mainbg.jpg) repeat left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #c3c3c3;
}

h1 {
font-size: 29px;
}

h2 {
font-size: 32px;
}

h3 {
font-size: 22px;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: underline;
color: #2E458A;
}

a:hover {
text-decoration: none;
}

#wrapper {
margin: 0 auto;
padding: 0;
}
{/code}

Теперь когда все прописано, займемся шапкой блога:

{code type=css}
#header-wrapper {
height: 150px;
}

#header {
overflow: hidden;
width: 900px;
margin: 0 auto;
padding: 30px 0px 0px 0px;
}

После этого переходим к размещению лого нашего блога, зададим ему цвет, размер и расположение на самом шаблоне:

#logo {
float: left;
width: 350px;
margin: 0;
padding: 0;
color: #c8c8c8;
}

#logo h1, #logo p {
}

#logo h1 {
margin-left: 30px;
padding: 20px 0px 0px 0px;
letter-spacing: -1px;
text-transform: none;
font-size: 60px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #006;
}

#logo h1 a {
color: #333;
text-shadow: -3px 0 4px #006;
}

#logo h1 span {
}

#logo p {
margin: -5px 0px 0px 0px;
padding: 0px 0 0 32px;
text-transform: none;
font: normal 18px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #000;
}

#logo a {
border: none;
background: none;
text-decoration: none;
color: #45302C;
}

Настала очередь заняться формой поиска и разместить права, а так же задать ей стили.

#search {
float: right;
width: 280px;
height: 40px;
padding: 0px 0px 0px 0px;
background: url(images/sform.jpg) no-repeat 18px 10px;
}

#search form {
margin: 0;
padding: 10px 0 0 20px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search-text {
width: 170px;
height: 19px;
margin-right: 10px;
padding: 4px 5px 1px 5px;
border: none;
background: none;
text-transform: lowercase;
font: normal 12px Arial, Helvetica, sans-serif;
color: #B9ADAA;
}

#search-submit {
width: 45px;
height: 26px;
border: none;
background: none;
text-indent: -9999px;
color: #FFFFFF;
}

Переходим к меню блога:

#menu {
float: right;
height: 125px;
margin: 0 auto;
padding: 0;
}

#menu ul {
margin: 0;
padding: 40px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
height: 24px;
margin-right: 2px;
padding: 6px 15px 0px 15px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #19222C;
border: none;
}

#menu a:hover, #menu .current_page_item a {
background: url(images/sepline.jpg) repeat-x left top;
text-shadow: #fff -1px 1px 1px;
text-decoration: none;
}

#menu .current_page_item a {
text-shadow: #fff -1px 1px 1px;
background: url(images/sepline.jpg) repeat-x left top;
}

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

#page {
width: 900px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}

#page-bgtop {
}

#content {
float: left;
width: 600px;
padding: 40px 0px 0px 0px;
background: #FFFFFF;
}

.post {
margin-bottom: 30px;
padding: 0px 30px;
}

.post .title {
height: 41px;
padding: 0px 0px 0px 0px;
}

.post .title a {
letter-spacing: -2px;
text-decoration: none;
text-transform: none;
color: #BF3B41;
border: none;
}

.post .title a:hover {
letter-spacing: -2px;
text-decoration: none;
text-transform: none;
border: none;
color: #036;
}

.post .entry {
padding: 10px 0px 20px 0px;
padding-bottom: 20px;
border-bottom: 1px solid #D1D9F0;
text-align: justify;
}

.post .meta {
overflow: hidden;
padding-top: 10px;
}

.post .links {
}

.links a {
padding: 4px 10px;
background: #87A0E5;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
color: #FFFFFF;
}

.author {
padding: 4px 10px;
background: #DF8088;
text-transform: uppercase;
font-size: 11px;
color: #000;
}

.author a {
text-decoration: none;
color: #FFFFFF;
}

.date {
padding: 4px 10px;
background: #91D9AA;
text-transform: uppercase;
font-size: 11px;
color: #000;
}

Самое время заняться сайдбаром:

#sidebar {
float: right;
width: 300px;
margin: 0px;
padding: 0px 0px 0px 0px;
background: #484B4F;
border-bottom: 3px solid #999;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0px 0px 0px 20px;
padding: 0;
}

#sidebar li ul {
margin: 0px;
padding-bottom: 30px;
}

#sidebar li li {
line-height: 35px;
border-bottom: 1px solid #333;
border-left: none;
text-align: left;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar li li a {
padding: 0px 0px 0px 20px;
background: url(images/sharpe.png) no-repeat left 5px;
}

#sidebar h2 {
height: 30px;
margin: 0px 0px 20px 0px;
padding: 4px 0px 0px 20px;
background: url(images/menubg.jpg) repeat-x left top;
text-shadow: #000 -1px 1px 1px;
text-align: left;
text-transform: uppercase;
letter-spacing: -.5px;
font-size: 14px;
color: #19222C;
}

#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
color: #B9ADAA;
}

#sidebar a {
border: none;
color: #B9ADAA;
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
color: #B9ADAA;
}

И в заключени всего этого кода, пропишем футер нашего шаблона:

#footer {
width: 900px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
margin: 0;
padding: 20px 0px 0px 30px;
line-height: normal;
font-size: 12px;
text-transform: uppercase;
text-align: left;
color: #182024;
}

#footer a {
color: #C54342;
font-weight: bold;
}

#about {
width: 540px;
padding: 30px;
background: #484B4F;
border-bottom: 3px solid #999;
color: #FDAF85;
}

#about h2 {
padding-bottom: 10px;
color: #FFFFFF;
}

#about a {
color: #B9ADAA;
}

С кодом мы закончили и получили следующий результат:


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

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

13 КОММЕНТАРИИ

  1. тоже никак не соберусь что-то нарисоватьсверстать для своего сайта. Теперь, с этим постом, возможно соберусь 😉
    Может, кстати, не все поймут, что надо вставить в , а весь последующий код — между 🙂

  2. На своём ресурсе я размешал много скриптов , но див коды довали плохйо результат смещения, почему, сам ен понимаю , но поставили ДЛЕ движок всё стало супер!

  3. А как вы думаете, наоборот — можно? Я как раз умею верстать, 3 года проработала дизайнером-верстальщиком в издательстве, но не представляю, как верстку, или файл .pdf превратить в страницу сайта. Тут у меня — бездонная пропасть, через которую я даже хиленький мостик не могу перекинуть.

    • Наташа pdf это разширение так же как и HTML и они совсем разные.верстать pdf это одно а верстать HTML совсем другое! тут нужно учить и я тебе лично советую начать с http://htmlbook.at.ua/ прейди поссылке и начни прямо сейчас. или скопируй и вставь . удачи.))

  4. Кирилл, огромное спасибо за пост. А то я так и не поставил еще твой шаблон, который выиграл в конкурсе. Было бы классно, если бы ты еще расписал про верстку конкретно для WP. Хотя, думаю, что и с этим постом разберусь. Спасибо! 🙂

  5. да все это супер и правильно! но только в професии HTML-вертальщик мало знать только HTML и css практически всегда применяеться еще и javscript и без него Господа в верстке никак! очень редко можно обойтись без него.так ,что было бы совсем круто если бы применили парочку скриптов ,так для разнообразия . всем удачи!)))

ОСТАВЬТЕ ОТВЕТ