Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Всплывающее окно jQuery || Технология AJAX, примеры скриптов >>>

Золотая техника: как сверстать сайт по макету

19.04.2012
Как сверстать сайт по макету

Здравствуй, уважаемый читатель блога LifeExample, в этой статье мы будем заниматься распространённым на сегодня занятием, версткой сайта по макету. Чтобы разобраться с вопросом "Как сверстать сайт по макету?" нам надо иметь установленный графический редактор Photoshop и непосредственно сам макет сайта. Если у вас на данный момент нет PSD макета сайта или же совсем нет макета, не переживайте, я расскажу о том как его получить.

Внимание! Данная статья заняла призовое место в конкурсе "Золотой пост".

Изложенная в этой публикации техника, является одним из примеров процесса верстания макета, но отнюдь не единственным. Я хочу поделиться именно этой техникой только потому, что сам пользуюсь именно ей. (А также и по тому что считаю ее золотой.) Кстати важно отметить, что идеально такой метод верстки подойдет для сайтов с фиксированными размерами элементов, но это не значит, что им нельзя пользоваться при верстке резинового шаблона.

Суть техники переноса макета на сайт

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

Чтобы разместить все необходимые элементы функционала сайта, ровно на свои места, мы будем использовать CSS параметр opacity: 0.5, отвечающий за прозрачность элементов.

Основное я упомянул, если чего забыл, далее по ходу работы опишу.

Что такое макет сайта?

Под макетом сайта давайте понимать внешний вид главной страницы ресурса, представленной в одном из графическом форматов (JPG, PNP, GIF, PSD, CDR). Как правило, дизайнеры предоставляют макеты в PSD или CDR форматах, но случается и так, что нужно сверстать сайт по макету из JPG файла.

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

Скачать тренировочный макет ( Скачали: 4052 чел. ) 

Как сверстать сайт (шаг 1)

Подходя к вопросу "Как сверстать сайт", мы уже имеем макет сайта (JPG, PNP, GIF, PSD, CDR), в нашем случае это JPG. Также мы имеем установленную программу Photoshop любой версии.

Наш тренировочный вариант выглядит таким образом:

Тренировочный макет сайта

На первый взгляд он очень прост, и не требует сложных изысков в действиях переноса картинки на HTML верстку, но тем не менее имеет весь спектр элементов присутствующих в любом сайте (header, menu, sidebar, content, footer).
Вот алгоритм наших первостепенных действий, необходимых для того, чтобы сверстать сайт по макету:

  1. Нужно четко разграничить картинку на следующие области: header, sidebar, content, footer.
  2. Разметка для нарезки макета
  3. Для этого нам понадобится инструмент Slice Tool
  4. Slice Tool
  5. После выделения областей с помощью Photoshop мы можем сохранить каждую выделенную часть как отдельную картинку. Выберите в меню пункт Flie -> Save for Web & Devices, или нажмите сочетание клавиш ALT+SHIFT+CTRL+S. Перед вами появится окно:
  6. Окно для выбора параметров сохранения
  7. Жмите "Save", указывайте папку, и подтверждайте выбор.

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

Основные составляющие в верстке сайта по макету
  • index_01.jpg960×100
  • index_02.jpg240×1091
  • index_03.jpg720×1091
  • index_04.jpg960×130

Если у вас получились картинки с другими названиями — не беда, мы все равно переименуем их. Главное чтобы они получились таких же размеров.

Первый этап закончен, и можно наконец-то начать верстать макет сайта.

Html Верстка макета сайта (шаг 2)

В коде странице прописываем:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Верстка сайта</title>
    <link rel="stylesheet" href="style.css" type="text/css"  />
</head>
<body>
<div id="wraper">
    <div id="header">
       
    </div>
    <div id="content">
       
    </div>
    <div id="sidebar">
       
    </div>
</div>
</body>
</html>

При этом нужно также поместить в папку файл стилей и папку с картинками. Скачать набор готовых картинок можно по ссылке:

Скачать набор картинок ( Скачали: 2964 чел. ) 

Откройте страницу, посмотрите, что макет перенесся на html, но это только начало, т.к. все, что мы видим лишь картинки, а нам предстоит сделать отдельные html элементы.

Приступим к созданию шапки

С помощью PhotoShopa, нарежем рисунок шапки на три части:

Нарезка шапки шаблона

Переименуем файлы в logo.jpg, search.jpg, phone.jpg

Cоздадим в блоке header три вложеных блока (logo, search, phone ), как вы поняли они предназначаются соответственно для логотипа, поиска и контактных телефонов:

1
2
3
4
5
6
7
8
9
10
11
<div id="header">
    <div id="logo">

    </div>
    <div id="search">
   
    </div>
    <div id="phone">
       
    </div>
</div>

Пропишем в style.css правила:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#logo{
float:left;
background: url('images/logo.jpg');
width: 230px;
height: 100px;
}
#search{
float:left;
background: url('images/search.jpg');
width: 540px;
height: 100px;
}
#phone{
float:left;
background: url('images/phone.jpg');
width: 190px;
height: 100px;
}

Не забудьте убрать из header временный параметр определения фона — background: url(‘images/ header.jpg’);.

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

Займемся сайдбаром

Аналогично действиям с шапкой, нарежем картинку на части:

Элементы сайдбара

В шаблон HTML вставим нужные нам блоки.

1
2
3
4
5
6
7
8
9
10
11
12
<div id="sidebar">
    <ul id="menu">     
       
    </ul>
    <div id="order">

    </div>
       
    <div id="contacts">
       
    </div>
</div>

Обратите внимание меню размечено тегом UL . Я предлагаю сделать его сразу кликабельным, т.к. оно полностью текстовое, и нет необходимости вставлять картинку.

В файл стилей добавим правила:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#menu{
background: green;
margin-top: 0px;
float:right;
text-align: right;
list-style: none;
}
#menu li{
margin-top: 7px;

}
#menu a{
color: black;
font-family: Arial;
font-size: 17px;
font-weight: 100;
text-decoration: underline;
}

#menu a:hover{
color: red;
font-family: Arial;
font-weight: 200;
}

При наличии вышеприведенных правил, можно смело заполнять маркированный список , разделами меню:

1
<li><a href="">Раздел 1</a></li>

Следом за меню, идет элемент для отправки заявки, вот тут нам и пригодится использование параметра opacity для выравнивания элементов, о котором я упоминал в начале статьи, когда описывал технику верстки сайта по макету. Итак, уважаемые читатели, нам нужно установить все элементы на свои места, ровно так как, они расположены в макете. Для этого мы делаем верхний слой полупрозрачным, и далее начинается кропотливый процесс выравнивания.

opacity-техника верстки сайта по макету

По завершению работы над этим элементом наш CSS файл пополнится значительным количеством правил:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#b_order{
float:left;
 /*background: url('images/order.jpg');*/
 margin-top: 30px;
width: 240px;
height: 280px;
}

#order{
color:black;
margin-top: 10px;
margin-left: 6px;
_margin-left: 0px;
float:left;
background: url('images/back_order.png') no-repeat;
 /*opacity: 0.7;*/
width: 230px;
height: 280px;
}

#order h3{
margin:12px 30px 0px 5px;
_margin-right:10px;
_margin-top:12px;
text-align: right;
float:right;
width: 150px;
font-family: Arial;
font-size: 14px;
}

#order_text{
margin:7px 30px 1px 5px;
_margin-top:7px;
_margin-right:10px;
float:right;
width: 190px;
text-align: right;
font-family: Calibri;
font-size: 11px;
}

#order table{
margin:0px 0px 11px 12px;
width: 190px;
font-family: Calibri;
font-size: 14px;
}
#order td{
padding-top: 10px;
}

#order a{
margin: 0px 0px 0px 13px;
font-family: Calibri;
font-weight: 600;
font-size: 14px;
}

#back_yellow{
float:left;
padding-top: 5px;
margin: 0px 2px 0px 3px;
background: url('images/yellow_button.png') no-repeat;
width: 91px;
height: 30px;
}

#order input{
height: 17px;
width: 130px;
font-family: Calibri;
font-size: 14px;
}

Не думаю, что вам стоит разбираться с этими правилами и вникать в них, поскольку это не сама цель статьи. Привел я их только для наглядности и оценки объема процесса верстки сайта.

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

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

Как продолжить верстку

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

Скачать полный исходный код примера ( Скачали: 3045 чел. ) 

Я надеюсь на то, что данный материал ответит начинающим верстальщикам на вопрос "Как сверстать сайт по макету?" и поможет вам уважаемые читатели разобраться с принципами верстки макетов для сайтов.

Буду ждать ваших вопросов в комментариях.

Спонсор постасервис SeoPult для полной автоматизации продвижения и рекламы сайтов.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • rosomaha256

    В данном примере вы допустили ошибку в классе ксс mobile_office надо расширить ширину до 221px так как картинка не вся отобразилась, её перекрыла картинка контента при дальнейшем использовании данного макета эта ошибка выплывет. А вообще статейка неплохая. Что-то новое для себя почерпнул. Было б неплохо сюда добавить описание дополнений браузеров для анализа контента сайта типа фаербага, с помощью которого можно анализировать шаблоны кмс и на основе полученных данных делать свои.

  • Mark

    rosomaha256, я думаю описание дополнений, это отдельная история, но несомненно интересная, быть может когда-нибудь и напишу об этом. При верстке сайтов использую браузер Google Chrome, там есть встроенная функция просмотра кода элемента, на мой взгляд очень полезная. Так же при версте незаменимой оказывается программка IETester, в которой можно проверить верстку сразу во всех версиях Interner Explorer’a

  • rosomaha256

    Ещё один скромный вопросик, думаю вы уже давно программируете под веб, а какой IDE используете? Я начал с PHP Expert Editor 4.3. Но мне немного неудобно так как тестировать приходится на серваку + не всегда сохраняется файл.

  • Mark

    IDE — не использую. Пользуюсь только NotePad++ , мне вполне хватает. Так мозги лучше работают.

    • Samigo

      Это Вы серьезно? 8-()
      Наверно, у Вас времени много! 😉
      Я всем советую «Dreamweaver».
      Очень мощная среда. Я тоже только начал пользоваться, но уже нравиться. 🙂

    • Dreamweaver — для новичков, без спорно удобнее.
      Но серьезный проект на нем не сделаешь, поэтому стоит уделять время верстке вручную.

    • Samigo

      > «Dreamweaver – для новичков, без спорно удобнее.»
      Для новичков лучше начинать на блокноте. Для подробного изучения кодировки. А IDE делает рутинные работы сам и освобождает время и мозги для других дел. 🙂

      > «Но серьезный проект на нем не сделаешь,»
      Именно серьезные проекты делается в IDE.
      Я еще не все его возможности использую, но там очень многого можно делать быстрее. И все визуально. И если что, и там ручную кодировать никто не запрещает.

      > «поэтому стоит уделять время верстке» в IDE 🙂
      Я например, за 3 месяца научился сайты делать на Dreamweaver-е без чей либо помощи. В ручную столько не смог бы. Скоро я дам вам возможность что я делаю. Пока мой сайт в сеть не разместил. И главное все делаю сам ручную, но с помощи Dreamweaver-а.
      Все что добавляет DW я изучаю от и до перед тем его использовать в проекте.

    • Ну что же, каждому свое)

      Я не сторонник IDE. Мне нравится свои велосипеды изобретать.

  • Samigo

    А про статью ничего хорошего сказать не могу. Потому что, без этого легче.

  • bykoff

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

    • Вам спасибо за отзыв, надеюсь Вы найдете для себя много полезного и в других статьях блога.

    • Евгения

      Абсолютно с вами согласна!!!Великолепная статья-очень помогла!Спасибо огромное!

  • Aleksey-seo

    Спасибо, действительно хороший живой настоящий пример!!!

  • kelevra

    Не получилось, начиная с этого момента «Следом за меню, идет элемент для отправки заявки, вот тут нам и при», что то не понятно вы рассписали, чтоли.

  • Юрий

    Здравствуйте! Очень понравилась статья! Классно!

  • jammel

    спасибо за инфо. очень помогло

  • Александр

    Доброго времени суток. Мне, как новичку в плане верстки идея очень даже понравилась. Вчера даже попробовал. Только не резал jpg макет на кусочки. Вставил значит в страницу тегом img src весь макет картинкой и задал ей через CSS три свойста position:absolute, opacity:0.5 и свойством z-index подложил как фон. Этого было достаточно для того, чтобы сверстать макет как говориться «пиксель-в-пиксель». Способ действительно интересный и более чем эффективный. Всем рекомендую взять этот способ на заметку. Автору огромное спасибо!

  • Елена

    Спасибо, Mark!Статья подробная, помогла мне при разработке моего первого сайта. Буду ждать новинок в вашем блоге.

    • Елена, пожалуйста. Помимо данной статьи «как сверстать сайт по макету», Возможно в скором времени я организую вебинар или возможно какой-то интенсив в офлайне. Какие у вас еще есть вопросы, необходимые для развития базовых навыков сайтостроения? Пишите на mark-avdev@mail.ru. Спасибо.

  • Sander

    все таки верстка дивами лучше чем табличная?

    • Табличная верстка — это

      • Неактуально
      • Непрактично
      • Неудобно

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

  • А на чем щас делают каркасы?

  • Алексей

    В Фотошопе версии 13.1 появилась фишка «Копировать CSS». Выдаёт абсолютные координаты отдельного слоя в PSD-макете от верхнего левого угла. Я считаю полезным написание экшена для Фотошопа для получения абсолютных координат мелких изображений или текстовых ссылок после проведения прямоугольного выделения родительского блока, его обрезки запущенным экшеном, ручном выделении мелкого рисунка на точке останова. Из буфера обмена координаты можно будет поместить потом в Дремвьювер в файл CSS после запуска экшена на продолжение, дополнительно идёт запись кусочка изображения в нужном формате файла, далее происходит восстановление прежнего непокоцанного вида файла через заранее созданный экшеном снимок. Хотелось бы узнать мнение опытного кодера про практическую пользу всего этого.

  • Андрей

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

    Благодарю вас за этот пост!

  • Максим

    Щас будем пробовать… но вот если бы кто-то написал хорошую статью о том, как можно выровнять по высоте 2 div-а не зависимо от их наполнения, не прибегая к скриптам; margin-bottom:-1000px и прочей такой вот несуразице — было бы здорово! :))

  • Анна

    Я прочитала 2 ваши статьи «как сделать шаблон» и эту, пытаюсь сделать, но не выходит! Вместо этого при открытии сайта выскакивает надпись «хакер что ли?» Даже смешно стало:)
    Может я что то упустила? Сейчас у меня создана папка в темах под названием legionspans и в ней папка с картинками, скриншот макета, файл css index.html и index.php

    У меня вопрос, «в коде страницы…» это где? В каком файле все прописывать? Я в первые взялась, не чего пока не пойму 🙂

  • Артём

    Для начинающего веб-программиста(уровень Junior), сколько времени дают на выполнение данной задачи? (сверстать pds-макет)

  • Ринат

    Сколько времени должно уходить на верстку такого макета у junior?

  • Дмитрий

    Хорошая статья, мне помогла. Спасибо.

  • Боря

    А если не секрет, закончите статью как все таки сделали?

  • Мария

    мне как человеку далекому ко всему этому эта статья не помогла ничем. не понятно чё куда вставлять в какие файлы.. чего золотого в статье?

  • Александр

    в корень неправильно так начинать учить, я так считаю… для общего понимания блочной верстки незачем верстать макет с jpeg файла, а для понимания позиционирования достаточно поиграться с дивами, задав им размер и бэкграунд. Будь я новичком, подумал бы, что в этом и есть суть всей верстки.
    Самое важное, что нужно знать — это формы, таблицы(хоть и редко используются), позиционирование блочных и линейных елементов, сразу разбирать атрибуты елементов. По этой теме ищите теги(начинал с того, что гуглил что это), вбивайте ее на htmlbook и практикуйтесь. Для ускорения работы учим bootstrap, less, и только тогда вы сожете реально что то сверстать. И это еще без оброботчиков на js(если в добавок и его выучить, только тогда можно идти на офиц. работу front—end junior).
    Сколько времени надо, что бы выучить? У меня ушло пол года, но мне реально было нечего делать и был помошник.
    Удачи в познании нового, быть айтишником реально круто;)

  • Yana

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

    1
    2
    3
    4
    5
    #wraper{
    background: gray;
    margin: 0 auto;
    width: 960px;
    height: 768px;

    перекрывает всё. В чем ошибка?

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика