Верстка это своего рода искусство. Каждые верстальщики работают по своему, но цель у всех одна. Красивая и правильная верстка — вот желание каждого кодера. Со временем в процессе «PSD -> HTML» мы начинаем выделять определенные этапы. О них я и хотел бы рассказать.
Лично для меня, верстка делится на несколько этапов, которые я считаю есть и у всех верстальщиков в процессе верстки. Может не в той же последовательности, но все-же присутствуют. Я выделил следующие:
Разберем по пунктам:
Верстка не начинается с момента как только я получаю PSD ис4ходник. Первым этапом для меня есть оценка сайта. Я считаю этот этап очень важен, так как именно на нем мы просматриваем, анализируем и проектируем сайт.
Что это значит на практике? Очень просто! Когда мне в руки попадает макет я минимум 30 минут (а иногда и несколько часов) сижу и смотрю на него, планирую дальнейшую работу, планирую что мне прийдется сделать и как нарезать для этого сайт. Все повторяющиеся фоны, все глюки которые могут возникнуть в ИЕ — все планируется на этом этапе. Планируем возможные сss спрайты (о них кто не знает и кому интересно позже напишу).
Тут все просто. Беру PSD и нарезаю так как планировали в первом пункте. Соеденяю в спрайты если этого требует проект. Подбираю нужный тип картинок: gif, png, jpg. Порой формат подобрать трудно. Бывают разные визуальные картинки, которые могут занимать много места в png а в jpg быть не на столько качественными. Раньше я при сохранении игрался качеством и смотрел сколько будет весить картинка, но теперь нашел программку ImageOptim. Сейчас я сохраняю все спорные форматы, а потом оптимизирую эти имаги вышеупомянутой программой и уже смотрю результат. Ведь всегда важно как качество так и вес страницы.
На этом этапе уже начинается верстка. Может быть многие кодеры со мной не согласятся, но лично мне легче сначала сделать скелет сайта с блоков, а потом накодить детали в этих блоках. Таким образом на этом этапе я верстаю основные блоки, которые в дальнейшем будут содержать все элементы сайта. Такими блоками есть хэдер, контентная часть, навигационная часть, футер и возомжные прочие (зависит от дизайна).
Обязательно проверяю правильно ли это отображается в необходимых браузерах.
Когда у меня есть общий скелет который уже может напоминать внешний вид сайта (без мелких деталей и внутренностей) могу смело приступать к верстке блочного контента. На этом этапе все чего не хватает в верстке медленно но уверенно переползает туда с макета. Все это дело чередуется проверкой в браузере, все ли отображается на том месте где должно.
В разных браузерах многое визуально выглядит по разному: шрифты с их толщиной и размерами, бордеры и марджины (в старых ИЕ бывает), да и порой работа над 4-м пунктом бывает спешной. Тут мы уже смотрим на мекет и на верстку и играем в интересную игру «найти 10 отличий», но правда отличий может быть больше и их надо не только найти, но и исправить.
Когда приходит уверенность что все готово и все круто сделано пора ее развеять. В многих компаниях для этого существуют тестировщики, но я считаю что верстальщик должен быть уверен в своем труде сдавая его как законченный проект, а следовательно сам должен все тестить. Обычно верстка сразу-же проверяю в нескольких браузерах, которые мне более всего удобные. В ряды таковых входит Firefox (из-за того что там куча полезных аддонов) + возможно опера (старая привычка) или сафари (перешел на MacOS). Но так как качественный веб-проект должен быть качественным везде, не стоит забывать о существовании Internet Explorer 8, 7 и, да простит меня все общество верстальщиков за упоминание, Internet Explorer 6. Стандартный набор браузеров для проверки: Firefox, Safari, Chrome, Opera, Internet Explorer с их разными версиями. Несколько версий одного браузера зачастую не уживаются на одной машине. Чтоб с этим бороться ставим виртуальные оси, и туда загоняем недостающие. Для версий Internet Explorer есть полезная программа IECollection, которая содержит в себе все необходимые версии IE. К сожалению лично у меня она ставилась только на XP (на Windows7 не пошла, а Windows Vista при покупке ноута я сразу-же снес).
Все найденные ошибки я записываются на листике и после полного теста во всех браузерах (когда в каждм браузере перекликали все что кликается проскролили все что скролится и поресайзили сам браузер) приступаем к следующему пункту.
Начинается фикс с самых мелких ошибок. Так проще и в коде не мусорить и морально веселее: быстро убирающиеся баги всегда приятно исправлять и приятно смотреть как одна за одной вычеркиваются записи багов на листике. Когда исправляю ошибку обязательно проверяю в том браузере где она возникала. Когда ее успешно устранил для этого браузера проверяю как все это выглядит во всех остальных, ато можно так поправить что везде работать перестанет. Когда пофиксил все ошибки обязательно опять в каждом браузере все прокликиваю, чтоб быть уверенным что все сделано правильно.
На все это дело уходит в среднем 5-20 часов ± в зависимости от сложности, лености, атмосферного давления и других различных факторов влияющих на работоспособность.
Лично для меня, верстка делится на несколько этапов, которые я считаю есть и у всех верстальщиков в процессе верстки. Может не в той же последовательности, но все-же присутствуют. Я выделил следующие:
- Оценка сайта;
- Нарезка основных элементов;
- Разбиение на блоки (верстка скелета);
- Верстка блочного контента;
- Подгон пикселей;
- Тест в браузерах;
- Фикс ошибок и опять тест.
Разберем по пунктам:
1. Оценка сайта
Верстка не начинается с момента как только я получаю PSD ис4ходник. Первым этапом для меня есть оценка сайта. Я считаю этот этап очень важен, так как именно на нем мы просматриваем, анализируем и проектируем сайт.
Что это значит на практике? Очень просто! Когда мне в руки попадает макет я минимум 30 минут (а иногда и несколько часов) сижу и смотрю на него, планирую дальнейшую работу, планирую что мне прийдется сделать и как нарезать для этого сайт. Все повторяющиеся фоны, все глюки которые могут возникнуть в ИЕ — все планируется на этом этапе. Планируем возможные сss спрайты (о них кто не знает и кому интересно позже напишу).
2. Нарезка основных элементов
Тут все просто. Беру PSD и нарезаю так как планировали в первом пункте. Соеденяю в спрайты если этого требует проект. Подбираю нужный тип картинок: gif, png, jpg. Порой формат подобрать трудно. Бывают разные визуальные картинки, которые могут занимать много места в png а в jpg быть не на столько качественными. Раньше я при сохранении игрался качеством и смотрел сколько будет весить картинка, но теперь нашел программку ImageOptim. Сейчас я сохраняю все спорные форматы, а потом оптимизирую эти имаги вышеупомянутой программой и уже смотрю результат. Ведь всегда важно как качество так и вес страницы.
3. Разбиение на блоки (верстка скелета)
На этом этапе уже начинается верстка. Может быть многие кодеры со мной не согласятся, но лично мне легче сначала сделать скелет сайта с блоков, а потом накодить детали в этих блоках. Таким образом на этом этапе я верстаю основные блоки, которые в дальнейшем будут содержать все элементы сайта. Такими блоками есть хэдер, контентная часть, навигационная часть, футер и возомжные прочие (зависит от дизайна).
Обязательно проверяю правильно ли это отображается в необходимых браузерах.
4. Верстка блочного контента
Когда у меня есть общий скелет который уже может напоминать внешний вид сайта (без мелких деталей и внутренностей) могу смело приступать к верстке блочного контента. На этом этапе все чего не хватает в верстке медленно но уверенно переползает туда с макета. Все это дело чередуется проверкой в браузере, все ли отображается на том месте где должно.
5. Подгон пикселей
В разных браузерах многое визуально выглядит по разному: шрифты с их толщиной и размерами, бордеры и марджины (в старых ИЕ бывает), да и порой работа над 4-м пунктом бывает спешной. Тут мы уже смотрим на мекет и на верстку и играем в интересную игру «найти 10 отличий», но правда отличий может быть больше и их надо не только найти, но и исправить.
6. Тест в браузерах
Когда приходит уверенность что все готово и все круто сделано пора ее развеять. В многих компаниях для этого существуют тестировщики, но я считаю что верстальщик должен быть уверен в своем труде сдавая его как законченный проект, а следовательно сам должен все тестить. Обычно верстка сразу-же проверяю в нескольких браузерах, которые мне более всего удобные. В ряды таковых входит Firefox (из-за того что там куча полезных аддонов) + возможно опера (старая привычка) или сафари (перешел на MacOS). Но так как качественный веб-проект должен быть качественным везде, не стоит забывать о существовании Internet Explorer 8, 7 и, да простит меня все общество верстальщиков за упоминание, Internet Explorer 6. Стандартный набор браузеров для проверки: Firefox, Safari, Chrome, Opera, Internet Explorer с их разными версиями. Несколько версий одного браузера зачастую не уживаются на одной машине. Чтоб с этим бороться ставим виртуальные оси, и туда загоняем недостающие. Для версий Internet Explorer есть полезная программа IECollection, которая содержит в себе все необходимые версии IE. К сожалению лично у меня она ставилась только на XP (на Windows7 не пошла, а Windows Vista при покупке ноута я сразу-же снес).
Все найденные ошибки я записываются на листике и после полного теста во всех браузерах (когда в каждм браузере перекликали все что кликается проскролили все что скролится и поресайзили сам браузер) приступаем к следующему пункту.
7. Фикс ошибок и опять тест
Начинается фикс с самых мелких ошибок. Так проще и в коде не мусорить и морально веселее: быстро убирающиеся баги всегда приятно исправлять и приятно смотреть как одна за одной вычеркиваются записи багов на листике. Когда исправляю ошибку обязательно проверяю в том браузере где она возникала. Когда ее успешно устранил для этого браузера проверяю как все это выглядит во всех остальных, ато можно так поправить что везде работать перестанет. Когда пофиксил все ошибки обязательно опять в каждом браузере все прокликиваю, чтоб быть уверенным что все сделано правильно.
На все это дело уходит в среднем 5-20 часов ± в зависимости от сложности, лености, атмосферного давления и других различных факторов влияющих на работоспособность.