Процесс верстки
После получения всех необходимых материалов верстальщик может приступать к своей работе. Первое, что ему необходимо сделать — составить схему страницы, если у него нет под рукой лейаута и модульной сетки. На такой схеме страница разделяется на прямоугольные области, расположенные параллельно границам макета.
Рисунок 5.6. Спецификация на макете
На следующем этапе составляется схема документа — каркас из HTML, который выделяет блоки модульной сетки. Для этого и требуется схема страницы. Все ключевые блоки помечаются атрибутом class с определенным стандартами команды или самого верстальщика значениями. Например: шапка — header, подвал — footer, боковая панель — sidebar, строка меню — nav и т.д.
В дальнейшем эта структура заполняется элементами в соответствии с макетом, пишется CSS-код. Если страница верстается как статическая, то в нее сразу же может быть вставлен конечный контент: тексты, изображения и т.д. После этого верстка завершается.
Пример верстки
В качестве примера сверстаем главную страницу сайта Василия Пупкина. Модульная сетка и лейаут для нее уже приводились ранее, а макет можно рассмотреть на рис 5.6.
Если взглянуть на модульную сетку и лейаут, то можно выделить пять главных блоков: шапка, панель навигации, область контента, боковая панель и подвал. Это стандартный и простой двухколонник, для которого лучше всего подойдет верстка блоками. При верстке таблицей в данном случае появится излишняя вложенность в дереве документа.
Рисунок 5.7. Макет главной страницы.
Поскольку со схемой страницы мы уже определились, можно приступать к созданию схемы документа. Теперь пора открывать свой любимый редактор или IDE и создавать новый документ XHTML. После этого в шаблон можно добавить структурные блоки.
Для шапки подойдет элемент div. В нем в дальнейшем будут располагаться меню с большими иконками и логотип. Панель навигации с «хлебными крошками» представляет собой список, поэтому для нее подойдет элемент ul. Для остальных блоков используются элементы div. Полученный код приведен в листинге 5.1.
Листинг 5.1. Схема документа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<!-- Шапка -->
<div id="header">
</div>
<!-- Панель с хлебными крошками -->
<ul id="nav"></ul>
<!-- Главная часть -->
<div id="sidebar">
</div>
<div id="content">
</div>
<!-- Подвал-->
<div id="footer"></div>
</body>
</html>
Обратите внимание, что каждому блоку назначено имя класса. Это поможет в дальнейшем не только привязывать оформление, но и легко определять предназначение каждого из блоков.
Теперь заполним элемент head. Введем название для страницы, подключим стили, пару RSS-кналов и добавим описание. Описание страницы располагается в элементах meta с атрибутами name равными keywords (ключевые слова) и description (описание). Они имеют значение для поисковых машин.
Файлы стилей подключаются при помощи традиционных элементов link. Мы подключим общие стили и стили для печати, поэтому в значении атрибута media мы укажем all для общих стилей и print для стилей печати. Также в отдельный файл reset.css вынесем стили для установки значений по умолчанию.
Для подключения RSS также применяется элемент link, в значении атрибута rel которого указывается alternate (альтернативное представление), а в type укажем application/rss+xml. В результате получается код представленный в листинге 5.2.
Листинг 5.2. Подключение стилей и RSS.
<meta name="keywords" content="Василий Пупкин, персональный сайт" />
<meta name="description" content="Персональный сайт Василия Пупкина." />
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="Василий Пупкин" href="/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="Блог Василия Пупкина" href="/blog/rss.xml" />
<!-- Стили -->
<link rel="stylesheet" href="style/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="style/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="style/print.css" type="text/css" media="print" />
Теперь можно создать каталог style и в нем три файла: reset.css, style.css и print.css. Пока они будут пустыми. Также сразу создадим каталог img, в котором будем хранить изображения для элементов страницы.
Главное меню вместе с логотипом должно правильно растягивать по ширине страницы. Для этого нужно использовать таблицу. Это один из тех моментов, где таблица наилучшим образом подходит для верстки.
<!-- Тянущееся меню -->
<table>
<tr>
<td><a href="blog.html" title="Блог"><img src="img/blog.png" alt="Блог" /><br />Блог</a></td>
<td><a href="articles.html" title="Статьи"><img src="img/article.png" alt="Статьи" /><br />Статьи</a></td>
<td><a href="photos.html" title="Фотки"><img src="img/photos.png" alt="Фотки" /><br />Фотки</a></td>
<td id="logo"><img src="img/logo.png" alt="Логотип" style="width: 280px; height: 64px;" /></td>
</tr>
</table>
Добавим меню в боковую колонку. Здесь наилучшим образом подойдет список.
<h3>Разделы</h3>
<ul>
<li><a href="blog.html">Блог</a></li>
<li><a href="articles.html">Статьи</a></li>
<li><a href="photos.html">Фотки</a></li>
</ul>
Все, что осталось сделать — заполнить остальные блоки. В результате получится код, приведенный в листинге 5.3.
Листинг 5.3. Полный код документа.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Василий Пупкин</title>
<meta name="keywords" content="Василий Пупкин, персональный сайт" />
<meta name="description" content="Персональный сайт Василия Пупкина." />
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="Василий Пупкин" href="/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="Блог Василия Пупкина" href="/blog/rss.xml" />
<!-- Стили -->
<link rel="stylesheet" href="style/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="style/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="style/print.css" type="text/css" media="print" />
</head>
<body>
<!-- Шапка -->
<div id="header">
<!-- Тянущееся меню -->
<table>
<tr>
<td><a href="blog.html" title="Блог"><img src="img/blog.png" alt="Блог" /><br />Блог</a></td>
<td><a href="articles.html" title="Статьи"><img src="img/article.png" alt="Статьи" /><br />Статьи</a></td>
<td><a href="photos.html" title="Фотки"><img src="img/photos.png" alt="Фотки" /><br />Фотки</a></td>
<td id="logo"><img src="img/logo.png" alt="Логотип" style="width: 280px; height: 64px;" /></td>
</tr>
</table>
</div>
<!-- Панель с хлебными крошками -->
<ul id="nav"><li>Главная</li></ul>
<!-- Главная часть -->
<div id="sidebar">
<h3>Разделы</h3>
<ul>
<li><a href="blog.html">Блог</a></li>
<li><a href="articles.html">Статьи</a></li>
<li><a href="photos.html">Фотки</a></li>
</ul>
</div>
<div id="content">
<h1>Новое на сайте</h1>
<h2><a href="">Куэстовый авгит в XXI веке</a></h2>
<p class="gray5 date">12 мая 2010 года, 15:56</p>
<p class="dropped_capital">Тальвег, с зачастую загипсованными породами, косвенно формирует каркасный туффит, где присутствуют моренные суглинки днепровского возраста. Область развития мерзлых пород подпитывает огненный пояс, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Для месторождений, связанных с артезианскими бассейнами по литологическому составу водовмещающих пород, известняк утолщен. Поскольку плиты перестали сближаться, отложение занимает межпластовый бентос, что увязывается со структурно-тектонической обстановкой, гидродинамическими условиями и литолого-минералогическим составом пород. Поскольку плиты перестали сближаться, отложение смещает батолит, в то время как значения максимумов изменяются в широких пределах.</p>
<blockquote><p>Термокарст, по которому один блок опускается относительно другого, сдвигает железистый малиньит, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники. Эоловое засоление, используя геологические данные нового типа, стягивает приток, что, однако, не уничтожило доледниковую переуглубленную гидросеть древних долин. Руководящее ископаемое горизонально поднимает батолит, но приводит к загрязнению окружающей среды. Меандр минерализован. Выклинивание опускает меандр, включая и гряды Чернова, Чернышева и др. Закарстованность, а также комплексы фораминифер, известные из валунных суглинков роговской серии, опускает куэстовый биотит, что увязывается со структурно-тектонической обстановкой, гидродинамическими условиями и литолого-минералогическим составом пород.</p></blockquote>
<p>Лава, по которому один блок опускается относительно другого, широко залегает в биотит, включая и гряды Чернова, Чернышева и др. Термокарст анизотропно опускает лавовый поток, так как совершенно однозначно указывает на существование и рост в период оформления палеогеновой поверхности выравнивания. Магнитное наклонение фациально. Отмеченные площадные изменения мощностей магматическая дифференциация незначительна. Палинологическое изучение осадков онежской трансгрессии, имеющей отчетливое межморенное залегание, показало, что плита обычно стягивает аллювий, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий.</p>
<div><a href="blog.html">Еще записи</a></div>
</div>
<!-- Подвал-->
<div id="footer">© 2010 Васлилий Пупкин</div>
</body>
</html>
Но если сейчас открыть полученную страницу в браузере, то она окажется совсем не такой красивой как на макете. Кроме того боковая колонка окажется вовсе не справа, а над основным контентом. Чтобы все это исправить заполним созданные ранее файлы стилей.
Начнем с reset.css. Внесем в него традиционный код для обнуления стилей браузера.
/**
* Обнуляем стили из талицы браузера
*/
* {
margin: 0;
padding: 0;
border: none;
text-align: left;
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
Теперь разберемся с основными стилями. Самый значимый момент — позиционирование боковой колонки справа. Для этого нужно использовать обтекание, которым управляет свойство float. Укажем в качестве значения right, и боковая колонка прижмется к правой стороне. Также зададим пропорции ширины, чтобы привести отображение к надлежащему виду.
Все элементы, которые идут после обтекаемого элемента будут его обтекать, но это может привести к неприятному эффекту — подвал также будет обтекать правую колонку. Поскольку подвал вообще не должен обтекать никакие элементы укажем ему в свойстве clear, которое отвечает за запрет обтекания, значение both (с обеих сторон).
#content {
width: 55%;
}
#sidebar {
/*Прижимается к правому краю, а весь следующий за ней контент ее обтекает*/
float: right;
width: 25%;
}
#footer {
/*Запрещаем обтекание с обоих сторон*/
clear: both;
}
Дополним стили для всех элементов страницы уже известными свойствами и добьемся правильного отображения.
body {
/**
* Устанавливаем базовые параметры шрифта и высоту строки
*/
font: 14px/150% Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #222;
background: #f6f6f6;
min-width: 800px;
}
h1, h2 {
color: #0066b3;
}
h1 {
/*Отступ снизу в одну высоту кегля*/
margin-bottom: 1em;
}
p {
margin-bottom: 1em;
}
a {
color: #0066b3;
/*Без традиционного подчеркивания*/
text-decoration: none;
}
a:visited {
color: #598DB2;
}
a:hover {
color: #7de3ff;
text-decoration: underline;
}
/*Блок с цитатой*/
blockquote {
margin: 1em 0 1em 3em;
padding: 1em 1.5em;
/*Если название гарнитуры состоит из нескольких слов, его заключают в кавычки*/
font-family: Georgia, 'Times New Roman', Times, serif;
background: #eee;
border-left: 3px solid #ffd503;
/*Радиус закругления углов (CSS3)*/
border-radius: 15px;
color: #620;
}
/*Шапка*/
#header {
padding: 20px 0;
background: #ffeebc;
}
#header table {
width: 100%;
}
#header table td {
text-align: center;
}
#header table a {
text-decoration: none;
color: #000;
}
#header table a:hover {
color: #0066b3;
}
#header td img {
height: 64px;
width: 64px;
}
/**
* Логотип.
* Странная последовательность из двух id
* применяется для повышения специфичности
* (правило будет иметь больший приоритет).
*/
#header #logo {
text-align: left;
padding-left: 10%;
width: 35%;
}
/*Навбар*/
#nav {
margin: 0 0 40px 0;
padding-left: 10%;
background: green url(../img/green.gif);
color: #fff;
line-height: 100%;
padding-bottom: 11px;
padding-top: 10px;
}
#nav li {
/*Теперь список будет отображаться как строка*/
display: inline;
}
#nav a {
color: #ffd503;
}
/*Главная часть*/
#content {
width: 55%;
margin-left: 10%;
}
/*Для фоток*/
table.photos {
width: 100%;
min-width: 572px;
}
.photos th {
width: 148px;
padding: 10px 0;
text-align: center;
}
.photos td {
vertical-align: middle;
}
/**
* Хитрый псевдокласс из CSS3.
* В таком виде позволяет сделать полосатую подсветку
*/
.photos tr:nth-child(2n+1) {
background: #ffeecd;
}
.photos img {
height: 128px;
width: 128px;
}
/*Боковая панель*/
#sidebar {
/*Прижимается к правому краю, а весь следующий за ней контент ее обтекает*/
float: right;
width: 25%;
}
/*Подвал*/
#footer {
/*Запрещаем обтекание с обоих сторон*/
clear: both;
margin-top: 30px;
padding: 1em 0px 10px 10%;
font-size: 80%;
border-top: 1px solid #ccc;
}
/**/
.gray5 {
color: #555;
}
/*Буквица*/
.dropped_capital:first-letter {
font-size: 3em;
}
Теперь осталась еще одна деталь. Если пользователю понадобится распечатать страницу, то для него будет интересен в основном контент, а различные меню и украшения лишь отнимут пространство на странице и краску в принтере. Исправим это дописав стили в файл print.css.
/**
* Стиль для печати
*/
body {
color: #000;
background: #fff;
}
/*Скрываем лишние элементы*/
#header, #sidebar {
display: none;
}
#nav, #content, #footer {
margin-left: 0;
padding-left: 0;
}
/*Убираем фон*/
#nav {
background: transparent;
}
#nav, #nav a {
color: #000;
}
#content {
width: 100%;
}
Все лишнее здесь скрывается, и остается только то, что интересно пользователю видеть на бумаге. Поскольку мы указали соответствующее значение в атрибуте media элемента link, данная таблица будет подключаться только при печати и предварительном просмотре.
В результате проделанной работы у нас появился набор из сверстанного документа и трех файлов со стилями. Все полученные файлы и другие материалы вы можете скачать с Google Docs: https://docs.google.com/leaf?id=0B_V8ynCcbwIaZDVhMmI3NTItMWIzMy00NzhiLTk0YjAtNjFiNjNlYjQ1Zjdh&hl=ru
-
JavaScript