🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

Отдель­ный раз­дел книги посвя­щён работе с вер­сталь­щи­ком: как ста­вить задачи, полу­чать пред­ска­зу­е­мый резуль­тат и пра­вильно при­ни­мать и внед­рять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 162 разворота

Отступы в Бутстрапе

Отдель­ные классы в Бут­страпе управ­ляют падин­гами и мар­жи­нами — внут­рен­ними и внеш­ними отсту­пами эле­мента. Есть пять стан­дарт­ных раз­ме­ров отступов.

Класс p-1 уста­но­вит мини­маль­ный, а p-5 — мак­си­маль­ный воз­мож­ный падинг со всех четы­рёх сторон.

Классы с уточ­не­нием t, b, l, r (top, bottom, left, right) уста­но­вят падинг только с одной сто­роны, а с уточ­не­нием x или y — слева‑справа или сверху‑снизу.

<!-- Со всех сторон -->
<div class="p-1"></div>

<!-- Только сверху -->
<div class="pt-3"></div>

<!-- Сверху и снизу -->
<div class="pt-1 pb-2"></div>

<!-- Сверху и снизу -->
<div class="py-2"></div>

<!-- Сверху, снизу, слева и справа -->
<div class="pt-1 pb-2 px-2"></div>

Мар­жины зада­ются тем же обра­зом, но p меня­ется на m, а кроме зна­че­ний 1…5 доступно auto — отжать эле­мент до предела.

<div class="m-1"></div>

<div class="ml-2"></div>

<div class="ml-auto mt-4"></div>

Класcы падин­гов и мар­жи­нов можно комбинировать:

<div class="p-1 m-1"></div>

<div class="p-1 pl-3 ml-2"></div>

<div class="p-2 ml-auto mt-4"></div>

Отступы:

p‑1
pt‑3
pt‑1 pb‑2
py‑2
pt‑1 pb‑2 px‑2
m‑1
ml‑2
ml‑auto mt‑4
p‑1 m‑1
p‑1 pl‑3 ml‑2
p‑2 ml‑auto mt‑4
p‑1
pt‑3
pt‑1 pb‑2
py‑2
pt‑1 pb‑2 px‑2
m‑1
ml‑2
ml‑auto mt‑4
p‑1 m‑1
p‑1 pl‑3 ml‑2
p‑2 ml‑auto mt‑4

Отступы в Бутстрапе

Отдельные классы в Бутстрапе управляют падингами и маржинами — внутренними и внешними отступами элемента. Есть пять стандартных размеров отступов.

Класс p-1 установит минимальный, а p-5 — максимальный возможный падинг со всех четырёх сторон.

Классы с уточнением t, b, l, r (top, bottom, left, right) установят падинг только с одной стороны, а с уточнением x или y — слева‑справа или сверху‑снизу.

<!-- Со всех сторон -->
<div class="p-1"></div>

<!-- Только сверху -->
<div class="pt-3"></div>

<!-- Сверху и снизу -->
<div class="pt-1 pb-2"></div>

<!-- Сверху и снизу -->
<div class="py-2"></div>

<!-- Сверху, снизу, слева и справа -->
<div class="pt-1 pb-2 px-2"></div>

Маржины задаются тем же образом, но p меняется на m, а кроме значений 1…5 доступно auto — отжать элемент до предела.

<div class="m-1"></div>

<div class="ml-2"></div>

<div class="ml-auto mt-4"></div>

Класcы падингов и маржинов можно комбинировать:

<div class="p-1 m-1"></div>

<div class="p-1 pl-3 ml-2"></div>

<div class="p-2 ml-auto mt-4"></div>

Отступы:

Модификаторы ширины экрана в Бутстрапе

Обыч­ные классы Бут­страпа для работы с сет­кой и отсту­пами при­ме­нятся на всех раз­ме­рах экрана. Код из при­мера пока­жет ячейки оди­на­ко­вой ширины и на теле­фоне, и на компьютере:

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Но если допи­сать к классу осо­бый моди­фи­ка­тор, то класс нач­нёт рабо­тать только начи­ная с опре­де­лён­ной ширины экрана.

Напри­мер, моди­фи­ка­тор lg (large) при­ме­нит класс только на ширине экрана от 992 пк. Доба­вив такой класс, можно поста­вить ячейки друг над дру­гом на узком экране и в ряд на широком:

<div class="row">
  <div class="col-12 col-lg-6"></div>
  <div class="col-12 col-lg-6"></div>
</div>

В Бут­страпе есть пять моди­фи­ка­то­ров экрана: sm, md, lg, xl, xxl. Они при­ме­нят класс от ширины 576, 768, 992, 1200 и 1400 пк соответственно.

По умол­ча­нию все­гда при­ме­нятся классы без моди­фи­ка­тора, а классы с моди­фи­ка­то­ром пере­би­вают их на своей ширине экрана. Напри­мер, такой код изме­нит внут­рен­ний отступ от мини­маль­ного на теле­фоне до мак­си­маль­ного на экране шири­ной 1200⁠—1399 пк и снова на мини­маль­ный, начи­ная с ширины 1400 пк:

<div class="p-1 p-md-3 p-xl-5 p-xxl-1"></div>

Не все классы Бут­страпа под­дер­жи­вают моди­фи­ка­торы. Про­ве­рить под­держку можно экс­пе­ри­мен­таль­ным путём или загля­нув в доку­мен­та­цию инте­ре­су­ю­щего класса.

Документация Бутстрапа

Модификаторы ширины экрана в Бутстрапе

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

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Но если дописать к классу особый модификатор, то класс начнёт работать только начиная с определённой ширины экрана.

Например, модификатор lg (large) применит класс только на ширине экрана от 992 пк. Добавив такой класс, можно поставить ячейки друг над другом на узком экране и в ряд на широком:

<div class="row">
  <div class="col-12 col-lg-6"></div>
  <div class="col-12 col-lg-6"></div>
</div>

В Бутстрапе есть пять модификаторов экрана: sm, md, lg, xl, xxl. Они применят класс от ширины 576, 768, 992, 1200 и 1400 пк соответственно.

По умолчанию всегда применятся классы без модификатора, а классы с модификатором перебивают их на своей ширине экрана. Например, такой код изменит внутренний отступ от минимального на телефоне до максимального на экране шириной 1200⁠—1399 пк и снова на минимальный, начиная с ширины 1400 пк:

<div class="p-1 p-md-3 p-xl-5 p-xxl-1"></div>

Не все классы Бутстрапа поддерживают модификаторы. Проверить поддержку можно экспериментальным путём или заглянув в документацию интересующего класса.

Документация Бутстрапа

Гото­вый набор сти­лей — не все­гда хоро­ший выбор. Не cтоит без­думно тащить его в любую вёрстку.

Изу­чайте доку­мен­та­цию набора, чтобы пони­мать его воз­мож­но­сти и огра­ни­че­ния, когда он при­не­сёт пользу, а когда ста­нет обу­зой. Выби­райте инстру­мент под задачу, а не под­го­няйте задачу под инструмент.

Нестан­дарт­ный дизайн часто эффек­тив­нее вер­стать вруч­ную, не заго­няя себя в рамки гото­вых реше­ний. Руч­ная вёрстка слож­нее, но гораздо гибче. Об этом — сле­ду­ю­щие главы.

Изучать и применять осмысленно следует любые готовые решения

Готовый набор стилей — не всегда хороший выбор. Не cтоит бездумно тащить его в любую вёрстку.

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

Нестандартный дизайн часто эффективнее верстать вручную, не загоняя себя в рамки готовых решений. Ручная вёрстка сложнее, но гораздо гибче. Об этом — следующие главы.

Изучать и применять осмысленно следует любые готовые решения

Принципы вёрстки страниц

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

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

Вер­стайте от общего к част­ному, чтобы видеть над­си­стему и связи моду­лей, выби­рать опти­маль­ные реше­ния и меньше повто­ряться в коде. ХТМЛ и ЦСС зато­чены под этот прин­цип: теги вкла­ды­ва­ются, стили наследуются.

Сле­дуйте методу про­грес­сив­ного джи­пега: стра­ница все­гда готова к пуб­ли­ка­ции. Уве­ли­чи­ва­ется сте­пень про­ра­бо­тан­но­сти, а общий вид все­гда ясен.

Не переусложнять

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

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

  • Наследование стилей 

  • Выборочная стилизация. Классы 

Каждой задаче — свой инструмент

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

Следовать системе

Оди­на­ково оформ­лен­ный и пред­ска­зу­е­мый код быст­рее читать, понятно, как доба­вить эле­менты и изме­нить суще­ству­ю­щие. Это осо­бенно полезно при команд­ной работе.

Сле­дуйте еди­ным пра­ви­лам во всём коде. Назы­ва­ете классы через под­чёр­ки­ва­ние? Назы­вайте так все­гда и везде. Хра­ните стили для мобиль­ных в отдель­ном файле? Не пишите их в дру­гих местах.

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

Плохой старт
<header>
  <nav class="nav">
     <a href="…">Главная</a>
     <a href="…">Каталог</a>
     <button type="button" class="btnCart">
       Корзина <span class="counter">9+</span>
     </button>
  </nav>
</header>

Хороший старт
<header>
  <!-- … -->
</header>

<body>
  <!-- … -->
<body>

<footer>
  <!-- … -->
<footer>

Избыточно
<nav class="nav">
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Главная</a>
   </li>
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Каталог</a>
   </li>
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Контакты</a>
   </li>
  </ul>
</nav>

Нормально
<nav сlass="nav">
   <a href="…">Главная</a>
   <a href="…">Каталог</a>
   <a href="…">Контакты</a>
</nav>

Неправильно
<p class="headingLarge">Ближайшие мероприятия</p>

<div class="button">Купить</div>

<p><u>Все статьи автора</u></a>

Правильно
<h1>Ближайшие мероприятия</h1>

<button type="button" class="button">Купить</button>

<a href="…">Все статьи автора</a>

Непредсказуемо
<a class="item promoItem">
  <p class="item-title">…</p>
  <p class="itemprice">…</p>
</a>

<div class="feature is-highlighted">
  <h3 class="featureTitle">…</h3>
  <div class="featureText">…</div>
</div>

Предсказуемо
<a class="item is__promo">
  <p class="item__title">…</p>
  <p class="item__price">…</p>
</a>

<div class="feature is__highlighted">
  <h3 class="feature__title">…</h3>
  <div class="feature__text">…</div>
</div>

Плохой старт
<header>
  <nav class="nav">
     <a href="…">Главная</a>
     <a href="…">Каталог</a>
     <button type="button" class="btnCart">
       Корзина <span class="counter">9+</span>
     </button>
  </nav>
</header>

Хороший старт
<header>
  <!-- … -->
</header>

<body>
  <!-- … -->
<body>

<footer>
  <!-- … -->
<footer>

Избыточно
<nav class="nav">
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Главная</a>
   </li>
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Каталог</a>
   </li>
   <li class="nav__item">
     <a class="nav__itemLink" href="…">Контакты</a>
   </li>
  </ul>
</nav>

Нормально
<nav сlass="nav">
   <a href="…">Главная</a>
   <a href="…">Каталог</a>
   <a href="…">Контакты</a>
</nav>

Неправильно
<p class="headingLarge">Ближайшие мероприятия</p>

<div class="button">Купить</div>

<p><u>Все статьи автора</u></a>

Правильно
<h1>Ближайшие мероприятия</h1>

<button type="button" class="button">Купить</button>

<a href="…">Все статьи автора</a>

Непредсказуемо
<a class="item promoItem">
  <p class="item-title">…</p>
  <p class="itemprice">…</p>
</a>

<div class="feature is-highlighted">
  <h3 class="featureTitle">…</h3>
  <div class="featureText">…</div>
</div>

Предсказуемо
<a class="item is__promo">
  <p class="item__title">…</p>
  <p class="item__price">…</p>
</a>

<div class="feature is__highlighted">
  <h3 class="feature__title">…</h3>
  <div class="feature__text">…</div>
</div>

Принципы вёрстки страниц

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

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

Верстайте от общего к частному, чтобы видеть надсистему и связи модулей, выбирать оптимальные решения и меньше повторяться в коде. ХТМЛ и ЦСС заточены под этот принцип: теги вкладываются, стили наследуются.

Следуйте методу прогрессивного джипега: страница всегда готова к публикации. Увеличивается степень проработанности, а общий вид всегда ясен.

Не переусложнять

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

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

  • Наследование стилей 

  • Выборочная стилизация. Классы 

Каждой задаче — свой инструмент

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

Следовать системе

Одинаково оформленный и предсказуемый код быстрее читать, понятно, как добавить элементы и изменить существующие. Это особенно полезно при командной работе.

Следуйте единым правилам во всём коде. Называете классы через подчёркивание? Называйте так всегда и везде. Храните стили для мобильных в отдельном файле? Не пишите их в других местах.

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

Хром

Файерфокс

В Хроме и Файерфоксе разный интерлиньяж и буллиты

Портретная

Ландшафтная

При повороте основной текст стал крупнее заголовка

Хром

Сафари

В Хроме и Сафари разный кегль и шрифт в текстовой области

По умолчанию

Как хотим

Внутренние отступы и граница прибивались к 100% ширины инпутов

По умолчанию

Как хотим

Изображение котика не поместилось в окно и дало горизонтальную прокрутку

Начинать с чистого листа. В каж­дом бра­у­зере есть пред­уста­нов­лен­ные стили почти для всех эле­мен­тов. Они нужны, чтобы стра­ница без сти­лей была чита­е­мой, доступ­ной и адап­тив­ной. Дефолт­ные ЦСС‑пра­вила не стан­дар­ти­зо­ваны, поэтому они могут слегка отли­чаться от бра­у­зера к браузеру.

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

Дефолт­ные стили местами довольно стран­ные. Напри­мер, кнопки и поля ввода не насле­дуют типо­гра­фи­че­ские пра­вила стра­ницы. Тек­сто­вая область исполь­зует систем­ный моно­ши­рин­ный шрифт, а тек­сто­вый инпут — систем­ный шрифт без засе­чек. И в обоих слу­чаях у них мик­ро­ско­пи­че­ский кегль: 13,333 пик­селя в Хроме, 11 пик­се­лей в Сафари.

Нако­нец, дефолт­ные стили тянут за собой «ино­пла­нет­ное» пове­де­ние из спе­ци­фи­ка­ции. Напри­мер, тек­сто­вые инпуты с width: 100% пере­пол­няют форму, потому что по умол­ча­нию внут­рен­ние отступы и гра­ницы не учи­ты­ва­ются в ширине. Изоб­ра­же­ния по умол­ча­нию не тянутся. Кар­тинка шири­ной в 800 пик­се­лей пере­пол­нит кон­тей­нер шири­ной в 500 пик­се­лей, а не попы­та­ется впи­саться в него.

Чтобы гаран­ти­ро­ванно изба­виться от побоч­ных эффек­тов дефолт­ных сти­лей бра­у­зера, нужно сна­чала обну­лить и нор­ма­ли­зо­вать их. А потом с чистого листа добав­лять свои стили. Так мы полу­чим пред­ска­зу­е­мое пове­де­ние вёрстки в любом браузере.

Хром

Файерфокс

В Хроме и Файерфоксе разный интерлиньяж и буллиты

Портретная

Ландшафтная

При повороте основной текст стал крупнее заголовка

Хром

Сафари

В Хроме и Сафари разный кегль и шрифт в текстовой области

По умолчанию

Как хотим

Внутренние отступы и граница прибивались к 100% ширины инпутов

По умолчанию

Как хотим

Изображение котика не поместилось в окно и дало горизонтальную прокрутку

Начинать с чистого листа. В каждом браузере есть предустановленные стили почти для всех элементов. Они нужны, чтобы страница без стилей была читаемой, доступной и адаптивной. Дефолтные ЦСС‑правила не стандартизованы, поэтому они могут слегка отличаться от браузера к браузеру.

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

Дефолтные стили местами довольно странные. Например, кнопки и поля ввода не наследуют типографические правила страницы. Текстовая область использует системный моноширинный шрифт, а текстовый инпут — системный шрифт без засечек. И в обоих случаях у них микроскопический кегль: 13,333 пикселя в Хроме, 11 пикселей в Сафари.

Наконец, дефолтные стили тянут за собой «инопланетное» поведение из спецификации. Например, текстовые инпуты с width: 100% переполняют форму, потому что по умолчанию внутренние отступы и границы не учитываются в ширине. Изображения по умолчанию не тянутся. Картинка шириной в 800 пикселей переполнит контейнер шириной в 500 пикселей, а не попытается вписаться в него.

Чтобы гарантированно избавиться от побочных эффектов дефолтных стилей браузера, нужно сначала обнулить и нормализовать их. А потом с чистого листа добавлять свои стили. Так мы получим предсказуемое поведение вёрстки в любом браузере.

Скрыто 53 разворота
Закладки
Добавьте закладки
Ничего не нашлось