Сумрачный блог Кирилла Панфилова

Сайт с блочной семантической вёрсткой: процесс

Требуется работа в несколько этапов:
1. Создание основного шаблона (X)HTML
2. Создание CSS-файла с основными определениями
3. Вёрстка отдельных семантических блоков на HTML-странице
4. Описание классов и идентификаторов в CSS

1. Создание основного шаблона (X)HTML
Основной шаблон необходим, чтобы сразу забыть обо всей технической информации. Обычно я беру те сайты, которые уже сделал, беру оттуда основу, вычищаю всё остальное. Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Content-Type" content="text/html; 
		charset=windows-1251">
	<title>{ПРИМЕЧАНИЕ:4}</title>
	<link rel="stylesheet" type="text/css" 
		href="/css/css.css" media="all" />
	<link rel="shortcut icon" type="image/x-icon" 
		href="/images/favicon.ico" />
	<link rel="alternate" type="application/rss+xml" 
		title="{ПРИМЕЧАНИЕ:4}" href="/alter/rss.xml">
</head>
<body id="{ПРИМЕЧАНИЕ:6}">
	<div id="general">
		<h1>Заголовок</h1>

		<ul id="navigate">
			<li id="li_1">
				<a id="menu_1" href="/1">первое</a>
			</li>
			<li id="li_2">
				<a id="menu_2" href="/2">второе</a>
			</li>
		</ul>
			
		<div id="content">

		</div>

	</div>	
</body>
</html>

Примечания:
1) Определение типа документа может быть различным. Поскольку очень редко удаётся при одновременной работе над проектом нескольких людей (особенно в разных организациях) отслеживать валидность кода, обходимся доктайпом, который является более вольным, чем стандартное для XHTML описание:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Если же использовать этот доктайп, то <head> необходимо изменить на
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2) Два тэга отвечают за запрет кэширования браузером, особенно если сайт динамически изменяется.
3) Кодировка указана как пример: в случае с англоязычными сайтами логичнее указывать
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
или
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4) Содержимое тэга <title></title> логично генерировать автоматически (так же, как и заголовок ленты RSS) на основе настроек (в обоих случаях) и h1 страницы (про <title />).
5) Пути к CSS-файлам, картинкам и фидам лучше указывать относительно корня виртуального сервера (на что указывает слэш): в этом случае при Clean URLs типа /about, /news у сервера не возникнет недоумений относительно их расположения.
6) Для BODY следует генерировать ID. Удобнее всего это делать на основе URL с некоторыми изменениями. Например, в своих проектах на PHP я с помощью простой строковой замены меняю /web/articles/abcd на id="web_articles_abcd". В этом случае верстальщик получает полный контроль над специфическими элементами для каждой страницы, если они есть.
7) Внутри BODY обязательно должен быть элемент, который отвечает за всё содержимое страницы, а внутри него логично сделать блок для содержимого конкретной страницы (идентифицированный), заголовок h1 и заготовку для меню с помощью маркированного списка (каждый элемент списка можно снабдить ID).

2. Создание CSS-файла с основными определениями
В любом браузере есть встроенные стили, отличающиеся от браузера к браузеру. Чтобы получить максимальный контроль над видом элементов страницы, стоит произвести т.наз. «обнуление» некоторых стилей. Это делается в самом начале основного CSS-файла (в примере выше /css/css.css)

/* General Cleaning */

* {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:8pt;
	font-weight:normal;
	font-style:normal;
	color:#131313;
	}
b, strong, h1, h2, h3 {
	font-weight:bold;
	}
i, em {
	font-style:italic;
	}
table, img {
	border:0;
	}
table {
	border-collapse:collapse;
	}
table td {
	padding:0px;
	vertical-align:top;
	}
table td {
	vertical-align:top;
	}

body {
	background:#EAB476;
	}

a, a:link, a:visited, a:active {
	color:#CC3300;
	text-decoration:none;
	}
a:hover {
	color:#FF6600;
	}

/* Special Elements */

Сначала убираются все отступы, выступы, интервалы между ячейками, нежелательные полужирные и курсивные начертания, неправильные выравнивания, переопределяются основные цвета.
Естественно, что весь текст становится одинакового размера, и кегль h1, h2 и h3 нужно назначать индивидуально исходя из стилистики сайта.
Цвета, размеры, шрифт, соль и перец по вкусу.

3. Вёрстка отдельных семантических блоков на HTML-странице
Обязательная программа выполнена, теперь произвольная. Допустим, дизайн уже нарисован. Следует определить, какие блоки в нём можно выделить только на основании семантики. Обычно это заголовок страницы, логотип, меню, основной содержательный блок, сведения правового характера. Они заключаются в отдельные блоки, которым присваиваются идентификаторы.
Следует использовать тэги, подходящие по семантике: т.е. для заголовков hX, для меню списки (добрая практика: семантика соответствует и удобно верстать), для цитат blockquote и т.п.
Лучше всего верстать, отключив таблицу стилей. В этом случае мы увидим белый (или серый, если мы гордо пользуемся Netscape 4) фон страницы с чёрным текстом и синими или лиловыми ссылками. Но мы чётко видим, что на странице есть, а чего нет. Вся семантика налицо, только оформления нет.
Не уверен насчёт семантики, но всё содержимое страницы в общем случае лучше заключить в один блок с ID, своего рода BODY-2. Это удобно для верстальщика, потому что позволит добиться любого типа вёрстки.
К сожалению, не всегда удаётся придерживаться чисто семантической вёрстки. Во-первых, есть логически выделяемые блоки, во-вторых, есть чрезмерно изобретательный дизайн.
Первая проблема не так страшна. Дело в том, что от страницы к странице повторяются целые комплексы блоков (шапка с логотипом и меню, например), что реализуется программной логикой. Удобно оборачивать такие комплексы в поименованные блоки. После этого на странице оказывается от двух до четырёх логических блоков, в которых есть деление на семантические блоки. Резать и верстальщику, и программисту очень удобно.
Сложнее со второй проблемой. Если дизайн изобилует нефункциональными элементами, которые без введения дополнительной разметки почти невозможно внедрить в вёрстку, приходится вводить несемантические и нелогические элементы. Это зло, потому что засоряет разметку, при редизайне от этих блоков приходится избавляться или display:none, при нарезке программистами в разные шаблоны какой-то элемент может потеряться, а если вёрстка с position:relative... Желательно несемантические элементы включить в семантические (с помощью CSS или лишней разматки) во избежание таких потерь.
Последнее замечание касается таблиц.
Верстальщики-блочники категорично отказываются от использования таблиц, хотя это тоже семантический элемент.
Очень много данных не только удобно, но и нужно представлять в виде таблиц: отчёты, прайсы, вывод результатов поиска по категориям с несколькими параметрами, статистика, сравнение показателей. Если смысл требует табличного представления данных, незачем имитировать их блоками с нагромождением float и clear в классах.

4. Описание классов и идентификаторов в CSS
Заключительный этап, самый долгий, который предполагает определение стилей для всех классов и идентификаторов, тестирование результата во всех браузерах, ругательства на IE и отладку. Ничего интересного, просто CSS и различия в реализации нужно знать.

Яндекс.Метрика