x
 
Юрий Мазурский
2 мая 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Часть первая: дробление


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

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

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

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

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

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

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

<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как готовить макеты для технологов? 6




Недавно всплыло

4 В бюро есть таймтрекинг для сотрудников? 5 Хочу научиться сторителлингу 12 2