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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плохой старт
<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 пикселей, а не попытается вписаться в него.

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

Сове­туем перед нача­лом вёрстки сбро­сить стан­дарт­ные стили, обну­лить отступы, нор­ма­ли­зо­вать пове­де­ние по умол­ча­нию, изба­виться от неоче­вид­ных свойств. Такие стили назы­вают ресе­том (англ. reset — «сброс»). Ресет дела­ется добав­ле­нием осо­бого кода в начало файла со сти­лями. При­ве­дём при­мер мини­маль­ного ресета и про­ком­мен­ти­руем реше­ния в нём.

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

Про­сим бра­у­зер не уве­ли­чи­вать кегль при пово­роте теле­фона в ланд­шафт­ную ори­ен­та­цию. Зна­че­ния с пре­фик­сами нужны, потому что мобиль­ный Сафари под­дер­жи­вает только вари­ант с -webkit-, а Файр­фокс на Андро­иде — только вари­ант с -moz-.

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

Заодно уби­раем бул­литы в спис­ках. Чаще всего эле­менты списка оформ­ляют втяжкой.

Нор­ма­ли­зуем пове­де­ние медиа‑эле­мен­тов. Делаем их блоч­ными и адаптивными.

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

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, ul, ol, li,
figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  list-style: none;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select, button {
  font: inherit;
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, ul, ol, li,
figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  list-style: none;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select, button {
  font: inherit;
}

Советуем перед началом вёрстки сбросить стандартные стили, обнулить отступы, нормализовать поведение по умолчанию, избавиться от неочевидных свойств. Такие стили называют ресетом (англ. reset — «сброс»). Ресет делается добавлением особого кода в начало файла со стилями. Приведём пример минимального ресета и прокомментируем решения в нём.

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

Просим браузер не увеличивать кегль при повороте телефона в ландшафтную ориентацию. Значения с префиксами нужны, потому что мобильный Сафари поддерживает только вариант с -webkit-, а Файрфокс на Андроиде — только вариант с -moz-.

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

Заодно убираем буллиты в списках. Чаще всего элементы списка оформляют втяжкой.

Нормализуем поведение медиа‑элементов. Делаем их блочными и адаптивными.

Просим браузер унаследовать настройки шрифта в контролах от окружающего текста, чтобы они не были слишком мелкими.

xxx xx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xxx xx xxxxx xxxxx xxxxx xxxxx x xxxx xxxxx xxx xx xxxxx xx xxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xx xxx xxxxx x xxxx xxxxx
xxx xx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xxx xx xxxxx xxxxx xxxxx xxxxx x xxxx xxxxx xxx xx xxxxx xx xxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xx xxx xxxxx x xxxx xxxxx

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

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

Самая про­стая «рези­но­вая» обёртка может выгля­деть так:

.layoutContainer {
  margin-left: 6%; /* Задаём правое и левое поле в 6% от ширины окна */
  margin-right: 6%;
}

«Фик­си­ро­ван­ная» обёртка жёстко задаёт ширину:

.layoutContainer {
  width: 960px;
  margin-left: auto; /* Центрируем с помощью автомаржинов */
  margin-right: auto;
  padding-left: 20px; /* Добавляем фиксированные поля в 20 пк, чтобы содержимое не прилипало к краям окон шириной менее 960 пк*/
  padding-right: 20px;
}

Их ком­би­на­ция, обёртка с огра­ни­че­нием мак­си­маль­ной ширины и рези­но­выми полями, обычно выгля­дит так:

.layoutContainer {
  max-width: 960px; /* Задаём максимальную ширину */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

Обёрт­кой может быть общий кон­тей­нер, в кото­рый завёр­нуто всё содер­жи­мое стра­ницы, или класс, кото­рый добав­ляют «эта­жам» страницы.

Кон­тей­нер‑обёртка подой­дёт для слу­чаев, когда струк­тура содер­жи­мого стра­ниц оди­на­ко­вая и одно­тип­ная, напри­мер, для ста­тей в блоге.

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

xxx xx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xxx xx xxxxx xxxxx xxxxx xxxxx x xxxx xxxxx xxx xx xxxxx xx xxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xx xxx xxxxx x xxxx xxxxx
xxx xx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xxx xx xxxxx xxxxx xxxxx xxxxx x xxxx xxxxx xxx xx xxxxx xx xxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxx xx xxxxx xxxxx xx xxx xxxxx xxxxx xxxxx xxxxx xx xxx xxxxx x xxxx xxxxx

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

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

Самая простая «резиновая» обёртка может выглядеть так:

.layoutContainer {
  margin-left: 6%; /* Задаём правое и левое поле в 6% от ширины окна */
  margin-right: 6%;
}

«Фиксированная» обёртка жёстко задаёт ширину:

.layoutContainer {
  width: 960px;
  margin-left: auto; /* Центрируем с помощью автомаржинов */
  margin-right: auto;
  padding-left: 20px; /* Добавляем фиксированные поля в 20 пк, чтобы содержимое не прилипало к краям окон шириной менее 960 пк*/
  padding-right: 20px;
}

Их комбинация, обёртка с ограничением максимальной ширины и резиновыми полями, обычно выглядит так:

.layoutContainer {
  max-width: 960px; /* Задаём максимальную ширину */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

Обёрткой может быть общий контейнер, в который завёрнуто всё содержимое страницы, или класс, который добавляют «этажам» страницы.

Контейнер‑обёртка подойдёт для случаев, когда структура содержимого страниц одинаковая и однотипная, например, для статей в блоге.

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

Точки излома

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

Точка излома, breakpoint, — ширина экрана, при кото­рой одна вер­сия вёрстки сме­ня­ется на дру­гую. Напри­мер, при ширине экрана менее 991 пик­селя меню могло бы занять всю ширину экрана и стать про­кру­чи­ва­е­мым. Исполь­зуем для этого медиавыражения.

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

В боль­шин­стве попу­ляр­ных ЦСС‑фрейм­вор­ков эти точки выгля­дят так:

Узкие мобильные< 576 пк
Мобильные< 768 пк
Лаптопы≥ 768 пк
Десктопы≥ 992 пк
Широ­кие десктопы≥ 1400 пк

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

Напри­мер, на сайте бюро мы оста­но­ви­лись на трёх типах устройств:

Мобильные≤ 960 пк
Лаптопы> 960 пк
Десктопы> 1400 пк

Сове­туем исполь­зо­вать как можно меньше устройств и точек излома. Чем их больше, тем больше вари­ан­тов рас­кладки нужно при­ду­мать, свер­стать и про­ве­рить. Если шапка и под­вал адап­ти­ру­ются к двум устрой­ствам, это даёт 2×2 = 4 вари­анта рас­кладки. Если шапка и под­вал адап­ти­ру­ются к пяти устрой­ствам: это даёт 2×5 = 10 вари­ан­тов раскладки.

Медиавыражения 

Макбук, 1440×900

Айпад, 820×1180

Айфон, 393×852

Макбук, 1440×900

Айпад, 820×1180

Айфон, 393×852

Точки излома

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

Точка излома, breakpoint, — ширина экрана, при которой одна версия вёрстки сменяется на другую. Например, при ширине экрана менее 991 пикселя меню могло бы занять всю ширину экрана и стать прокручиваемым. Используем для этого медиавыражения.

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

В большинстве популярных ЦСС‑фреймворков эти точки выглядят так:

Узкие мобильные< 576 пк
Мобильные< 768 пк
Лаптопы≥ 768 пк
Десктопы≥ 992 пк
Широкие десктопы≥ 1400 пк

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

Например, на сайте бюро мы остановились на трёх типах устройств:

Мобильные≤ 960 пк
Лаптопы> 960 пк
Десктопы> 1400 пк

Советуем использовать как можно меньше устройств и точек излома. Чем их больше, тем больше вариантов раскладки нужно придумать, сверстать и проверить. Если шапка и подвал адаптируются к двум устройствам, это даёт 2×2 = 4 варианта раскладки. Если шапка и подвал адаптируются к пяти устройствам: это даёт 2×5 = 10 вариантов раскладки.

Медиавыражения 

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