Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 2).
08.08.2011 Рубрика: Обучение \ Сайтостроение
От автора: на прошлой неделе мы узнали, как создать веб-дизайн на тему комиксов. Сегодня примемся за вторую часть: пора разрезать проект-дизайн на слайсы (фрагменты изображения, прим. пер.) и превратить в рабочую разметку 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, вы должны увидеть что-то вроде этого:
Шаг 2 – Основная разметка CSS
Сначала давайте назначим стили структуре разметки.
Мы оборачиваем весь контент в контейнер шириной 960px, а затем устанавливаем высоту внутренних div’ов. Чтобы получить точную высоту каждого div’а, можно применить инструмент Photoshop линейка (Ruler).
Теперь мы разрежем на слайсы фоновые изображения всей страницы и раздела нижнего колонтитула.
Откройте в 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).
Теперь, когда у вас имеются фоновые изображения, давайте во все контейнеры добавим 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;
}
При тестировании в браузере у вас должно получиться нечто вроде изображения внизу.
Шаг 3 – Разделите заголовок и фоновые изображения с содержимым на слайсы
Теперь, когда вы знаете, как разделять на слайсы, давайте сделаем то же самое с изображениями заголовка и фона содержимого (или переднего плана). Для изображений заголовка создайте копию документа "comicastic.psd", скройте все, кроме папки Logo и слоев, связанных с фоном "Поиска" (Search) (плюс я добавляю здесь кнопку поиска после передвижения ее на несколько пикселей вправо). Теперь начертите слайсы вокруг видимых сегментов и назовите их соответственно logo, bg-search и search-button. Сохраните как PNG’и с прозрачными фонами.
Давайте продолжим работу баннером содержимого.
Покажите только папку Background внутри Top Banner, покажите папку Page Curl и слой Page Bg под Page Content, и папку Header Bg, включая общий черный фон. Затем, при этих видимых слоях, начертите два слайса: один для фона баннера под названием bg-banner и другой, маленький, для загиба страницы под названием content-page-curl. Теперь сохраните их оба как JPEG.
Добавьте в свой новый файл 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;
}
Теперь у вас должно получиться что-то подобно этому:
Шаг 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{
}
Шаг 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;
}
И можно протестировать результат в браузере:
Шаг 6 – Определение стилей верхней навигации
Теперь обратно к файлу psd. Скройте все, кроме фона закладки, создайте новый слайс для закладки навигации с названием bg-main-navigation и сохраните его для веба как файл PNG.
В файл 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;
}
На этой стадии разработки ваша страница должна выглядеть так:
Шаг 7 – Содержимое заголовка
Помимо логотипа и панели навигации, в раздел заголовка header нам понадобится добавить панель поиска и ссылки на социальные сети. Давайте начнем с создания блока контейнера в HTML и добавления следующего div’а внутри header div.
<div id="header-content"> Top Right </div>
И несколько необходимых стилей:
#header-content{
background-color:#036;
float:right;
width:440px;
height:105px;
}
При тестировании в браузере:
Шаг 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;
}
Это должно дать в результате:
Шаг 9 – Ссылки на социальные сети
Под div’ом search добавьте div с id social_media. В него можно вставить список ссылок на социальные сети по вашему вкусу. Я использую Набор иконок социальных сетей (Social Media Icon Pack) от Komodo Media.
<div id="social_media"> Follow us <a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a> </div>
И в таблицу стилей:
#social_media{
padding-top:15px;
text-align:right;
color:#FFF;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:15px;
vertical-align:middle;
text-shadow:2px 2px 2px rgba(0,0,0,.5);
}
Шаг 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 */
На данный момент у вас должно получиться что-то вроде этого:
Не беспокойтесь, если слайдер немного глючный, через минуту мы это исправим.
Отрегулируйте расположение и замените стрелки-указатели
Разделите на слайсы две стрелки-указателя "Предыдущий" и "Следующий" (prev и next) и сохраните их как файлы PNG в папке с изображениями директории тестирования баннера.
Затем отрегулируйте 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;
}
Из чего получается:
Размещение
Теперь мы установим расположение, ширину и высоту всех 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 */
И результат в браузере:
Фон речевого пузыря
Теперь разделите на слайсы фон содержимого поста. При видимых только речевых пузырях, в .PSD, начертите слайс под названием "bg-bubble" и сохраните его как файл .png.
Откорректируйте 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 содержимого поста.
<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 */
/* конец верхнего баннера*/
Вскоре мы назначим стили содержимому популярного поста. Однако в данный момент у вас должно получиться что-то похожее на следующее изображение:
Шаг 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;
}
/*конец содержимого страницы*/
В этот момент наша страница должна выглядеть так:
Шаг 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;
}
У вас сейчас должно быть что-то вроде этого:
Шаг 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.
Сначала мы установим его позиционирование в файле 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;
}
Смотрим в браузере:
Шаг 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;
}
И с постом мы закончили!
Шаг 15 – Добавьте еще постов
Давайте продолжим и добавим в свой макет еще постов. Продублируйте этот блок столько раз, сколько вам нужно div’ов post. Вам следует избавиться от временной высоты, которую мы присвоили div’у page_content. Если все выполнялось правильно, разметка увеличит свою высоту по мере того, как мы добавим еще постов к своей домашней странице.
Шаг 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);
}
Должно выглядеть так:
Шаг 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.
И отредактируйте файл 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 */
При тестировании в браузере вы должны получить что-то похожее на следующее изображение:
Шаг 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>
<!—Конец виджета -->
Вот как это смотрится, когда добавлена архивная секция:
Шаг 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. Включите его, добавив эту строку в тэг <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.
Теперь добавьте в файл 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;
}
/* // панель закладок нижнего колонтитула*/
Теперь вам нужно заставить работать панель закладок; давайте добавим внутрь содержимое!
Шаг 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: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 для каждой закладки. Вот как это должно выглядеть:
Шаг 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;
}
Заключение
Вот оно! Мы закончили процесс преобразования. Код, указанный здесь, был протестирован во всех основных браузерах. Если вам нужна совместимость с IE6 и 7, не будет большим трудом написать для них отдельно несколько решений проблемы. Наш проект уже готов к интегрированию в любую CMS в качестве оболочки. Удачи вам и огромное спасибо за прочтение!
Автор: Alvaro Guzman
Источник: http://webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
| Подписаться |
|
Поделиться |
|
Метки: css, psd to html, веб дизайн, как создать сайт
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Похожие записи
Как спроектировать и кодировать гибкий сайт.
Из PSD в HTML, создание дизайна вебсайта шаг за шагом.
Кроссбраузерные отражения, свечения и размытия CSS.
Создаем навигационную панель-липучку с помощью Waypoints от jQuery.
Создаем веб-дизайн на тему комиксов, создание и установка темы для WordPress (Часть 3).
Создаем инновационный сайт-портфолио, применяя альтернативный UI/UX.
Делаем инновационный дизайн сайта-портфолио с альтернативным UI/UX.
Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на Wordpress.
Использование белого (или негативного) пространства в своих проектах.
Частые ошибки в веб-дизайне.
Огромное спасибо за урок!
Нравится или не нравится:
3 
0
Спасибо большое, я только одну третью часть работы провела и боюсь, что не все у меня получится. Очень большая работа и я рада, что нашла такой материал у вас. Буду постигать азы со слайсами. Давно хотела этому поучиться.
Нравится или не нравится:
1 
0
Спасибо! очень хорошие уроки и сайт у вас хороший. Вот только для меня это всё очень сложно, немного не туда залезла:)
Нравится или не нравится:
1 
0
Сделали бы серию уроков по созданию шаблона для wordpress, от дизайна до верстки(подробно)
Нравится или не нравится:
0 
0
Всё очень интересно, но пока что очень всё сложно надо сидеть и разбираться.
Нравится или не нравится:
0 
0
Ну, конечно, нравится. Все толково описано. Спасибо.
Нравится или не нравится:
0 
0
Спасибо за такой подробный труд.
Вы говорите, что для любых CMS.
Неужели при вставке в Joomla, Drupal, WordPress, Taba, не будет никаких особенностей?
Нравится или не нравится:
0 
0
Скоро будет видео урок о том, как эту тему установить на CMS WordPress.
Нравится или не нравится:
0 
0
скорей бы вышел урок для CMS WordPress.
Нравится или не нравится:
0 
0
Скоро будет.
Нравится или не нравится:
0 
0
Нет слов.Это все для меня очень подходит.
Где – же я был раньше?
Нравится или не нравится:
0 
0
Продолжаем учебу!
Нравится или не нравится:
0 
0
Увас уроки связаны CMS WordPress, а почему по Joomla нет ведь она тоже очень популярна, и хотелось бы например научиться писать, различные модули и плагины для CMS Joomla.
Нравится или не нравится:
0 
0
Когда я открыл первый урок, то просто обалдел. В первом уроке я нашел такую основу, которую я не видел не в одном из уроков по сайтостроению. Но на третьем уроке я получил облом в виде доступа по паролю и логину. Ребята у меня такой вопрос: как мне продолжить обучение.
Нравится или не нравится:
0 
0
Подписаться на Премиум уроки. К примеру на 1 месяц – 240 рублей, или на 3 – 570 рублей.
Нравится или не нравится:
0 
0