X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
> Верстка. Пример.
bitrixoid
bitrixoid
Topic Starter сообщение 16.1.2010, 0:51; Ответить: bitrixoid
Сообщение #1


Верстка. Пример.

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



Введение

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

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

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

Инструменты

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

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

Первые приготовления
Прикрепленный файл  preview.jpg ( 22,92 килобайт ) Кол-во скачиваний: 24
Прикрепленный файл  preview2.jpg ( 34,25 килобайт ) Кол-во скачиваний: 18


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TALK.MAULNET.RU</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="document">
    <div id="header"></div>
    <div id="contentZone">
        <div id="contentLeft"></div>
        <div id="contentRight"></div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>


Верстка, как видите, не табличная, а блочная. Все четыре блока я выделил - 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 в шапку добавляем еще один блок, а также вставляем код изображений в блоки контента
...
<div id="header">
    <div id="logo"></div>
</div>
...

Все остальные изменения проводим в 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 я сделал рамку снизу и сверху в соответствии с дизайном:
border-top: 1px solid #5b8617;
border-bottom: 1px solid #5b8617;


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

В фотошопе выделяя текст, узнаем его цвет и размер. Для заголовков:
h1 {
    font-family: Century Gothic, Arial;
    font-size: 18px;
    color: #3b5d05;
}

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

Теперь делаем пункты меню ссылками. Они получают стандартное оформление браузера, мы с этим легко боремся. Делаем их цветом текста и без подчеркивания:
a {
    text-decoration: none;
    color: #3b5d05;
}


А при наведении добавляем подчеркивание:
a:hover {
    text-decoration: underline;
}


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

В блоке footer добавляем код копирайта (обратите внимание на код для самого знака копирайта):
<span class="copy">© talk.maulnet.ru, 2010</span>

стилизуем его:
.copy {
    color: white;
}

и центрируем, добавляя в стиль блока footer отступ и выравнивание текста
#footer {
    width: 990px;
    height: 34px;
    background: #84b13c;
    padding-top: 25px;
    text-align: center;
}


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


Допиливаем

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

Чтобы логотип был кликабельным, разместим на том же месте, что и блок logo ссылку, позиционируя ее абсолютно и задав ей блочный стиль отображения. Стиль у ссылки будет точно такой же, только без фона.
....
    <div id="header">
        <div id="logo"></div><a id="logolink" href="#"></a>
....


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

Сделав картинку ссылкой обнаружим вокруг нее зеленую рамку. Избавляемся от нее:
a img {
    border: none;
}

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

Конечный результат:


http://comphost.info/vers5/


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

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

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


--------------------
клоновод
76
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Disturbed
Disturbed
сообщение 16.1.2010, 1:15; Ответить: Disturbed
Сообщение #2


Статья хороша, но не для новичков... Если я сейчас принялся бы повторять шаги, то запнулся бы на том месте где начался style.css
(bitrixoid @ 16.1.2010, 0:51) *
Пишем первый отладочный код для размещения блоков...

Вот с этого момента для меня началась неразбериха... Может из-за того что я ничего не соображаю в css? blush.gif
Статье + Послужит мне стимулом начать учить верстку)


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bitrixoid
bitrixoid
Topic Starter сообщение 16.1.2010, 12:32; Ответить: bitrixoid
Сообщение #3


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

Да, я и предполагал так, что не буду выкладывать код целиком, а те кто не знают - будут смотреть его в промежутках. Исходный код страницы и файл style.css можно посмотреть на каждом из шагов.


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
demon932008
demon932008
сообщение 16.1.2010, 12:36; Ответить: demon932008
Сообщение #4


Сейчас люди начнут предлагать услуги версткиsmile.gif Аналогично статья Паравоза, все пошли делать дорвеи.

Статья хорошая, примеры есть, всё расписано. Плюсика не жалкоsmile.gif


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bitrixoid
bitrixoid
Topic Starter сообщение 16.1.2010, 12:54; Ответить: bitrixoid
Сообщение #5


Не, тут все немного сложнее, нужно думать, анализировать и много знать. Качественного "версткогенератора" пока еще нет. Зато при наличии опыта этот заработок становится стабильнее, имхо. Хотя с дорами конечно не работал, не знаю.

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


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dev
Dev
сообщение 16.1.2010, 13:05; Ответить: Dev
Сообщение #6


Не стандартный вопрос, чем обусловлен выбор доктайпа XHTML 1.0 Strict? Просто для себя спрашиваю.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bitrixoid
bitrixoid
Topic Starter сообщение 16.1.2010, 13:16; Ответить: bitrixoid
Сообщение #7


Всегда его использую, еще когда учился верстать решил все делать "по уму". Скопировал с шаблона прошлой статьи. А сейчас я даже не могу ответить, является ли это бОльшим плюсом (дисциплинирование, строгость, валидность), нежели минусом (кроссбраузерности добиваться сложнее).

Надо как-нибудь взвесить все за и против.


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kesn
kesn
сообщение 16.1.2010, 23:43; Ответить: kesn
Сообщение #8


Отличная статья =) как раз появился повод изучать верстку


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
necrqlan
necrqlan
сообщение 17.1.2010, 1:09; Ответить: necrqlan
Сообщение #9


по своему опыту - пост не для новичков, скорее для тех, кто уже научился "крутить-вертеть" дефолтные шаблоны и тепеть хочет сделать что-то свое, родное)


--------------------
BullShit


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 18.1.2010, 3:15; Ответить: lostprophet
Сообщение #10


(bitrixoid @ 15.1.2010, 23:51) *
то с учетом вертикального скролла ширина макета не должна превышать 990px (моя рекомендация, возможно допускается чуть больше).

Вот с полосой прокрутки очень часто сталкивался. Одни говорят, что она фиксированая (в px), другие - что имеет % соотношение.
Хотелось бы услышать Ваше мнение по поводу этого.

По поводу доктайпа: иногда приходится жертвовать валидностью для кроссбраузерности, хотя тут тоже можно спорить до бесконечности. Одни считают валидность показателем, для других она ничего не значит.

Теме опять же +2, очень правильно.


(kesn @ 16.1.2010, 22:43) *
Отличная статья =) как раз появился повод изучать верстку

kesn, добро пожаловать в прекрасный мир слоёв и листов стилей biggrin.gif


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
5 страниц V   1 2 3 4 5 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91678 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17165 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) Верстка шаблона Битрикс
0 bat 1364 26.9.2023, 6:22
автор: bat
Открытая тема (нет новых ответов) Верстка электронных писем бесплатно
0 Gidemopassan 1499 23.6.2023, 10:12
автор: Gidemopassan
Горячая тема (нет новых ответов) Сайт "под ключ" (дизайн, верстка, CMS)
32 Brans 16446 19.5.2023, 22:01
автор: Brans


 



RSS Текстовая версия Сейчас: 29.3.2024, 10:15
Дизайн