Как стать автором
Обновить

Верстальщики — фанатики.

Время на прочтение 2 мин
Количество просмотров 762
У Вас ведь все похоже происходит, так?

Для начала, подготовим рабочее место. Большой стол, на который можно положить руки, чтобы было удобно, монитор от 19' и выше, чтобы можно было тестировать страницы под разные разрешения. Мягкое кресло, чашка зеленого чая без сахара и вперед… Запускаем компьютер, на рабочем столе видим иконки наших любимых браузеров IE 6, IE 7, Opera и Mozilla Firefox. Они нам как дети родные, все разные, со своими капризами, но всеравно самые любимые и всегда рядом с нами. Под рукой так же должен быть верный друг и товарищ — Photoshop, редактор HomeSite и всякие мелочи, о которых я расскажу по ходу работы. Для полного счастья включаем любимую музыку.

Открываем psd макет в Photoshop, пока он грузиться, мы можем вспомнить как хорошо вчера сидели с друзьями в баре и пили пиво, обсуждали девченок и машины… Все, шаблон у нас перед глазами, сразу же мы забываем обо всем и погружаемся в него с головой. Наш мозг начинает мыслить совсем по другому, у нас в голове только блоки, рамки и отступы. Мы расчленяем мысленно творение дизайнера на части, и словно через рентген просматриваем его, замечая детали, скрытые от глаз обычного человека. Важно выделить основные блоки header content и footer, все остальное рассмотрим более внимательно по ходу…

Теперь мы можем загрузить наиболее подходящий framework в излюбленном HomeSite.
Я обычно начинаю верстать скелет, пропуская детали, т.к. глобальные проблемы (появление горизонтального скролла, неправильное размещение блоков и др.), которые потом могут возникнуть, чаще всего связаны с ним. Вот мы видим, что на экране вырисовывается что то похожее на наш макет — шапка, основной контент, футер. Сейчас начинаем «разукрашивать» его сверху вниз, ничего не пропуская, учитывая все мелкие детали. Не забываем после внесения небольших изменений в код просматривать его в браузере. Сперва я тестирую в IE 6, а затем, после того как блок сверстан, проверяю что бы он так же правильно смотрелся и в других браузерах. Иногда приходится применить хаки для различных версий барузеров. Но прежде, чем это сделать, нужно убедиться действительно ли они здесь нужны.

Вот так шаг за шагом, минута за минутой мы двигаемся к нашей цели — оживить задумку дизайнера. Иногда это занятие занимает довольно много времени, поэтому не забываем делать перерывы. Можно пробежаться в магазин за соком и фруктами, позвонить друзьям, главное не думать некоторое время о верстке. Особенно это помогает, когда вы на чем то застопорились и не можете найти правильное решение. На свежую голову думается куда лучше :)

В заключение хочу сказать, что верстать сайты — очень интересное занятие! Для меня каждый сайт, каждый макет — как новая страница в большой энциклопедии. Это как компьютерная игра, где нужно пройти много уровней. Десятки, сотни макетов за плечами — вот гарантия того, что следующий уровень ты пройдешь быстрее и с минимальными «потерями».
Теги:
Хабы:
+4
Комментарии 11
Комментарии Комментарии 11

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн