пятница, 27 марта 2009 г.

Этапы выполнения верстки

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

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

Исходный макет

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

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

модульная сетка

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

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

нарезка графики

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

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

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

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

Html-верстка полезные советы.

суббота, 21 марта 2009 г.

Новый инструмент для проверки кроссбраузерности верстки

Для многих верстальщиков выбор удобного программного инструмента для работы является краеугольным камнем успешной работы. О моем списке программ для эффективной верстки можно прочитать в заметке (”Джентльменский набор верстальщика“). Думаю, что некоторые из верстальщиков знают, что в арсенале программ от Microsoft помимо FrontPage есть еще один инструмент для верстальщиков - Expression Web .

Не так давно стало известно что Microsoft готовит новый продукт в составе которого будет инструмент под названием Expression Web SuperPreview. Это программа для мультибраузерного просмотра верстки. Правда сейчас выпущена только бета версия, в которой можно просматривать верстку только в Internet Explorer 6 и 7 версии и которую уже можно скачать. В финальном релизе Expression Web 3, можно будет просматривать верстку во всех популярных браузерах.

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

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

Лично для меня программа показалась не более чем красивой игрушкой, которая не может заменить функционал IETester или Multiplie IE.

Html-верстка полезные советы.

пятница, 13 марта 2009 г.

Как сделать галерею товаров для интернет-магазина

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

Здесь можно оставить свои комментарии.