Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 2)

веб-дизайн html css

От автора: на прошлой неделе мы узнали, как создать веб-дизайн на тему комиксов. Сегодня примемся за вторую часть: пора разрезать проект-дизайн на слайсы (фрагменты изображения, прим. пер.) и превратить в рабочую разметку HTML, готовую к переносу в любую CMS. Давайте начнем!

Перед началом

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

Так как это учебник не для начинающих, я пропущу некоторые базовые объяснения — подразумевается, что у вас уже имеются рабочие знания HTML и CSS, а также небольшое умение разрезать изображения в Photoshop’е на слайсы.

веб дизайн комикс

скачать исходникидемо

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Шаг 1 – Разметка HTML

Давайте начнем с создания рабочей папки; так как в этом учебнике не требуется применение языка серверной стороны, то она может находиться в системе где угодно. Создайте файл с названием index.html и три исходные папки:

/images

/js

/style

Содержимое этих папок говорит само за себя.
Добавьте в index.html основные контейнеры страницы. Я все оборачиваю в div с названием page. Внутри этого div’а добавьте еще три с ID, соответственно, header, content и footer.

В папке style создайте новый файл с названием default.css и добавьте для удаления всех стилей по умолчанию функцию сброса (reset). Я использую Эрика Майера (Eric Meyer), но можете, не стесняясь, начать со своего любимого.

Для этого шага применяется следующий код HTML:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comicastic</title>
<link href="style/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
 <div id="header">
 Header
 </div>
 <div id="content">
 Content
 </div>
 <div id="footer">
 Footer
 </div>
</div>
</body>
</html>

И CSS:

@charset "utf-8";
/* Документ CSS */ 
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126 
Лицензия: отсутствует (открытый домен) 
*/ 

 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 для более старых браузеров */ 
 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;
 }
/* Конец сброса */ 

Опробовав код в Firefox, вы должны увидеть что-то вроде этого:

html css

Шаг 2 – Основная разметка CSS

Сначала давайте назначим стили структуре разметки.

Мы оборачиваем весь контент в контейнер шириной 960px, а затем устанавливаем высоту внутренних div’ов. Чтобы получить точную высоту каждого div’а, можно применить инструмент Photoshop линейка (Ruler).

разметка css

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

Откройте в Photoshop’е Comicastic.psd и скройте все, кроме папок Header BG и Footer BG. Применив инструмент «Разрезать на слайсы» (slice), начертите большой слайс слева сверху до расстояния в 575px ниже верхнего края. Далее начертите другой слайс от направляющей, ограничивающей фон нижнего колонтитула (взгляните на изображение внизу). Конечно, для получения аккуратного результата можно использовать направляющие.

С помощью инструмента «Выбор слайса» (slice selection) выберите два последних созданных слайса и соответственно назовите каждый из них — bg-body и bg-footer. Затем дважды щелкните на все автослайсы и смените Вид слайса (slice type) на «Нет изображения» (No Image).

Далее пройдите к «Файл» (File) > «Сохранить для веб и устройств» (Save for Web and Devices). Выберите два слайса, которые нужно сохранить (для многократного выбора придерживайте клавишу shift), установите «Вид файла» (file type) на JPG, а «Свойство» (Quality) на 70 и щелкните «Сохранить» (Save). Пройдите в свою рабочую директорию и выберите корневой файл (этот диалог автоматически сохранит ваши файлы в папку /images).

html css

Теперь, когда у вас имеются фоновые изображения, давайте во все контейнеры добавим CSS.

Мы установим тестовую высоту div’ов за исключением заголовка (header) (который на самом деле 180px в высоту) и добавим несколько временных фоновых цвета в тестовых целях.

/*Общая*/
body{
 background-color:#000;
 background-image:url(../images/bg-body.jpg);
 background-position:center top;
 background-repeat:no-repeat;
}

/*Контейнеры*/ 
#page{
 margin:0px auto;
 width:960px;
}
#header{
 width:960px;
 height:180px;
 float:left;
 background-color:#666;
}
#content{
 width:960px;
 height:400px;/* Временная */ 
 float:left;
 background-color:#FCC;
}
#footer{
 width:960px;
 height:250px;/* Временная */ 
 float:left;

 background-image:url(../images/bg-footer.jpg);
 background-position:top center;
 background-repeat:no-repeat;
}

При тестировании в браузере у вас должно получиться нечто вроде изображения внизу.

html css

Шаг 3 – Разделите заголовок и фоновые изображения с содержимым на слайсы

Теперь, когда вы знаете, как разделять на слайсы, давайте сделаем то же самое с изображениями заголовка и фона содержимого (или переднего плана). Для изображений заголовка создайте копию документа "comicastic.psd", скройте все, кроме папки Logo и слоев, связанных с фоном "Поиска" (Search) (плюс я добавляю здесь кнопку поиска после передвижения ее на несколько пикселей вправо). Теперь начертите слайсы вокруг видимых сегментов и назовите их соответственно logo, bg-search и search-button. Сохраните как PNG’и с прозрачными фонами.

html css

Давайте продолжим работу баннером содержимого.

Покажите только папку Background внутри Top Banner, покажите папку Page Curl и слой Page Bg под Page Content, и папку Header Bg, включая общий черный фон. Затем, при этих видимых слоях, начертите два слайса: один для фона баннера под названием bg-banner и другой, маленький, для загиба страницы под названием content-page-curl. Теперь сохраните их оба как JPEG.

html css

Добавьте в свой новый файл HTML новый div с названием logo внутри "header" и другой div с названием top-banner внутри "content".

<div id="header">
 <div id="logo">
  <a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a>
 </div>
</div>
<div id="content">
 <div id="top_banner">Top Banner</div>
</div>

И код CSS, чтобы они выглядели, как положено:

#logo{
 padding-top:32px;
 padding-left:70px;
}

[...]

#top_banner{
 float:left;
 width:960px;
 height:250px;
 background-image:url(../images/bg-banner.jpg);
 background-position:center top;
 background-repeat:no-repeat;
}

Теперь у вас должно получиться что-то подобно этому:

html css

Шаг 4 – Верхняя навигация

Давайте добавим HTML верхней навигации. Добавьте следующий код внутрь div’а header под логотипом.

<ul id="main_navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">About us</a></li>
 <li><a href="#">Contact us</a></li>
</ul>

Самой сложной работой с этим div’ом будет его расположение. Мы заставим его плавать (float) справа и поиграем с отступом, чтобы установить его на нужное место. Добавьте следующий CSS:

#main_navigation{
  float:right;
}
#main_navigation li{
  display:inline;
}
#main_navigation li a{
  display:block;
  float:left;
}
#main_navigation li a:hover{
}

html css

Шаг 5 – Замещение шрифта

Так как я совершенно не собираюсь применять в этом проекте "Comic Sans", мы применим более интересный вид шрифта. Чтобы он классно выглядел в современных браузерах, воспользуемся достоинствами CSS3.

Во-первых, скачаем комплекты шрифтов CSS "Komika Title" и "Komika Text" и положим их в новую папку под названием /fonts. В каждом наборе есть группа файлов со шрифтами и файл .CSS, который мы импортируем в свой документ default.css, как здесь:

/*Наборы видов шрифта*/ 
@import url("../fonts/komika-text/stylesheet.css") screen;
@import url("../fonts/komika-title/stylesheet.css") screen; 

Когда шрифты импортированы, мы можем применять их на своем сайте где угодно. В каждом комплекте есть множество вариантов, из которых можно выбирать; можно употреблять их согласно графическому дизайну. Для начинающих мы установим ‘KomikaTextTightRegular’ для основного текста body, как тут:

body{
  background-color:#000;
  background-image:url(../images/bg-body.jpg);
  background-position:center top;
  background-repeat:no-repeat;

  font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif;
  font-size:1em;
}

И можно протестировать результат в браузере:

html css

Шаг 6 – Определение стилей верхней навигации

Теперь обратно к файлу psd. Скройте все, кроме фона закладки, создайте новый слайс для закладки навигации с названием bg-main-navigation и сохраните его для веба как файл PNG.

html css

В файл CSS давайте добавим стили для панели навигации, чтобы добиться требуемого эффекта при проведении мышью. Добавим к действию проведения мышью (hover) фон и создадим похожий стиль для случая a.selected. что касается типографской разметки текста, согласно графике мы применим "KomikaTextItalic" и добавим красивый стиль тени текста, чтобы он лучше выглядел.

#main_navigation{
 float:right;
 margin-top:-18px;
 margin-right:20px;
}

#main_navigation li{
 display:inline;
 width:120px;
}

#main_navigation li a{
 display:block;
 float:left;

 padding-top:7px;
 padding-bottom:8px;
 padding-left:20px;
 padding-right:20px;

 margin-left:5px;

 color:#FFF;
 font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif;
 font-size:18px;
 text-decoration:none;

 text-shadow:2px 2px 2px rgba(0,0,0,.5);

 -webkit-border-top-right-radius: 3px;
 -khtml-border-radius-topright: 3px;
 -moz-border-radius-topright: 3px;
 border-top-right-radius: 3px;
}

#main_navigation li a:hover{
 background-image:url(../images/bg-main-navigation.png);
 background-position:left;
 background-repeat:no-repeat;
}

#main_navigation li a.selected{
 background-image:url(../images/bg-main-navigation.png);
 background-position:left;
 background-repeat:no-repeat;
}

На этой стадии разработки ваша страница должна выглядеть так:

html css

Шаг 7 – Содержимое заголовка

Помимо логотипа и панели навигации, в раздел заголовка header нам понадобится добавить панель поиска и ссылки на социальные сети. Давайте начнем с создания блока контейнера в HTML и добавления следующего div’а внутри header div.

<div id="header-content">
  Top Right
</div>

И несколько необходимых стилей:

#header-content{
  background-color:#036;
  float:right;
  width:440px;
  height:105px;
}

При тестировании в браузере:

html css

Шаг 8 – Панель поиска

Далее мы начнем определять стили области поиска. В основном это форма с полем ввода и кнопкой (см. Шаг 3). Для него добавьте следующий код внутри div’а "header-content":

<div id="search">
 <form>
 <input type="text" class="search_input" value="Looking for something?"/>
 <input type="image" src="images/search-btn.png" />
 </form>
</div>

И стили, чтобы он смотрелся хорошо:


#search{
  text-align:right;
  padding-top:10px;
}

 #search input{
  vertical-align:middle;
 }

 #search .search_input{
  width:160px;
  margin-right:10px;
  padding:6px 10px;

  color:#F2AA00;
  font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif;
  font-size:14px;

 background-color:#280000;
  border:1px solid #7C0000;

  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
 }

Это должно дать в результате:

html css

Шаг 9 – Ссылки на социальные сети

Под div’ом search добавьте div с id social_media. В него можно вставить список ссылок на социальные сети по вашему вкусу. Я использую Набор иконок социальных сетей (Social Media Icon Pack) от Komodo Media.

<div id="social_media">
  Follow us   
 <a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a>
 <a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a>
 <a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a>
 <a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a>
</div>

И в таблицу стилей:

#social_media{
  padding-top:15px;
  text-align:right;
  color:#FFF;
  font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
  font-size:15px;

  vertical-align:middle;

  text-shadow:2px 2px 2px rgba(0,0,0,.5);
}

html css

Шаг 10 – Скользящий баннер

Примемся за баннер. Начнем с загрузки Easy Slider 1.5 и вставим файлы в папку с названием Banner.

В папке библиотеки есть несколько примеров– мы сымитируем 02.html. Переименуйте файл, если нужно, удалите весь ненужный код HTML и замените изображения на несколько изображений-образцов.

Итак, файл HTML для баннера должен быть примерно таким:

<!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">
<head>
<title>Banner</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/easySlider1.5.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("#slider").easySlider();
 });
 </script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
 <div id="content">
 <div id="slider">
 <ul>
 <li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
 <li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li>
 <li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li>
 <li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
 <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
 </ul>
 </div>
 </div>
</div>

А вот CSS:


@charset "utf-8";
 /* Документ CSS */ 
 /* Замена изображений */ 

img{
 border:0px;
}
.graphic, #prevBtn, #nextBtn{
 margin:0;
 padding:0;
 display:block;
 overflow:hidden;
 text-indent:-8000px;
}
/* // Замена изображений */ 
 #container{
 margin:0 auto;
 position:relative;
 text-align:left;
 width:696px;
 background:#fff;
 margin-bottom:2em;
} 

#content{
 position:relative;
} 

/* Easy Slider */
#slider{
 position:relative;
 width:760px!important;
 background:none;
}
 #slider ul, #slider li{
 margin:0;
 padding:0;
 list-style:none;
 background:none;
 }
 #slider li{
 width:760px!important;
 }
 #slider li a{
 background:none;
 }
 #slider li{
 /* 
 Определите ширину и высоту элемента списка (slide) 
 Вся область слайдера настроится согласно указанным здесь параметрам 
 */ 

 width:696px;
 height:241px;
 overflow:hidden;
 }
 #prevBtn, #nextBtn{
 display:block;
 width:30px;
 height:77px;
 position:absolute;
 left:-30px;
 top:71px;
 }
 #nextBtn{
 left:696px;
 }
 #prevBtn a, #nextBtn a{
 display:block;
 width:30px;
 height:77px;
 background:url(../images/btn_prev.gif) no-repeat 0 0;
 }
 #nextBtn a{
 background:url(../images/btn_next.gif) no-repeat 0 0;
 }

 .bubble{
 position:absolute;
 float:right;
 background-color:#036;

 width:250px;
 height:100px;
 margin-top:-240px;
 margin-left:500px;

 color:#FFF;
 }
/* // Easy Slider */

На данный момент у вас должно получиться что-то вроде этого:

html css

Не беспокойтесь, если слайдер немного глючный, через минуту мы это исправим.

Отрегулируйте расположение и замените стрелки-указатели

Разделите на слайсы две стрелки-указателя "Предыдущий" и "Следующий" (prev и next) и сохраните их как файлы PNG в папке с изображениями директории тестирования баннера.

html css

Затем отрегулируйте CSS, чтобы он правильно работал с новыми указателями:

#prevBtn, #nextBtn{
 display:block;
 width:50px;
 height:40px;
 position:absolute;
 left:-50px;
 top:71px;
}
#nextBtn{
 left:630px; /* Это ширина указателя*/ 
}
#prevBtn a{
 display:block;
 width:50px;
 height:40px;
 background:url(../images/btn-prev.png) no-repeat 0 0;
}
#nextBtn a{
 display:block;
 width:50px;
 height:40px;
 background:url(../images/btn-next.png) no-repeat 0 0;
}

Из чего получается:

html css

Размещение

Теперь мы установим расположение, ширину и высоту всех div’ов, связанных с баннером. Мы также приведем в порядок библиотеку JS, чтобы избежать любых проблем относительно дополнительного div’а bubble.

Вот измененный CSS:

#container{
  margin:0 auto;
  width:830px;
  position:relative;
  text-align:left;
  background:#096;
  margin-bottom:2em;
  padding-left:65px;
}
#content{
  position:relative;
}
 /* Easy Slider */
#slider{
  position:relative;
  width:830px;
  overflow:hidden;
  background:none;
  background-color:#09F;
}
#slider ul, #slider li{
  margin:0;
  padding:0;
  list-style:none;
  background:none;
}
#slider li{
  width:830px;
  height:250px;
  overflow:hidden;
}
#slider li a{
  background:none;
}
#prevBtn, #nextBtn{
  display:block;
  width:65px;/*ширина изображения +15 отступ*/ 
  height:40px;
  position:absolute;
  left:-65px;
  top:185px;
}
#nextBtn{
  left:630px;/*Ширина баннера*/ 
}
#prevBtn a{
  display:block;
  width:65px; /*ширина изображения +15 отступ*/ 
  height:40px;
  background:url(../images/btn-prev.png) no-repeat left;
  background-color:#066;
}
#nextBtn a{
  display:block;
  width:65px;/*ширина изображения +15 отступ*/ 
  height:40px;
  background:url(../images/btn-next.png) no-repeat right;
  background-color:#066;
}

.bubble{
  position:absolute;
  float:right;
  background-color:#036;

  width:250px;
  height:100px;
  margin-top:-240px;
  margin-left:500px;

  color:#FFF;
}
/* // Easy Slider */

И результат в браузере:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

html css

Фон речевого пузыря

Теперь разделите на слайсы фон содержимого поста. При видимых только речевых пузырях, в .PSD, начертите слайс под названием "bg-bubble" и сохраните его как файл .png.

html css

Откорректируйте CSS, чтобы добавить фон и соответственно подогнать расположение div’а bubble.

.bubble{
  position:absolute;
  float:right;
  width:295px;
  height:210px;
  margin-top:-255px;
  margin-left:535px;
  background-image:url(../images/bg-bubble.png);
  color:#FFF;
} 

Вот как это выглядит в браузере; удалите все временные фоновые цвета, если хотите.

html css

Содержимое поста

Чтобы закончить раздел баннера, давайте добавим HTML содержимого поста.


<div class="featured_post">
 <h2 class="post_title">Post title</h2>
 <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
 <div class="post_info">
 <span class="author">Posted by <a href="#">Admin</a></span>,
 <span class="date">Apr 14</span>
 </div>
 <div class="post_comments">
 <div class="number"><a href="#">29</a></div>
 <div class="comments"><a href="#">Comments</a></div>
  </div>
</div>

Слияние с файлом основного шаблона

Пора соединить отдельный модуль с нашим основным документом.

Сначала скопируйте папку баннера /js в корневой шаблон, затем добавьте все изображения баннера в папку /images во временной директории.

Далее добавьте внутри тэга <head> файла index.html следующий код:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/easySlider1.5.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 $(document).ready(function(){
 $(&quot;#slider&quot;).easySlider();
 });
&lt;/script&gt;

И добавьте соответственно div’ы баннера в div top_banner.

&lt;!—верхний баннер --&gt; 
&lt;div id=&quot;top_banner&quot;&gt;
 &lt;div class=&quot;banner_container&quot;&gt;
 &lt;div id=&quot;slider&quot;&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/banner/01.jpg&quot; alt=&quot;Preview&quot; /&gt;&lt;/a&gt;
 &lt;div class=&quot;bubble&quot;&gt;
 &lt;div class=&quot;featured_post&quot;&gt;
 &lt;h2 class=&quot;post_title&quot;&gt;Post title&lt;/h2&gt;
 &lt;p class=&quot;post_brief&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam&lt;/p&gt;
 &lt;div class=&quot;post_info&quot;&gt;
 &lt;span class=&quot;author&quot;&gt;Posted by &lt;a href=&quot;#&quot;&gt;Admin&lt;/a&gt;&lt;/span&gt;,
 &lt;span class=&quot;date&quot;&gt;Apr 14&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class=&quot;post_comments&quot;&gt;
 &lt;div class=&quot;number&quot;&gt;&lt;a href=&quot;#&quot;&gt;29&lt;/a&gt;&lt;/div&gt;
 &lt;div class=&quot;comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comments&lt;/a&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/banner/02.jpg&quot; alt=&quot;Preview&quot; /&gt;&lt;/a&gt;&lt;div class=&quot;bubble&quot;&gt;test22&lt;/div&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/banner/03.jpg&quot; alt=&quot;Preview&quot; /&gt;&lt;/a&gt;&lt;div class=&quot;bubble&quot;&gt;test333&lt;/div&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/banner/04.jpg&quot; alt=&quot;Preview&quot; /&gt;&lt;/a&gt;&lt;div class=&quot;bubble&quot;&gt;test4444&lt;/div&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/banner/05.jpg&quot; alt=&quot;Preview&quot; /&gt;&lt;/a&gt;&lt;div class=&quot;bubble&quot;&gt;test55555&lt;/div&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;!—конец верхнего баннера --&gt; 

И завершенный CSS, чтобы баннер заработал

/* верхний баннер */ 
#top_banner{
 float:left;
 width:830px;
 height:250px;
 padding-left:130px;
 padding-top:10px;
 background-image:url(../images/bg-banner.jpg);
 background-position:center top;
 background-repeat:no-repeat;
}

.banner_container{
 float:left;
 width:860px;
 height:250px;

 position:relative;
 text-align:left;
}

/* замещение изображений */ 
 #prevBtn, #nextBtn{
 margin:0;
 padding:0;
 display:block;
 overflow:hidden;
 position:absolute;
 text-indent:-8000px;
}
 /* замещение изображений */ 

 /* Easy Slider */

#slider{
 position:relative;
 width:830px;
 margin-left:100px
 overflow:hidden;
}
#slider ul, #slider li{
 margin:0;
 padding:0;
 list-style:none;
 background:none;
}

#slider li{
 width:830px;
 height:250px;
 overflow:hidden;
}

#slider li img{
 border:1px solid #FFF;
 height:248px;
}

#slider li a{
  background:none;
}

#prevBtn, #nextBtn{
 display:block;
 width:65px;/*img width +15 padding*/
 height:40px;
 position:absolute;
 left:-65px;
 top:185px;
}
#nextBtn{
  left:630px; /*Banner Width*/
}
#prevBtn a{
 display:block;
 width:65px; /*img width +15 padding*/
 height:40px;
 background:url(../images/btn-prev.png) no-repeat left;
}
#nextBtn a{
 display:block;
 width:65px;/*img width +15 padding*/
 height:40px;
 background:url(../images/btn-next.png) no-repeat right;
}

.bubble{
 position:absolute;
 float:right;
 width:295px;
 height:210px;
 margin-top:-255px;
 margin-left:535px;
 background-image:url(../images/bg-bubble.png);
 color:#FFF;
}
/* // Easy Slider */
/* конец верхнего баннера*/ 

Вскоре мы назначим стили содержимому популярного поста. Однако в данный момент у вас должно получиться что-то похожее на следующее изображение:

html css

Шаг 11 – Упаковщик содержимого и фон

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

&lt;div id=&quot;content_wrapper&quot;&gt;
 &lt;div id=&quot;page_content&quot;&gt;
  Page content
 &lt;/div&gt;
&lt;/div&gt;

Затем, для того, чтобы это смотрелось как задумано, мы применим CSS3 для добавления закругленных углов к div’у page_content и загиб страницы, который мы разрезали на слайсы в Шаге 3.

/*содержимое страницы*/ 
 #content{
 float:left;
 width:960px;
 }
#content_wrapper{
 float:left;
 width:910px;
 padding-left:10px;
 padding-right:40px;
 padding-top:10px;
}

#page_content{
 float:left;
 width:100%;
 height:350px;/*temporal*/
 background-color:#FFF;
 background-image:url(../images/content-page-curl.jpg);
 background-position:bottom right;
 background-repeat:no-repeat;

 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;

 -webkit-border-bottom-right-radius: 0px;
 -khtml-border-radius-bottomright: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
}
/*конец содержимого страницы*/ 

В этот момент наша страница должна выглядеть так:

html css

Шаг 12 – Изображение поста и название

Давайте сделаем макет тестового поста.

Согласно проекту нам понадобится квадратное изображение с названием поста и список категорий, размещенный над ним на двух полосках. Давайте сначала займемся HTML.

Создайте div с названием post и поместите его внутри div’а page_content. Затем добавьте в контейнер изображение, название и метаданные.

&lt;div class=&quot;post&quot;&gt;
 &lt;img src=&quot;images/posts/01.jpg&quot; class=&quot;post-image&quot; /&gt;
 &lt;h2&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum Post Title&lt;/a&gt;&lt;/h2&gt;
 &lt;div class=&quot;met ad at a&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comics&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Movies&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Latest Launches&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Lorem Ipsum Category&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

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

.post{
 float:left;
 width:445px;
 height:230px;
}

.post .post-image{
 position:relative;
 top:0px;
 left:0px;
 border:1px solid #FFB800;
}

.post h2{
 position:relative;
 top:-70px;
 left:0px;
 width:300px;

 padding:5px;
 padding-left:10px; 

 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:18px;

 color:#680000;
 background-color:#F2AA00;
}

.post h2 a{
 color:#680000;
 text-decoration:none;
}

.post h2 a:hover{
 color:#FFFFFF;
}

.post .metadata{
 position:relative;
 top:-70px;
 left:0px;
 width:250px;

 padding:5px;
 padding-left:10px;

 font-size:13px;

 background-color:#FFF;
 border:1px solid #FFB800;
}

.post .metadata a{

 color:#000;
 text-decoration:none;
}

.post .metadata a:hover{
 color:#9C0000;
}

У вас сейчас должно быть что-то вроде этого:

html css

Шаг 13 – Фон содержимого поста и расположение

Теперь мы добавим div, содержащий контент поста.

&lt;div class=&quot;post&quot;&gt;
 &lt;img src=&quot;images/posts/01.jpg&quot; class=&quot;post-image&quot; /&gt;
 &lt;h2&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum Post Title&lt;/a&gt;&lt;/h2&gt;
 &lt;div class=&quot;metadata&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comics&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Movies&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Latest Launchs&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Lorem Ipsum Category&lt;/a&gt;&lt;/div&gt;

 &lt;div class=&quot;post_content&quot;&gt;Post Content&lt;/div&gt;
&lt;/div&gt;

Разрежьте на слайсы фоновое изображение для div’а post_content и сохраните его как файл PNG.

html css

Сначала мы установим его позиционирование в файле CSS.

.post .post_content{
  position:relative;
  top:-275px;
  left:230px;

  width:210px;
  height:220px;
 background-image:url(../images/bg-post-content.png);
 background-position:top left;
 background-repeat:no-repeat;
}

Смотрим в браузере:

html css

Шаг 14 – Содержимое поста

Добавим контейнеры для краткого содержания поста, информацию о нем и комментарии:

&lt;div class=&quot;post_content&quot;&gt;
 &lt;div class=&quot;post_brief&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam
 &lt;/div&gt;
 &lt;div class=&quot;post_info&quot;&gt;
 &lt;span class=&quot;author&quot;&gt;Posted by &lt;a href=&quot;#&quot;&gt;Admin&lt;/a&gt;&lt;/span&gt;,
 &lt;span class=&quot;date&quot;&gt;Apr 14&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class=&quot;post_comments&quot;&gt;
 &lt;div class=&quot;number&quot;&gt;&lt;a href=&quot;#&quot;&gt;29&lt;/a&gt;&lt;/div&gt;
 &lt;div class=&quot;comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comments&lt;/a&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

Стили для хорошего внешнего вида:

.post .post_content .post_brief{
 width:150px;
 height:98px;
 overflow:hidden;

 padding-left:35px;
 padding-top:15px;
 text-align:right;
 color:#FFF;
}

.post .post_info{
 width:150px;
 margin-left:35px;
 margin-top:8px;
 padding-top:4px;

 text-align:right;

 border-top:1px solid #787878;

 font-family:Tahoma, Geneva, sans-serif;
 font-size:10px;
 color:#787878;
}

.post .post_info a{
 color:#787878;
 text-decoration:none;
}

.post .post_info a:hover{
 color:#D8D8D8;
 text-decoration:none;
}

.post .post_comments{
 width:50px;
 margin-top:37px;
 margin-left:56px;

 text-align:center;
}

.post .post_comments a{
 color:inherit;
 text-decoration:none;
}

.post .post_comments .number{
 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#FFF;
}

.post .post_comments .comments{
 font-size:12px;
 color:#F2AA00;
}

И с постом мы закончили!

html css

Шаг 15 – Добавьте еще постов

Давайте продолжим и добавим в свой макет еще постов. Продублируйте этот блок столько раз, сколько вам нужно div’ов post. Вам следует избавиться от временной высоты, которую мы присвоили div’у page_content. Если все выполнялось правильно, разметка увеличит свою высоту по мере того, как мы добавим еще постов к своей домашней странице.

html css

Шаг 16 – Содержимое популярного поста

Теперь, когда мы закончили определение стилей основному посту, давайте проделаем это с содержимым популярного поста. Помните, как мы вставляли следующий код в div bubble?


&lt;div class=&quot;featured_post&quot;&gt;
 &lt;h2 class=&quot;post_title&quot;&gt;Post title&lt;/h2&gt;
 &lt;p class=&quot;post_brief&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam&lt;/p&gt;
 &lt;div class=&quot;post_info&quot;&gt;
 &lt;span class=&quot;author&quot;&gt;Posted by &lt;a href=&quot;#&quot;&gt;Admin&lt;/a&gt;&lt;/span&gt;,
 &lt;span class=&quot;date&quot;&gt;Apr 14&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class=&quot;post_comments&quot;&gt;
 &lt;div class=&quot;number&quot;&gt;&lt;a href=&quot;#&quot;&gt;29&lt;/a&gt;&lt;/div&gt;
 &lt;div class=&quot;comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comments&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Добавьте следующий CSS и повторите bubble во всех слайдах нашего вращающегося баннера.

/* Post */

.featured_post .post_title{
 height:29px;
 padding-top:18px;

 text-align:right;
 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:18px;

 color:#680000;
}

.featured_post .post_title a{
 color:#680000;
 text-decoration:none;
}

.featured_post .post_title a:hover{
  color:#FFFFFF;
}

.featured_post .post_brief{
 height:67px;
 padding-left:30px;
 overflow:hidden;
 text-align:right;
 color:#1B1B1B;
}

.featured_post .post_info{
 margin-left:30px;
 text-align:right;
 padding-top:2px;

 font-family:Tahoma, Geneva, sans-serif;
 font-size:10px;
 color:#969696;

 border-top:1px solid #FFC000;
}

.featured_post .post_info a{
 color:#969696;
 text-decoration:none;
}

.featured_post .post_info a:hover{
  color:#1B1B1B;
}

.featured_post .post_comments{
 text-align:center;
 float:right;
 margin-top:20px;
 margin-right:10px;

 width:65px;
 height:40px;
}

.featured_post .post_comments a{
 color:inherit;
 text-decoration:none;
}

.featured_post .post_comments .number{
 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:24px;
 color:#FFF;
}

.featured_post .post_comments .comments{
 font-size:14px;
 color:#F2AA00;
}

 /* // Post */

Я также добавил скользящему изображению край и тень блока:

#slider li img{
 border:1px solid #FFF;
 height:248px; 

 box-shadow: 0px 0px 20px rgba(0,0,0,.5);
 -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
 -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}

Должно выглядеть так:

html css

Шаг 17 – Виджеты нижнего колонтитула

Вместо классической боковой колонки я хотел добавить нижний колонтитул, подготовленный к добавлению виджетов. Добавьте следующий код внутрь div’а footer. Внутри боковой колонки будет другой контейнер, под названием widget, а внутри этого div’а:

название

неупорядоченный список и

div для завернутого уголка

Сначала позаботимся о списке категорий.

&lt;div id=&quot;sidebar&quot;&gt;
 &lt;div class=&quot;widget&quot;&gt;
 &lt;h3&gt;Categories&lt;/h3&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum dolor sit amet&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Consectetur adipisicing elit&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sed do eiusmod tempor&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Incididunt ut labore&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Et dolore magna aliqua&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ut enim ad minim veniam&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dolor sit amet&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Consectetur adipisicing&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div class=&quot;corner&quot;&gt;&amp;amp;nbsp;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;widget&quot;&gt;W2&lt;/div&gt;
 &lt;div class=&quot;widget&quot;&gt;W3&lt;/div&gt;
&lt;/div&gt;

Теперь в файле PSD разрежьте на слайсы угол, назовите его widget-curl и сохраните изображение для веба как файл JPG. Снова разрежьте на слайсы крошечную стрелку рядом с ссылками, назовите ее arrow и сохраните как файл PNG.

html css

И отредактируйте файл CSS как здесь:

/*Footer*/
#footer{
 width:940px;
 padding-left:0px;
 padding-right:10px;
 padding-top:20px;
 height:250px;/* Temporal */
 float:left;

 background-image:url(../images/bg-footer.jpg);
 background-position:top center;
 background-repeat:no-repeat;
}
/*End of Footer*/

/* Footer sidebar */
 #sidebar{
 float:left;
 width:940px;
}
.widget{
 float:left;
 margin-left:10px;
 margin-right:10px;
}
.widget h3{
 color:#F2AA00;

 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:14px;
 padding-bottom:10px;
 padding-left:10px;
}

.widget ul{
 width:200px;
 padding:20px 10px;

 background-color:rgba(26,26,26,.5);
 border:1px solid #252525;

 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.widget .corner{
 background-image:url(../images/widget-curl.jpg);
 background-position:bottom right;
 background-repeat:no-repeat;

 height:30px;
 margin-top:-30px;
 margin-right:-2px;
}

.widget ul li{
 font-size:16px;
 padding-bottom:3px;
 color:#FFF;
}

.widget ul li a{
 padding-left:20px;
 color:#FFF;
 text-decoration:none;
}

.widget ul li a:hover{
 color:#DC0000;
 background-image:url(../images/arrow.png);
 background-position:0px 6px;
 background-repeat:no-repeat;
}
/* //Footer sidebar */

При тестировании в браузере вы должны получить что-то похожее на следующее изображение:

html css

Шаг 18 – Еще виджеты

Повторите код HTML, чтобы добавить второй или даже третий виджет списка. На этот раз мы добавим в нижний колонтитул архивы. Вы теперь можете протестировать разметку, добавив несколько копий div’а widget, чтобы посмотреть, как это выглядит. Область нижнего колонтитула будет оптимально увеличиваться, когда вы станете добавлять еще виджеты.

&lt;!-- Виджет --&gt; 
&lt;div class=&quot;widget&quot;&gt;
 &lt;h3&gt;Archives&lt;/h3&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;January 2011&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;February 2011&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;March 2011&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;May 2011&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;June 2011&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;July 2011&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div class=&quot;corner&quot;&gt;&amp;amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;!—Конец виджета --&gt; 

Вот как это смотрится, когда добавлена архивная секция:

html css

Шаг 19 – Панель закладок

Как пример более сложного виджета, давайте добавим панель закладок с тремя разными видами содержимого в каждой закладке.

Сначала добавьте следующий код HTML в качестве основной разметки: неупорядоченный список для закладок и div’ов с разными id для контента. Я добавляю основной класс с названием tab ко всем div’ам содержимого для того, чтобы избежать дублирования кода в файле CSS.

&lt;div class=&quot;widget&quot;&gt;
 &lt;div id=&quot;tabs&quot;&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=&quot;#tab-1&quot;&gt;Popular Posts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#tab-2&quot;&gt;Recent Posts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#tab-3&quot;&gt;Recent Comments&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div class=&quot;tab&quot; id=&quot;tab-1&quot;&gt;
 &lt;p&gt;Tab1&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&quot;tab&quot; id=&quot;tab-2&quot;&gt;
 &lt;p&gt;Tab2&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&quot;tab&quot; id=&quot;tab-3&quot;&gt;
 &lt;p&gt;Tab3&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;corner&quot;&gt;&amp;amp;nbsp;&lt;/div&gt;
&lt;/div&gt;

Давайте создадим документ JavaScript с названием tabs.js и сохраним его в папку /js. Включите его, добавив эту строку в тэг <head>.

 &lt;script type=&quot;text/javascript&quot; src=&quot;js/tabs.js&quot;&gt;&lt;/script&gt;

Теперь присоедините основную панель закладок jQuery, добавив в файл tabs.js следующий код.

$(document).ready(function(){
 $('#tabs div').hide();
 $('#tabs div:first').show();
 $('#tabs ul li:first').addClass('active');
 $('#tabs ul li a').click(function(){
 $('#tabs ul li').removeClass('active');
 $(this).parent().addClass('active');
 var currentTab = $(this).attr('href');
 $('#tabs div').hide();
 $(currentTab).show();
 return false;
 });
 });

Добавим стили при работающей функции JavaScript, чтобы сделать ее красивой. Сначала нам понадобится разрезать на слайсы маленькую стрелку, указывающую на выбранную закладку. Назовите ее tab-arrow и сохраните как PNG.

html css

Теперь добавьте в файл CSS следующий код:

/* панель закладок нижнего колонтитула*/ 
#tabs{
}

#tabs ul{
 background:none;
 border:0px;
 padding:0px;
 margin:0px;
 width:428px;
 min-height:30px;
 height:30px; 

 -webkit-border-radius: 0px;
 -khtml-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
}

#tabs ul li{
 display:inline;
 float:left;
 text-align:left;
}
#tabs ul .active{
 background-image:url(../images/tab-arrow.png);
 background-position:bottom center;
 background-repeat:no-repeat;
}

#tabs ul .active a{
  color:#F2AA00;
}

#tabs ul li a{
 display:block;
 margin:0px;
 padding:0px;

 color:#5A5A5A;

 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:14px;
 padding-bottom:10px;
 padding-left:10px;
 padding-right:20px;
}

#tabs ul li a:hover{
 background-image:none;
 color:#F2AA00;
}

#tabs .tab{
 width:405px;
 padding:20px 10px;
 min-height:170px;
 /*This is to get the arrow above the tab*/
 margin-top:-6px;

 background-color:rgba(26,26,26,.5);
 border:1px solid #252525;

 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
/* // панель закладок нижнего колонтитула*/ 

Теперь вам нужно заставить работать панель закладок; давайте добавим внутрь содержимое!

html css

Шаг 20 – Содержимое закладок

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

Вставьте в закладку следующий код:

&lt;span class=&quot;item&quot;&gt;
 &lt;h4&gt;&lt;a href=&quot;#&quot;&gt;John Doe&lt;/a&gt;&lt;/h4&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...&lt;/p&gt;
&lt;/span&gt;
&lt;span class=&quot;item&quot;&gt;
 &lt;h4&gt;&lt;a href=&quot;#&quot;&gt;Jane Smith&lt;/a&gt;&lt;/h4&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...&lt;/p&gt;
&lt;/span&gt;
&lt;span class=&quot;item&quot;&gt;
 &lt;h4&gt;&lt;a href=&quot;#&quot;&gt;SpiderHuman&lt;/a&gt;&lt;/h4&gt;
 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...&lt;/p&gt;
&lt;/span&gt;

&lt;span class=&quot;pager&quot;&gt;&lt;a href=&quot;#&quot;&gt;&amp;amp;laquo;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;2&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&amp;amp;raquo;&lt;/a&gt;&lt;/span&gt;

А теперь CSS:

/*Содержимое закладок*/ 
.tab .item{
 float:left;
 padding:5px 10px;

 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}

.tab .item:hover{
 background-color:#000;

 background-image: -moz-linear-gradient(left, #000000, #0D0D0D);
 background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D));
}

.tab .item:hover h4 a{
  color:#F2AA00;
}

.tab .item h4{
 padding-bottom:3px;
 color:#FFFFFF;

 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
 font-size:14px;
}

.tab .item h4 a{
 color:#FFFFFF;
 text-decoration:none;
}

.tab .item h4 a:hover{
  color:#F2AA00;
}

.tab .item p{
 color:#909090;
 font-size:15px;
}

.pager{
 float:right;
 text-align:right;
 padding-right:40px;
}

.pager a{
 color:#4A4848;
 padding-left:5px;
}

.pager a:hover{
  color:#F2AA00;
}

.pager a.active{
  color:#D11300;
}
/* // Содержимое закладок*/ 

Повторите HTML для каждой закладки. Вот как это должно выглядеть:

html css

Шаг 21 – Нижний колонтитул (Футер)

Наконец, добавьте панель навигации нижнего колонтитула и информацию о копирайте:

&lt;div id=&quot;footer_content&quot;&gt;
 &lt;ul id=&quot;footer_nav&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;div id=&quot;copyright&quot;&gt;Tuts+&lt;/div&gt;
&lt;/div&gt;

Теперь линию градиента в 1px из файла PSD, назовите его "bg-footer-line" и сохраните как JPG. Наконец, отредактируйте CSS для установки всего этого.

/* Footer Nav */
#footer_content{
 float:left;
 width:940px;
 height:45px;
 padding:10px;
 margin-top:10px;

 background-image:url(../images/bg-footer-line.jpg);
 background-position:top center;
 background-repeat:no-repeat;

 font-family:Tahoma, Geneva, sans-serif;
 font-size:10px;
 color:#515151;
}

#footer_nav{

}

 #footer_nav li{
 display:inline;
 }

 #footer_nav li:last-child a{
 border-right:none;
 }

 #footer_nav li a{
 color:#515151;
 padding-right:5px;
 border-right:1px solid #292929;
 }

 #footer_nav li a:hover{
 color:#F2AA00;
 }

 #copyright{
 float:right;
 padding-right:30px;
 }
 

html css

Заключение

html css

Вот оно! Мы закончили процесс преобразования. Код, указанный здесь, был протестирован во всех основных браузерах. Если вам нужна совместимость с IE6 и 7, не будет большим трудом написать для них отдельно несколько решений проблемы. Наш проект уже готов к интегрированию в любую CMS в качестве оболочки. Удачи вам и огромное спасибо за прочтение!

Автор: Alvaro Guzman

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

Метки: , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (17)

  1. Отец Виктор

    Огромное спасибо за урок!

  2. Rimma

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

  3. Наталья

    Спасибо! очень хорошие уроки и сайт у вас хороший. Вот только для меня это всё очень сложно, немного не туда залезла:)

  4. Саня

    Сделали бы серию уроков по созданию шаблона для wordpress, от дизайна до верстки(подробно)

  5. Victor

    Всё очень интересно, но пока что очень всё сложно надо сидеть и разбираться.

  6. Николай

    Ну, конечно, нравится. Все толково описано. Спасибо.

  7. Александр

    Спасибо за такой подробный труд.
    Вы говорите, что для любых CMS.
    Неужели при вставке в Joomla, Drupal, WordPress, Taba, не будет никаких особенностей?

  8. Александр

    скорей бы вышел урок для CMS WordPress.

  9. евгений

    Нет слов.Это все для меня очень подходит.
    Где — же я был раньше?

  10. Александр

    Продолжаем учебу!

  11. Игорь

    Увас уроки связаны CMS WordPress, а почему по Joomla нет ведь она тоже очень популярна, и хотелось бы например научиться писать, различные модули и плагины для CMS Joomla.

  12. Горлов Юрий

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

    • Виктор Рог

      Подписаться на Премиум уроки. К примеру на 1 месяц — 240 рублей, или на 3 — 570 рублей.

  13. meloff

    У кого есть доступ на 3ий урок, поделитесь плиз скриншотом веб страницы. Большое спасибо ;)

    • Андрей Кудлай

      Веб-страница аналогична той, что и во втором уроке практически на 100%.

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree