Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Универсальная заготовка для HTML-верстки шаблона сайта

Сегодня мы с вами поговорим об HTML-верстке сайтов с чистого листа. Хотя мы и подразумеваем создание своего собственного шаблона с нуля, но все же можно выделить элементы шаблона, которые повторяются в подавляющем большинстве случаев. Мы покажем и подробно разберем собственную заготовку для начала верстки уникального шаблона, которая позволит оптимизировать работу HTML-верстальщика.

Универсальная заготовка для HTML-верстки шаблона сайта
Содержание статьи

Верстка собственного HTML-шаблона с нуля

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

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

С чего начать и как стать верстальщиком

Если вам нужно сверстать макет, предоставленный дизайнером, готовые шаблоны вас не спасут. Нужно делать все самому и придется хорошенько поработать. Хороший верстальщик, глядя на макет дизайна в Фотошопе, мысленно разбивает его на составные части и представляет в голове их поведение при изменении внешних условий. Например, нужно сразу же определиться с типом HTML-верстки и решить, будет ли она фиксированной, резиновой или адаптивной. Если речь идет о верстке макета интернет-магазина, то совершенно точно в этом шаблоне будет присутствовать каталог товаров, верстать который также нужно уметь, причем несколькими способами.

Если у верстальщика нет за спиной должного опыта и портфолио, состоящего из нескольких десятков сверстанных с нуля шаблонов разных типов, то необходимо подтянуть свои знания с помощью специализированных сайтов. Самым лучшим учебником по HTML, на наш взгляд является сайт HTMLbook.ru. Мало того, что на его страницах вы найдете перечень всех основных тегов, атрибутов и CSS свойств, но еще сможете почитать статьи и новости, непосредственно связанные с версткой сайтов.

Для того, чтобы стать хорошим верстальщиком, нужно обладать всей необходимой базой знаний, которые можно почерпнуть из специализированных сайтов или книг. Однако одних теоретических знаний будет недостаточно. Как и в любом другом деле, для достижения высокого уровня, необходим серьезный опыт и умение применять теорию на практике. Более того, у хорошего верстальщика обязательно должно быть портфолио, иначе кто же ему доверит первый заказ, когда нет примеров выполненных работ. В таком случае, в первое время можно самому ставить перед собой задачи и решать их. Найдите простенький шаблон, внимательно его изучите, посмотрите как ведут себя элементы при смене разрешения экрана, а затем попытайтесь сверстать его собственными силами с нуля.

Чем выше уровень верстальщика, тем быстрее и безошибочнее он справится с поставленной задачей. Если у вас уходит 2 недели на верстку одного макета, то есть над чем поработать. Макеты конечно разные бывают, но обычно на каждую работу не должно уходить более 2-3 дней.

Оптимизация работы HTML-верстальщика

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

Универсальная заготовка для верстки собственных шаблонов

Сайт — это набор файлов, благодаря которым формируется его структура и выполняются необходимые функции. Нас же с вами интересует внешний вид сайта, а не его движок, так как сегодня речь идет о верстке. Поэтому сейчас мы разберем базовую файловую структуру самой простой заготовки для верстки с нуля, которую только можно представить.

Структура файлов и папок с их описанием

Ниже представлена структура простейшей заготовки для верстки с описанием каждой директории и файла. Более того представлено содержимое некоторых файлов, которое актуально для начала работы с макетом:

<ul>
	<li>css;</li>
	<li><ul><li>style.css</li></ul></li>
	<li>i</li>
	<li>.htaccess;</li>
	<li>index.php;</li>
	<li>robots.txt.</li>
</ul>

Мы привели базовую структуру, с которой начинается строительство сайта. Здесь есть все необходимые файлы и папки, которые обеспечат полноценную работу вашего макета перед установкой системы администрирования. А теперь давайте разберем каждый файл и директорию подробно.

Директория css необходима для хранения файлов с расширением CSS. Как вы уже знаете, в этих файлах хранятся данные о стилях элементов макета. В этой директории может содержаться сразу несколько таблиц стилей, но самым главным из них является файл стилей самого шаблона — style.css. Мы используем некоторые стили по умолчанию, что заметно облегчает процесс верстки и не приходится каждый раз прописывать их с нуля, поэтому файл style.css изначально выглядит следующим образом:

* {
	outline: none;
}
html, body {
	margin: 0;
	padding: 0;
	text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font-size: 16px;
	line-height: 1.5em;
	background: #fff;
	font-family: Arial, sans-serif;
}
/*=====================================*/
a {
	color: #008ace;
	text-decoration: underline;
}
a:hover {
	color: #ff0000;
	text-decoration: none;
}
a.dotted {
	text-decoration: none;
	border-bottom: #008ace 1px dotted;
}
a.dotted:hover {
	text-decoration: none;
	border-bottom: none;
}
/*=====================================*/
.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.f-left {
	float: left;
}
.f-right {
	float: right;
}
.clear {
	height: 0;
	clear: both;
}
/*=====================================*/
h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	margin: 0;
	padding: 0.5em 0 1em 0;
}
/*=====================================*/
.container {
	background: #fff;
	margin: 0 auto;
	min-width: 920px;
	max-width: 1120px;
	padding: 0 30px;
}
/*=====================================*/

Директория i (сокращенно от images) создана для хранения графической информации, которая будет использоваться в макете для оформления элементов. Стоит отметить, что чем меньше изображений вы используете в верстке макета, тем будет лучше. Во-первых, сократится число обращений к серверу, во-вторых — уменьшится трафик, что важно для пользователей мобильного интернета, в-третьих — увеличится скорость загрузки страницы. Для сокращения числа используемых изображений, стоит пользоваться CSS-спрайтами, уметь применять CSS-градиенты, там где это нужно и тем самым избегать использования изображений. Но в любом макете есть элементы, которые ничем, кроме как картинкой не сверстаешь, поэтому без этого не обойтись. В таком случае старайтесь оптимизировать изображения под веб и сохранять их в правильном расширении.

Директория js необходима для хранения файлов с расширением JS, содержащих в себе JavaScript. Главный файл по умолчанию — index.js. В подавляющем большинстве случаев ваш сайт должен использовать самый популярный на сегодняшний день JavaScript фреймворк — jQuery, поэтому можно сразу подготовить файл index.js, разместив в нем следующий код:

$(function() {  

});

Сюда вы будете помещать функции, которые будут отрабатывать сразу после готовности DOM-а (Document Object Model).

Файл .htaccess имеет очень большие возможности и предназначен для продвинутой настройки сервера, но в данной статье вдаваться в подробности мы не будем. Используем этот файл для принудительного вывода ошибок (на момент разработки сайта полезно видеть возникающие ошибки и предупреждения, а по ее окончанию вывод ошибок стоит сразу же отключить, т.к. это лишняя брешь в обороне) и для установки кодировки сайта по умолчанию.

AddDefaultCharset UTF-8
php_flag display_errors 1

Файл index.php является основным и загружается первым делом. Почему не index.html, — спросите вы. Все очень просто. В файле с расширением PHP вы сразу сможете разместить некоторые динамичные элементы с использованием самого популярного языка программирования, по большей части ориентированного под разработку веб-сайтов — PHP (Hypertext Preprocessor).

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="Описание страницы.">
	<meta name="keywords" content="ключевые слова через запятую">
	<title>Заголовок страницы</title>	
	<link rel="shortcut icon" href="/i/favicon.png" type="image/png">
	<link rel="stylesheet" href="/css/style.css" />
	<script src="//code.jquery.com/jquery-latest.min.js"></script>
	<script src="/js/index.js"></script>
</head>
<body>
	<div class="container">
		<header>
			<a href="/"><img src="/i/logo.png"></a>
		</header>
		<nav>
			<ul class="main-menu">
				<li><a href="/">Главная</a></li><li><a href="/">О компании</a></li><li><a href="/">Прайс-лист</a></li><li><a href="/">Контакты</a></li>
			</ul>
		</nav>
		<main>
			<article>
				<header>
					<h1>Заголовок страницы</h1>
				</header>
				<div class="main-content">
					Основное содержание страницы
				</div>
				<footer>
					Кнопки соцсетей, дата публикации, комментарии и т.д.
				</footer>
			</article>
		</main>
		<footer>
			Все права защищены &copy; 2015.
		</footer>
	</div>
</body>
</html>

Как видите, кроме всего прочего, мы добавили ссылку на фавиконку в формате PNG, а также использовали HTML5, включив в макет необходимые секционные элементы.

Файл robotx.txt необходим для регулирования индексации вашего сайта поисковыми системами. Подробно об этом мы рассказывали в статье «Правильный robots.txt для сайта». Для начала можно оставить его пустым, но лучше будет сразу указать адрес основного хоста и скрыть от индексации лишние страницы, что позволит ускорить индексацию важных страниц вашего сайта. Более того, можно указать ссылку на файл sitemap.xml, тем самым поспособствовав скорейшему его обнаружению поисковыми системами.

Host: makeasite.ru
User-agent: *
Sitemap: http://makeasite.ru/sitemap.xml

Скачать заготовку для верстки с нуля

А теперь самое время предоставить архив для скачивания. В архиве содержатся все описанные выше файлы и папки. Все что нужно сделать для начала работы — это распаковать содержимое архива в корневую директорию вашего сайта. Обычно она называется www и находится внутри папки, название которой соответствует доменному имени вашего сайта.

Скачать все файлы одним архивом можно тут.



Предыдущая статья:
Копирайтеры и блоггеры — основные сходства и отличия

Читайте также:
Стоимость уникального контента для сайта

Возможно, вам это интересно:
Качественные дизельные генераторы в Хабаровске


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»