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

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

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

Детали учебника

Темы: HTML, CSS

Сложность: Средняя

Примерное время выполнения: 4 часа

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

Свою собственную 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 &nbsp;&nbsp;
	<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 следующий код:

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

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

<!—верхний баннер -->  
<div id="top_banner">
    <div class="banner_container">
        <div id="slider">
            <ul>
                <li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a>
                    <div class="bubble">
                        <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>
                    </div>
                </li>
                <li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li>
                <li><a href="#"><img src="images/banner/03.jpg" alt="Preview" /></a><div class="bubble">test333</div></li>
                <li><a href="#"><img src="images/banner/04.jpg" alt="Preview" /></a><div class="bubble">test4444</div></li>
                <li><a href="#"><img src="images/banner/05.jpg" alt="Preview" /></a><div class="bubble">test55555</div></li>
            </ul>
        </div>
    </div>
</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 */
/* конец верхнего баннера*/  

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

html css

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

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

<div id="content_wrapper">
	<div id="page_content">
		Page content
	</div>
</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. Затем добавьте в контейнер изображение, название и метаданные.

<div class="post">
	<img src="images/posts/01.jpg" class="post-image" />
	<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, содержащий контент поста.

<div class="post">
	<img src="images/posts/01.jpg" class="post-image" />
	<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_content">
    <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>
    <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>

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

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


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

Добавьте следующий 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 для завернутого уголка

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

<div id="sidebar">
    <div class="widget">
        <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 class="corner">&nbsp;</div>
    </div>
    <div class="widget">W2</div>
    <div class="widget">W3</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 */

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

html css

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

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

<!-- Виджет -->  
<div class="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>
        <li><a href="#">May 2011</a></li>
        <li><a href="#">June 2011</a></li>
        <li><a href="#">July 2011</a></li>
    </ul>
    <div class="corner">&nbsp;</div>
</div>
<!—Конец виджета -->  

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

html css

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

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

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

<div class="widget">
    <div id="tabs">
        <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 class="tab" id="tab-1">
            <p>Tab1</p>
        </div>
        <div class="tab" id="tab-2">
            <p>Tab2</p>
        </div>
        <div class="tab" id="tab-3">
            <p>Tab3</p>
        </div>
    </div>
    <div class="corner">&nbsp;</div>
</div>

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

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

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

html css

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

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

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

<span class="item">
	<h4><a href="#">John Doe</a></h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>
</span>
<span class="item">
	<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>
<span class="item">
	<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="#">&laquo;</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&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 – Нижний колонтитул (Футер)

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

<div id="footer_content">
	<ul id="footer_nav">
		<li><a href="#">Home</a></li>
		<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 id="copyright">Tuts+</div>
</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.

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

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

Получить

Метки: , , ,

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

Комментарии 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