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

2

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

Перед початком

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

Так як це підручник не для початківців, я пропущу деякі базові пояснення — мається на увазі, що у вас вже є робочі знання HTML і CSS, а також невелике вміння розрізати зображення в photoshop’е на слайсы.

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

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

Крок 1 – Розмітка HTML

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

/images

/js

/style

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

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

Для цього кроку застосовується наступний код HTML:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Comicastic</title>
<link href=»style/default.css» rel=»stylesheet» type=»text/css» />
</head>
<body>
<div id=»page»>
<div id=»header»>
Header
</div>
<div id=»content»>
Content
</div>
<div id=»footer»>
Footer
</div>
</div>
</body>
</html>

І CSS:

@charset «utf-8»;
/* Документ CSS */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Ліцензія: відсутній (відкритий домен)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a abbr, acronym, address, big, cite code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, назва, 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) > «Зберегти для web і пристроїв» (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.jpeg» width=»340″ height=»135″ alt=»Comicastic» /></a>
</div>
</div>
<div id=»content»>
<div id=»top_banner»>Top Banner</div>
</div>

Код CSS, щоб вони виглядали, як належить:

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

Тепер у вас повинно вийти щось подібне до цього:

html css

Крок 4 – Верхня навігація

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

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

Найскладнішою роботою з цим div му буде його розташування. Ми змусимо його плавати (float) праворуч і пограємо з відступом, щоб встановити його на потрібне місце. Додайте наступний CSS:

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

html css

Крок 5 – Заміщення шрифту

Так як я абсолютно не збираюся застосовувати в цьому проекті «Comic Sans», ми застосуємо більш цікавий вигляд шрифту. Щоб він класно виглядав в сучасних браузерах, скористаємося достоїнствами CSS3.

По-перше, скачаємо комплекти шрифтів CSS «Komika Title» і «Komika Text» і покладемо їх у нову папку під назвою /fonts. У кожному наборі є група файлів зі шрифтами і файл .CSS, який ми імпортуємо в свій документ default.css, як тут:

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

Коли шрифти імпортовані, ми можемо застосовувати їх на своєму сайті де завгодно. У кожному комплекті є безліч варіантів, з яких можна вибирати; можна вживати їх відповідно до графічного дизайну. Для початківців ми встановимо ‘KomikaTextTightRegular’ для основного тексту body, як тут:

body{
background-color:#000;
background-image:url(../images/bg-body.jpg);
background-position:center top;
background-repeat:no-repeat;
font-family:’KomikaTextTightRegular’, Arial, Helvetica, sans-serif;
font-size:1em;
}

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

html css

Крок 6 – Визначення стилів верхньої навігації

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

html css

Файл CSS давайте додамо стилі панелі навігації, щоб добитися необхідного ефекту при проведенні мишею. Додамо до дії проведення мишею (hover) фон і створимо схожий стиль для випадку a.selected. що стосується друкарської розмітки тексту, згідно графіку ми застосуємо «KomikaTextItalic» і додамо гарний стиль тіні тексту, щоб він краще виглядав.

#main_navigation{
float:right;
margin-top:-18px;
margin-right:20px;
}
#main_navigation li{
display:inline;
width:120px;
}
#main_navigation li a{
display:block;
float:left;
padding-top:7px;
padding-bottom:8px;
padding-left:20px;
padding-right:20px;
margin-left:5px;
color:#FFF;
font-family:’KomikaTextItalic’, Arial, Helvetica, sans-serif;
font-size:18px;
text-decoration:none;
text-shadow:2px 2px 2px rgba(0,0,0,.5);
-webkit-border-top-right-radius: 3px;
-khtml-border-radius-topright: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
}
#main_navigation li a:hover{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
background-repeat:no-repeat;
}
#main_navigation li a.selected{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
background-repeat:no-repeat;
}

На цій стадії розробки ваша сторінка повинна виглядати так:

html css

Крок 7 – Вміст заголовка

Крім логотипу і панелі навігації, в розділ заголовка header нам знадобиться додати панель пошуку та посилання на соціальні мережі. Давайте почнемо з створення блоку контейнера в HTML і додавання наступного div а всередині header div.

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

І кілька необхідних стилів:

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

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

html css

Крок 8 – Панель пошуку

Далі ми почнемо визначати стилі області пошуку. В основному це форма з полем вводу і кнопкою (див. Крок 3). Для нього додайте наступний код всередині div » а «header-content»:

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

Та стилі, щоб він виглядав добре:

#search{
text-align:right;
padding-top:10px;
}
#search input{
vertical-align:middle;
}
#search .search_input{
width:160px;
margin-right:10px;
padding:6px 10px;
color:#F2AA00;
font-family:’KomikaTextTightRegular’,Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#280000;
border:1px solid #7C0000;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Це повинно дати в результаті:

html css

Крок 9 – Посилання на соціальні мережі

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

<div id=»social_media»>
Follow us   
<a href=»#»><img src=»images/icons/twitter_16.jpeg» width=»16″ height=»16″ alt=»Twitter» /></a>
<a href=»#»><img src=»images/icons/facebook_16.jpeg» width=»16″ height=»16″ alt=»Twitter» /></a>
<a href=»#»><img src=»images/icons/technorati_16.jpeg» width=»16″ height=»16″ alt=»Twitter» /></a>
<a href=»#»><img src=»images/icons/rss_16.jpeg» 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 тимчасової директорії.

Далі додайте всередині тега файлу 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 з назвою вміст_сторінки, який буде містити актуальну інформацію.

<div id=»content_wrapper»>
<div id=»вміст_сторінки»>
Page content
</div>
</div>

Потім, для того, щоб це виглядало як задумано, ми застосуємо CSS3 для додавання закруглених кутів до div у вміст_сторінки і загин сторінки, який ми розрізали на слайсы в Кроці 3.

/*вміст сторінки*/
#content{
float:left;
width:960px;
}
#content_wrapper{
float:left;
width:910px;
padding-left:10px;
padding-right:40px;
padding-top:10px;
}
#вміст_сторінки{
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 а вміст_сторінки. Потім додайте в контейнер зображення, назву та метадані.

<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=»#»>Фільми</a>, <a href=»#»>Latest Launches</a>, <a href=»#»>Lorem Ipsum Category</a></div>
</div>

CSS для цієї частини хитрий, так як кожен пост повинен бути шириною 50% відносно контейнера вміст_сторінки, плюс смужки повинні знаходитися перед картинкою. Щоб все вдалося, нам доведеться пограти з відносним позиціонуванням і негативними відступами.

.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=»#»>Фільми</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 у вміст_сторінки. Якщо все виконувалось правильно, розмітка збільшить свою висоту по мірі того, як ми додамо ще постів на своїй домашній сторінці.

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

Давайте створимо документ з назвою JavaScript tabs.js і збережемо його в папку /js. Увімкніть його, додавши цю рядок в тег .

<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=»#»>«</a><a href=»#»>1</a><a href=»#» class=»active»>2</a><a href=»#»>3</a><a href=»#»>»</a></span>

А тепер CSS:

/*Вміст закладок*/
.tab .item{
float:left;
padding:10px 5px;
-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 в якості оболонки. Удачі вам і величезне спасибі за прочитання!