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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пер­вым делом, чтобы стра­ница и её эле­менты под­стра­и­ва­лись под ширину бра­у­зера, нужно доба­вить в 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;
}

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

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

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

Переполнение — overflow

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

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

Свой­ство overflow управ­ляет тем, как эле­мент посту­пит с пере­пол­ня­ю­щим содержимым.

overflow: visible — по умол­ча­нию — содер­жи­мое выле­зет за гра­ницы, может налезть на сосед­ние эле­менты или доба­вить стра­нице ненуж­ную прокрутку.

overflow: hidden — содер­жи­мое обре­жется по гра­ни­цам элемента.

overflow: scroll — доба­вит про­крутку не влез­шего содер­жи­мого. Ино­гда исполь­зу­ется наме­ренно, чтобы «впих­нуть нев­пиху­е­мое» в дизайне.

Дизайнеры предлагают разместить блок с информацией за пределами 1000 пикселей

Лайфхак: что делать с широкими модулями на узком экране

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

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

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

Переполнение — overflow

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

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

Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.

overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.

overflow: hidden — содержимое обрежется по границам элемента.

overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.

Дизайнеры предлагают разместить блок с информацией за пределами 1000 пикселей

Лайфхак: что делать с широкими модулями на узком экране

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