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

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

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

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

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

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

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

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

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

Комментарии

Pavel_html (Паша) 03 апреля 2008 года, 8:30 #

Привет! Хороший сайт. Статья хорошая. Сейчас я напишу тебе в htmlbook.ru про твой сайт.

webmolot 03 апреля 2008 года, 23:45 #

Спасибо!

WebProffy 11 августа 2008 года, 10:29 #

Статья, конечно, хорошо! Но вообще шикарно было бы видеолекцию или видеоурок по верстке организовать!

Успехом точно пользоваться будет ;-)

webmolot 11 августа 2008 года, 12:38 #

Да, идею хорошая. Думал над этим. Может соберусь с силами и что-то похожее сделаю.

Никита 16 сентября 2008 года, 3:48 #

Я уже неделю пытаюсь сверстать вот такую схему на дивах:

|——200px——|———-Резиновый блок———|——200px——|

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

webmolot 16 сентября 2008 года, 6:09 #

Пишу код здесь, т.к. может еще кому пригодится.

html код:

  1. <div class="sidebar_left">левая колонка</div>
  2. <div id="wrapper">
  3.    <div class="sidebar_right">правая колонка</div>
  4.    <div class="content">центральная колонка</div>
  5. <div>

css код:

  1. .sidebar_left { float:left; width: 200px;}
  2. .sidebar_right { float:right; width: 200px;}
  3. .content { margin-right:200px;}
  4. .wrapper { margin-left:200px }

И не забываем прописать минимальную ширину для страницы.

Никита 16 сентября 2008 года, 6:25 #

Все гениальное просто, спасибо веб-молот! Правда молоток! (:

Андрей 21 сентября 2008 года, 12:27 #

Спасибо, за надежду на обретение видеоурока по верстке. Сайт замечательный.

Евгений 02 октября 2008 года, 13:29 #

Прикольные закладочке сверху.

PandaKungFu 15 октября 2008 года, 8:33 #

Жалко что блог забросили…

webmolot 16 октября 2008 года, 0:14 #

нет, не забросил!
времени, как всегда, очень мало, но блог жил, жив, и будет жить :)

Xtrchk 25 ноября 2008 года, 12:40 #

Мне тоже сайт очень понравился. Статьи замечательные. Все очень логично изложено. Успехов :)

Wade 07 декабря 2008 года, 13:03 #

полностью поддерживаю, такие же мысли были.

october 02 февраля 2009 года, 5:29 #

Ну когда же будет видеоурок по верстке?

webmolot 02 февраля 2009 года, 5:44 #

До видео урока еще не добрался, но подробный урок по правильной блочной верстке уже написал

koka 13 августа 2009 года, 6:10 #

webmolot а видеоурок то будет ?

Juicy 22 сентября 2009 года, 14:00 #

(парсер лох)

<div id="sidebar-l">sidebar-l</div>
<div id="sidebar-r">sidebar-r</div>
<div id="content">content</div>

#sidebar-l { float: left; width: 200px; }
#sidebar-r { float: right; width: 200px; }
#content { margin-left:200px; margin-right: 200px; }

Но тут кому как нравится. Если я не прав, поправь.

(Какой синтаксис у тебя в комментариях для <code></code>?)

"редактор HTMLPad"

- Я бы посоветовал WeBuilder, очень удобно.

"монитор от 19′"

- 1440*900 — и в CS3 Photoshop мы видим дизайн шириной 1000пикс очень удобно.

golikov 28 декабря 2009 года, 19:49 #

Молодца, молот! Так держать! Даешь верстающе — думающий контингент!

byzone 05 января 2010 года, 12:20 #

Привет!
Мне статья понравилась :-)

P. S.
http://csstemplater.com/ — автоматический генератор HTML+CSS шаблонов. Очень ускоряет работу. Возможно, кому-то будет полезен.

Maramax 19 июля 2010 года, 15:39 #

Круто!!!)))
верстаю, верстаю а настроение… поднимается-)))))))))))))))

Mila 03 декабря 2010 года, 8:09 #

читаю Ваши статьи, очень полезные и нужные. Спасибо за статьи.
Не могли бы подсказать, как возможно динамически менять положение футера, если правая часть контена — может быть либо картинка либо таблица, значения которые берутся из базы.
Картинка на таблицу меняется по нажатию кнопки.

webmolot 03 декабря 2010 года, 15:55 #

Mila, не совсем понимаю Ваш вопрос. Опишите подробнее, пожалуйста, а лучше всего воспользуйтесь формой «Вопрос-ответ»

Игорь 14 февраля 2012 года, 12:21 #

Привет всем! Кто-нибудь может написать набор инструментов верстальщика, и полезные ссылки для тестирования кода и т.д,…
Новичку в помощь чтоли.

Олег 17 декабря 2013 года, 16:13 #

Здравствуйте, у Вас очень красивый и полезный сайт, а так же портфолио отличное. Спасибо.

Андрей 17 декабря 2013 года, 16:41 #

Время шло, а они все ждали видеоурока…

Владислав 27 апреля 2015 года, 15:35 #

Видно, что Вы фанат своего дела и прошли большой путь в своём становлении. Но хочу дополнить комментарии одной ремаркой. В одном из тем блога «как я верстаю», к сожалению, охватывается только пошаговость и атмосфера работы над проектом. На мой взгляд, на сайте (для начинающих), очень не хватает Ваших советов (а также проф. советов некоторых форумчан) о том, с чего именно Вы начали…Что взяли за основу из литературы, видео уроков, сайтов, какой Ваш любимый html редактор и т.д…. Думаю, что на сайте очень популярным разделом стали именно совет об используемых источниках, где оптимально можно получит базовые знания. Конечно, можно самому копаться в интернете и искать, но с другой стороны, дельный совет (в частности Ваш) будет весьма полезным.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

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

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