Вёрстка страницы сайта

Опубликовано: 14 ноября 2016 Обновлено: 17 июля 2022 21 комментарий

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

<body>
<header></header>
<div class="main"></div>
<footer></footer>
</body>
structure-main
Рис. 1. Основные секции страницы

Мы не будем использовать элемент <main>, так как он поддерживается не всеми браузерами.

Элементы <header>, <div> и <footer> — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента <body>. Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:

container-main
Рис. 2. Основные секции страницы с тегом-контейнером

и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:

.container {
  width: 100%;
  max-width: 1024px; /*максимальная ширина может иметь другое значение*/
  padding: 0 15px;
  margin: 0 auto;
}

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент <header> предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега <header> логотип сайта и навигационные ссылки:

<header>
  <div class="container">
    <a href="/" class="logo">LOGO</a>
    <nav>
      <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>
container-header
Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

.logo {
  float: left;
}
nav {
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block; /*один из способов разместить элементы в строку*/
}

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.

header-collapse
Рис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент <header> и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container:

.container:after {
  content: "";
  display: table;
  clear: both;
}

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

.container {
  width: 100%;
  max-width: 1024px;
  padding: 15px;
  margin: 0 auto;
}
header-clearfix
Рис. 5. Очистка потока

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

logo-header
Рис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px, поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

nav a {
  text-decoration: none;
  line-height: 38px;
}
hyperlinks-header
Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float:

<div class="main">
  <div class="container">
    <div class="col-1-3"></div>
    <div class="col-2-3"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-2"></div>
  </div>
</div>
layout-main
Рис. 7. Сетка основной части страницы
.container div {
  float: left;
  margin-bottom: 15px;
}
.col-1-2 {
  width: 50%;  
}
.col-1-3 {
  width: 33.3333333333%;
}
.col-1-4 {
  width: 25%;
}
.col-2-3 {
  width: 66.6666666667%;
}

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

different-height
Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .container div {height: 100px}. Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

4. Разметка подвала страницы

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

<footer>
  <div class="container">
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
  </div>
</footer>

Поделиться: