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

Анализ макета, разметка модульной сетки

Этап анализа макета, который нужно сверстать является ключевым этапом и ошибки, допущенные на этом этапе, могут привести к большому геморрою на последующих этапах. По этому, нужно тщательно выполнять этот этап. Суть этого этапа состоит в оценке имеющегося макета, определении типа макета резиновый\фиксированный\эластичный и построения модульной сетки, на основе которой будет верстаться макет. Под модульной сеткой макета подразумевается, определение структуры макета скажем, две колонки, шапка и футер, или три колонки и футер (примеры типовых модульных сеток можно увидеть в заметке «Основные примеры модульных сеток»).

Подготовка графики

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

Верстка основных модульных элементов.

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

Верстка всех внутренних элементов.

На финальном этапе выполняется верстка всех декоративных и внутренних элементов каждого структурного блока подгоняются все мелкие правки, чтоб довести верстку до полного соответствия макету.