Верстаем PSD в HTML. Простой шаблон в CSS
2010
Как вы знаете, я часто выкладываю на блоге свои макеты в формате PSD. Но ни когда не занимался версткой. Но желание было всегда научиться верстать. По этому в свободное время, которого увы не столь много, я решил сделать совсем простой макет и сверстать его. Что из этого получилось, вы можете увидеть сами прочитав этот урок и повторив за мной все действия.
И так давайте приступим.
Сам макет я нарисовал быстро, ничего заумного в нем не придумывал. Как получилось так и начал верстать.
И так для начала, давайте создадим папку, где будем держать все наши файлу и картинки. Затем в это же папке создадим еще одну папку и назовем ее Images, именно в этой папку мы будем держать все наши картинки.
Теперь давайте создадим два файла, один будет называться index.html, а второй style.css.
Вот так выглядит моя папка:
Теперь давайте откроем любой HTML редактор. Лично я пользуюсь Dreamweaver. В нем откроем наш файл index.html.
Первое, что нам нужно в нем написать:
{code type=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>
{/code}
Как вы заметили, мы добавили строку:
{code type=html}<link href=»style.css» rel=»stylesheet» type=»text/css» media=»screen» />{/code}
которая будет тянуть все данные с файла style.css. После добавления этой строки Dreamweaver, сам откроет еще одну закладку, где будет это самый файл.
Теперь давайте добавим в index.html строки, которые будут отвечать за шапку блога и за меню.
Пишем следующее в файле index.html:
{code type=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>
{/code}
Продолжаем дальше и добавим сам контент для блога и информацию о блоге которую я на макете размести в самом низу над футером (подвалом):
{code type=html}
<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> <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> <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> <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>
{/code}
Обратите внимание на строки:
{code type=html}<p class=»meta»><span class=»author»><a href=»#»>Raptor</a></span> <span class=»date»>Сент.08/09/201</span> <span class=»links»><a href=»#» title=»">Коммнетарии</a></span>{/code}
Они отвечают за имя автора, дату написания поста и комментарии.
Теперь займемся нашим сайд баром (sidebar), там у нас будет поле для поиска, инфа обо мне, категории, блогролл и архив блога.
А вот и сам код:
{code type=html}
<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;»> </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;»> </div>
</div>
</div>
{/code}
И заканчиваем весь этот код нашим футером:
{code type=html}
<div id=»footer»>
<p>Copyright (c) 2010 Clear blog. All rights reserved. Design by <a href=»#»>Raptor</a>.</p>
</div>
{/code}
На этом с файлом index.html мы закончили и получили вот такой результат:
Теперь переходим к файлу style.css. Именно в этом файле мы создадим стили дня нашего макета, зададим цветовую гамму, разместим сайдбар и форму поиска в левой стороне, обозначим, цвета для текста, ссылок.
Начнем с того, что дадим нашему шаблону размер, разместим его по центру, пропишем бэкграунд нашего шаблона, зададим параметры для тегов h1, h2, h3, а так же обозначим цвета для ссылок
Убедитесь, что файл style.css у вас открыт и пишем следующий код:
{code type=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;
}
{/code}
После этого переходим к размещению лого нашего блога, зададим ему цвет, размер и расположение на самом шаблоне:
{code type=css}
#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;
}
{/code}
Настала очередь заняться формой поиска и разместить права, а так же задать ей стили.
{code type=css}
#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;
}
{/code}
Переходим к меню блога:
{code type=css}
#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;
}
{/code}
Теперь давайте займемся самим контентом блога, разместим его на шаблоне зададим ему ширину, стили:
{code type=css}
#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;
}
{/code}
Самое время заняться сайдбаром:
{code type=css}
#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;
}
{/code}
И в заключени всего этого кода, пропишем футер нашего шаблона:
{code type=css}
#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;
}
{/code}
С кодом мы закончили и получили следующий результат:
Напомню, что макет был нарисован, сначала в Фотошопе, затем порезан на некоторые элементы, такие как сам фон, лини разделяющие посты между собой, форма для поиска, фон для заголовков в сайдбаре. Выглядит это вот так:
Увы, я не могу добавить сюда сам шаблон, для того что бы вы посмотрели его в живую.
Вот и все, жду ваших замечаний и если есть ошибки в коде, не стесняйтесь меня исправить, буду только благодарен!
Похожие посты:
Хороший пост. Добавил в избранное. Давай следующий в том же духе.
Никак не решусь себе сверстать, а надо.
тоже никак не соберусь что-то нарисоватьсверстать для своего сайта. Теперь, с этим постом, возможно соберусь
Может, кстати, не все поймут, что надо вставить в , а весь последующий код — между
На своём ресурсе я размешал много скриптов , но див коды довали плохйо результат смещения, почему, сам ен понимаю , но поставили ДЛЕ движок всё стало супер!
Класс расписал.
Отличный пост. Сейчас как раз делаю шаблон для одного блога, так что информация, как раз кстати.
А как вы думаете, наоборот — можно? Я как раз умею верстать, 3 года проработала дизайнером-верстальщиком в издательстве, но не представляю, как верстку, или файл .pdf превратить в страницу сайта. Тут у меня — бездонная пропасть, через которую я даже хиленький мостик не могу перекинуть.
Наташа pdf это разширение так же как и HTML и они совсем разные.верстать pdf это одно а верстать HTML совсем другое! тут нужно учить и я тебе лично советую начать с http://htmlbook.at.ua/ прейди поссылке и начни прямо сейчас. или скопируй и вставь . удачи.))
Кирилл, огромное спасибо за пост. А то я так и не поставил еще твой шаблон, который выиграл в конкурсе. Было бы классно, если бы ты еще расписал про верстку конкретно для WP. Хотя, думаю, что и с этим постом разберусь. Спасибо!
Отличный пост. Полезный и понятный. Спасибо
Давно хотел заняться этим. Никак не мог найти подходящего материала для изучения. Теперь нашел. Спасибо!
да все это супер и правильно! но только в професии HTML-вертальщик мало знать только HTML и css практически всегда применяеться еще и javscript и без него Господа в верстке никак! очень редко можно обойтись без него.так ,что было бы совсем круто если бы применили парочку скриптов ,так для разнообразия . всем удачи!)))
Только изучаю верстку. Было бы хорошо если бы вы выложили видео.