Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 1

0_HTML

В данной статье речь пойдёт о сайтах, которые разработчики создают вручную, т. е. верстают.

Статья предназначена для пользователей, знакомых с HTML и CSS. Также желательно знать хотя бы основы Adobe Photoshop

Одним из этапов создания реального сайта, является создание PSD шаблона. Можно ещё встретить такие названия как макет, дизайн или исходник.

Шаблон заказывается дизайнеру. Дизайнер рисует макет в программе Adobe Photoshop и сохраняет его в формате PSD.

Что такое PSD формат?

Для лучшего понимания можно привести простой жизненный пример. В детстве все клеили аппликации. Вырезали из бумаги домик – наклеили. Вырезали ёлочку – наклеили. И так до тех пор, пока работа не готова.

А теперь можно представить ситуацию, при которой фигурки вырезали, разложили на листе в нужных местах, но ещё не приклеили. Так вот PSD формат файлов, можно сравнить с аппликацией, на которую ещё не приклеили фигурки, но расположили их в нужном порядке.

Благодаря этому каждую такую «фигурку», а точнее каждый отдельный фрагмент шаблона можно сохранять как отдельную картинку, которую потом можно использовать на сайте.

Вот макет страницы, которая будет создана.

001

После того как у нас есть готовый шаблон в форматеPSD можно перейти непосредственно к вёрстке

  1. Создать папку, в которой будет храниться вёрстка, например «Сайт».
  2. В папке «Сайт» создать папку для изображений, например img.
  3. В папке «Сайт» создать папку для стилей, например css.
  4. Теперь необходимо запустить программу Adobe Photoshop и в ней открыть psd файл. Отсюда необходимо «вытащить» все изображения, которые будут использоваться на сайте.

Здесь необходимо обратить внимание на кнопку «Слои». На рисунке она выделена красным овалом.

002

Это кнопка включает и выключает окошко со слоями. Слои – это и есть те самые не склеенные детали аппликации. Слои для удобства распределены по папкам, которые можно сворачивать и разворачивать. Принцип работы почти тот же что и в проводнике Windows.

Первым делом все папки лучше свернуть. Разворачивать по мере необходимости.

003

Теперь можно начать «вытаскивать» картинки

Первым делом нужно выбрать инструмент рамка 004 . Затем выделить только ту часть, которая ограничивает логотип сайта

005

После этого нажать клавишу Enter. Всё кроме выделенной области будет отрезано.

006

Теперь можно убрать фон. Для этого нужно отключить слой с фоном.

С целью быстрого поиска нужных слоёв можно выполнить следующие действия:

  • выбрать инструмент «Перемещение» 007
  • Включить для выбранного инструмента настройки «Автовыбор» и «Группы слоёв» 008
  • Выполнить щелчок по любому объекту (в частности по белому фону). Слой с этим объектом станет активным

009

Здесь слой назван «Фигура 2». Щелчком по изображению глаза слой становится невидимым.

10

Однако остаётся ещё два слоя, которые также необходимо отключить. Действия аналогичные.

011

Теперь можно сохранять. Для этого необходимо выполнить следующие действия

ФайлСохранить для Web

012

Выбрать из 4 предложенных вариантов, а из предложенных второй. Расширение выбрать gif.

013

Нажать кнопку Сохранить.

Имя файла logo.gif. Файл сохранить в папку img. Туда следует сохранять и остальные изображения.

014

Если качество не устраивает, то можно сохранить в формате png-8 или png-24.

Можно следовать таким принципам:

  • фотографическое качество – jpg
  • фотографическое качество с прозрачным фоном– png-8, не устроило качество – png-24
  • мало цветов в изображении – gif

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

015

Выполнить щелчок по названию файла и установить подходящий масштаб.

Аналогичным образом сохраняются другие изображения.

Группу собак можно сохранить на прозрачном фоне. Так впоследствии будет проще поместить на страницу, например другую группу собак. Можно сохранить с фоном «шапки» сайта.

То же самое касается изображения лапы, которое появляется при наведении на пункт меню

Остальные изображения – по желанию. Можно на белом, можно на прозрачном.

Здесь следует выбирать вариант сохранения очень аккуратно, потому, сто в psd исходниках нередки изображения с плохо обработанными краями. Вот пример:

016

Изображение было сохранено на прозрачном фоне. Однако при просмотре его на чёрном – видны плохо обработанные края. Но при использовании светлого фона – этот дефект может быть незаметен.

Для фона нужно будет вырезать маленькую картинку, которая заполнит страницу как кафельная плитка. Однако в этом примере фон не является повторяющимся. Поэтому лучше найти похожую картинку. А можно попробовать подобрать, вырезая из фона различные фрагменты.

 

Начало вёрстки. Обёртка. Шапка сайта.

Вёрстка будет рассмотрена с использованием HTML5 и CSS3.

В папке своего сайта нужно создать HTML файл. Например index.html.

В папке css создать файл style.css.

Кроме этого, в папке css необходимо поместить файл reset.css со следующим кодом

[raw]


/*

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

 

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

[/raw]

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

Сначала в index.html следует написать основные теги.

[raw]


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>GUABI Natural</title>

<link href="css/reset.css" rel="stylesheet" type="text/css">

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>



</body>

</html>

[/raw]

Для тега в стилях <body> нужно установить фон.

Как уже говорилось, фон здесь не повторяющийся. Поэтому рациональнее будет подобрать любой похожий.

Стиль:

[raw]

body{

background-image: url(../img/bg.gif);

}

[/raw]

Теперь нужно создать обёртку сайта – блок в котором будет помещаться всё содержимое.

HTML:

[raw]

<body>

<div id="wrapper">

wrapper

</div> <!--wrapper-->

</body>

[/raw]

Рядом с закрывающим <div> в комментариях написан идентификатор блока. Со временем тегов <div> станет много, и может возникнуть путаница. Будет непонятно где какой div закрывается.

Также внутри блока находится слово wrapper. Оно там находится временно. Цель – во время вёрстки видеть блок и отличать его от остальных. По этой же причине в стилях блоку будет временно дан какой-нибудь светлый фон.

Для установки стилей необходимо знать его ширину и отступы сверху и снизу. Для измерения можно в Adobe Photoshop инструментом «Прямоугольная область» выделить изображение сайта от правого до левого края. Высота не важна.

017

Ширину можно увидеть в окне «Инфо»

018

Получилось 964px.

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

019

Получилось 100px сверху и 85px снизу.

Таким способом определяются любые расстояния в исходнике.

CSS:

[raw]

#wrapper {

width: 964px;

margin-top: 100px;

margin-right: auto;

margin-bottom: 85px;

margin-left: auto;

background-color: #FF9;

}

[/raw]

Справа и слева установлены отступы auto. Благодаря этому блок выравнивается по центру.

Страница:

020

Теперь создаётся «шапка» сайта. В Adobe Photoshop необходимо измерить её высоту.

HTML:

[raw]

<div id="wrapper">

<header>



</header>



wrapper



</div> <!--wrapper-->

[/raw]

CSS:

[raw]

header{

height: 400px;

}

[/raw]

Этот блок состоит из двух частей. В первой части логотип и ссылки, во второй собаки и слоган.

Для первой части создаётся ещё один блок.

[raw]

<header>

<div id="header1">

&nbsp;

</div> <!--header1-->

</header>

[/raw]

Высота этого блока 100px. Цвет фона – белый. И ещё объекты внутри этого блока будут двигаться позиционированием. Поэтому понадобится установка свойства position: relative.

[raw]

#header1 {

background-color: #FFF;

height: 100px;

position: relative;

}

[/raw]

Внутри этого блока следует поместить блок с изображением-логотипом. Это изображение можно сделать ссылкой на главную страницу.

[raw]

<div id="header1">

<div id="logo"><a href="index.html"><img src="img/logo.gif" width="265" height="95" /> </a></div>

</div> <!--header1-->

[/raw]

В стилях можно указать размеры этого блока. Можно не указывать, если для блока не планируется использовать фон отличный от белого.

[raw]

#logo {

height: 100px;

width: 282px;

}

[/raw]

Следующий компонент – это контакты и время работы.

HTML:

[raw]

<div id="header1">

<div id="logo"><a href="index.html"><img src="img/logo.gif" width="265" height="95" /> </a></div>

<div id="cont">

+7(987)555-44-33 (Skype) <br />

ежедневно с 9-00 до 22-00

</div> <!--cont-->

</div> <!--header1-->

[/raw]

В стилях нужно будет установить размер текста, цвет и шрифт.

[raw]

#cont {

font-size: 18px;

color: #40453f;

width: 250px;

}

[/raw]

Для определения размера текста, шрифта и цвета в Adobe Photoshopможно выбрать инструмент «Горизонтальный текст» и выполнить щелчок по нужному тексту. В панели свойств можно увидеть размер и шрифт. Цвет указывается в прямоугольнике. На рисунке, для наглядности, он отмечен красным овалом.

021

Щелчок по прямоугольнику вызовет палитру цветов.

022

Здесь можно скопировать шестнадцатеричный код цвета.

Кроме этого блок нужно будет передвинуть. Лучше всего делать это с помощью позиционирования. Для <div id=”cont”> родителем является <div id=”header1″>. Поэтому для <div id=”header1″> уже было установлено свойство position: relative.

Для <div id=”cont”> нужно установить position: absolute и указать каким образом происходит смещение

[raw]

#cont {

font-size: 18px;

color: #40453f;

width: 250px;

position: absolute;

top: 50px;

right: 40px;

}

[/raw]

Отступы можно измерить в Adobe Photoshop способом, рассмотренным ранее.

Вот результат в браузере

023

Остались в этой части ссылки на вход и регистрацию.

HTML:

[raw]

<div id="reg-vhod">

<a href="#" id="reg">Регистрация</a>

<a href="#" id="vhod">Вход</a>

</div> <!--reg-vhod-->

[/raw]

Сначала указываются стили для <div id=”reg-vhod”>. Здесь нужно установить ширину блока, высоту, фон, закруглённые углы и позиционирование.

[raw]

#reg-vhod {

background-color: #dde2e0;

height: 27px;

width: 683px;

border-radius: 0px 0px 30px 30px;

position: absolute;

top: 0px;

right: 0px;

}

[/raw]

Ссылки на регистрацию и вход целесообразно сделать блочными элементами, установив свойство display: block, и поместить в нужные места позиционированием.

[raw]

#reg,#vhod {

position: absolute;

top: 5px;

font-size: 14px;

color: #b1b8b5;

display: block;

}

#reg {

left: 20px;

}


#vhod {

right: 20px;

}

[/raw]

Можно для ссылки, на которую навели сделать особенный стиль, чтобы добавить динамики. Очень часто убирают подчёркивание. Или наоборот. Подчёркивания нет, а при наведении оно появляется.

[raw]

#reg:hover,#vhod:hover{

text-decoration: none;

}

[/raw]

Вот результат в браузере

024

Следующий компонент – это нижняя часть «шапки» сайта.

HTML:

[raw]

</div> <!--header1-->

<div id="header2">

<img id="dogs" src="img/dogs.png" width="488" height="260" >

<div id="slogan">

Здоровое питание <br />

для Ваших <br />

Лучших друзей!

</div> <!--slogan-->

</div> <!--header2-->

</header>

[/raw]

Оба блока (dogs и slogan) нужно подвигать позиционированием по аналогии с предыдущими блоками. Для слогана ещё устанавливается свойство line-height. Оно служит для увеличения межстрочного интервала

CSS:

[raw]

#dogs{

position: absolute;

left: 40px;

bottom: 0px;

}

#slogan{

font-family: "Times New Roman", Times, serif;

font-size: 36px;

color: #FFF;

text-align: center;

width: 350px;

position: absolute;

top: 80px;

right: 51px;

line-height: 55px;

}

[/raw]

На этом пока все. В следущей статье мы разберем создание навигации для нашего сайта. Часть 2>>

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *