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



 

Здравствуйте, гость ( Вход | Регистрация )

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


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


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

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



Введение

В этой статье я опишу весь процесс преобразования макете сайта в формате .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


Дизайн
*****

Группа: Active User
Сообщений: 726
Регистрация: 23.1.2009
Поблагодарили: 195 раз
Репутация:   78  


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

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


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


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


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


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

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


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


Пишу тексты :)
*******

Группа: Active User
Сообщений: 3822
Регистрация: 4.12.2008
Из: Украина
Поблагодарили: 940 раз
Репутация:   160  


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

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


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


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


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


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

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


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


Завсегдатай
*****


Группа: User
Сообщений: 661
Регистрация: 23.1.2008
Поблагодарили: 5 раз
Репутация:   635  


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


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


клоновод
******

Группа: Banned
Сообщений: 1951
Регистрация: 27.4.2009
Поблагодарили: 1118 раз
Репутация:   166  


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

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


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


Топовый постер
*******


Группа: Active User
Сообщений: 5091
Регистрация: 20.9.2008
Из: опринозин
Поблагодарили: 1984 раза
Репутация:   479  


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


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


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


Бывалый
****

Группа: User
Сообщений: 395
Регистрация: 30.1.2009
Поблагодарили: 121 раз
Репутация:   17  


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


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


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


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2568
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3173 раза
Репутация:   292  


(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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСоздание сайтов любой сложности (фреймворки, CMS), Верстка (адаптивная, простая, лендинг), шаблоны, скрипты, любая задача
15 ZaDrotom 4070 11.1.2018, 18:42
автор: Mitrich
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПляшет верстка в браузерах
Хром и Мазила
0 dtools 411 10.1.2018, 12:46
автор: dtools
Открытая тема (нет новых ответов) Разработка сайтов под ключ - уникальный дизайн - адаптивная верстка
Вложу душу, время и креативность.
24 hugolarge 7166 10.1.2018, 12:03
автор: hugolarge
Открытая тема (нет новых ответов) PSD2HTML верстка и не только
Верстка макетов Photoshop / Avocode / с картинки
9 Smile3D 624 9.1.2018, 0:41
автор: Smile3D
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественная и валидная верстка
187 satherland 70233 6.1.2018, 0:42
автор: gretskov


 



RSS Текстовая версия Сейчас: 20.1.2018, 16:45
Дизайн