Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Из PSD в HTML — этапы верстки

0

Чтобы изготовить продукт, нужно выполнить несколько последовательных операций. И верстка не является исключением. Чтобы получить из PSD макета готовую html страницу, нужно пройти несколько этапов:

  1. Оценка макета.
  2. Нарезка всех элементов дизайна
  3. Верстка всех блоков.
  4. Корректировка относительно макета
  5. Тест на кросбраузерность
  6. Исправление ошибок и сдача проекта

И так давайте рассмотрим все пункты детальней на моем примере.

 

  1. Оценка сайта

1

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

Часто бывает, что начинающий веб-дизайнер мало знаком с версткой и веб строением и из-за этого сложно реализовать поставленные задачи.

Каждый по разному выделяет время на оценку макета, у меня это занимает около 15 минут. Когда все уточнил перехожу к следующему шагу.

 

  1. Нарезка всех элементов дизайна

2

Нарезка сайта ответственный момент, здесь тоже есть свои нюансы. Главное тут сделать все элементы качественно и с минимальным размером (байтов, килобайтов). И для этого у каждого верстальщика есть свои программы и методы, я пользуюсь ADOBE PHOTOSHOP CS5 и ADOBE FIREWORKS CS5.

11
Нужно учитывать, в каком формате лучше всего сохранять изображения: png, jpg или gif. Какие элементы лучше множить, а какие на оборот лучше оставить целыми. Все это приходит с практикой. Когда все элементы нарезаны приступаем к основной работе.

 

  1. Верстка всех блоков.

3

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

images – для изображений;

css – для таблиц стилей;

js – для подключения нужных скриптов;

Теперь нам понадобится файл стилей style.css который я не помещаю в папку css а оставляю в корневой папке, и reset.css который будет находиться в папке css. Ну и конечно нашу веб-страничку — index.html.

Дальнейшем действием будет открытие нашей html странички в веб-редакторе (это может быть как простой блокнот так и специальные программы, я использую ADOBE DREAMWEAVER CS5) и подключаю все css стили к нашей страничке. После чего начинается трудоемкий процесс, сначала создаем основной блок (стандартно у меня это wrapper) а внутри уже поочередно другие основные блоки сайта header, navigation, content, sidebar, footer.

По моему мнению, верстку лучше делать сразу семантичной и с комментариями к основным блокам (чем больше комментарием, тем лучше).

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

 

  1. Корректировка относительно макета

5

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

 

  1. Тест на кросбраузерность

8

Теперь делаем тест, как отображается сайта на всех популярных браузерах, в основному это Opera, Firefox, Chrome, Internet Explorer 7-10, Safari. Можно проверить через сервис http://browsershots.org/, но советую проверять уже в окончательном варианте, так как сделать это можно только один раз в день с одного ip.

 

  1. Исправление багов и сдача проекта

6

Теперь исправляем все ошибки. Часто они встречается в брузере Internet Explorer 6-8 версии. После исправления ошибок, показываем готовую верстку заказчику, если есть замечания, исправляем их и сдаем проект.

Конечно у всех свои привычки в верстке и свои секреты, но думаю, разница не значительна. Если у вас есть вопросы или советы, то пишите их в комментарии.