Привет всем посетителям данного форума! Я решил взяться за статью связанную с
HTML вёрсткой. Я объясню вам, как из обычного макета сделать полноценный HTML шаблон. Скажу сразу, я не профессионал в этом деле, но все свои знания в статью я точно вложу.
Для того чтобы сверстать шаблон нам понадобятся 2 программы:
- Adobe Photoshop CS3
- Notepad++ (или любой другой текстовый редактор)
Также нам понадобится
макет в формате .psd, с которым мы собственно и будем работать.
Я уже создал простенький макет, можете скачать его и работать параллельно со мной.
Вот готовый сверстанный шаблон с макетом -
https://dl.dropbox.c...x1r/Shablon.rarДля начала создаём папку с шаблоном, я назвал её
shablon, и в ней создаём 3 файла и 1 папку:
- index.html – собственно в нём мы и будем верстать наш шаблон;
- 1.html – полная статья. Здесь будет шаблон одной статьи;
- style.css – файл со стилями, то есть в нём мы будем придавать красоту и респектабельный вид нашему сайту;
- И папку img, в которой будут храниться все наши изображения.
Также нам понадобится файл
border-radius.htc, который тоже нужно закинуть в папку с шаблоном. Он нужен для того, чтобы
круглая рамка правильно отображалась в старых версиях
Internet Explorer.
Запускаем
Notepad ++, открываем в нём два наших файла (
index.html и
style.css) и начинаем верстать! В
Index.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" />
<link href="style.css" rel="stylesheet" type="text/css" /> <!--Подключение стилей -->
<title>Наш Шаблон</title>
</head>
<body>
</body>
</html>
Внутри тега
<head> мы подключили файл стилей(
style.css) кодом:
<link href="style.css" rel="stylesheet" type="text/css" />
Небольшое пояснение:Хочу заметить, что во всей статье я буду использовать комментарии, то есть пояснять код.HTML комментарий (в файле с расширением .html) пишется так - <!--Комментарий -->А CSS комментарий (в style.css) так - /*Комментарий*/- Html теги – это то что пишется в <></>
- Свойства стилей – это то, что мы применяем к стилю, например цвет, рамку, подчеркивание… (пример – color:#fff;)
- Блоком я буду называть тег <div></div>. Например блок "primer" - <div class="primer"></div>
Каждый тег и любое свойство стиля вы можете посмотреть на сайте http://htmlbook.ru. Слева ищите или вбиваете в поиск, например любой тег, и справа появляется все, что вам необходимо узнать о данном теге, с примерами! Потом открываем
style.css и вписываем в него:
/* CSS Reset */
* {
margin:0; padding:0; /* сбрасываем стандартные отступы */
}
a{ /*Стиль для ссылки*/
color:#0078FF;
}
a:hover{ /*Стиль при наведении на ссылку*/
color:#f89200;
}
a img, a img:hover{ /*Если картинка является ссылкой,то*/
border:none; /*Удаляем рамку вокруг картинки(было замечено в Internet Explorer)*/
}
Этим мы
сбрасываем стандартные отступы, чтобы они выглядели во всех браузерах одинаково.
Также сразу задаём стиль для
ссылки и стиль при
наведении (
:hover) на ссылку.
Следющим шагом в
style.css добавляем
фон нашего будущего шаблона. Можно поставить просто белый, это делается кодом:
body {
background:#FFFFFF;
}
background – означает фон, задний план. А
#FFFFFF – белый цвет.
Или сделать как в нашем случае, картинкой (хотя её почти не заметно)
[img]http://s019.radikal.ru/i617/1211/67/0b404dd26d9c.jpg[/img]
Для этого пишем:
body {
background: url(img/light_wool.png) repeat;
}
В
url() мы задаём картинку, которая будет у нас фоном.
Repeat - означает повторить картинку по горизонтали и вертикали.
В теге
<body></body> создаём блок (
div) с id "
container", в котором собственно и будут находиться все наши остальные блоки:
блок статей,
шапка, сайдбар и
подвал.То есть
внутри <body></body> размещаем код:
<div id="container">
</div>
Еще одно небольшое пояснение насчёт
class и
id.
Id я буду использовать в этих блоках:
- Container
- Header
- Content
- Sidebar
- Footer
Я использую Id для того, чтобы легче ориентироваться и не сделать ошибок, так как
id можно использовать 1 раз, а
class неограниченно.
Также придание стиля блоку с
id начинается с # (пример
#header), а class начинается с точки (пример -
.title)
А в файл стилей пишем:
#container {
margin:0 auto; /*Выровнял шаблон по центру*/
width:1000px; /*Ширина шаблона*/
}
margin:0 auto; - этим я выровнял наш шаблон по центру.
width:1000px; – это
ширина нашего шаблона. Я сделал её 1000px, а не 1024 потому что, ширина полосы прокрутки занимает в среднем 24px. Можно сделать 960px, если хотите чтобы сайт был не на всю ширину экрана, но я для примера взял 1000px.
Если вы хотите сделать ширину сайту для другого разрешения, следуйте данной таблице:
[img]http://s017.radikal.ru/i404/1211/c5/6640423fc876.jpg[/img]
Так выглядит
5-ка самых популярных разрешений:
[img]http://s019.radikal.ru/i608/1211/ac/777bf68257f3.jpg[/img]
ШапкаВ следующем шаге мы создаём нашу
шапку (
header). Создаём внутри блока "
container" - блок "
header". Получается следующее:
<div id="container">
<div id="header">
</div>
</div>
Теперь научимся мерить высоту и ширину любого объекта, который вам нужен. В фотошопе это делается с помощью инструмента "
Прямоугольная область" (
горячая клавиша M). С помощью него
выделяем объект, который нужно измерить и смотрим справа в окне
"Инфо".
Ш – ширина.
В – высота.
[img]http://s017.radikal.ru/i415/1211/4b/62cfbb6660fa.jpg[/img]
Цвет мы узнаем с помощью
пипетки. Выбираем ее слева (
горячая клавиша - i) и
нажимаем на цвет, который нам нужно узнать. Потом жмем на
палитру (слева внизу) и жмем на выбранный нами
цвет. Появляется в окно, где внизу справа написан
код цвета. Именно он нам и нужен.
[img]http://i082.radikal.ru/1211/10/81cbe995c4b6.jpg[/img]
Меряем
высоту шапки. У меня она получилась
260px, её
цвет #fff7e0 и по бокам
рамка. В файл стилей заносим эту информацию:
#header{
height:260px; /*Высота шапки*/
border-right: 1px solid; /*Рамка справа*/
border-left: 1px solid; /*Рамка слева*/
background: #fff7e0; /*Фоновый цвет шапки*/
}
Шапка. Название сайта(title)Шапка готова, осталось занести на неё остальную информацию. Начнём с названия сайта. Внутри блока
"header" создаём блок с классом
"title" и вписываем в него название сайта, в нашем случае "
Я название сайта".
<div id="container">
<div id="header">
<div class="title">
Я название сайта
</div>
</div>
</div>
В
файле стилей присваиваем данному классу следующий стиль:
.title{
color: #008AFF; /*Цвет текста*/
font-family: Arial; /* Шрифт текста */
font-size: 34px; /* Размер шрифта */
padding: 15px 0 0 10px; /*Отступ сверху 15px и слева 10px*/
text-decoration: underline; /*Подчеркивание текста*/
}
В свойстве
padding я использовал
краткую форму. Можно было написать так:
padding-top:15px;
padding-left:10px;
В краткой форме отсчет идёт сверху и по часовой стрелке, то есть так:
[img]http://i056.radikal.ru/1211/a4/a4c279e75726.jpg[/img]
Это относится
не только к padding, но и ко всему, где используется
top (верх),
right (право),
bottom (низ),
left (лево).
На данный момент шапка должна выглядеть так:
[img]http://s019.radikal.ru/i617/1211/84/078640df91db.jpg[/img]
Шапка. ЛогоЗаголовок готов. Перейдём к логотипу. Cначала нужно
вырезать наш логотип, для этого скройте все остальные слои. Это делается путём выделения нужного нам стиля (
Лого), и нажатием
правой кнопкой на значок глаза (справа названия слоя).
Откроется меню в котором нужно выбрать "
Показать/Спрятать остальные слои"
[img]http://s47.radikal.ru/i117/1211/a9/72b65977ecf2.jpg[/img]
Когда все слои уберутся, выберите инструмент
рамка [img]http://s51.radikal.ru/i131/1211/cf/40614bf0661f.jpg[/img] (
Горячая клавиша “C") и вырежете лого примерно так:
[img]http://s018.radikal.ru/i523/1211/52/0b243278f928.jpg[/img]
Потом нажмите на нём правой кнопкой и выберите "
Кадрировать". И
сохраняете его для Web (
Alt+Ctrl+Shift+S) в формате PNG-24, то есть с такими установками.
[img]http://i068.radikal.ru/1211/dd/eed933d5d8e9.jpg[/img]
Сохраняете под именем
logo.png. В нашу папку с изображениями
shablon/img. Чтобы вернуться обратно к макету из режима
Кадрирования жмите Ctrl+Alt+Z, пока не появится макет.
Всё готово!
После блока с нашим заголовком вставляем код:
<div class="logo">
<a href="index.html"><img src="img/logo.png" /></a>
</div>
- <a href="index.html"></a> - ссылка на главную страницу нашего сайта.
- <img src="img/logo.png"/> - наше лого
И в
файл стилей закидываем следующий код:
.logo{
margin-top:50px; /*Отступ сверху 50px*/
margin-left:10px; /*Отступ слева 10px*/
}
Этим кодом мы делаем
отступ сверху 50px и
слева 10px. Или как мы уже знаем можно сократить код таким образом:
margin:50px 0 0 10px;
[img]http://s017.radikal.ru/i425/1211/ab/08b8b99910fe.jpg[/img]
На этом пока что закончим возню с шапкой, социальные кнопки сделаем потом, а пока перейдём к меню.
МенюВ блок "
header" больше не лезем, лезем чуть пониже.
Внутри блока "container", ниже блока "header" (не в нём) создаём следующий код:
<div class="menu">
<ul>
<a href="index.html"><li>Главная</li></a>
<a href="#"><li>О сайте</li></a>
</ul>
</div>
- <div>ом мы создаём блок с классом "menu".
- Кодом <ul> мы создаём список, в котором будет наше меню.
- <a href=""> - создает ссылку на главное меню и на страницу "О Сайте".
- <li> - создаются пункты списка, которые и являются пунктами меню.
В файл стилей добавляем следующее:
.menu{
background: #9ddbff; /*фон*/
border: 1px solid #000; /*Рамка, размером 1px, сплошная, цвет черный*/
height:50px; /*Высота 50px */
}
.menu ul{
list-style: none; /*Выключаем маркировку списка*/
}
.menu li {
font-family:Arial; /*Задаём шрифт*/
font-size:20px; /*Размер шрифта*/
color:#000; /*Цвет текста*/
font-weight:bold; /*Делаем текст жирным*/
border-right: 1px solid; /*Справа каждого пункта, создаём сплошную рамку размером в 1px. Цвет стоит по умолчанию - черный*/
float: left; /*Выравниваем списки по левому краю*/
padding: 10px 10px 15px 10px; /*Делаем оступы*/
}
.menu li:hover{
text-decoration: underline; /*Подчеркиваем текст, при наведении на него*/
}
Дааааа, код длинненький, но после каждого пункта, написано, что он означает.
[img]http://s16.radikal.ru/i190/1211/0e/dc39da2936fc.jpg[/img]
Меню. ПоискТеперь в этом же меню добавим еще и
поисковую форму. Делается это следующим кодом (добавляем в блоке "
menu",
перед </div>):
<form method="get" class="search" action="#">
<input name="q" class="form-query" value="" placeholder="Поиск по сайту...">
<input src="img/search.png" type="image" style="vertical-align: bottom; padding: 0;"/>
</form>
В
файл стилей пишем:
.search{
float: right; /*Делаем поиск - справа*/
}
.form-query{
height: 30px; /*Высота блока, где вводим поисковой запрос*/
margin-top: 10px; /*Отступ блока сверху*/
padding-left: 10px; /*Отступ текста слева*/
}
[img]http://i068.radikal.ru/1211/4d/9eb875d209e5.jpg[/img]
Вот и
поиск у нас готов. Меню завершено) Осталось сделать
блок статей, сайдбар и футер. Сейчас займемся ими. А пока посмотрим, какой код должен был получиться у вас.
<!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" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Наш Шаблон</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="title">
Я название сайта
</div>
<div class="logo">
<a href="/"><img src="img/logo.png" /></a>
</div>
</div>
<div class="menu">
<ul>
<a href="/"><li>Главная</li></a>
<a href="/about"><li>О сайте</li></a>
</ul>
<form method="get" id="search" action="#">
<input name="q" id="form-query" value="" placeholder="Поиск по сайту...">
<input src="img/search.png" type="image" style="vertical-align: bottom; padding: 0;"/>
</form>
</div>
</div>
</body>
</html>
Блок статейНачнем делать блок со статьями. Сделаем ему id "
content". Он будет находиться перед последним
</div>, то есть в блоке <
div id="container">. Создаём его, как и все прошлые:
<div id="content">
</div>
Его
ширина -
631px, располагается
слева,
цвет - #ebfbff,
рамка - 1px сплошная черная.
Отступ сверху примерно
33 px.
Также тут появляется новый код
border-radius, то есть
округление углов,
справа сверху на
30px и
справа снизу на
30px. Также можно сделать высоту (
НА ВРЕМЯ! Не забудьте потом её удалить, или лучше можете вообще не создавать), чтобы посмотреть, как будет выглядеть наш блок. В общем, код получается такой:
#content{
width: 631px; /*Ширина*/
float:left; /*Выравниваем по левому краю*/
background: #ebfbff; /*Фон*/
border: 1px solid #000; /*Рамка*/
margin-top:33px; /*Отступ сверху*/
border-radius:0px 30px 30px 0px; /*Округляем рамку*/
-moz-border-radius:0px 30px 30px 0px;/*Округляем рамку для Mozilla*/
-webkit-border-radius:0px 30px 30px 0px; /* Округляем рамку для Safari и Chrome*/
-khtml-border-radius:0px 30px 30px 0px; /* Округляем рамку для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
height:500px; /*Высота, на время*/
}
[img]http://s018.radikal.ru/i518/1211/06/34e618d9f567.jpg[/img]
Для того чтобы понять почему именно так располагаются цифры в
border-radius вам поможет следующая картинка:
[img]http://s019.radikal.ru/i609/1211/91/08d481938168.jpg[/img]
Стрелками показано, к каким углам относятся цифры.
Блок статей. Шаблон статьиТеперь перейдем к созданию шаблона статьи. Блок будет с классом "
post", создаём его в блоке "
content", то есть вот так:
<div id="content">
<div class="post">
</div>
</div>
Блок статей. Шаблон статьи. ЗаголовокВ
блоке "post" создадим заголовок. Он будет в теге
<h1></h1> и являться
ссылкой.
<div id="content">
<div class="post">
<h1><a href="#">Я рыбный заголовок</a></h1>
</div>
</div>
Готово. Осталось привести его в надлежащий вид. Это как вы уже знаете, делается в
файле стилей.
.post h1{
font-size: 25px; /*Размер шрифта*/
font-family:Tahoma; /*Задаём шрифт Tahoma*/
padding:13px; /*Делаем отступ со всех сторон 13 px*/
}
.post h1 a{ /*Стиль для ссылки */
font-weight:normal; /*Делаем не жирный шрифт (По умолчанию у ссылки стоит жирный шрифт)*/
color:#0078ff; /*Задаём цвет*/
}
.post h1 a:hover{ /*Стиль ссылки при наведении*/
color:#ffb638; /*Меняем цвет на оранжевый*/
text-decoration:none; /*Убираем подчеркивание*/
}
[img]http://s019.radikal.ru/i609/1211/3d/722ba54facce.jpg[/img]
Блок статей. Шаблон статьи. Дата и КатегорииЗаголовок готов, теперь идёт дата с категориями.
Создаём
блок "
dc", а в нём два
span’a (span нам нужен только для того, чтобы придать класс тексту) с классами "
date" и "
cat", соответственно, то есть получается вот такой код:
<div class="dc">
<span class="date">30.10.12 |</span>
<span class="cat">Категория: Уха</span>
</div>
В
файл стилей пишем следующее:
.dc{
padding-left:25px; /*Отступ слева 25px*/
padding-bottom: 5px; /*Отступ снизу 5px*/
color: #694000; /*Задаём цвет*/
font-family: Tahoma; /*Задаём шрифт Tahoma*/
font-size: 12px; /*Размер шрифта – 12px*/
border-bottom: 1px solid black; /*Создаём снизу рамку в 1px, сплошную, черного цвета*/
}
.dc .date{ /*Стиль для даты*/
color: #694000; /*Цвет*/
font-weight: bold; /*Жирный шрифт*/
}
Для категории мы ничего не задаём, т.к. там и так всё нормально получается.
[img]http://i022.radikal.ru/1211/f4/2242dd5b3605.jpg[/img]
Блок статей. Шаблон статьи. Оформление картинкиСледующим делом мы будем оформлять картинку. Но сначала
удалим в файле стилей высоту 500px у блока "container".
Находим у
#container свойство
height:500px; и удаляем его.
[img]http://i023.radikal.ru/1211/02/1534c93605c7.jpg[/img]
Первым делом нам нужно выбрать картинку: вы можете
вырезать её, также как мы вырезали лого в самом начале,
выбрать свою или
взять отсюда.[img]http://s43.radikal.ru/i101/1211/85/174123f64067.png[/img]
Вставляем её кодом:
<img class="image" src="img/image.png">
Вместо
image.png вставляйте название своей картинки.
Наш код получается таким:
<div class="post">
<h1><a href="#">Я рыбный заголовок</a></h1>
<div class="dc">
<span class="date">30.10.12 |</span>
<span class="cat">Категория: Уха</span>
</div>[/indent]
<img class="image" src="img/image.png" />
</div>
В файле стилей задаём
ширину, добавляем
рамку и
отступы:
.post .image{
width:210px; /*Ширина*/
border: 1px solid; /*Рамка*/
margin: 25px 20px 15px 15px;/*Отступы сверху 25px, справа 20px, снизу 15px и слева 15px*/
float:left; /*Выравниваем картинку по левой стороне, чтобы текст обтекал её справа*/
}
Картинка готова!
[img]http://i031.radikal.ru/1211/5b/2fc728faf374.jpg[/img]
Блок статей. Шаблон статьи. ТекстПора добавлять текст. Добавляем его в блоке с классом "
text". Получается вот так:
<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар</div>
В
файле стилей пишем следующее:
.post .text{
font-family: Arial; /*Шрифт Arial*/
font-size: 12px; /*Размер шрифта 12px*/
padding: 24px 7px 5px 25px; /*Отступ сверху 24px, справа 7px, снизу 5px и слева 25px*/
}
Получается следующее:
[img]http://s017.radikal.ru/i438/1211/fa/12779b9128fd.jpg[/img]
Блок статей. Шаблон статьи. Ссылка "Читать статью"Теперь добавим ссылку "
Читать статью" и применим к ней стили.
Добавляем её перед закрывающим тегом
</div>, то есть должно получиться следующее:
<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар <a class="more" href="#">Читать статью</a>
</div>
В
файл стилей заносим:
.post .text .more{
font-size:16px; /*Размер шрифта 16px*/
font-weight:bold; /*Шрифт жирный*/
color:#0078FF; /*Цвет*/
}
Получилось!
[img]http://s49.radikal.ru/i123/1211/a6/e6d8ecd591a4.jpg[/img]
Блок статей. Шаблон статьи. Вторая статьяТеперь добавим ниже
еще 1 блок "post", просто
скопировав полностью старый и вставив его ниже. Теперь в блоке
"content" должно быть
два идентичных блока "post". Примерно так:
<div id="content">
<div class="post">
</div>
<div class="post">
</div>
</div>
Получилось так:
[img]http://s42.radikal.ru/i098/1211/04/b836c30ef9e6.jpg[/img]
Как-то некрасиво. Нужно добавить стили! Добавим
рамку снизу и сделаем
отступы!
.post{
overflow:hidden; /* Отображается только область внутри элемента*/
border-bottom:1px solid; /*Рамка снизу*/
margin-bottom:10px; /*Отступ снаружи*/
}
.post:last-child{
border:none; /*Отменяем рамку*/
}
В последнем коде (.post:
last-child) мы
отменили вывод рамки для последнего элемента(
:last-child).
Возьмите на заметку! Если нужно убрать, что-нибудь или добавить к последнему элементу приписывается :last-child, если к первому элементу то :first-child
Всё получилось! И так как нам нужно.
[img]http://i037.radikal.ru/1211/d4/1342d91a490c.jpg[/img]
Осталось сделать сайдбар, футер и добавить социальные иконки в шапку.
Сайдбар (Sidebar)Перейдем к сайдбару. Он будет располагаться справа – значит, в стилях будет
float:right;. Будет список - значит, будет
<ul> и <li>. Название блока в сайдбаре будет в
<h2> и
подчеркнутым.
Ну а дальше разберемся по ситуации.
Сайдбар. Блок с категориями.Создаём блок с идентификатором "
sidebar", а в нём еще один блок с классом “
block" и сразу пихаем в него (в
block) заголовок в
h2 и создаём
список, чтобы потом не мучиться. То есть делаем так:
<div id="sidebar">
<div class="block">
<h2>Категории</h2>
<ul>
<li>Машинки</li>
<li>Игрушки</li>
<li>Самолетики</li>
</ul>
</div>
</div>
Сразу применяем стили:
#sidebar{
margin-top:33px; /*Отступ сверху 33px*/
width:340px; /*Ширина 340px (чуть меньше чем у нас в макете, так лучше выглядит) */
float:right; /*Выравниваем по правому краю*/
}
Получается вот такая ересь:
[img]http://s017.radikal.ru/i420/1211/40/bd8fdc67a6e1.jpg[/img]
Но зато всё выровнялось, так как надо. Перейдем к самому блоку в сайдбаре, у которого стиль “
block". Применяем к нему следующие
стили:
#sidebar .block{
border:1px solid; /*Делаем рамку*/
background:#ccfbff; /*Задаём цвет фона*/
border-radius:29px 29px 0 0; /*Округляем рамку сверху на 29px*/
-moz-border-radius:29px 29px 0 0;/*Округляем рамку для Mozilla*/
-webkit-border-radius:29px 29px 0 0; /* Округляем рамку для Safari и Chrome*/
-khtml-border-radius:29px 29px 0 0; /* Округляем рамку для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
margin-bottom:20px; /*Делаем снизу отступ от блока, чтобы блок ниже не сливался*/
}
[img]http://s017.radikal.ru/i409/1211/27/b82f86cf12cf.jpg[/img]
Вооо, уже лучше!
Сайдбар. Блок с категориями. ЗаголовокПерейдем к
заголовку блока. Смотрим как у нас в макете и переделываем в файл стилей. Попробуйте сами без моей помощи. Подскажу только, что
размер шрифта 24px и
текст по центру выравнивается кодом
text-align:center;Начинайте, а потом сверитесь с нужным кодом:
#sidebar .block h2{
border-bottom:1px solid; /*Делаем рамку*/
font-family:Tahoma; /*Задаём шрифт Tahoma*/
font-weight:normal; /*Делаем шрифт нормальным, а не жирным*/
font-size:24px; /*Размер шрифта 24px*/
text-decoration:underline; /*Делаем подчеркивание*/
padding:5px; /*Отступы со всех стороны в 5px*/
background:#fff3e8; /*Задаём цвет фона*/
border-radius:29px 29px 0 0; /*Округляем фон сверху*/
-moz-border-radius:29px 29px 0 0;/*Округляем для Mozilla*/
-webkit-border-radius:29px 29px 0 0; /* Округляем для Safari и Chrome*/
-khtml-border-radius:29px 29px 0 0; /* Округляем для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
text-align:center; /*Выравниваем текст по центру*/
}
Вот это уже другое дело!
[img]http://i031.radikal.ru/1211/b4/6e0f89ed21d1.jpg[/img]
Сайдбар. Блок с категориями. СписокОсталось поработать со списком. Сначала каждый
пункт списка нужно сделать
ссылкой. Вот так:
<ul>
<li><a href="#">Машинки</a></li>
<li><a href="#">Игрушки</a></li>
<li><a href="#">Самолетики</a></li>
</ul>
Теперь нужно задать
фон,
отступы,
шрифт и сделать, чтобы
вместо точек (слева каждого пункта)
была картинка, в нашем случае
галочка.
Вырезаем ее, как и раньше, инструментом "
Рамка" и называем
li.png или берём отсюда [img]http://s017.radikal.ru/i436/1211/30/99862f84d5d7.png[/img] , закидываем её в папку
img.
Добавляется картинка этим кодом:
list-style-image: url(img/li.png);
Также работаем со стилем ссылки меняем
цвет, также можно сделать, чтобы
наводя на ссылку, она меняла цвет на оранжевый.
[img]http://s019.radikal.ru/i615/1211/c7/0eb2401dfc7a.jpg[/img]
В
файле стилей должно получиться следующее:
#sidebar ul{ /*Стиль для списка*/
font-family:Arial; /*Задаём шрифт Arial*/
padding:15px 0 15px 40px; /*Делаем отступ сверху 15px, справа 0, снизу 15px и слева 40px*/
}
#sidebar ul li{ /*Стиль для пункта списка*/
list-style-image:url(img/li.png); /*Задаём картинку маркировки пункта*/
padding-bottom:5px; /*Делаем нижний отступ 5px от каждого пункта*/
}
#sidebar ul li a{ /*Стиль для ссылки пункта*/
color:#1647ff; /*Цвет ссылки*/
}
#sidebar ul li a:hover{ /*Стиль ссылки пункта при наведенииl*/
color:#f89200; /*Цвет ссылки при наведении */
}
Готово!
[img]http://i031.radikal.ru/1211/08/d410c94c2aff.jpg[/img]
Сайдбар. Блок со счетчиком.Осталось добавить второй блок под названием
Счетчики. Для этого просто
скопируйте блок с категориями и вставьте его ниже. Во втором блоке
поменяйте заголовок и
сотрите списки. Должна получиться вот такая конструкция:
<div id="sidebar">
<div class="block">
<h2>Категории</h2>
<ul>
<li><a href="#">Машинки</a></li>
<li><a href="#">Игрушки</a></li>
<li><a href="#">Самолетики</a></li>
</ul>
</div>
<div class="block">
<h2>Счетчики</h2>
</div>
</div>
Теперь
вырежем картинку счетчика из макета, назовём её
count.png и запихаем в папку
img или возьмём отсюда [img]http://s43.radikal.ru/i101/1211/34/2abc8ebbb22f.png[/img]
Создадим во втором блоке, после заголовка, тег
<img class="count" src="img/count.png" /> и наша картинка появится во всей красе. Посмотрим, что у нас получилось:
<div class="block">
<h2>Счетчики</h2>
<img class="count" src="img/count.png" />
</div>
[img]http://s019.radikal.ru/i619/1211/78/a5bbb651a4b9.jpg[/img]
Осталось применить стиль.
#sidebar .count{
padding:20px; /*Отступ со всех сторон */
}
Сайдбар готов!
[img]http://s60.radikal.ru/i167/1211/ae/102dad883dca.jpg[/img]
Осталось совсем немного!
Подвал (Footer, футер)Перейдём к
footer (подвалу, футеру). С ним не должно возникнуть никаких проблем. Но для того чтобы прилепить подвал к низу, сначала создаём
пустой блок с классом "
empty":
<div class="empty"></div>
Задаём ему
стиль:
.empty{
clear:both;/*Отменяем обтекание слева и справа */
}
Создаём блок с id
"footer", а в нём
span с классом
"copy" (в нём будет копирайт) и
ссылку с классом “
site". То есть должно получиться так:
<div id="footer">
<span class="copy">Copyright 2012 ©</span>
<a class="site" href="#">http://ясайт.ру</a>
</div>
Свойств будет много, но каждое я поясню.
#footer{
margin-top:50px; /*Делаем отступ сверху */
border-radius:20px; /*Округляем все углы */
-moz-border-radius:20px;/*Округляем рамку для Mozilla*/
-webkit-border-radius:20px; /* Округляем рамку для Safari и Chrome*/
-khtml-border-radius:20px; /* Округляем рамку для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
border:1px solid; /*Делаем рамку */
background:#edfffe; /*Задаём фон */
width:1000px; /*Ширина футера */
height:100px; /*Высота футера */
}
#footer .copy{
font-family:Tahoma; /*Задаём шрифт */
Font-size:45px; /*Делаем огромный шрифт */
margin:20px; /*Отступ со всех сторон */
float:left; /*Выравниваем по левому краю */
}
#footer .site{
color:#000fd1; /*Цвет шрифта */
float: right; /*Выравниваем по правому краю */
font-family: Tahoma; /* Задаём шрифт */
font-size: 45px; /* Делаем огромный шрифт */
margin: 20px; /*Отступ со всех сторон */
}
#footer a:hover{
color:#f89200; /*Цвет шрифта при наведении на ссылку */
}
Если вы всё сделали правильно, то футер должен быть внизу целый и невредимый. Вот такой вот:
[img]http://s019.radikal.ru/i608/1211/1f/91af9d9e9413.jpg[/img]
Социальный блокВсё! Мучения почти закончились! Осталось сделать лишь социальный блок в шапке.
Вернёмся к блоку "
header" и между блоком "
title" и "
logo" создаём
div с классом "
social". Вот так:
<div id="header">
<div class="title">
Я название сайта
</div>
<div class="social">
</div>
<div class="logo">
<a href="/"><img src="img/logo.png" /></a>
</div>
</div>
Поработаем с этим блоком в файле стилей.
Сделаем ему
белый фон. Каким свойством задаётся фон??? 10 секунд на размышление...1…2…3..4….5…6…7…8..9…10.! Правильно!
Background.
Зададим
ширину и
высоту. Это вы тоже должны знать. Ширина –
width. Высота –
height.
Где находится блок с социальными кнопками в макете? Правильно,
справа! Значит, задаём свойство
float:right;Мы видим рамку, а это будет свойство
border, эта рамка закруглена, значит, еще будет и
border-radius.
Теперь перейдём к новому свойству, который добавляет
тень блоку – это свойство
box-shadow. Оно работает таким образом:
[img]http://s019.radikal.ru/i619/1211/1b/451e0d9954f5.jpg[/img]
Подробнее можете почитать на сайте
http://htmlbook.ru,как я и говорил в самом начале, там есть описание всех свойств.
Если хотите сделать тень тексту, вместо box-shadow используйте код: text-shadow.
Потом делаем
отступы. Так как нижний отступ у меня не делался, я применил
минусовой отступ от верха (если у вас тоже что-то не получается, ищите другие способы исполнить задуманное), т.е. так:
margin: -43px 16px 0 0;
Так что знайте, если нижний отступ не делается, можно применить этот способ.
Стиль получился таким:
.social{
background:#fff; /*Фон*/
width:215px; /*Ширина*/
height:206px; /*Высота*/
float:right; /*Выравниваем по правому краю*/
border:1px solid; /*Рамка*/
border-radius:20px; /*Округление рамки*/
-moz-border-radius:20px;/*Округляем рамку для Mozilla*/
-webkit-border-radius:20px; /* Округляем рамку для Safari и Chrome*/
-khtml-border-radius:20px; /* Округляем рамку для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
box-shadow:5px 5px 5px #000; /*Тень*/
margin: -43px 16px 0 0; /*Отступы*/
}
Блок должен выглядеть так:
[img]http://s61.radikal.ru/i173/1211/8a/195011af682f.jpg[/img]
Потом берём эти картинки и закидываем их в папку
img. Можете вырезать их из макета.
[img]http://s017.radikal.ru/i408/1211/95/7cf765a2f5c2.png[/img][img]http://s018.radikal.ru/i527/1211/0e/2a3843a05dff.gif[/img][img]http://s018.radikal.ru/i524/1211/06/ef6ad9729120.png[/img][img]http://s017.radikal.ru/i434/1211/65/fd70c204e21f.png[/img]
И вставляем эти картинки в теге
<img src="путь к картинке"> и делаем их ссылкой
<a href="#">Должно получиться так:
<div class="social">
<a href="#"><img src="img/facebook.png" /></a>
<a href="#"><img src="img/rss.gif" /></a>
<a href="#"><img src="img/twitter.png" /></a>
<a href="#"><img src="img/vk.png" /></a>
</div>
Не обращайте внимания, что получилось некрасиво, ведь мы еще не написали стиль.
А
стиль следующий:
.social img{
width:64px; /*Ширина картинки*/
padding:20px; /*Отступ*/
}
Вот и всё. Социальный блок готов:
[img]http://s16.radikal.ru/i190/1211/9a/dd5cbf9573e4.jpg[/img]
Вот мы и закончили верстку нашего шаблона. Он должен получиться почти такой же, как и в макете, но если есть небольшие отличия, то это не страшно. Мы же только учимся)
Добавление страницы полной статьи.Нам осталось только добавить страницу полной статьи –
1.html. Для этого
копируем весь код из файла index.html и вставляем его в 1.html. Удаляем из блока "
content" блок "
post"(любой) и добавляем больше текста в блок "
text". В блоке "
content" у меня получился следующий код:
<div id="content">
<div class="post">
<h1><a href="1.html">Я рыбный заголовок</a></h1>
<div class="dc">
<span class="date">30.10.12 |</span>
<span class="cat">Категория: Уха</span>
</div>
<img class="image" src="img/image.png" />
<div class="text">Версии происхождения названия блюда в основном сводятся к следующей: слово
«уха» происходит от древнего индоевропейского корня *jus, означавшему «отвар» (
«жидкость»). От данного корня образовалось слово jucha, которое, утратив начальны
й j, дало слово «уха». Подтверждением тому служат примеры в других языках, берущ
ие своё начало от корня jusa. В украинском и белорусском языках — юшка, тот же к
орень имеют древнепрусское слово juse (суп с мясом), санскритское yus- (бульон),
латинское ius (бульон, сок), сербо-хорватское јуха(похлёбка), словенское jucha (
суп), чешское jicha (соус).</p>
<p>Уха является одним из древнейших блюд русской кухни, но на момент возникновения (а его установить не
возможно), оно не являлось характерным и уникальным блюдом русской кухни, каким является сейчас.
По известным источникам ухой в XI—XII веках называли любой суп, из чего бы он сделан не был; более
того, некоторые виды блюда представляли собой что-то подобное современному компоту.</p>
<ul>
Разновидности ухи по технологии
<li>Сборная уха</li>
<li>Опеканная уха</li>
<li>Вялая уха</li>
<li>Пластовая уха</li>
<li>Сладкая уха</li>
<li>Уха с раками</li>
</ul>
</div>
</div>
</div>
Как мы видим, список отображается не очень красиво:
[img]http://s018.radikal.ru/i502/1211/c3/24def443e7bf.jpg[/img]
Поэтому мы добавляем
стили к спискам и делаем
отступ абзацев:
.post ul, ol{ /*Стиль для списков*/
padding:10px; /*Отступ со всех сторон*/
}
.post li{ /*Стиль для пунктов*/
padding-bottom:5px; /*Отступ снизу*/
}
.post li:first-child{ /*Стиль для первого пункта*/
padding-top:10px; /*Отступ сверху*/
}
.post p { /*Стиль для абзацев*/
padding-bottom:20px; /*Отступ снизу 20px*/
}
Теперь полная статья выглядит так:
[img]http://s53.radikal.ru/i140/1211/9f/3ba20d6e0863.jpg[/img]
А шаблон главной страницы получился вот такой:
[img]http://s018.radikal.ru/i524/1211/0f/b6ea10f617b0.jpg[/img]
Вот мы и
закончили верстать шаблон из макета в HTML код.
Надеюсь, всем было понятно, что да как устроено. Если что-то не получается, отписывайте в комментарии. Чем смогу - помогу.
Спасибо, до новых встреч!
При поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]