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

Дата публикации: 2011-08-08

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Шаг 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">

<head>

<title>Comicastic</title>

</head>

<body>

Header

</div>

Content

</div>

Footer

</div>

</body>

</html>

И CSS:

@charset &quot;utf-8&quot;;
/* Документ 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;
 }
/* Конец сброса */

@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>

<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 под логотипом.

<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.

Top Right

</div>

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

#header-content{

background-color:#036;

float:right;

width:440px;

height:105px;

}

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

html css

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

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

<form>

</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>

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

#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">

<head>

<title>Banner</title>

$(document).ready(function(){

$("#slider").easySlider();

});

</script>

</head>

<body>

<ul>

</ul>

</div>

А вот CSS:

@charset &quot;utf-8&quot;;
 /* Документ 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 */

@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 */

#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;

}

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

html css

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

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

<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>

<span class="author">Posted by <a href="#">Admin</a></span>,

</div>

<div class="comments"><a href="#">Comments</a></div>

</div>

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

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

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

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

$(document).ready(function(){

$("#slider").easySlider();

});

</script>

И добавьте соответственно 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;

<!—верхний баннер -->

<ul>

<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>

<span class="author">Posted by <a href="#">Admin</a></span>,

</div>

<div class="comments"><a href="#">Comments</a></div>

</div>

</li>

</ul>

</div>

<!—конец верхнего баннера -->

И завершенный 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 */
/* конец верхнего баннера*/

/* верхний баннер */

#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, который будет содержать актуальную информацию.

Page content

</div>

Затем, для того, чтобы это смотрелось как задумано, мы применим 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. Затем добавьте в контейнер изображение, название и метаданные.

<h2><a href="#">Lorem Ipsum Post Title</a></h2>

<div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#">Lorem Ipsum Category</a></div>

</div>

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, содержащий контент поста.

<h2><a href="#">Lorem Ipsum Post Title</a></h2>

<div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lorem Ipsum Category</a></div>

<div class="post_content">Post Content</div>

</div>

Разрежьте на слайсы фоновое изображение для 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 – Содержимое поста

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

<div 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

</div>

<span class="author">Posted by <a href="#">Admin</a></span>,

</div>

<div class="comments"><a href="#">Comments</a></div>

</div>

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

.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?

<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>

<span class="author">Posted by <a href="#">Admin</a></span>,

</div>

<div class="comments"><a href="#">Comments</a></div>

</div>

Добавьте следующий 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 */

/* 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;

<h3>Categories</h3>

<ul>

<li><a href="#">Lorem ipsum dolor sit amet</a></li>

<li><a href="#">Consectetur adipisicing elit</a></li>

<li><a href="#">Sed do eiusmod tempor</a></li>

<li><a href="#">Incididunt ut labore</a></li>

<li><a href="#">Et dolore magna aliqua</a></li>

<li><a href="#">Ut enim ad minim veniam</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Dolor sit amet</a></li>

<li><a href="#">Consectetur adipisicing</a></li>

</ul>

</div>

</div>

Теперь в файле 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 */

/*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, чтобы посмотреть, как это выглядит. Область нижнего колонтитула будет оптимально увеличиваться, когда вы станете добавлять еще виджеты.

<h3>Archives</h3>

<ul>

<li><a href="#">January 2011</a></li>

<li><a href="#">February 2011</a></li>

<li><a href="#">March 2011</a></li>

</ul>

</div>

<!—Конец виджета -->

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

html css

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

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

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

<ul>

<li><a href="#tab-1">Popular Posts</a></li>

<li><a href="#tab-2">Recent Posts</a></li>

<li><a href="#tab-3">Recent Comments</a></li>

</ul>

</div>

</div>

</div>

</div>

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

1	<script type="text/javascript" src="js/tabs.js"></script>

Теперь присоедините основную панель закладок 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;
}
/* // панель закладок нижнего колонтитула*/

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

#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;

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>

</span>

<h4><a href="#">Jane Smith</a></h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>

</span>

<h4><a href="#">SpiderHuman</a></h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>

</span>

<span class="pager"><a href="#">&amp;laquo;</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&amp;raquo;</a></span>

А теперь 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 – Нижний колонтитул (Футер)

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

<li><a href="#">About us</a></li>

<li><a href="#">Contact us</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">Sitemap</a></li>

</ul>

</div>

Теперь линию градиента в 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.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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