Этапы выполнения верстки
03.27.2009 – Рубрика: Мысли вслух
Одним из ключевых моментов качественного выполнения повседневных обязательств верстальщика является выработка определенной стратегии выполнения работы, с целью уменьшения временных затрат на работу и таким образом увеличить эффективность работы. По сути, работу которую выполняет верстальщик можно разделить на несколько этапов, и улучшение каждого этапа приведет к стремительному улучшению всей работы, но ошибки выполненные на начальных этапа выльются в значительные проблемы и временные затраты на последующих шагах.
В этой заметке я попытаюсь написать структуру выполнения все работы при верстке определенного макета, вся приведенная схема будет идеализирована и в ряде случаев, нужно будет отходить от нее, чтоб качественно выполнить нужную работу.
Анализ макета, разметка модульной сетки
Этап анализа макета, который нужно сверстать является ключевым этапом и ошибки, допущенные на этом этапе, могут привести к большому геморрою на последующих этапах. По этому, нужно тщательно выполнять этот этап. Суть этого этапа состоит в оценке имеющегося макета, определении типа макета резиновый\фиксированный\эластичный и построения модульной сетки, на основе которой будет верстаться макет. Под модульной сеткой макета подразумевается, определение структуры макета скажем, две колонки, шапка и футер, или три колонки и футер (примеры типовых модульных сеток можно увидеть в заметке «Основные примеры модульных сеток»).
Подготовка графики
На втором этапе выполняется разбивка макета на графические элементы. То есть, в графическом редакторе отключаются все ненужные слоя с текстовой рыбой и размечаются грани отдельных графических элементов, которые потом вырезаются. Стоит отметить, что после этого этапа не стоит удалять структурную разметку нарезки, так как с нее при верстке легче брать размерные величины такие как отступы, координаты для позиционирования, размеры. Этот этап может выполняться в несколько итераций, так как порой, нужно пересохранять вырезанные картинки с разными отключенными слоями.
Верстка основных модульных элементов.
На этом этапе выполняется верстка основной модульной структуры. То есть тот модульный тип, который был определен на первом этапе анализа, воплощается в жизнь. При наличии некоторого опыта работы этот этап может быть доведен до автоматизма путем создания готовых типовых шаблонов, в которых только меняются размерные величины основных структурных элементов.
Верстка всех внутренних элементов.
На финальном этапе выполняется верстка всех декоративных и внутренних элементов каждого структурного блока подгоняются все мелкие правки, чтоб довести верстку до полного соответствия макету.
Tags: Верстка
3 Отзывов to “Этапы выполнения верстки”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 5 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 21 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 5 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – нет отзывов)
Март 29, 2009 в 14:33
Важен не только порядок верстки. Так как редко бывает, что для сайта нужно сверстать всего одну страницу, нужно еще рассмотреть вопрос выделения общего для всех макетов css и html кода, в идеале оформить часто попадающиеся конструкции в html-framework (вообще для будущей верстки). Также неплохо было бы иметь систему сборки с возможностью включения определенных файлов внутрь. Тогда из модульных компонентов можно было бы собрать макет простым make.
Март 29, 2009 в 21:30
Согласен, это нужно для больших проектов которые нужно масштабировать. Для них нужна разрабатывать свой «фреймворк» и стайл-гайд который будет согласован с другими членами команды разработчиков.
Апрель 20, 2009 в 22:30
Да, свой фреймворк – хорошая вещь.