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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Где использовать гриды, а где флексбоксы

И гриды, и флек­с­боксы под­дер­жи­ва­ются всеми совре­мен­ными бра­у­зе­рами. Больше того, в неко­то­рых слу­чаях гриды и флек­с­боксы вза­и­мо­за­ме­ня­емы — меня­ешь display: inline-grid на inline-flex, всё работает.

Сове­туем выби­рать между флек­с­бок­сами и гри­дами, ори­ен­ти­ру­ясь на свой опыт, задачу и код: какой вари­ант даст меньше кода, какой проще вос­при­ни­мать и поддерживать?

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

С дру­гой сто­роны, если важно впи­сать эле­менты в сетку из N коло­нок, лучше взять гриды. Код будет лако­нич­нее и понятнее:

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

Где использовать гриды, а где флексбоксы

И гриды, и флексбоксы поддерживаются всеми современными браузерами. Больше того, в некоторых случаях гриды и флексбоксы взаимозаменяемы — меняешь display: inline-grid на inline-flex, всё работает.

Советуем выбирать между флексбоксами и гридами, ориентируясь на свой опыт, задачу и код: какой вариант даст меньше кода, какой проще воспринимать и поддерживать?

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

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

Грид

.curriculum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5em;
}

Флексбокс

.curriculum {
  --columns: 4;
  --gap: .5em;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
}

.curriculum > * {
  flex: 1 1 calc(100% / var(--columns));
  max-width: calc((100% / var(--columns)) - var(--gap));
}

Чтобы мастерски овладеть флексбоксами и гридами, сыграйте в игры:

Адаптивная вёрстка

В отли­чие от печат­ной про­дук­ции, нельзя пред­ска­зать, в каком фор­мате посе­ти­тель уви­дит вёрстку — на ком­пакт­ном теле­фоне или на сверх­ши­ро­ком мони­торе. Если в каком‑то слу­чае люди не смо­гут пол­но­ценно поль­зо­ваться сай­том, они уйдут на дру­гой сайт. Поэтому хоро­ший дизайн и вёрстка ста­ра­ются адап­ти­ро­ваться под раз­ные условия.

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

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

Яндекс‑метрика для анализа посещаемости и посетителей сайта

Анализ посетителей сайта 

Адаптивная вёрстка

В отличие от печатной продукции, нельзя предсказать, в каком формате посетитель увидит вёрстку — на компактном телефоне или на сверхшироком мониторе. Если в каком‑то случае люди не смогут полноценно пользоваться сайтом, они уйдут на другой сайт. Поэтому хороший дизайн и вёрстка стараются адаптироваться под разные условия.

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

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

Яндекс‑метрика для анализа посещаемости и посетителей сайта

Анализ посетителей сайта 

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

<head>
  <!-- … -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Боль­шин­ство эле­мен­тов на стра­нице — заго­ловки, абзацы, дивы — блоч­ные. Их ширина адап­тивна по умол­ча­нию — задана как 100% ширины роди­теля. Если не менять эти стили, блоч­ные эле­менты в насле­до­ва­нии дой­дут до body и рас­тя­нутся на всю ширину бра­у­зера. Изме­нится ширина бра­у­зера — изме­нится ширина эле­мен­тов. Попро­буйте изме­нять ширину при­мера, дви­гая за уголок.

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

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

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

<head>
  <!-- … -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Большинство элементов на странице — заголовки, абзацы, дивы — блочные. Их ширина адаптивна по умолчанию — задана как 100% ширины родителя. Если не менять эти стили, блочные элементы в наследовании дойдут до body и растянутся на всю ширину браузера. Изменится ширина браузера — изменится ширина элементов. Попробуйте изменять ширину примера, двигая за уголок.

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

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

Текст внутри эле­мен­тов сам адап­ти­ру­ется под их ширину.

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

Для тек­сто­вых эле­мен­тов полезно огра­ни­чи­вать ширину через min-width и max-width, чтобы ширина тек­ста оста­ва­лась ком­форт­ной для чтения.

Рабо­таем с
1997 года.
Экс­перты на 
рынке авто­услуг.
Зво­ните: 8 800 301‑
64‑40

Рабо­таем
с 1997 года.
Экс­перты на рынке
авто­услуг.
Зво­ните:
8 800 301‑64‑40

Работаем с
1997 года.
Эксперты на 
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40

Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
8 800 301‑64‑40

Текст внутри элементов сам адаптируется под их ширину.

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

Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.

Адаптивная высота

Высота эле­мента — это высота его содер­жи­мого плюс раз­меры внут­рен­них осту­пов сверху и снизу. Чем выше содер­жи­мое, тем выше высота элемента.

<div class="box">
  Предлагаю думать о строгих размерах как о гвоздях…
</div>

.box {
  padding: 20px 10px 40px;
}

Если явно задать высоту, то содер­жи­мое может вылезти за гра­ницы элемента.

.box {
  padding: 20px 10px 40px;
  height: 200px;
}

Лучше все­гда исхо­дить из того, что высота содер­жи­мого будет расти. Вёрстка обычно стро­ится сверху вниз, новые эле­менты уве­ли­чи­вают высоту своих роди­те­лей. А на узких экра­нах ширина эле­мента может умень­шиться и текст внутри зай­мёт больше строк. Поэтому лучше не зада­вать и не огра­ни­чи­вать высоту свой­ствами height и max-height, кроме слу­чаев, когда зна­ете зачем.

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

.box {
  padding: 20px 10px;
  min-height: 130px;
}

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

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

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

Кофе‑тайм

★ 4,9 (450) · Средний чек 600₽
Кофейня · Кропоткинская, 95
Открыто · Закроется в 22:30

Кофе с собой · Десерты

Кофе 777

Нет отзывов
Кофейня · Вокзальный переулок

Coffee Like

★ 5 (2) · Средний чек 500₽
Кофейня · Загорская, 32

Кофе с собой

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

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

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

Кофе‑тайм

★ 4,9 (450) · Средний чек 600₽
Кофейня · Кропоткинская, 95
Открыто · Закроется в 22:30

Кофе с собой · Десерты

Кофе 777

Нет отзывов
Кофейня · Вокзальный переулок

Coffee Like

★ 5 (2) · Средний чек 500₽
Кофейня · Загорская, 32

Кофе с собой

Адаптивная высота

Высота элемента — это высота его содержимого плюс размеры внутренних оступов сверху и снизу. Чем выше содержимое, тем выше высота элемента.

<div class="box">
  Предлагаю думать о строгих размерах как о гвоздях…
</div>

.box {
  padding: 20px 10px 40px;
}

Если явно задать высоту, то содержимое может вылезти за границы элемента.

.box {
  padding: 20px 10px 40px;
  height: 200px;
}

Лучше всегда исходить из того, что высота содержимого будет расти. Вёрстка обычно строится сверху вниз, новые элементы увеличивают высоту своих родителей. А на узких экранах ширина элемента может уменьшиться и текст внутри займёт больше строк. Поэтому лучше не задавать и не ограничивать высоту свойствами height и max-height, кроме случаев, когда знаете зачем.

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

.box {
  padding: 20px 10px;
  min-height: 130px;
}
Скрыто 76 разворотов
Закладки
Добавьте закладки
Ничего не нашлось