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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Сове­туем перед нача­лом вёрстки сбро­сить стан­дарт­ные стили, обну­лить отступы, нор­ма­ли­зо­вать пове­де­ние по умол­ча­нию, изба­виться от неоче­вид­ных свойств. Такие стили назы­вают ресе­том (англ. 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 вариантов раскладки.

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

Большая. Новодмитровская улица., 36, строение. 2
Москва, Россия, 127015

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

Боль­шая Новод­мит­ров­ская улица, 36, стро­е­ние 2
Боль­шая Новод­мит­ров­ская улица, 36, стр. 2
Б. Новод­мит­ров­ская ул., 36, стр. 2

В таких слу­чаях точки излома лучше выби­рать исходя из содер­жи­мого и исполь­зо­вать Container Queries — медиа­вы­ра­же­ния, оттал­ки­ва­ю­щи­еся от раз­ме­ров кон­тей­нера, а не от раз­ме­ров окна:

<footer>
  <div class="address">
    Б<span class="sacrifice--second">ольшая</span><span>.</span> Новодмитровская ул<span class="sacrifice--second">ица</span><span>.</span>,
    36, стр<span class="sacrifice--first">оение</span><span>.</span> 2
  </div>
</footer>

Для логичных переносов склеили неразрывными пробелами части адреса, сильно связанные друг с другом по смыслу: «Большая Новодмитровская улица», «36, строение 2»

.address {
  container-type: inline-size; /* Объявляем .address контейнером, с шириной которого можно делать медиавыражения */
}

.address .sacrifice--first + span,
.address .sacrifice--first + span {
  display: none; /* Скрываем спаны с точками, пока они не нужны */
}

@container (width <= 21em) { /* При ширине подвала менее 21em, используем первую волну сокращений */
  .address .sacrifice--first {
    display: none;
  }

  .address .sacrifice--first + span {
    display: inline;
  }
}

@container (width <= 19em) { /* При ширине подвала менее 19em, используем вторую волну сокращений */
  .address .sacrifice--second {
    display: none;
  }

  .address .sacrifice--second + span {
    display: inline;
  }
}

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

Container Queries. МДН

Большая. Новодмитровская улица., 36, строение. 2
Москва, Россия, 127015

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

Большая Новодмитровская улица, 36, строение 2
Большая Новодмитровская улица, 36, стр. 2
Б. Новодмитровская ул., 36, стр. 2

В таких случаях точки излома лучше выбирать исходя из содержимого и использовать Container Queries — медиавыражения, отталкивающиеся от размеров контейнера, а не от размеров окна:

<footer>
  <div class="address">
    Б<span class="sacrifice--second">ольшая</span><span>.</span> Новодмитровская ул<span class="sacrifice--second">ица</span><span>.</span>,
    36, стр<span class="sacrifice--first">оение</span><span>.</span> 2
  </div>
</footer>

Для логичных переносов склеили неразрывными пробелами части адреса, сильно связанные друг с другом по смыслу: «Большая Новодмитровская улица», «36, строение 2»

.address {
  container-type: inline-size; /* Объявляем .address контейнером, с шириной которого можно делать медиавыражения */
}

.address .sacrifice--first + span,
.address .sacrifice--first + span {
  display: none; /* Скрываем спаны с точками, пока они не нужны */
}

@container (width <= 21em) { /* При ширине подвала менее 21em, используем первую волну сокращений */
  .address .sacrifice--first {
    display: none;
  }

  .address .sacrifice--first + span {
    display: inline;
  }
}

@container (width <= 19em) { /* При ширине подвала менее 19em, используем вторую волну сокращений */
  .address .sacrifice--second {
    display: none;
  }

  .address .sacrifice--second + span {
    display: inline;
  }
}

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

Container Queries. МДН

Шапки, меню, подвалы

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

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

Шапки, меню, подвалы

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

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

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