Каждый блок со ссылкой и её описанием обрамлён тегом <section>, сама ссылка располагается внутри тега <h1>, который в свою очередь находится внутри <header>. Такая логика может показаться странной — зачем нам <header>, когда на странице он уже есть, и к чему столько тегов <h1>? В HTML5 своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов <h1>...<h6>. Соответственно,<h1> задавал заголовок страницы, <h2> и <h3> подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один <h1>. Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги <article> и <section> создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег <h1>.
<section> <header><h1><a href="assumption.html">Допущения</a></h1></header> <p>Для упрощения расчетов некоторые реальные величины заменяются их приближенным аналогом, которые хотя и влияют на точность результата, находятся в пределах допустимой погрешности вычисления.</p></section><section> <header><h1><a href="simple-iteration.html">Метод простых итераций</a></h1></header> <p>Самый простой метод поиска льва основанный на переборе.</p></section>
В стилях устанавливаем цвет ссылок через свойство color, цвет ссылок при наведении на них курсора мыши с помощью псевдокласса :hover и параметры заголовка <h1>.
a { color: #1b75bc; /* Цвет ссылок */}a:hover { color: #d6562b; /* Цвет ссылок при наведении */}a img {border: none; /* Прячем границу вокруг изображений-ссылок */}section h1 { font-size: 1.5em; /* Размер текста */ font-weight: normal; /* Нормальное начертание */ margin-bottom: 0; /* Отступ снизу */}
Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта (пример 6.19).
Код HTML завершён, но стилевой файл lion.css следует отредактировать с учётом новых тегов и указать, что теги <header>, <section>, <footer>, <aside>, <nav>, <article> являются блочными. Это необходимо для корректного применения к ним стилей в старых браузерах.
Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи.
Двухколоночный макет
Это самый простой из существующих макетов после одноколоночного, неудивительно, что для его построения существует несколько способов. Воспользуемся сочетанием свойств float и margin-right, которые уже неоднократно упоминались в книге. Для правой колонки необходимо установить float со значением right, а для левой margin-right со значением равным ширине правой колонке и расстоянию между колонками. В коде при этом плавающий элемент идёт первым, поэтому вначале следует правая колонка.
<aside>Правая колонка</aside>
<article>Левая колонка</article>
В стиле для элемента <aside> указываем его ширину (width) и включаем выравнивание по правому краю с помощью float. Для элемента <article> только указываем margin-right.
aside { /* Правая колонка */
width: 200px; /* Ширина правой колонки */
float: right; /* Обтекание */
}
article { /* Левая колонка */
margin-right: 240px; /* Отступ справа */
}
Навигация на сайте
Традиционно для создания различных меню применяется список, иными словами, комбинация тегов<ul> и <li>. Это связано с тем, что маркированный список сам по себе напоминает меню, к тому же легко модифицируется с помощью стилей. Навигация на нашем учебном сайте сделана в виде вертикального меню, поэтому логично будет воспользоваться списком. Только его придётся изменить под наши нужды — убрать маркеры и выделить текущий пункт меню градиентным фоном и рисованным маркером (рис. 6.13).
Рис. 6.13. Вид меню на сайте
Код меню на всех страницах сайта практически одинаков (пример 6.20), только меняется текущий пункт.
Здесь класс current предназначен для выделения текущего пункта меню фоновым рисунком. Дополнительный тег <span> нужен для установки рисунка маркера. Можно было пойти другим путём и включить маркер через свойство list style-image, но браузеры такой маркер по-разному позиционируют, поэтому воспользуемся универсальным решением и вставим маркер как фоновый рисунок. Для начала необходимо подготовить изображения. Нам понадобится градиентный рисунок размером 192х25 пикселов (рис. 6.14). Почему размер этого рисунка равен не 200 пикселов, как ширина колонки? Мы опять воспользуемся той хитростью, что у нас цвет у градиента справа совпадает с цветом фона и плавно переходит к нему. Подобное ухищрение уже применялось у нас для создания градиента основной части страницы и позволило уменьшить размер изображения.
Рис. 6.14. Градиент для меню
В качестве маркера для текущего пункта меню ставится небольшое изображение на прозрачном фоне (рис. 6.15).
Маркер выводится фоном, поэтому текст накладывается на него сверху. Для правильного отображения текст приходится сдвигать вправо свойством padding-left. В параметрах свойства background рисунок устанавливается по центру вертикали и смещается вправо от края на пять пикселов.
Блок «Интересная информация»
Блок представляет собой цветной прямоугольник, внутри которого выводится заголовок и текст. Под блоком отображается небольшая тень (рис. 6.16).
Рис. 6.16. Вид блока
Такую тень можно вывести в виде обычного изображения или фоновой картинки. Мы стараемся сделать код более эффективным, поэтому, чем меньше тегов используется, тем лучше. По возможности оформление необходимо переносить в стили, так что тень будем выводить стилевым свойствомbackground. В блоке кроме тени используется фоновый цвет, нужно учесть этот момент и сделать рисунок тени на белом фоне (рис. 6.17), чтобы при наложении он перекрывал фон.
Рис. 6.17. Изображение тени
Код для блока получается достаточно простым и содержит только заголовок и текст.
<p>Средний самец льва имеет длину около трех метров и весит
от 180 до 230 килограмм.</p>
<p>Львы питаются не только убитыми животными, они также не
брезгуют падалью.</p>
</div>
Заголовок блока в виде рисунка помещён внутрь тега <h3>, что позволяет при отключении изображений вывести альтернативный текст увеличенного размера. Сам стиль показан ниже.
Фоновый рисунок прижимается к нижнему краю блока, поэтому в параметрах background указываем left bottom или 0 100%, как в примере.
Заключение
Мы сверстали две страницы сайта — главную и внутреннюю, но это в действительности не означает, что на сайте их столько же. Это всего лишь шаблоны, которые задают типовой вид документов. Далее шаблон используется для CMS (content management system, система управления контентом), чтобы автоматизировать процесс создания новых страниц на сайте. Тема CMS выходит за рамки этой статьи, поэтому сайт сделан по старинке — с помощью набора HTML-файлов. Окончательно сайт можно посмотреть по адресу http://lionindesert.ru.
Уменьшенная главная страница сайта в браузере выглядит следующим образом (рис. 6.18).
