Для того чтобы сверстать шаблон нам понадобятся 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начала нужно вырезать наш логотип, для этого скройте все остальные слои. Это делается путём выделения нужного нам стиля (Лого), и нажатием правой кнопкой на значок глаза (справа названия слоя).
Откроется меню в котором нужно выбрать "Показать/Спрятать остальные слои"

Когда все слои уберутся, выберите инструмент рамка


Потом нажмите на нём правой кнопкой и выберите "Кадрировать". И сохраняете его для 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 или берём отсюда

Добавляется картинка этим кодом:
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 - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.
