С чего начать вёрстку ХТМЛ‑страницы

С чего начать вёрстку

Дробление страницы
Абсолютное позиционирование

С чего начать вёрстку

Дробление страницы
Абсолютное позиционирование

ХТМЛ‑страница — не лист бумаги, её размер не зафиксирован, поэтому все элементы изначально как бы плавают сами по себе. Задача дизайнера — понять, какой иерархии подчинены элементы страницы и как их положение, размеры и поведение будут меняться в зависимости от размеров окна. Задача верстальщика — укротить их и заставить вести себя согласно дизайну.

От общего к частному

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

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

Первый, самый верхний уровень может быть таким: шапка, меню, тело страницы, боковая колонка, подвал:

<header>
  ...
</header>
<nav>
  ...
</nav>
<article>
  ...
</article>
<aside>
  ...
</aside>
<footer>
  ...
</footer>

Второй уровень — содержимое блока первого уровня. Например, для шапки сайта внутренними блоками могут выступать логотип, адрес с телефоном и кнопка «Войти»:

<header>
  <div class="logo">
    Лого
  </div>
  <div class="contacts">
    Владивосток, ул. Набережная, 12<br>
    +7 904 543 42 34
  </div>
  <div class="signIn">
    <button>Войти</button>
  </div>
</header>

Рядами или колонками

Кроме дробления элементов страницы по смыслу, нужно учитывать расположение блоков. Стоит дробить блоки так, чтобы внутренние элементы стояли либо в ряд, либо колонкой. К примеру, в нашей шапке мы хотим, чтобы логотип был слева, кнопка входа справа, а адрес и телефон прижимались правым краем к левому краю кнопки и стояли от неё на некотором расстоянии:

Вот два варианта вёрстки:

Плохо

<header>
  <div class="logo">
    Лого
  </div>
  <div class="address">
    Владивосток, ул. Набережная, 12
  </div>
  <div class="tel">
    +7 904 543 42 34
  </div>
  <div class="signIn">
    <button>Войти</button>
  </div>
</header>

Хорошо

<header>
  <div class="logo">
    Лого
  </div>
  <div class="contacts">
    <div class="address">
      Владивосток, ул. Набережная, 12
    </div>
    <div class="tel">
      +7 904 543 42 34
    </div>
  </div>
  <div class="signIn">
    <button>Войти</button>
  </div>
</header>

В левом примере всё смешалось. Логотип, адрес и кнопка стоят в ряд, а как позиционировать телефон, непонятно, потому что он явно ни к чему не привязан. Скорее всего, в дальнейшем с этим возникнут проблемы. В правом примере ошибка исправлена — мы объединили адрес и телефон в отдельную смысловую единицу и теперь с направлениями раскладки всё понятно: логотип, контакты и кнопка идут в ряд, а адрес и телефон в столбик.

Как раскладывать ХТМЛ‑элементы на странице?

После деления остаётся задать правила позиционирования элементов относительно друг друга. Можно сделать так:

Как раскладывать ХТМЛ‑элементы на странице?

Пример на Кодпене

/* css */
header {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
}
.logo {
  width: 200px;
  flex: 1;
}
.contacts {
  flex-grow: 0;
  flex-basis: auto;
  margin-right: 20px;
}
.signIn {
  flex-grow: 0;
  flex-basis: auto;
}

Пример на Кодпене

Уменьшайте разнообразие отступов

Хороший тон — использовать разные виды отступов для разных целей: margin — для отступов от контейнеров‑соседей, padding — для внутренних отступов. Если для позиционирования элемента или его содержимого используется несколько видов отступов, то либо это ошибка, либо вы понимаете, зачем это делаете.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.