Главная страница

Главной называется веб-страница, с которой обычно начинается просмотр сайта. Она открывается при наборе адреса сайта и в каком-то смысле является его «лицом». Именно с главной страницы начинается знакомство посетителей с сайтом, поэтому надо сразу передать тематику сайта и обеспечить быстрый доступ к содержанию.

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

body {
 font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}

Первое значение 0.9em означает размер шрифта, второе после слэша интерлиньяж, а после пробела следует набор шрифтов, которые следует использовать на странице. Если первый идущий шрифт Arial не будет найден в операционной системе, браузер начнёт искать шрифт Helvetica. Если и он не обнаружится, будет выбран любой другой рубленый шрифт, или как их ещё называют, без засечек.

Блок с предупреждением

В этом блоке используется два изображения: одно для головы, второе для заголовка текста (рис. 6.12).

Рис. 6.12. Блок с предупреждением

Само расположение элементов можно выполнить разными методами, к примеру, установить рисунок с головой как фоновый без повторения и сдвинуть текст вправо, либо сделать обтекание через float. Рассмотрим эти методы подробнее.

Метод 1. Использование обтекания

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

Пример 6.18. Блок с предупреждением

<section class="warning">
 <img src="/images/head.png" class="voodoohead" alt="" width="49" height="92">
 <header><h1><img src="images/warning-title.png" alt="Предупреждение" 
      width="137" height="30"></h1></header>
 <p>Все перечисленные на сайте методы ловли льва являются
 теоретическими и базируются на вычислительных методах. Авторы не гарантируют
 вашей безопасности при их использовании и снимают с себя всякую 
 ответственность за результат. Помните, лев это хищник и опасное 
 животное!</p>
</section>

В стилях для изображения головы ставится свойство float со значением left, а тексту заголовка и абзаца смещение левого края через margin-left. Для отмены обтекания к warning добавляется overflow со значением hidden.

section header { 
 background: none; /* Убираем фон */ 
}
.warning  {
 overflow: hidden; /* Отменяем обтекание */
 margin: 30px 0; /* Отступ сверху и снизу */
}
.voodoohead {
 float: left; /* Обтекание справа */
}
.warning H1, .warning P { 
 margin: 0 0 0 70px; /* Отступы */
}

Метод 2. Фоновая картинка

Код останется практически неизменным по сравнению с примером 6.18, только изображение головы следует убрать, поскольку оно добавляется через свойство background.

section header {
 background: none; /* Убираем фон */  
}
.warning {
 overflow: hidden; /* Отменяем обтекание */
 margin: 30px 0; /* Отступ сверху и снизу */
 background: url(images/head.png) no-repeat;
 min-height: 92px; /* Минимальная высота */
}
.warning H2, .warning P { 
 margin: 0 0 0 70px; /* Отступы */
}

Также следует добавить свойство min-height, чтобы при уменьшении высоты блока фоновая картинка не обрезалась. Значение равно высоте изображения head.png.

Блок со ссылками

Каждый блок со ссылкой и её описанием обрамлён тегом <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).

Пример 6.19. Главная страница

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как поймать льва в пустыне?</title>
  <link rel="stylesheet" href="style/lion.css">
  <!--[if lt IE 9]> 
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]-->
 </head>
 <body>
  <header>
   <div class="header-bg">
    <img src="images/header-title.png" alt="Как поймать льва в пустыне" 
              width="456" height="166">
   </div>
  </header>
  <div class="content-gradient">
   <div class="content-bg">
    <div class="content-white">
     <p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по 
        созданию своего ресурса и его публикации в Интернете. Поскольку 
        любой сайт должен содержать полезную или интересную информацию, 
        мы выбрали тему ловли льва в пустыне, которая будет, без всяких 
        сомнений, полезна любому посетителю. Так, на всякий случай.</p>
     <section class="warning">
      <header><h1><img src="images/warning-title.png" alt="Предупреждение" 
       width="137" height="30"></h1></header>
      <p>Все перечисленные на сайте методы ловли льва являются 
        теоретическими и базируются на вычислительных методах. Авторы не 
        гарантируют вашей безопасности при их использовании и снимают с 
        себя всякую ответственность за результат. Помните, лев это хищник 
        и опасное животное!</p>
     </section>
     <section>
      <header><h1><a href="assumption.html">Допущения</a></h1></header>
      <p>Для упрощения расчетов некоторые реальные величины заменяются их 
        приближенным аналогом, которые хотя и влияют на точность результата, 
        находятся в пределах допустимой погрешности вычисления.</p>
     </section>  
    </div> 
   </div>
  </div>
  <footer>
   <img src="images/lion.png" alt="" width="130" height="80" class="lion">
   <div class="footer-bg">
    <div class="copyright">
     <p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p>
     <p>&copy; Влад Мержевич</p>
    </div>
   </div>
  </footer>
 </body>
</html>

Код HTML завершён, но стилевой файл lion.css следует отредактировать с учётом новых тегов и указать, что теги <header>, <section>, <footer>, <aside>, <nav>, <article> являются блочными. Это необходимо для корректного применения к ним стилей в старых браузерах.

header, section, footer, aside, nav, article {
 display: block; /* Блочный элемент */
}