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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

Скрыт 161 разворот
8
4
2
10
6
4
2

Сетка в Бутстрапе

Клю­че­вая фишка Бут­страпа и дру­гих набо­ров сти­лей — гото­вые классы для работы с модуль­ной сеткой.

В Бут­страпе строки и ячейки сетки задают клас­сами row и col. Есть несколько вари­ан­тов работы с ними.

Пер­вый вари­ант — явно ука­зать ширину ячеек в колон­ках в рам­ках 12‑коло­ноч­ной сетки. Для кор­рект­ной работы в таком слу­чае, общая ширина ячеек в строке должна быть равна числу коло­нок — 12.

<div class="row">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-10"></div>
</div>

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

Вто­рой вари­ант — не ука­зы­вать ширину ячеек. Тогда они поде­лят доступ­ную ширину рав­но­мерно. Коли­че­ство таких ячеек в строке огра­ни­чено лишь здра­вым смыслом.

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

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

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

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

Модульная сетка. Документация Бутстрапа

8
4
2
10
6
4
2

Сетка в Бутстрапе

Ключевая фишка Бутстрапа и других наборов стилей — готовые классы для работы с модульной сеткой.

В Бутстрапе строки и ячейки сетки задают классами row и col. Есть несколько вариантов работы с ними.

Первый вариант — явно указать ширину ячеек в колонках в рамках 12‑колоночной сетки. Для корректной работы в таком случае, общая ширина ячеек в строке должна быть равна числу колонок — 12.

<div class="row">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-10"></div>
</div>

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

Второй вариант — не указывать ширину ячеек. Тогда они поделят доступную ширину равномерно. Количество таких ячеек в строке ограничено лишь здравым смыслом.

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

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

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

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

Модульная сетка. Документация Бутстрапа

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

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

Класс 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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