22 февраля 2008

Как я верстаю

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

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

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

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

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

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

  • 1 Star2 Stars3 Stars4 Stars5 Stars
  • ОднаКнопка

Комментарии

19
Pavel_html (Паша) 03 апреля | 8:30

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

webmolot 03 апреля | 23:45

Спасибо!

WebProffy 11 августа | 10:29

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

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

webmolot 11 августа | 12:38

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

Никита 16 сентября | 3:48

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

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

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

webmolot 16 сентября | 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 сентября | 6:25

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

Андрей 21 сентября | 12:27

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

Евгений 02 октября | 13:29

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

PandaKungFu 15 октября | 8:33

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

webmolot 16 октября | 0:14

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

Xtrchk 25 ноября | 12:40

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

Wade 07 декабря | 13:03

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

october 02 февраля | 5:29

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

webmolot 02 февраля | 5:44

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

koka 13 августа | 6:10

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

Juicy 22 сентября | 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 декабря | 19:49

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

byzone 05 января | 12:20

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

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

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



 * - поля, обязательные для заполнения