Магазин
Для того чтобы сверстать шаблон нам понадобятся 2 программы:
- Adobe Photoshop CS3
- Notepad++ (или любой другой текстовый редактор)
Также нам понадобится макет в формате .psd, с которым мы собственно и будем работать.
Я уже создал простенький макет, можете скачать его и работать параллельно со мной.
Вот готовый сверстанный шаблон с макетом - https://dl.dropbox.c...x1r/Shablon.rar
Для начала создаём папку с шаблоном, я назвал её shablon, и в ней создаём 3 файла и 1 папку:
- index.html – собственно в нём мы и будем верстать наш шаблон;
- 1.html – полная статья. Здесь будет шаблон одной статьи;
- style.css – файл со стилями, то есть в нём мы будем придавать красоту и респектабельный вид нашему сайту;
- И папку img, в которой будут храниться все наши изображения.
Запускаем 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) так - /*Комментарий*/Каждый тег и любое свойство стиля вы можете посмотреть на сайте http://htmlbook.ru. Слева ищите или вбиваете в поиск, например любой тег, и справа появляется все, что вам необходимо узнать о данном теге, с примерами!
- Html теги – это то что пишется в <></>
- Свойства стилей – это то, что мы применяем к стилю, например цвет, рамку, подчеркивание… (пример – color:#fff;)
- Блоком я буду называть тег <div></div>. Например блок "primer" - <div class="primer"></div>
Потом открываем 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 – белый цвет.
Или сделать как в нашем случае, картинкой (хотя её почти не заметно)
Для этого пишем:
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 начинается с # (пример #header), а class начинается с точки (пример - .title)
А в файл стилей пишем:
#container {
margin:0 auto; /*Выровнял шаблон по центру*/
width:1000px; /*Ширина шаблона*/
}
margin:0 auto; - этим я выровнял наш шаблон по центру.
width:1000px; – это ширина нашего шаблона. Я сделал её 1000px, а не 1024 потому что, ширина полосы прокрутки занимает в среднем 24px. Можно сделать 960px, если хотите чтобы сайт был не на всю ширину экрана, но я для примера взял 1000px.
Если вы хотите сделать ширину сайту для другого разрешения, следуйте данной таблице:
Так выглядит 5-ка самых популярных разрешений:
Шапка
В следующем шаге мы создаём нашу шапку (header). Создаём внутри блока "container" - блок "header". Получается следующее:
<div id="container"> <div id="header"> </div> </div>
Теперь научимся мерить высоту и ширину любого объекта, который вам нужен. В фотошопе это делается с помощью инструмента "Прямоугольная область" (горячая клавиша M). С помощью него выделяем объект, который нужно измерить и смотрим справа в окне "Инфо". Ш – ширина. В – высота.
Цвет мы узнаем с помощью пипетки. Выбираем ее слева (горячая клавиша - i) и нажимаем на цвет, который нам нужно узнать. Потом жмем на палитру (слева внизу) и жмем на выбранный нами цвет. Появляется в окно, где внизу справа написан код цвета. Именно он нам и нужен.
Меряем высоту шапки. У меня она получилась 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;В краткой форме отсчет идёт сверху и по часовой стрелке, то есть так:
Это относится не только к padding, но и ко всему, где используется top (верх),right (право),bottom (низ),left (лево).
На данный момент шапка должна выглядеть так:
Шапка. Лого
Заголовок готов. Перейдём к логотипу. Cначала нужно вырезать наш логотип, для этого скройте все остальные слои. Это делается путём выделения нужного нам стиля (Лого), и нажатием правой кнопкой на значок глаза (справа названия слоя).
Откроется меню в котором нужно выбрать "Показать/Спрятать остальные слои"
Когда все слои уберутся, выберите инструмент рамка
(Горячая клавиша “C") и вырежете лого примерно так:
Потом нажмите на нём правой кнопкой и выберите "Кадрировать". И сохраняете его для Web (Alt+Ctrl+Shift+S) в формате PNG-24, то есть с такими установками.
Сохраняете под именем 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;
На этом пока что закончим возню с шапкой, социальные кнопки сделаем потом, а пока перейдём к меню.
Меню
В блок "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; /*Подчеркиваем текст, при наведении на него*/
}
Дааааа, код длинненький, но после каждого пункта, написано, что он означает.
Меню. Поиск
Теперь в этом же меню добавим еще и поисковую форму. Делается это следующим кодом (добавляем в блоке "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; /*Отступ текста слева*/
}
Вот и поиск у нас готов. Меню завершено) Осталось сделать блок статей, сайдбар и футер. Сейчас займемся ими. А пока посмотрим, какой код должен был получиться у вас.
<!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; /*Высота, на время*/
}
Для того чтобы понять почему именно так располагаются цифры в border-radius вам поможет следующая картинка:
Стрелками показано, к каким углам относятся цифры.
Блок статей. Шаблон статьи
Теперь перейдем к созданию шаблона статьи. Блок будет с классом "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; /*Убираем подчеркивание*/
}
Блок статей. Шаблон статьи. Дата и Категории
Заголовок готов, теперь идёт дата с категориями.
Создаём блок "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; /*Жирный шрифт*/
}
Для категории мы ничего не задаём, т.к. там и так всё нормально получается.
Блок статей. Шаблон статьи. Оформление картинки
Следующим делом мы будем оформлять картинку. Но сначала удалим в файле стилей высоту 500px у блока "container".
Находим у #container свойство height:500px; и удаляем его.
Первым делом нам нужно выбрать картинку: вы можете вырезать её, также как мы вырезали лого в самом начале, выбрать свою или взять отсюда.
Вставляем её кодом:
<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; /*Выравниваем картинку по левой стороне, чтобы текст обтекал её справа*/
}
Картинка готова!
Блок статей. Шаблон статьи. Текст
Пора добавлять текст. Добавляем его в блоке с классом "text". Получается вот так:
<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар</div>
В файле стилей пишем следующее:
.post .text{
font-family: Arial; /*Шрифт Arial*/
font-size: 12px; /*Размер шрифта 12px*/
padding: 24px 7px 5px 25px; /*Отступ сверху 24px, справа 7px, снизу 5px и слева 25px*/
}
Получается следующее:
Блок статей. Шаблон статьи. Ссылка "Читать статью"
Теперь добавим ссылку "Читать статью" и применим к ней стили.
Добавляем её перед закрывающим тегом </div>, то есть должно получиться следующее:
<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар <a class="more" href="#">Читать статью</a> </div>
В файл стилей заносим:
.post .text .more{
font-size:16px; /*Размер шрифта 16px*/
font-weight:bold; /*Шрифт жирный*/
color:#0078FF; /*Цвет*/
}
Получилось!
Блок статей. Шаблон статьи. Вторая статья
Теперь добавим ниже еще 1 блок "post", просто скопировав полностью старый и вставив его ниже. Теперь в блоке "content" должно быть два идентичных блока "post". Примерно так:
<div id="content"> <div class="post"> </div> <div class="post"> </div> </div>
Получилось так:
Как-то некрасиво. Нужно добавить стили! Добавим рамку снизу и сделаем отступы!
.post{
overflow:hidden; /* Отображается только область внутри элемента*/
border-bottom:1px solid; /*Рамка снизу*/
margin-bottom:10px; /*Отступ снаружи*/
}
.post:last-child{
border:none; /*Отменяем рамку*/
}
В последнем коде (.post:last-child) мы отменили вывод рамки для последнего элемента(:last-child).
Возьмите на заметку! Если нужно убрать, что-нибудь или добавить к последнему элементу приписывается :last-child, если к первому элементу то :first-child
Всё получилось! И так как нам нужно.
Осталось сделать сайдбар, футер и добавить социальные иконки в шапку.
Сайдбар (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; /*Выравниваем по правому краю*/
}
Получается вот такая ересь:
Но зато всё выровнялось, так как надо. Перейдем к самому блоку в сайдбаре, у которого стиль “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; /*Делаем снизу отступ от блока, чтобы блок ниже не сливался*/
}
Вооо, уже лучше!
Сайдбар. Блок с категориями. Заголовок
Перейдем к заголовку блока. Смотрим как у нас в макете и переделываем в файл стилей. Попробуйте сами без моей помощи. Подскажу только, что размер шрифта 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; /*Выравниваем текст по центру*/
}
Вот это уже другое дело!
Сайдбар. Блок с категориями. Список
Осталось поработать со списком. Сначала каждый пункт списка нужно сделать ссылкой. Вот так:
<ul> <li><a href="#">Машинки</a></li> <li><a href="#">Игрушки</a></li> <li><a href="#">Самолетики</a></li> </ul>
Теперь нужно задать фон, отступы, шрифт и сделать, чтобы вместо точек (слева каждого пункта) была картинка, в нашем случае галочка.
Вырезаем ее, как и раньше, инструментом "Рамка" и называем li.png или берём отсюда
, закидываем её в папку img.Добавляется картинка этим кодом:
list-style-image: url(img/li.png);
Также работаем со стилем ссылки меняем цвет, также можно сделать, чтобы наводя на ссылку, она меняла цвет на оранжевый.
В файле стилей должно получиться следующее:
#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; /*Цвет ссылки при наведении */
}
Готово!
Сайдбар. Блок со счетчиком.
Осталось добавить второй блок под названием Счетчики. Для этого просто скопируйте блок с категориями и вставьте его ниже. Во втором блоке поменяйте заголовок и сотрите списки. Должна получиться вот такая конструкция:
<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 class="count" src="img/count.png" /> и наша картинка появится во всей красе. Посмотрим, что у нас получилось:
<div class="block"> <h2>Счетчики</h2> <img class="count" src="img/count.png" /> </div>
Осталось применить стиль.
#sidebar .count{
padding:20px; /*Отступ со всех сторон */
}
Сайдбар готов!
Осталось совсем немного!
Подвал (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; /*Цвет шрифта при наведении на ссылку */
}
Если вы всё сделали правильно, то футер должен быть внизу целый и невредимый. Вот такой вот:
Социальный блок
Всё! Мучения почти закончились! Осталось сделать лишь социальный блок в шапке.
Вернёмся к блоку "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. Оно работает таким образом:
Подробнее можете почитать на сайте 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. Можете вырезать их из макета.
И вставляем эти картинки в теге <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; /*Отступ*/
}
Вот и всё. Социальный блок готов:
Вот мы и закончили верстку нашего шаблона. Он должен получиться почти такой же, как и в макете, но если есть небольшие отличия, то это не страшно. Мы же только учимся)
Добавление страницы полной статьи.
Нам осталось только добавить страницу полной статьи – 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>
Как мы видим, список отображается не очень красиво:
Поэтому мы добавляем стили к спискам и делаем отступ абзацев:
.post ul, ol{ /*Стиль для списков*/
padding:10px; /*Отступ со всех сторон*/
}
.post li{ /*Стиль для пунктов*/
padding-bottom:5px; /*Отступ снизу*/
}
.post li:first-child{ /*Стиль для первого пункта*/
padding-top:10px; /*Отступ сверху*/
}
.post p { /*Стиль для абзацев*/
padding-bottom:20px; /*Отступ снизу 20px*/
}
Теперь полная статья выглядит так:
А шаблон главной страницы получился вот такой:
Вот мы и закончили верстать шаблон из макета в HTML код.
Надеюсь, всем было понятно, что да как устроено. Если что-то не получается, отписывайте в комментарии. Чем смогу - помогу.
Спасибо, до новых встреч!
При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
