Блог Как я верстаю

Для начала, подготовим рабочее место. Большой стол, на который можно положить руки, чтобы было удобно, монитор от 19′ и выше, чтобы можно было тестировать страницы под разные разрешения. Мягкое кресло, чашка зеленого чая без сахара и вперед…

Запускаем компьютер, на рабочем столе видим иконки наших любимых браузеров Firefox, Safari, Opera, IE. Они нам как дети родные, все разные, со своими капризами, но все равно самые любимые и всегда рядом с нами. Под рукой так же должен быть верный друг и товарищ — Photoshop, редактор HTMLPad и всякие мелочи, о которых я расскажу по ходу работы. Для полного счастья включаем любимую музыку.

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

Теперь мы можем загрузить наиболее подходящий framework в редактор.
В 90% случаев необходимо прижимать footer к низу страницы. Как это сделать, читайте в ближайшей статье. На этой стадии нужно учесть верстка будет резиновой или фиксированной. В любом случае, создаем главный блок с id=’content’, и прописываем нужные параметры ширины. Если резиновая — не забываем указать минимальную ширину, чтобы блоки не «съезжали». Как это сделать кроссбраузерно я тоже расскажу подробно в одной из своих статей.
Я обычно начинаю верстать скелет, пропуская детали, т.к. глобальные проблемы (появление горизонтального скролла, неправильное размещение блоков и др.), которые потом могут возникнуть, чаще всего связаны с ним. Вот мы видим, что на экране вырисовывается что то похожее на наш макет — шапка, основной контент, футер. Сейчас начинаем «разукрашивать» его сверху вниз, ничего не пропуская, учитывая все мелкие детали. Не забываем после внесения небольших изменений в код просматривать его в браузере. Сперва я тестирую в «правильных браузерах», а затем, после того как блок сверстан, проверяю, что бы он так же правильно смотрелся и в IE. Иногда приходится применить хаки для него. Но прежде, чем это сделать, нужно убедиться действительно ли они здесь нужны.

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

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

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья
-->

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com