Золотая техника: как сверстать сайт по макету
Изложенная в этой публикации техника, является одним из примеров процесса верстания макета, но отнюдь не единственным. Я хочу поделиться именно этой техникой только потому, что сам пользуюсь именно ей. (А также и по тому что считаю ее золотой.) Кстати важно отметить, что идеально такой метод верстки подойдет для сайтов с фиксированными размерами элементов, но это не значит, что им нельзя пользоваться при верстке резинового шаблона.
В ходе верстки имеющийся макет будет разрезан на мелкие, и не очень, составляющие картинки, причем разрезание будет проходить в несколько этапов. Такой подход поможет нам четко разграничить размер DIV блоков. После того как все составляющие будут находиться на своих местах, мы сможем лицезреть на странице наш макет, но он еще не будет функционален, т.е. не будут работать поля ввода, ссылки, выделение текста и так далее.
Чтобы разместить все необходимые элементы функционала сайта, ровно на свои места, мы будем использовать CSS параметр opacity: 0.5, отвечающий за прозрачность элементов.
Основное я упомянул, если чего забыл, далее по ходу работы опишу.
Что такое макет сайта?
Под макетом сайта давайте понимать внешний вид главной страницы ресурса, представленной в одном из графическом форматов (JPG, PNP, GIF, PSD, CDR). Как правило, дизайнеры предоставляют макеты в PSD или CDR форматах, но случается и так, что нужно сверстать сайт по макету из JPG файла.
Для дальнейшего усвоения материала я рекомендую вам скачать пример макета в JPG формате. Да-да именно в JPG, а не в PSD, поскольку над PSD можно сделать тот же, и значительно больший, набор операций для переноса макета на сайт. Поэтому мы будем работать с менее функциональным JPG файлом без свойственных макетам слоёв.
Как сверстать сайт (шаг 1)
Подходя к вопросу "Как сверстать сайт", мы уже имеем макет сайта (JPG, PNP, GIF, PSD, CDR), в нашем случае это JPG. Также мы имеем установленную программу Photoshop любой версии.
Наш тренировочный вариант выглядит таким образом:
На первый взгляд он очень прост, и не требует сложных изысков в действиях переноса картинки на HTML верстку, но тем не менее имеет весь спектр элементов присутствующих в любом сайте (header, menu, sidebar, content, footer).
Вот алгоритм наших первостепенных действий, необходимых для того, чтобы сверстать сайт по макету:
Нужно четко разграничить картинку на следующие области: header, sidebar, content, footer.
Для этого нам понадобится инструмент Slice Tool
После выделения областей с помощью Photoshop мы можем сохранить каждую выделенную часть как отдельную картинку. Выберите в меню пункт Flie -> Save for Web & Devices, или нажмите сочетание клавиш ALT+SHIFT+CTRL+S. Перед вами появится окно:
Жмите "Save", указывайте папку, и подтверждайте выбор.
Результатом вышеизложенных действия мы должны получить набор картинок:
index_01.jpg – 960×100
index_02.jpg – 240×1091
index_03.jpg – 720×1091
index_04.jpg – 960×130
Если у вас получились картинки с другими названиями – не беда, мы все равно переименуем их. Главное чтобы они получились таких же размеров.
Первый этап закончен, и можно наконец-то начать верстать макет сайта.
Html Верстка макета сайта (шаг 2)
В коде странице прописываем:
При этом нужно также поместить в папку файл стилей и папку с картинками. Скачать набор готовых картинок можно по ссылке:
Скачать набор картинок ( Скачали: 1157 чел. )
Откройте страницу, посмотрите, что макет перенесся на html, но это только начало, т.к. все, что мы видим лишь картинки, а нам предстоит сделать отдельные html элементы.
Приступим к созданию шапки
С помощью PhotoShopa, нарежем рисунок шапки на три части:
Переименуем файлы в logo.jpg, search.jpg, phone.jpg
Cоздадим в блоке header три вложеных блока (logo, search, phone ), как вы поняли они предназначаются соответственно для логотипа, поиска и контактных телефонов:
Пропишем в style.css правила:
Не забудьте убрать из header временный параметр определения фона – background: url(‘images/ header.jpg’);.
Итак, разметка шапки готова, можно теперь вставлять туда все, что угодно и как удобно. Это занятие я оставляю вам, уважаемые читатели, на самостоятельное воплощение.
Займемся сайдбаром
Аналогично действиям с шапкой, нарежем картинку на части:
В шаблон HTML вставим нужные нам блоки.
Обратите внимание меню размечено тегом UL . Я предлагаю сделать его сразу кликабельным, т.к. оно полностью текстовое, и нет необходимости вставлять картинку.
В файл стилей добавим правила:
При наличии вышеприведенных правил, можно смело заполнять маркированный список , разделами меню:
Следом за меню, идет элемент для отправки заявки, вот тут нам и пригодится использование параметра opacity для выравнивания элементов, о котором я упоминал в начале статьи, когда описывал технику верстки сайта по макету. Итак, уважаемые читатели, нам нужно установить все элементы на свои места, ровно так как, они расположены в макете. Для этого мы делаем верхний слой полупрозрачным, и далее начинается кропотливый процесс выравнивания.
По завершению работы над этим элементом наш CSS файл пополнится значительным количеством правил:
Не думаю, что вам стоит разбираться с этими правилами и вникать в них, поскольку это не сама цель статьи. Привел я их только для наглядности и оценки объема процесса верстки сайта.
В данном макете для сайта, остаются еще не сверстанными: контентная часть сайта и подвал. Хотя и шапку можно привлечь к числу не доверстаных, ведь там еще не работает поиск, и телефоны нельзя скопировать.
Несмотря на то, что большая часть еще требует долгой работы, я не стану описывать далее весь процесс, а предложу вам уважаемые читатели самостоятельно разобраться с тем, как сверстать сайт по макету. Потому, что только при подкреплении материала практическими действиями вы сможете хорошо понять смысл изложенной техники.
Как продолжить верстку
В этом пункте, вам стоит подумать, нужно ли вам тратить время на доверстывание тестового макета, или на примере вышеперечисленных действий попробовать на вашем собственном PSD|JPG файле. Конечно же, я советую закончить начатое, и сравнить наши результаты, но выбор остается за вами.
Я надеюсь на то, что данный материал ответит начинающим верстальщикам на вопрос "Как сверстать сайт по макету?" и поможет вам уважаемые читатели разобраться с принципами верстки макетов для сайтов.
Буду ждать ваших вопросов в комментариях.
Суть техники переноса макета на сайт
В ходе верстки имеющийся макет будет разрезан на мелкие, и не очень, составляющие картинки, причем разрезание будет проходить в несколько этапов. Такой подход поможет нам четко разграничить размер DIV блоков. После того как все составляющие будут находиться на своих местах, мы сможем лицезреть на странице наш макет, но он еще не будет функционален, т.е. не будут работать поля ввода, ссылки, выделение текста и так далее.
Чтобы разместить все необходимые элементы функционала сайта, ровно на свои места, мы будем использовать CSS параметр opacity: 0.5, отвечающий за прозрачность элементов.
Основное я упомянул, если чего забыл, далее по ходу работы опишу.
Что такое макет сайта?
Под макетом сайта давайте понимать внешний вид главной страницы ресурса, представленной в одном из графическом форматов (JPG, PNP, GIF, PSD, CDR). Как правило, дизайнеры предоставляют макеты в PSD или CDR форматах, но случается и так, что нужно сверстать сайт по макету из JPG файла.
Для дальнейшего усвоения материала я рекомендую вам скачать пример макета в JPG формате. Да-да именно в JPG, а не в PSD, поскольку над PSD можно сделать тот же, и значительно больший, набор операций для переноса макета на сайт. Поэтому мы будем работать с менее функциональным JPG файлом без свойственных макетам слоёв.
Как сверстать сайт (шаг 1)
Подходя к вопросу "Как сверстать сайт", мы уже имеем макет сайта (JPG, PNP, GIF, PSD, CDR), в нашем случае это JPG. Также мы имеем установленную программу Photoshop любой версии.
Наш тренировочный вариант выглядит таким образом:
На первый взгляд он очень прост, и не требует сложных изысков в действиях переноса картинки на HTML верстку, но тем не менее имеет весь спектр элементов присутствующих в любом сайте (header, menu, sidebar, content, footer).
Вот алгоритм наших первостепенных действий, необходимых для того, чтобы сверстать сайт по макету:
Нужно четко разграничить картинку на следующие области: header, sidebar, content, footer.
Для этого нам понадобится инструмент Slice Tool
После выделения областей с помощью Photoshop мы можем сохранить каждую выделенную часть как отдельную картинку. Выберите в меню пункт Flie -> Save for Web & Devices, или нажмите сочетание клавиш ALT+SHIFT+CTRL+S. Перед вами появится окно:
Жмите "Save", указывайте папку, и подтверждайте выбор.
Результатом вышеизложенных действия мы должны получить набор картинок:
index_01.jpg – 960×100
index_02.jpg – 240×1091
index_03.jpg – 720×1091
index_04.jpg – 960×130
Если у вас получились картинки с другими названиями – не беда, мы все равно переименуем их. Главное чтобы они получились таких же размеров.
Первый этап закончен, и можно наконец-то начать верстать макет сайта.
Html Верстка макета сайта (шаг 2)
В коде странице прописываем:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка сайта</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wraper">
<div id="header">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>При этом нужно также поместить в папку файл стилей и папку с картинками. Скачать набор готовых картинок можно по ссылке:
Скачать набор картинок ( Скачали: 1157 чел. )
Откройте страницу, посмотрите, что макет перенесся на html, но это только начало, т.к. все, что мы видим лишь картинки, а нам предстоит сделать отдельные html элементы.
Приступим к созданию шапки
С помощью PhotoShopa, нарежем рисунок шапки на три части:
Переименуем файлы в logo.jpg, search.jpg, phone.jpg
Cоздадим в блоке header три вложеных блока (logo, search, phone ), как вы поняли они предназначаются соответственно для логотипа, поиска и контактных телефонов:
<div id="header">
<div id="logo">
</div>
<div id="search">
</div>
<div id="phone">
</div>
</div>Пропишем в style.css правила:
#logo{
float:left;
background: url('images/logo.jpg');
width: 230px;
height: 100px;
}
#search{
float:left;
background: url('images/search.jpg');
width: 540px;
height: 100px;
}
#phone{
float:left;
background: url('images/phone.jpg');
width: 190px;
height: 100px;
}Не забудьте убрать из header временный параметр определения фона – background: url(‘images/ header.jpg’);.
Итак, разметка шапки готова, можно теперь вставлять туда все, что угодно и как удобно. Это занятие я оставляю вам, уважаемые читатели, на самостоятельное воплощение.
Займемся сайдбаром
Аналогично действиям с шапкой, нарежем картинку на части:
В шаблон HTML вставим нужные нам блоки.
<div id="sidebar">
<ul id="menu">
</ul>
<div id="order">
</div>
<div id="contacts">
</div>
</div>Обратите внимание меню размечено тегом UL . Я предлагаю сделать его сразу кликабельным, т.к. оно полностью текстовое, и нет необходимости вставлять картинку.
В файл стилей добавим правила:
#menu{
background: green;
margin-top: 0px;
float:right;
text-align: right;
list-style: none;
}
#menu li{
margin-top: 7px;
}
#menu a{
color: black;
font-family: Arial;
font-size: 17px;
font-weight: 100;
text-decoration: underline;
}
#menu a:hover{
color: red;
font-family: Arial;
font-weight: 200;
}При наличии вышеприведенных правил, можно смело заполнять маркированный список , разделами меню:
<li><a href="">Раздел 1</a></li>
Следом за меню, идет элемент для отправки заявки, вот тут нам и пригодится использование параметра opacity для выравнивания элементов, о котором я упоминал в начале статьи, когда описывал технику верстки сайта по макету. Итак, уважаемые читатели, нам нужно установить все элементы на свои места, ровно так как, они расположены в макете. Для этого мы делаем верхний слой полупрозрачным, и далее начинается кропотливый процесс выравнивания.
По завершению работы над этим элементом наш CSS файл пополнится значительным количеством правил:
#b_order{
float:left;
/*background: url('images/order.jpg');*/
margin-top: 30px;
width: 240px;
height: 280px;
}
#order{
color:black;
margin-top: 10px;
margin-left: 6px;
_margin-left: 0px;
float:left;
background: url('images/back_order.png') no-repeat;
/*opacity: 0.7;*/
width: 230px;
height: 280px;
}
#order h3{
margin:12px 30px 0px 5px;
_margin-right:10px;
_margin-top:12px;
text-align: right;
float:right;
width: 150px;
font-family: Arial;
font-size: 14px;
}
#order_text{
margin:7px 30px 1px 5px;
_margin-top:7px;
_margin-right:10px;
float:right;
width: 190px;
text-align: right;
font-family: Calibri;
font-size: 11px;
}
#order table{
margin:0px 0px 11px 12px;
width: 190px;
font-family: Calibri;
font-size: 14px;
}
#order td{
padding-top: 10px;
}
#order a{
margin: 0px 0px 0px 13px;
font-family: Calibri;
font-weight: 600;
font-size: 14px;
}
#back_yellow{
float:left;
padding-top: 5px;
margin: 0px 2px 0px 3px;
background: url('images/yellow_button.png') no-repeat;
width: 91px;
height: 30px;
}
#order input{
height: 17px;
width: 130px;
font-family: Calibri;
font-size: 14px;
}Не думаю, что вам стоит разбираться с этими правилами и вникать в них, поскольку это не сама цель статьи. Привел я их только для наглядности и оценки объема процесса верстки сайта.
В данном макете для сайта, остаются еще не сверстанными: контентная часть сайта и подвал. Хотя и шапку можно привлечь к числу не доверстаных, ведь там еще не работает поиск, и телефоны нельзя скопировать.
Несмотря на то, что большая часть еще требует долгой работы, я не стану описывать далее весь процесс, а предложу вам уважаемые читатели самостоятельно разобраться с тем, как сверстать сайт по макету. Потому, что только при подкреплении материала практическими действиями вы сможете хорошо понять смысл изложенной техники.
Как продолжить верстку
В этом пункте, вам стоит подумать, нужно ли вам тратить время на доверстывание тестового макета, или на примере вышеперечисленных действий попробовать на вашем собственном PSD|JPG файле. Конечно же, я советую закончить начатое, и сравнить наши результаты, но выбор остается за вами.
Я надеюсь на то, что данный материал ответит начинающим верстальщикам на вопрос "Как сверстать сайт по макету?" и поможет вам уважаемые читатели разобраться с принципами верстки макетов для сайтов.
Буду ждать ваших вопросов в комментариях.
Похожие новости:
Комментарии:
Нету комментариев для вывода...