Как я верстаю
Для начала, подготовим рабочее место. Большой стол, на который можно положить руки, чтобы было удобно, монитор от 19′ и выше, чтобы можно было тестировать страницы под разные разрешения. Мягкое кресло, чашка зеленого чая без сахара и вперед…
Запускаем компьютер, на рабочем столе видим иконки наших любимых браузеров Firefox, Safari, Opera, IE. Они нам как дети родные, все разные, со своими капризами, но всеравно самые любимые и всегда рядом с нами. Под рукой так же должен быть верный друг и товарищ — Photoshop, редактор HTMLPad и всякие мелочи, о которых я расскажу по ходу работы. Для полного счастья включаем любимую музыку.
Открываем psd макет в Photoshop, пока он грузиться, мы можем вспомнить как хорошо вчера сидели с друзьями в баре и пили пиво, обсуждали девченок и машины… Все, шаблон у нас перед глазами, сразу же мы забываем обо всем и погружаемся в него с головой. Наш мозг начинает мыслить совсем по другому, у нас в голове только блоки, рамки и отступы. Мы расчленяем мысленно творение дизайнера на части, и словно через рентген просматриваем его, замечая детали, скрытые от глаз обычного человека. Важно выделить основные блоки header, content и footer, все остальное рассмотрим более внимательно по ходу…
Теперь мы можем загрузить наиболее подходящий framework в редактор.
В 90% случаев необходимо прижимать footer к низу страницы. Как это сделать, читайте в ближайшей статье. На этой стадии нужно учесть верстка будет резиновой или фиксированной. В любом случае, создаем главный блок с id=’content’, и прописываем нужные параметры ширины. Если резиновая — не забываем указать минимальную ширину, чтобы блоки не «съезжали». Как это сделать кроссбраузерно я тоже расскажу подробно в одной из своих статей.
Я обычно начинаю верстать скелет, пропуская детали, т.к. глобальные проблемы (появление горизонтального скролла, неправильное размещение блоков и др.), которые потом могут возникнуть, чаще всего связаны с ним. Вот мы видим, что на экране вырисовывается что то похожее на наш макет — шапка, основной контент, футер. Сейчас начинаем «разукрашивать» его сверху вниз, ничего не пропуская, учитывая все мелкие детали. Не забываем после внесения небольших изменений в код просматривать его в браузере. Сперва я тестирую в “правильных браузерах”, а затем, после того как блок сверстан, проверяю, что бы он так же правильно смотрелся и в IE. Иногда приходится применить хаки для него. Но прежде, чем это сделать, нужно убедиться действительно ли они здесь нужны.
Вот так шаг за шагом, минута за минутой мы двигаемся к нашей цели — оживить задумку дизайнера. Иногда это занятие занимает довольно много времени, поэтому не забываем делать перерывы. Можно пробежаться в магазин за соком и фруктами, позвонить друзьям, главное не думать некоторое время о верстке. Особенно это помогает, когда вы на чем то застопорились и не можете найти правильное решение. На свежую голову думается куда лучше :)
Ну вот и все, о чем я хотел сегодня поделиться с Вами. В заключение хочу сказать, что верстать сайты — очень интересное занятие! Для меня каждый сайт, каждый макет — как новая страница в большой энциклопедии. Это как компьютерная игра, где нужно пройти много уровней. Десятки, сотни макетов за плечами — вот гарантия того, что следующий уровень ты пройдешь быстрее и с минимальными «потерями».
Комментарии
Привет! Хороший сайт. Статья хорошая. Сейчас я напишу тебе в htmlbook.ru про твой сайт.
Спасибо!
Статья, конечно, хорошо! Но вообще шикарно было бы видеолекцию или видеоурок по верстке организовать!
Успехом точно пользоваться будет ;-)
Да, идею хорошая. Думал над этим. Может соберусь с силами и что-то похожее сделаю.
Я уже неделю пытаюсь сверстать вот такую схему на дивах:
|—–200px—–|———-Резиновый блок———|—–200px—–|
У меня то правый блок вываливается, то вобще ступеньки получаются.
Если вам не трудно, не могли бы вы выслать на e-mail простой рабочий пример, а дальше я уже сам буду разбираться. В интернете так и не нашел как верстать такую схемку.
Пишу код здесь, т.к. может еще кому пригодится.
html код:
<div class="sidebar_left">левая колонка</div><div id="wrapper"><div class="sidebar_right">правая колонка</div><div class="content">центральная колонка</div><div>css код:
.sidebar_left { float:left; width: 200px;}.sidebar_right { float:right; width: 200px;}.content { margin-right:200px;}.wrapper { margin-left:200px }И не забываем прописать минимальную ширину для страницы.
Все гениальное просто, спасибо веб-молот! Правда молоток! (:
Спасибо, за надежду на обретение видеоурока по верстке. Сайт замечательный.
Прикольные закладочке сверху.
Жалко что блог забросили…
нет, не забросил!
времени, как всегда, очень мало, но блог жил, жив, и будет жить :)
Мне тоже сайт очень понравился. Статьи замечательные. Все очень логично изложено. Успехов :)
полностью поддерживаю, такие же мысли были.
Ну когда же будет видеоурок по верстке?
До видео урока еще не добрался, но подробный урок по правильной блочной верстке уже написал
webmolot а видеоурок то будет ?
(парсер лох)
<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пикс очень удобно.
Молодца, молот! Так держать! Даешь верстающе - думающий контингент!
Привет!
Мне статья понравилась :-)
P. S.
http://csstemplater.com/ - автоматический генератор HTML+CSS шаблонов. Очень ускоряет работу. Возможно, кому-то будет полезен.