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

Вёрстка страницы представляет собой процесс разработки структуры 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. Каждую строку блоков обернём дополнительным блоком с классом .row:

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

Для элемента с классом .row также применим очистку потока:

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

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

.row {
  margin-bottom: 15px;
}

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

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

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

Если необходимо задать фоновый цвет для блоков ряда, то можно это можно сделать следующим образом: для элемента с классом .row добавим новый класс, который позволит стилизовать только этот ряд (получится .row row-one), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет, то есть таким образом мы сделаем фоновую подложку.

<div class="row row-one">
  <div class="col-1-3">Lorem ipsum dolor sit amet.</div>
  <div class="col-2-3">Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.</div>
</div>
.row-one {
  background: lightblue;
}
.col-2-3 {
  width: 66.6666666667%;
  float: left;  
  background: seashell;
}
equal-height
Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

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

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>
  • VIZAVI

    Здравствуйте! Подскажите, пожалуйста, надо ли мне всё это изучать для самостоятельного создания своего многостраничного сайта на CMS WordPress с самым простым дизайном и последующего самостоятельного управления им, включая размещение и редактирование контента?

    • Здравствуйте. В WordPress есть огромное количество шаблонов и если выбрать подходящий адаптивный, то править его разметку вам не придётся. У админки интуитивный интерфейс, как работать с админкой можно узнать, например, из видео на ютубе. Сами страницы создаются нажатием на кнопку. Так что проще не бывает.

      • Александр В.

        Здравствуйте.

        Из этого следует, что CMS сделали верстальщиков (почти)ненужными как класс?

        • Здравствуйте. Я бы так не сказала. CMS облегчают работу пользователя по наполнению сайта контентом, автоматически генерируя страницы из заранее установленных шаблонов страниц. А верстальщики как раз и верстают эти шаблоны. С другой стороны, например, для вордпресс есть плагин Visual Composer, который упрощает процесс создания уникальных страниц из набора встроенных блоков, не прибегая к услугам верстальщиков. Поэтому в глобальном плане верстальщики пока нужны, а мелкие задачи можно решать самому. Но это опять же зависит от способностей пользователя, потому что минимум знаний из области веб-технологий всё-таки нужен.

          • Ed Sheeran

            Добрый день! А если пишешь не на php, а на asp core(c#) то про wordpress можно забыть, я так понимаю. И по сути всегда нужно верстать и прописывать дизайн с 0? или есть что-то чего я не знаю?

  • evg1401

    Кто-нибудь дайте хороший совет пожалуйста! Вёрстка страниц это все понятно, ну к примеру я смогу сверстать несколько страниц, но не вносить же изменеия в каждую страницу вручную? Ведь есть такой контент, который по своей логике должен/может влиять на несколько (все) страницы сайта, что не удобно, если все делать вручную. Отсюда и вопрос: для того, чтобы решить его здесь необходимо применение языков вроде php или может быть средствами html&css и js можно обойтись?