Понедельник, 07 Мая 2012 00:00

Верстка сайта. Урок 5. Верстка веб-страницы из psd макета

Written by 
Оцени эту запись
(15 Голоса)

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

 

Для создания html-страницы можно использовать табличную или блочную верстку. Подробнее об этот можно прочитать в статье Плюсы и минусы табличной и блочной верстки.

Также в верстке вам поможет статья Шаблон html страницы, в которой описаны все тонкости верстки html-страницы фиксированной ширины, с тремя колонками и футером прижатым к низу страницы.

 

Веб-страница обычно делится на такие части:

  • Header - шапка сайта
  • Основная часть сайта - контент. Основная часть может также делить на колонки. На сайте может быть одна, две или три колонки.
  • Блок меню - может быть внутри одной из частей или выделенный отдельным блоком
  • Footer - подвал сайта

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

В основной части сайта в одной из колонок могут находиться меню, меню категорий (статей или товаров), также форма авторизации и поиск. Там же могут находиться блоки типа "Последние новости", "Популярные товары" и многое другое.

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

 

Перейдем непосредственно с верстке макета. Я остановлюсь на блочной верстке, так как сама ее предпочитаю.

Например, есть у нас такой макет. Скачен он с http://leeto.ru/uroki_photoshop/web/100261-maket-sayta-nedvizhimosti-v-fotoshope.html

 

 

Здесь у нас видны такие позиции:

 

  • Шапка. В ней логотип, меню, картинка (брелок)
  • Баннер
  • Две колонки - контент и два блока
  • Подвал

 

Создаем папку с названием проекта. В ней создаем html-страницу. Пусть она называется index.html. Делаем несколько папок - styles, images и, если нужно, js. Создаем css-файл style.css и ложим его в папку styles.

В index.html подключаем файл со стилями. Для этого в <head> документа пишем:

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

где styles/style.css - путь к файлу.

 

Так как мы уже определили основную структуру документа, то так и пишем в <body>:

 

 

<div class="wrapper">
    <div class="header">
        <div class="header_img"></div>
        <div class="logo"></div>
        <div class="mainmenu"></div>
    </div>
    <div class="banner"></div>
    <div class="container">
        <div class="left">
        <div class="content"></div>
        </div>
        <div class="right">
            <div class="block brown"></div>
            <div class="block blue"></div>
        </div>
    </div>
</div>
<div class="footer"></div>
 
Здесь <div> - это блоки, в которых будет основное содержание. Им задаем классы с понятными названиями. Макет имеет ширину 1000px, футер прижат к низу. Потому первые стили в css-файле будут такими:
 
body, html {width: 100%; height: 100%; padding: 0px; margin: 0px;}
 
.wrapper {margin: 0 auto; width: 1000px; min-height: 100%; height: auto !important; height: 100%;}
 
.container {padding-bottom: 50px; width: 1000px; position:relative;}
 
.footer {width: 1000px; margin: -50px auto 0; position: relative; height: 50px;} 
 
В верстке буду использовать CSS3 для градиентного фона и скругления углов. Если вам не удобно использовать CSS3 (например, из-за IE), читайте статью Скругленные углы средствами HTML, CSS
 
 
Задаем фон страницы
 
С макета вырезаем полоску фона шириной в 1px, а по высоте она должна захватить все изменения цвета. Там, где цвет становится одинаковый, узнаем его код. Добавляем в стили:
 
body {background: #e9e8e4 url(../images/bg.png) top left repeat-x;}
 

 

Вычесляем высоту шапки, банера и футера. А также ширину колонок с контентом и блоками. Прописываем эти значения в css-файл. Для вычисления нам нужны линейка в Adobe Photoshop.

 

 

.header {width: 1000px; height: 152px;}
.banner {height: 265px;}
.container {padding: 10px 10px 55px 10px;}
.left {width: 620px; margin-right: 10px;}
.right {width: 350px;}
.footer {width: 1000px; margin: -55px auto 0; position: relative; height: 55px;}
 
Вырезаем логотип, картинку для хедера и баннер. Вставляем их в документ.
 
Банер:
 
<div class="banner"><img src="/images/banner.png" alt="Banner"></div>
.banner {height: 265px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #fff;}
 
Логотип и картинка в хедере:
 
.logo {margin: 0px; position: relative; width: 262px; height: 50px; position: relative; padding-top: 50px;}
.logo a {width: 262px; height: 50px; display: block; background: url(../images/logo.png); margin-left: 180px;}
.header_img {position: absolute; top: 0px; left: 0px; background: url(../images/header_img.png) top left no-repeat; width: 160px; height: 150px;}
 
 
 
Делаем меню:
 
<div class="mainmenu">
        <ul>
            <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Property Search</a></li>
                <li><a href="#">Our Company</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
 
Стили меню:
 
.mainmenu {float: right; margin-right: 20px;}
.mainmenu ul {margin-top: 14px;}
.mainmenu ul li {display: block; float: left; border-top: 1px solid #c8c4bf; border-bottom: 1px solid #b1b1ac; border-left: 1px solid #b9b3a7; border-right: 1px solid #b9b3a7;}
.mainmenu ul li:hover, .mainmenu ul li.active {border-top: 1px solid #e6e2dc; border-bottom: 1px solid #d2d1ca; border-left: 1px solid #e1ddcf; border-right: 1px solid #e1ddcf;}
.mainmenu ul li a {
display: block;
padding: 10px 25px; 
font-weight: bold;
border-bottom: 1px solid #67665a;
border-top: 1px solid #99968f;
border-left: 1px solid #9f998d;
border-right: 1px solid #9f998d;
color: #e8e7e3;
background: #837d71;
background-image: linear-gradient(bottom, rgb(151,147,135) 100%, rgb(103,98,79) 0%);
background-image: -o-linear-gradient(bottom, rgb(151,147,135) 100%, rgb(103,98,79) 0%);
background-image: -moz-linear-gradient(bottom, rgb(151,147,135) 100%, rgb(103,98,79) 0%);
background-image: -webkit-linear-gradient(bottom, rgb(151,147,135) 100%, rgb(103,98,79) 0%);
background-image: -ms-linear-gradient(bottom, rgb(151,147,135) 100%, rgb(103,98,79) 0%);
 
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(151,147,135)),
color-stop(0, rgb(103,98,79))
);
}
 
.mainmenu ul li:hover a,
.mainmenu ul li.active a {
border-bottom: 1px solid #a7a598;
border-top: 1px solid #d4d0c7;
border-left: 1px solid #e5e1d3;
border-right: 1px solid #e5e1d3;
color: #181510;
background: #c7c1b1;
background-image: linear-gradient(bottom, rgb(229,222,209) 100%, rgb(199,193,177) 0%);
background-image: -o-linear-gradient(bottom, rgb(229,222,209) 100%, rgb(199,193,177) 0%);
background-image: -moz-linear-gradient(bottom, rgb(229,222,209) 100%, rgb(199,193,177) 0%);
background-image: -webkit-linear-gradient(bottom, rgb(229,222,209) 100%, rgb(199,193,177) 0%);
background-image: -ms-linear-gradient(bottom, rgb(229,222,209) 100%, rgb(199,193,177) 0%);
 
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(229,222,209)),
color-stop(0, rgb(199,193,177))
);
}
 
 
Вставляем контент и прописываем стили:
 
.content {padding: 30px; color: #27241e; font-weight: bold; line-height: 20px; background: #c8c6ba; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
 
 
Делаем блоки:
 
<div class="block brown">
            <h2>Monthly Special</h2>
            <ul>
            <li>
                <img src="/images/block_img.png">
                    <p>Property Name</p>
                    <p>Price 1000$</p>
                    <p><a href="#">Learn more...</a></p>
                </li>
            </ul>
</div>
 
и стилизируем их:
 
.block, .block h2, .block a {color: #fff;}
.block a {text-decoration: underline;}
.block img {float: left; margin-right: 10px; border: 1px solid #27241e; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.block {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 30px; margin-bottom: 10px;}
 
.block.brown {
border: 1px solid #b5ab9f;
background: #7c6a54;
background-image: linear-gradient(bottom, rgb(101,85,65) 100%, rgb(133,120,102) 0%);
background-image: -o-linear-gradient(bottom, rgb(101,85,65) 100%, rgb(133,120,102) 0%);
background-image: -moz-linear-gradient(bottom, rgb(101,85,65) 100%, rgb(133,120,102) 0%);
background-image: -webkit-linear-gradient(bottom, rgb(101,85,65) 100%, rgb(133,120,102) 0%);
background-image: -ms-linear-gradient(bottom, rgb(101,85,65) 100%, rgb(133,120,102) 0%);
 
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(101,85,65)),
color-stop(0, rgb(133,120,102))
);
}
 
.block.blue {
border: 1px solid #c3d5d1;
background: #6eaba3;
background-image: linear-gradient(bottom, rgb(92,149,140) 100%, rgb(124,196,185) 0%);
background-image: -o-linear-gradient(bottom, rgb(92,149,140) 100%, rgb(124,196,185) 0%);
background-image: -moz-linear-gradient(bottom, rgb(92,149,140) 100%, rgb(124,196,185) 0%);
background-image: -webkit-linear-gradient(bottom, rgb(92,149,140) 100%, rgb(124,196,185) 0%);
background-image: -ms-linear-gradient(bottom, rgb(92,149,140) 100%, rgb(124,196,185) 0%);
 
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(92,149,140)),
color-stop(0, rgb(124,196,185))
);
}
 
 
P.S. Не сильно подбирала шрифты и не вдавалась в подробность точностей до пиксела. Не занималась кроссбраузерностью. Это растянуло бы статью еще на несколько страниц. Хотела больше рассказать о основах. Все нюансы приходят с опытом, главное уметь с чего-то начать.
 
 
Смотрим демо.
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов