Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Html верстка на конкретном примере

#1 kranopodem

kranopodem
  • Пользователь
  • 14 сообщений
  • Репутация: 4
16

Отправлено 18 Ноябрь 2012 - 22:12

Привет всем посетителям данного форума! Я решил взяться за статью связанную с 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 – белый цвет.
Или сделать как в нашем случае, картинкой (хотя её почти не заметно)
Изображение
Для этого пишем:

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.

Если вы хотите сделать ширину сайту для другого разрешения, следуйте данной таблице:
Изображение
Так выглядит 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 - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 0

#2 WarEnek

WarEnek
  • Пользователь
  • 107 сообщений
  • Репутация: 9

Отправлено 19 Ноябрь 2012 - 09:38

Ужасно выглядит. Даже врагу бы такой сайт не сделал.
  • 0

#3 kranopodem

kranopodem
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 4

Отправлено 19 Ноябрь 2012 - 19:53

Извините, но статья называется "Вёрстка шаблона", а не "Как создать самый красивый в мире шаблон"
  • 0

#4 WarEnek

WarEnek
  • Пользователь
  • 107 сообщений
  • Репутация: 9

Отправлено 20 Ноябрь 2012 - 14:00

Извините, но статья называется "Html верстка на конкретном примере", а не "Вёрстка шаблона".
  • 0

#5 swagytagy

swagytagy
  • Пользователь
  • 13 сообщений
  • Репутация: 2

Отправлено 20 Ноябрь 2012 - 14:34

То что расписали молодцы . Но вот поддержу
WarEnek

Могли бы взять любой psd из огромного количества в и-нете .
  • 1

#6 kranopodem

kranopodem
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 4

Отправлено 20 Ноябрь 2012 - 18:48

Извините, но статья называется "Html верстка на конкретном примере", а не "Вёрстка шаблона".

Смысл остается прежним. Внимание в статье уделено верстке, а не созданию красивого дизайна.
swagytagy, Да, в этом я промахнулся. Не додумал немного =)
  • 1

#7 vervekin

vervekin
  • Пользователь
  • 38 сообщений
  • Репутация: 10

Отправлено 20 Ноябрь 2012 - 21:25

Статья полезная. Взяв за основу этот алгоритм, можно создать простую страницу и редактировать ее уже как вздумается. Вот только, если не ошибаюсь, скругления с использованием border-radius не всеми браузерами корректно отображается?
  • 2

#8 kranopodem

kranopodem
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 4

Отправлено 22 Ноябрь 2012 - 19:37

Спасибо за наводку) Проверил в Хроме, Мозиле, Опере - всё работало, а я забыл старые версии и всеми "любимый" IE. Сейчас исправил ошибки с border-radius и ссылками-картинками в IE.
Еще раз спасибо)


  • 1

#9 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 93

Отправлено 28 Ноябрь 2012 - 23:11

border-radius не всеми браузерами корректно отображается

В Осле 7-м и 8-м работать не будет

margin: -43px 16px 0 0;

А это не будет работать в хроме и сафари
Я весь код Ваш не пересматривал, возможно еще есть где то недочеты

Не сочтите за наглость или за что то еще мои исправления. Просто в моем понимании хорошая верстка прежде всего - кроссбраузерная
  • 0

#10 Upgoing

Upgoing
  • Пользователь
  • 21 сообщений
  • Репутация: 4

Отправлено 04 Декабрь 2012 - 22:52

Не думаю что стоит цепляться по поводу простоты шаблона, ведь если бы автор взял за основу какой-нибудь шаблон с наворотами, то статья получилась бы куда длинней. Мне статья понравилась, для новичков, ни черта не смыслящих в нтмл и создании шаблонов это вообще самое то, что нужно.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru