Данная статья написана в рамках конкурса, в качестве дополнения к основной статье



Введение

В этой статье я опишу весь процесс преобразования макете сайта в формате .PSD в пару index.html, style.css - саму страницу и файл стилей к ней. Опираясь на прошлый опыт написания статьи для форумчан попытаюсь сделать ее не такой утомительной и долгой, но в то же время не менее полезной.

Не уверен, что все будет безошибочно и идеально, т.к. еще не верстал в целях обучения - обычно даже в своих работах спустя несколько минут я нахожу недочеты, которые уже нет сил и желания исправлять.

При описании я не буду углубляться в детали, как и в прошлой статье вы сможете проследить за результатом каждого из шагов и оценить конечный результат, если не хотите проделывать все самостоятельно. Также я не буду проверять верстку на кроссбраузерность и валидность - для первого у меня дома на данный момент нет всех браузеров, включая самый важный IE6, а на второе мне принципиально плевать.

Инструменты

Для работы я использую следующий набор программ:
1) Adobe Photoshop (любой другой инструмент для чтения файлов PSD формата)
2) Notepad++ (любой другой текстовый редактор)
3) FireFox + плагин FireBug (любой другой браузер с аналогичным плагином для удобного анализа разметки страницы)

Макет я взял с сайта FreePSD.com. Скачать сам PSD файл можно по кнопке Download на этой странице.

Первые приготовления


У нас старые добрые шапка и подвал, а также два блока в зоне контента. Смотрим на шапку - по идее размер фиксирован, но при желании можно размножить фон и правильно все растянуть. Но фиксированный делать проще, да и времени до окончания конукурса - 2 часа 20 минут. В соответствии с выделенными блоками пишем первый код:



Верстка, как видите, не табличная, а блочная. Все четыре блока я выделил - header, contentLeft, contentRight, footer. Самый первый блок document будет использован для центрирования сайта на мониторах с бОльшим разрешением. Строчка кода в начале (которая DOCTYPE), определяет, как браузер должен обрабатывать тот или иной код (не весь), а также то, с каким пристрастием к коду должен относиться W3C Validator при проверке. В нашем случае - по полной строгости.

Теперь открываем сам макет в фотошопе. Видим, что размеры - 1024х800. Это плохо и неправильно. Если вы ориентируетесь на мониторы с таким разрешением экрана, то с учетом вертикального скролла ширина макета не должна превышать 990px (моя рекомендация, возможно допускается чуть больше). Исправляю это - подвигаю правое меню немного влево и меняю Canvas Size до 990px по ширине.

Теперь создаем файл style.css там же, где и index.html. Пишем первый отладочный код для размещения блоков. Сразу оговорюсь - так называемого css-reset'а я делать не буду, но вы на досуге почитайте что это. Сразу же задаем размеры - узнать их можно с помощью выделения или того же инструмента Crop.

В итоге получается следующий набросок:

http://comphost.info/vers1/

Комментирую пару моментов. С помощью margin: 0px auto; блок document центрируется на экране. Блоки контента с помощью свойства float прижимаются влево или вправо. У блока contentZone задана минимальная высота в 465px - в данном примере я не буду насильно прижимать футер к низу экрана.

Режем картинки
Теперь вместо цветных блоков сделаем блоки с картинками, чтобы разглядеть общую картину. С помощью инструмента Crop и скрытия слоев в фотошопе создаем набор нужных нам картинок. У нас их будет шесть:

• Логотип, мяч с названием макета: logo.jpg
• Фон в шапке: back.jpg
• Четыре картинки в контенте: img1.jpg ... img4.jpg

Пипеткой узнаем цвет подвала. В index.html в шапку добавляем еще один блок, а также вставляем код изображений в блоки контента

Все остальные изменения проводим в style.css. Получаем следующее:

http://comphost.info/vers2/

Комментарии. У блоков contentLeft и contentRight добавлен отступ padding: 5px; (со всех сторон), поэтому ширину и высоту каждого из них я уменьшил на 10px. Также вместо фона я сделал рамки, чтобы визуально их выделить. Позже уберу.

Чтобы логотип правильно размещался, я задал ему position: absolute; и соответствующие значения для left и top, а родительскому блоку header задал position: relative, для того, чтобы внутренние блоки (в т.ч. и лого) располагались относительно него, а не всего экрана.

Картинка фона в шапке меньше, чем сама шапка по размеру, поэтому я прижал его вниз background: url(back.jpg) center bottom no-repeat;

Меню

Смотрю вот сейчас и вижу, что забыл учесть меню в размере шапки. Если сейчас вписать блок menu следом за logo, то фон блока header опустится вниз. Поэтому, чтобы не заморачиваться, я лучше добавлю еще один блок между header и contentZone. Блок меню, который находится в верхней правой части шапки, будет создан по аналогии с логотипом - с помощью абсолютного позиционирования. Редактируем и получаем:

http://comphost.info/vers3/

Блок topMenu позиционирован с указанием свойств top и right - многие реально забывают что позиционировать можно не только указывая левую, но и правую координату. В блоке menu я сделал рамку снизу и сверху в соответствии с дизайном:


Стилизуем текст

В фотошопе выделяя текст, узнаем его цвет и размер. Для заголовков:

Основной текст оказывается таким же, только меньше, 12px, и прописываем эти свойства для body. Сохранив видим, что он отличается от макета, кажется тоньше - дело в том, что в макете текст имеет свойсвто Sharp. При желании можно сделать шрифт жирным и добиться почти такого же эффекта.

Теперь делаем пункты меню ссылками. Они получают стандартное оформление браузера, мы с этим легко боремся. Делаем их цветом текста и без подчеркивания:


А при наведении добавляем подчеркивание:


В блоке menu добавляем padding-top: 7px и уменьшаем его высоту на это же значение, выровняв таким образом меню по вертикали.

В блоке footer добавляем код копирайта (обратите внимание на код для самого знака копирайта):

стилизуем его:

и центрируем, добавляя в стиль блока footer отступ и выравнивание текста


Здесь я использовал класс (class) вместо идентификатора (id). Для разнообразия. Разница их в том, что id - точно идентифицирует элемент. Наличие на странице двух элементов с одинаковым id - ошибка. Класс же может быть присвоен множеству элементов. У элемента может быть как id (один), так и класс (один и более).
На финишной прямой мы имеем:

http://comphost.info/vers4/

Допиливаем

Что осталось сделать? Кликабельное лого, черт возьми! Также для разнообразия выровняем текст абзацев по ширине и сделаем картинки ссылками.

Чтобы логотип был кликабельным, разместим на том же месте, что и блок logo ссылку, позиционируя ее абсолютно и задав ей блочный стиль отображения. Стиль у ссылки будет точно такой же, только без фона.


Чтобы текст в абзацах был выровнен по ширине, добавим тегу p свойство text-align: justify; В зоне контента добавим пару неразрывных пробелов   после картинок, чтобы немного их визуально выровнять.

Сделав картинку ссылкой обнаружим вокруг нее зеленую рамку. Избавляемся от нее:

Здесь используется вложенность тегов. Таким образом, если задать рамку картинкам отдельно, то картинка-ссылка будет без рамки.

http://comphost.info/vers5/

Напоследок
Фуф, вроде справился, успел. Проверить на кроссбраузерность не могу - кто может, пишите как где выглядит, есть ли косяки или нет. Задавайте вопросы, попробую ответить И самое главное, помните:

Покупайте ссылки, а не арендуйте – мега-опция для естественного продвижения!
Почему много денег? Потому что Главмед! Лей трафик и живи без бед!

Сообщение отредактировал bitrixoid - 16.1.2010, 0:59