Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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 версии. После исправления ошибок, показываем готовую верстку заказчику, если есть замечания, исправляем их и сдаем проект.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X