Как сверстать шаблона сайта из PSD в HTML и CSS


Как сверстать шаблона сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Как сверстать шаблона сайта из PSD в HTML и CSS

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

Как сверстать шаблона сайта из PSD в HTML и CSSКак сверстать шаблона сайта из PSD в HTML и CSS

Подготовка

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

Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.

Как сверстать шаблона сайта из PSD в HTML и CSS

Всё. в принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:


<code><!DOCTYPE html></code></pre>
<div><code><html></code></div>
<div><code><head></code></div>
<div></div>
<div><code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</a>"</code><code>></script></code></div>
<div></div>
<div><code><meta charset=</code><code>"utf-8"</code> <code>/></code></div>
<div></div>
<div><code><title>Макет</title></code></div>
<div></div>
<div><code></head></code></div>
<div><code><body></code></div>
<div></div>
<div><code><!-- Начало хидер --></code></div>
<div><code><header </code><code>class</code><code>=</code><code>"header"</code><code>></code></div>
<div><code><div id=</code><code>"headerInner"</code><code>></code></div>
<div></div>
<div><code></div></code></div>
<div><code></header><!-- Конец хидер --></code></div>
<div></div>
<div><code><!-- начало врапер --></code></div>
<div></div>
<div><code><section id=</code><code>"wrapper"</code><code>></code></div>
<div><code><div id=</code><code>"middle"</code><code>></code></div>
<div><code><div id=</code><code>"content"</code><code>></code></div>
<div><code><div id=</code><code>"colLeft"</code><code>></code></div>
<div></div>
<div><code></div><!-- Конец коллефт --></code></div>
<div></div>
<div><code><aside id=</code><code>"colRight"</code><code>></code></div>
<div></div>
<div><code></aside><!-- Конец колрайт --></code></div>
<div></div>
<div><code></div><!-- Конец контент --></code></div>
<div><code></div><!-- Конец мидл --></code></div>
<div><code></section><!-- Конец врапер --></code></div>
<div></div>
<div><code><!-- Начало футер --></code></div>
<div></div>
<div><code><footer id=</code><code>"footer"</code><code>></code></div>
<div><code><div id=</code><code>"footerInner"</code><code>></code></div>
<div></div>
<div><code></div><!-- Конец футериннер --></code></div>
<div><code></footer><!-- Конец футер --></code></div>
<div></div>
<div><code></body></code></div>
<div><code></html></code></div>
<pre>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<code><!-- Начало хидер --></code></pre>
<div><code><header </code><code>class</code><code>=</code><code>"header"</code><code>></code></div>
<div><code><div id=</code><code>"headerInner"</code><code>></code></div>
<div></div>
<div><code></div></code></div>
<div><code></header><!-- Конец хидер --></code></div>
<pre>

В нашем случае класс »header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

Как сверстать шаблона сайта из PSD в HTML и CSS

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:


<!— начало врапер —>
<code><section id=</code><code>"wrapper"</code><code>></code></pre>
<div><code><div id=</code><code>"middle"</code><code>></code></div>
<div><code><div id=</code><code>"content"</code><code>></code></div>
<div><code><div id=</code><code>"colLeft"</code><code>></code></div>
<div></div>
<div><code></div><!-- Конец коллефт --></code></div>
<div></div>
<div><code><aside id=</code><code>"colRight"</code><code>></code></div>
<div></div>
<div><code></aside><!-- Конец колрайт --></code></div>
<div></div>
<div><code></div><!-- Конец контент --></code></div>
<div><code></div><!-- Конец мидл --></code></div>
<div><code></section><!-- Конец врапер --></code></div>
<pre>
  • id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
  • id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
  • id=»colLeft» — левая сторона сайта (Посты)
  • id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<code><!-- Начало футер --></code></pre>
<div></div>
<div><code><footer id=</code><code>"footer"</code><code>></code></div>
<div><code><div id=</code><code>"footerInner"</code><code>></code></div>
<div></div>
<div><code></div><!-- Конец футериннер --></code></div>
<div><code></footer><!-- Конец футер --></code></div>
<pre>

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8″ и сохраняем.

templ2

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

templ3

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.

templ4

Добавляем вот этот код CSS

<code>* {</code></pre>
<div><code> </code><code>margin: 0;</code></div>
<div><code> </code><code>padding: 0;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>body {</code></div>
<div><code> </code><code>width: 100%;</code></div>
<div><code> </code><code>height: 100%;</code></div>
<div><code> </code><code>color:#333;</code></div>
<div><code> </code><code>background: #fff;</code></div>
<div><code> </code><code>font-family: </code><code>"Segoe UI"</code><code>, </code><code>"HelveticaNeue-Light"</code><code>, </code><code>"Helvetica Neue Light"</code><code>, </code><code>"Helvetica Neue"</code><code>, Helvetica, Arial, sans-serif;</code></div>
<div><code> </code><code>font-size:0.94em;</code></div>
<div><code> </code><code>line-height:135%;</code></div>
<div></div>
<div><code>}</code></div>
<div></div>
<div><code>aside, nav, footer, header, section { display: block; }</code></div>
<div></div>
<div><code>ul {</code></div>
<div><code> </code><code>list-style:none;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>a {</code></div>
<div><code> </code><code>text-decoration:none;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>a:hover {</code></div>
<div><code> </code><code>text-decoration: none;</code></div>
<div><code>}</code></div>
<pre>

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

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

Главные блоки (верх, середина и низ)

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

<code>/* -------------------------------</code></pre>
<div><code>Главные блоки</code></div>
<div><code>----------------------------------*/</code></div>
<div></div>
<div><code>#wrapper {</code></div>
<div><code> </code><code>margin-top:40px;</code></div>
<div><code> </code><code>width: 1200px;</code></div>
<div><code> </code><code>margin: 0 auto;</code></div>
<div><code> </code><code>height: auto !important;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.header{</code></div>
<div><code> </code><code>width:100%;</code></div>
<div><code> </code><code>background: #0dbfe5;</code></div>
<div><code> </code><code>height:57px;</code></div>
<div><code> </code><code>z-index: 4;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#headerInner {</code></div>
<div></div>
<div><code> </code><code>position:relative;</code></div>
<div><code> </code><code>border:0px solid #333;</code></div>
<div><code> </code><code>width:1200px;</code></div>
<div><code> </code><code>height:250px;</code></div>
<div><code> </code><code>margin:0 auto;</code></div>
<div><code> </code><code>margin-top:0px;</code></div>
<div><code> </code><code>}</code></div>
<div><code>#content {</code></div>
<div><code> </code><code>margin-top:40px;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>#content #colLeft {</code></div>
<div><code> </code><code>background: #fff;</code></div>
<div><code> </code><code>float:left;</code></div>
<div><code> </code><code>width:800px;</code></div>
<div><code> </code><code>margin-right:0px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#content #colRight {</code></div>
<div><code> </code><code>margin-left:45px;</code></div>
<div><code> </code><code>float:left;</code></div>
<div><code> </code><code>width:350px;</code></div>
<div><code> </code><code>position:relative;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>#middle:after {</code></div>
<div><code> </code><code>content: </code><code>'.'</code><code>;</code></div>
<div><code> </code><code>display: block;</code></div>
<div><code> </code><code>clear: both;</code></div>
<div><code> </code><code>visibility: hidden;</code></div>
<div><code> </code><code>height: 0;</code></div>
<div><code>}</code></div>
<pre>

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<code><nav </code><code>class</code><code>=</code><code>"topMenuRight"</code><code>></code></pre>
<div></div>
<div><code> </code><code><ul></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 1</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 2</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 3</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 4</a></li></code></div>
<div><code> </code><code></ul></code></div>
<div></div>
<div><code></nav></code></div>
<pre>

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

templ5

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

templ6

Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

templ7

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

<code>/* Верхнее правое меню */</code></pre>
<div></div>
<div><code>.topMenuRight {</code></div>
<div><code> </code><code>height:57px;</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>left:0px;</code></div>
<div><code> </code><code>top:0px;</code></div>
<div><code> </code><code>border: 0px solid #1FA2E1;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.topMenuRight ul li {</code></div>
<div><code> </code><code>background: url(images/line.png) 0px 0px no-repeat;</code></div>
<div><code> </code><code>float:left;</code></div>
<div><code> </code><code>height: 57px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.topMenuRight ul {</code></div>
<div><code> </code><code>padding-left:0px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.topMenuRight ul li a{</code></div>
<div><code> </code><code>margin-top:0px;</code></div>
<div><code> </code><code>font-weight:100;</code></div>
<div><code> </code><code>border-right:0px solid #adadad;</code></div>
<div><code> </code><code>display:block;</code></div>
<div><code> </code><code>color:#fff;</code></div>
<div><code> </code><code>text-decoration:none;</code></div>
<div><code> </code><code>line-height:20px;</code></div>
<div><code> </code><code>font-size:18px;</code></div>
<div><code> </code><code>padding:16px 20px 21px 20px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.topMenuRight ul li a:hover{</code></div>
<div><code> </code><code>background: #fff;</code></div>
<div><code> </code><code>color:#555;</code></div>
<div><code> </code><code>}</code></div>
<pre>

Вот, что должно получиться:

templ8

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

<code><div </code><code>class</code><code>=</code><code>"share-new"</code><code>></code></pre>
<div></div>
<div><code><a </code><code>class</code><code>=</code><code>"icon-twitter"</code> <code>href=</code><code>"#"</code> <code>title=</code><code>"Следить в Twitter!"</code> <code>target=</code><code>"_blank"</code><code>></a></code></div>
<div><code><a </code><code>class</code><code>=</code><code>"icon-rss"</code> <code>href=</code><code>"#"</code> <code>title=</code><code>"Подписаться на rss"</code> <code>target=</code><code>"_blank"</code><code>></a></code></div>
<div><code><a </code><code>class</code><code>=</code><code>"icon-mail"</code> <code>href=</code><code>"#"</code> <code>title=</code><code>"Подписаться по e-mail"</code> <code>target=</code><code>"_blank"</code><code>></a></code></div>
<div></div>
<div><code></div></code></div>
<pre>

А в стили CSS нужно добавить вот это:

<code>.share-</code><code>new</code> <code>{</code></pre>
<div><code> </code><code>z-index: 1;</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>right:0px;</code></div>
<div><code> </code><code>top:14px;</code></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>.share-</code><code>new</code> <code>a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }</code></div>
<div></div>
<div><code> </code><code>.share-</code><code>new</code> <code>.icon-twitter {</code></div>
<div><code> </code><code>background: url(images/twitter-variation.png) 0 center no-repeat;</code></div>
<div><code> </code><code>padding:4px 0px 0px 5px;</code></div>
<div><code> </code><code>font-size:17px;</code></div>
<div><code> </code><code>margin-right: 3px;</code></div>
<div></div>
<div><code>}</code></div>
<div></div>
<div><code>.share-</code><code>new</code> <code>.icon-rss {</code></div>
<div><code> </code><code>background: url(images/rss-variation.png) 0 center no-repeat;</code></div>
<div><code> </code><code>padding:4px 0px 0px 5px;</code></div>
<div><code> </code><code>font-size:17px;</code></div>
<div><code> </code><code>margin-right: 0px;</code></div>
<div></div>
<div><code>}</code></div>
<div></div>
<div><code>.share-</code><code>new</code> <code>.icon-mail {</code></div>
<div><code> </code><code>background: url(images/email-variation.png) 0 center no-repeat;</code></div>
<div><code> </code><code>padding:4px 0px 0px 5px;</code></div>
<div><code> </code><code>font-size:17px;</code></div>
<div><code> </code><code>margin-right: 0px;</code></div>
<div></div>
<div><code>}</code></div>
<pre>

Вот результат:

templ9

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

<code><div </code><code>class</code><code>=</code><code>"logo"</code><code>></code></pre>
<div><code><a href=</code><code>"#"</code><code>><img src=</code><code>"images/logo.png"</code> <code>alt=</code><code>"Блог"</code> <code>/></a></code></div>
<div><code></div></code></div>
<pre>

А вот и стили:

<code>/*----------------------------</code></pre>
<div><code> </code><code>Логотип</code></div>
<div><code>------------------------------*/</code></div>
<div></div>
<div><code>.logo {</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>left:0px;</code></div>
<div><code> </code><code>top:90px;</code></div>
<div><code> </code><code>}</code></div>
<pre>

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

<code><!-- Начало #bottomMenu --></code></pre>
<div><code> </code><code><nav </code><code>class</code><code>=</code><code>"bottomMenu"</code><code>></code></div>
<div><code><ul id=</code><code>"dropdown_nav"</code><code>></code></div>
<div></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Категория</a></code></div>
<div><code> </code><code><ul </code><code>class</code><code>=</code><code>"sub_nav"</code><code>></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Подменю #1</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Подменю #2</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Подменю #3</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Подменю #4</a></li></code></div>
<div><code> </code><code></ul></code></div>
<div><code><li><a href=</code><code>"#"</code><code>>Категория 1</a></li></code></div>
<div><code><li><a href=</code><code>"#"</code><code>>Категория 2</a></li></code></div>
<div><code><li><a href=</code><code>"#"</code><code>>Категория 3</a></li></code></div>
<div><code><li><a href=</code><code>"#"</code><code>>Категория 4</a></li></code></div>
<div></div>
<div><code> </code><code></ul></code></div>
<div><code> </code><code></nav><!-- конец #bottomMenu --></code></div>
<pre>

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

templ10

Выбираем инструмент «Рамка»

templ11

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

templ12

Теперь по выделенной области нажимаем левой кнопкой мыши два раза. После этого тот фон, что нам нужен для меню автоматически обрежется. Вам только нужно сохранить его для web в папку images под именем bgmenu.

Ну а сейчас можно смело добавлять CSS:

<code>.bottomMenu {</code></pre>
<div><code> </code><code>width:1200px;</code></div>
<div><code> </code><code>height: 70px;</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>left:0px;</code></div>
<div><code> </code><code>bottom:0px;</code></div>
<div><code> </code><code>background: url(images/bgmenu.png) 0px 0px repeat-x;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#dropdown_nav {</code></div>
<div><code> </code><code>font-weight:bold;</code></div>
<div><code> </code><code>display:inline-block;</code></div>
<div><code> </code><code>list-style:none;</code></div>
<div><code> </code><code>border-bottom:0px solid #777;</code></div>
<div><code> </code><code>margin-top:18px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#dropdown_nav li {</code></div>
<div><code> </code><code>float:left;</code></div>
<div><code> </code><code>position:relative;</code></div>
<div><code> </code><code>display:inline-block;</code></div>
<div></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#dropdown_nav li a {</code></div>
<div></div>
<div><code> </code><code>font-weight:100;</code></div>
<div><code> </code><code>font-size:18px;</code></div>
<div><code> </code><code>color:#fff;</code></div>
<div><code> </code><code>padding:15px 22px 20px 22px;</code></div>
<div><code> </code><code>background: url(images/linemenu.png) right no-repeat;</code></div>
<div><code> </code><code>-moz-transition: background-color 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-o-transition: background-color 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-webkit-transition: background-color 0.3s 0.01s ease;</code></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>#dropdown_nav li a:hover {</code></div>
<div><code> </code><code>background: #000;</code></div>
<div><code> </code><code>text-decoration:none;</code></div>
<div><code> </code><code>color:#0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code> </code><code>#dropdown_nav li a.first {</code></div>
<div><code> </code><code>-moz-border-radius:5px 0px 0px 5px;</code></div>
<div><code> </code><code>-webkit-border-radius:5px 0px 0px 5px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>/* Выпадающее меню */</code></div>
<div><code> </code><code>#dropdown_nav .sub_nav {</code></div>
<div><code> </code><code>z-index: 4;</code></div>
<div><code> </code><code>width:180px;</code></div>
<div><code> </code><code>padding:0px;</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>top:42px;</code></div>
<div><code> </code><code>left:0px;</code></div>
<div><code> </code><code>border:0px solid #ddd;</code></div>
<div><code> </code><code>border-top:none;</code></div>
<div><code> </code><code>background: #000;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#dropdown_nav .sub_nav li {</code></div>
<div></div>
<div><code> </code><code>width:180px;</code></div>
<div><code> </code><code>padding:0px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#dropdown_nav .sub_nav li a {</code></div>
<div><code> </code><code>background: none;</code></div>
<div><code> </code><code>font-weight: normal;</code></div>
<div><code> </code><code>font-size:15px;</code></div>
<div><code> </code><code>display:block;</code></div>
<div><code> </code><code>border-bottom:0px solid #e5e0b3;</code></div>
<div><code> </code><code>padding-left:10px;</code></div>
<div><code> </code><code>color:#fff;</code></div>
<div></div>
<div><code> </code><code>}</code></div>
<div><code> </code><code>#dropdown_nav .sub_nav li a:hover {</code></div>
<div><code> </code><code>background:#222;</code></div>
<div><code> </code><code>color:#0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<pre>

Результат:

templ13

Блок «Последние записи»

Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:

<span style="font-size: 12px; line-height: 18px;"><code><div id=</code><code>"lpblock"</code><code>></code></span></pre>
<div></div>
<div><code><h2>Последние записи</h2></code></div>
<div></div>
<div><code></div></code></div>
<pre><span style="font-size: 12px; line-height: 18px;">

templ14

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<code><!-- Начало .postBox --></code></pre>
<div><code><article </code><code>class</code><code>=</code><code>"postBox"</code><code>></code></div>
<div></div>
<div><code><div </code><code>class</code><code>=</code><code>"postThumb"</code><code>><a href=</code><code>"#"</code><code>><img width=</code><code>"800"</code> <code>height=</code><code>"300"</code> <code>src=</code><code>"images/tumb.png"</code><code>/></a></div></code></div>
<div></div>
<div><code><h2><a href=</code><code>"#"</code><code>>Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h2></code></div>
<div></div>
<div><code><div </code><code>class</code><code>=</code><code>"info"</code><code>></code></div>
<div><code>Александр </code><code>// <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a></code></div>
<div><code></div></code></div>
<div></div>
<div><code><div </code><code>class</code><code>=</code><code>"textPreview"</code><code>></code></div>
<div></div>
<div><code><p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p></code></div>
<div><code></div></code></div>
<div></div>
<div><code><div </code><code>class</code><code>=</code><code>"more-link"</code><code>><a href=</code><code>"#"</code><code>>Далее</a></div></code></div>
<div></div>
<div><code></article></code></div>
<div><code><!-- Конец .postBox --></code></div>
<div></div>
<div><code><div </code><code>class</code><code>=</code><code>"raz"</code><code>></div></code></div>
<pre>

аметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

И конечно же не забываем про CSS для постов:

<code>.raz {</code></pre>
<div><code> </code><code>margin:0 auto;</code></div>
<div><code> </code><code>border:0px solid #333;</code></div>
<div><code> </code><code>background: #fff;</code></div>
<div><code> </code><code>width:116px;</code></div>
<div><code> </code><code>height:29px;</code></div>
<div><code> </code><code>margin-bottom:50px;</code></div>
<div><code> </code><code>background: url(images/raz.png) 0px 0px no-repeat;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox {</code></div>
<div><code> </code><code>border:0px solid #333;</code></div>
<div><code> </code><code>background: #fff;</code></div>
<div><code> </code><code>width:700px;</code></div>
<div><code> </code><code>margin-top:0px;</code></div>
<div><code> </code><code>margin-left:0px;</code></div>
<div><code> </code><code>margin-bottom:50px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox h2 a {</code></div>
<div><code> </code><code>font-family: </code><code>"Segoe UI Semilight"</code><code>, </code><code>"Segoe UI"</code><code>, Tahoma, Helvetica, Sans-Serif;</code></div>
<div><code> </code><code>color:#000;</code></div>
<div><code> </code><code>font-style:normal;</code></div>
<div><code> </code><code>font-weight:100;</code></div>
<div><code> </code><code>font-size:33px;</code></div>
<div><code> </code><code>line-height:35px;</code></div>
<div><code> </code><code>-moz-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-o-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-webkit-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox h2 a:hover {</code></div>
<div><code> </code><code>color:#0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox .textPreview {</code></div>
<div><code> </code><code>border:0px solid #333;</code></div>
<div><code> </code><code>width:800px;</code></div>
<div><code> </code><code>margin-bottom:30px;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>.postBox .textPreview p{</code></div>
<div><code> </code><code>margin-top:0;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox .postThumb{</code></div>
<div><code> </code><code>margin:0px 0px 15px 0;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.postBox .postMeta {</code></div>
<div><code> </code><code>padding-bottom:15px;</code></div>
<div><code> </code><code>clear:left;</code></div>
<div><code> </code><code>overflow:hidden;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>.more-link a {</code></div>
<div><code> </code><code>border-radius: 3px;</code></div>
<div><code> </code><code>background: #0dbfe5;</code></div>
<div><code> </code><code>margin-top:30px;</code></div>
<div><code> </code><code>font-weight:600;</code></div>
<div><code> </code><code>color:#fff;</code></div>
<div><code> </code><code>font-size:17px;</code></div>
<div><code> </code><code>padding:6px 25px 9px 25px;</code></div>
<div><code> </code><code>-moz-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-o-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>-webkit-transition: all 0.3s 0.01s ease;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.more-link a:hover {</code></div>
<div><code> </code><code>background:#000;</code></div>
<div><code> </code><code>color:#0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<pre>

Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:

templ15

Правая часть (Сайдбар)

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<span style="font-size: 12px; line-height: 18px;"><code><form method=</code><code>"get"</code> <code>action=</code><code>"/search"</code> <code>target=</code><code>"_blank"</code><code>></code></span></pre>
<div><code><input name=</code><code>"q"</code> <code>id=</code><code>"form-query"</code> <code>value=</code><code>""</code> <code>placeholder=</code><code>"Поиск..."</code><code>></code></div>
<div><code><input id=</code><code>"form-querysub"</code> <code>type=submit value=</code><code>""</code><code>></code></div>
<div><code></form></code></div>
<pre><span style="font-size: 12px; line-height: 18px;">
И стили для поиска:
<code>#form-query {</code></pre>
<div><code> </code><code>position:relative;</code></div>
<div><code> </code><code>background:#eeeeee;</code></div>
<div><code> </code><code>border:0px solid #e4e4e4;</code></div>
<div><code> </code><code>width:335px;</code></div>
<div><code> </code><code>height:31px;</code></div>
<div><code> </code><code>padding:8px 10px 7px;</code></div>
<div><code> </code><code>font-weight:100;</code></div>
<div><code> </code><code>font-size:18px;</code></div>
<div><code> </code><code>color:#000;</code></div>
<div><code> </code><code>margin-bottom: 30px;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>#form-querysub {</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>right:15px;</code></div>
<div><code> </code><code>top:15px;</code></div>
<div><code> </code><code>width:17px;</code></div>
<div><code> </code><code>height:17px;</code></div>
<div><code> </code><code>background:url(images/search.png) 0px 0px no-repeat;</code></div>
<div><code> </code><code>border:0px dashed #333;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#form-querysub:hover {</code></div>
<div><code> </code><code>cursor: pointer;</code></div>
<div><code>}</code></div>
<pre>

Виджет

После кода поиска вставляем:

<code><div </code><code>class</code><code>=</code><code>"rightBox"</code><code>></code></pre>
<div></div>
<div><code><h2>Виджет 2</h2></code></div>
<div><code><ul></code></div>
<div></div>
<div><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Плавная анимация объектов только с помощью CSS (5 примеров)"</code><code>>Плавная анимация объектов только с помощью CSS (5 примеров)</a></li></code></div>
<div></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов"</code><code>>Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li></code></div>
<div></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery"</code><code>>Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов"</code><code>>500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Бесплатные PSD и CSS3 меню для Вашего веб проекта"</code><code>>Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Примеры идеального сочетания цветов в веб &#8211; дизайне"</code><code>>Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS"</code><code>>Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей"</code><code>>Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Примеры игр которые сделанные с помощью html5 canvas"</code><code>>Примеры игр которые сделанные с помощью html5 canvas</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code> <code>title=</code><code>"Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов"</code><code>>Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li></code></div>
<div><code> </code><code></ul></code></div>
<div></div>
<div><code></div></code></div>
<pre>

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.

CSS код виджетов:

<code>.rightBox {</code></pre>
<div><code> </code><code>margin-top:0px;</code></div>
<div><code> </code><code>margin-left:0px;</code></div>
<div><code> </code><code>width:330px;</code></div>
<div><code> </code><code>margin-bottom:30px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.rightBox h2 {</code></div>
<div><code> </code><code>width:335px;</code></div>
<div><code> </code><code>background:#f7f7f7 url(images/h2img.png) 320px 14px no-repeat;</code></div>
<div><code> </code><code>font-size:18px;</code></div>
<div><code> </code><code>font-family: </code><code>"Segoe UI Semibold"</code><code>, Tahoma, Helvetica, Sans-Serif;</code></div>
<div><code> </code><code>color:#333;</code></div>
<div><code> </code><code>display:block;</code></div>
<div><code> </code><code>padding:10px 0 15px 20px;</code></div>
<div><code>}</code></div>
<div></div>
<div><code>.rightBox ul li{</code></div>
<div><code> </code><code>width:350px;</code></div>
<div><code> </code><code>padding:10px 0px;</code></div>
<div><code> </code><code>border-bottom:1px solid #f6f6f6;</code></div>
<div><code> </code><code>font-size:14px;</code></div>
<div><code> </code><code>line-height: 16px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.rightBox a {</code></div>
<div><code> </code><code>color:#333;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.rightBox a:hover {</code></div>
<div><code> </code><code>color: #0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<pre>

templ16

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<code><div id=</code><code>"footerlogo"</code><code>></code></pre>
<div><code><a href=</code><code>"#"</code><code>><img src=</code><code>"images/logo.png"</code> <code>alt=</code><code>"Блог"</code> <code>/></a></code></div>
<div><code></div></code></div>
<div></div>
<div><code><nav </code><code>class</code><code>=</code><code>"footernav"</code><code>></code></div>
<div></div>
<div><code> </code><code><ul></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 1</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 2</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 3</a></li></code></div>
<div><code> </code><code><li><a href=</code><code>"#"</code><code>>Страница 4</a></li></code></div>
<div><code> </code><code></ul></code></div>
<div></div>
<div><code></nav></code></div>
<pre>

CSS

<code>#footer {</code></pre>
<div><code> </code><code>margin-top:50px;</code></div>
<div><code> </code><code>height:100px;</code></div>
<div><code> </code><code>width:100%px;</code></div>
<div><code> </code><code>background: #0dbfe5;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#footerInner {</code></div>
<div><code> </code><code>position:relative;</code></div>
<div><code> </code><code>border:0px solid #000;</code></div>
<div><code> </code><code>width:1200px;</code></div>
<div><code> </code><code>margin:0 auto;</code></div>
<div><code> </code><code>height:100px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>#footerlogo {</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>left:0px;</code></div>
<div><code> </code><code>top:25px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.footernav {</code></div>
<div><code> </code><code>position:absolute;</code></div>
<div><code> </code><code>right:0px;</code></div>
<div><code> </code><code>top:35px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.footernav ul li {</code></div>
<div><code> </code><code>float:left;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.footernav ul li a{</code></div>
<div><code> </code><code>margin-top:0px;</code></div>
<div><code> </code><code>font-weight:100;</code></div>
<div><code> </code><code>border-right:0px solid #adadad;</code></div>
<div><code> </code><code>display:block;</code></div>
<div><code> </code><code>color:#fff;</code></div>
<div><code> </code><code>text-decoration:none;</code></div>
<div><code> </code><code>line-height:20px;</code></div>
<div><code> </code><code>font-size:18px;</code></div>
<div><code> </code><code>padding:0px 0px 0px 25px;</code></div>
<div><code> </code><code>}</code></div>
<div></div>
<div><code>.footernav ul li a:hover{</code></div>
<div><code> </code><code>color:#333;</code></div>
<div><code> </code><code>}</code></div>
<pre>

В конечном итоге получаем вот такой шаблон:

Maket-sayta-800x1331

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

В общем если у Вас будут вопросы спрашивайте в комментариях.

До скорых встреч.

ИСТОЧНИК урока : beloweb.ru

Previous Пользовательская страница для ошибки базы данных
Next Адаптивная сетка иконок

Suggested Posts

Адаптивный шаблон OpenCart — Calcio

Создание формы входа на CSS3

WordPress: переход на https

Что такое Akismet и с «чем его едят»?

Используем карты Google для увеличения посещаемости

Плавное увеличене изображения на CSS