В этом уроке основываясь на полученных знаниях я покажу как создать простой шаблон. Шаблон будет иметь следующую структуру

Для того чтобы приступить к созданию шаблона качаем заготовку Скачать

Для редактирования файлов я буду использовать NotePad++ поэтому рекомендую установить этот редактор. Скачивать его лучше с официального сайта он бесплатный.

Распакуйте архив zagatovka.zip и откройте файл index.html (с помощью NotePad++).

Первый шаг

Создадим контейнер и «строку» (под строкой я имею ввиду row). Для этого между тегами body пропишем следующий код:

<div class="container">
	<div class="row">
		<div class="col-md-12 head-block"></div>
		<div class="col-md-12 top-menu"></div>
		<div class="col-md-12 top-material"></div>
		<div class="col-md-3 left-sidebar"></div>
		<div class="col-md-9 content"></div>
	</div>
</div>

Для того чтобы увидеть все блоки шаблона нужно добавить в файл со стилями стиль, для каждого блока. Откройте файл css/dopstyle.css и добавьте следующий код

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/
.head-block,.top-menu,.top-material,.left-sidebar,.content{
	background:#ccc;
	margin-bottom:1px;
}
/*ВЫСОТА ШАПКИ*/
.head-block{
	height:150px;
}
/*ВЫСОТА МЕНЮ*/
.top-menu{
	height:30px;
}
/*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/
.top-material{
	height:200px;
}
/*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/
.left-sidebar,.content{
	height:300px;
}
/*ГРАНИЦА У КОНТЕНТА*/
.content{
	border-left:1px solid #fff;
}

Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так

Второй шаг

Желаемая структура шаблона создана теперь остается заполнить все блоки чтобы получить готовый шаблон которым можно пользоваться.

План действий (то что нужно сделать)

• Сделать шапку
• Сделать меню
• Добавить важные новости
• Добавить сайдбар
• Добавить содержание

Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл dopstyle.css

Шапка

Шапку не стал делать сам а скачал с сайта http://nika-sait.ru из раздела шапки для сайта. Шапку переименовал в head.jpg и сохранил в папку images затем добавил css в файл dopstyle.css

.head-block{
	height:250px;
	background:url(../images/head.jpg)left center no-repeat;
}

параметр left нужен для того чтобы выровнять по левому краю параметр center выравнивает по вертикали важно учитывать порядок (если переводить на координаты, то первым параметр отвечает за горизонталь, а второй за вертикаль. Можно задавать даже значения в пикселях). После выполненных операции нужно обновить страницу. После обновления вы увидите шапку.

Меню

Создадим меню в котором будут пункты (цены, услуги, о нас, контакты, товары) для этого в файле index.html заменим код

<div class="col-md-12 top-menu"></div>

на

<div class="col-md-12 top-menu">
	<ul>
		<li><a href="#">Цены</a></li>
		<li><a href="#">Услуги</a></li>
		<li><a href="#">О нас</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">Товары</a></li>
	</ul>
</div>

и добавим стили для меню в файл dopstyle.css

.top-menu{
	background:#daf2fe;
}
.top-menu ul{
	padding-left:0;
	margin-bottom:0;
}
.top-menu li{
	display:inline-block;
	margin-left:10px;
	padding:3px 10px;
}

Обновите страницу и увидите результат. У меня получилось так

Добавить важные новости

В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 3 уроке
Замените код в index.html

<div class="col-md-12 top-material"></div>

на

<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>
<div class="col-md-3 top-material">
	<h3>Шапки для сайта</h3>
	Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/>
</div>

Обновите страницу и увидите результат

Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)
Скачать полушаблон