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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Адаптивные картинки, picture

Если атри­бут srcset под­ска­зы­вает бра­у­зеру, какую кар­тинку выбрать, то тег picture явно ука­зы­вает, какую кар­тинку выбрать. Обычно srcset исполь­зуют для опти­ми­за­ции, а picture — для работы с внеш­ним видом страницы.

Пока­жем раз­ные по фор­мату банеры на раз­ных раз­ме­рах окна:

<picture>
  <source 
    srcset="banner-wide.jpg"
    media="(width >= 1440px)"
  >
  <source 
    srcset="banner.jpg"
    media="(width > 768px)"
  >
  <!-- Если ни одно условие выше не выполняется -->
  <img src="banner-square.jpg">
</picture>

При ширине окна от 1440 пк

768⁠—1399 пк

При другой ширине

Адаптивные картинки, picture

Если атрибут srcset подсказывает браузеру, какую картинку выбрать, то тег picture явно указывает, какую картинку выбрать. Обычно srcset используют для оптимизации, а picture — для работы с внешним видом страницы.

Покажем разные по формату банеры на разных размерах окна:

<picture>
  <source 
    srcset="banner-wide.jpg"
    media="(width >= 1440px)"
  >
  <source 
    srcset="banner.jpg"
    media="(width > 768px)"
  >
  <!-- Если ни одно условие выше не выполняется -->
  <img src="banner-square.jpg">
</picture>

При ширине окна от 1440 пк

768⁠—1399 пк

768⁠—1399 пк

В про­дви­ну­той раз­ра­ботке созда­ние адап­тив­ных кар­ти­нок авто­ма­ти­зи­руют: про­грамма гене­ри­рует весь код и нуж­ные вер­сии самих картинок.

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

Удоб­ный и эффек­тив­ный инстру­мент опти­ми­за­ции кар­ти­нок при руч­ной вёрстке — про­грамма ImageOptim. Она заметно умень­шает раз­мер кар­ти­нок без потери каче­ства и этим уско­ряет загрузку стра­ницы на всех устройствах.

ImageOptim — полезная программа для оптимизации картинок на сайте

Перетащите папку с вёрсткой внутрь программы, она сама найдёт и оптимизирует все картинки внутри папки

В продвинутой разработке создание адаптивных картинок автоматизируют: программа генерирует весь код и нужные версии самих картинок.

Ручное описание и поддержка srcset или picture требует много времени и внимания, большой шанс что‑то упустить или ошибиться. Поэтому советуем при ручной вёрстке не стремиться сделать все картинки максимально адаптивными, а ограничиться точечными оптимизациями самой тяжёлой графики.

Удобный и эффективный инструмент оптимизации картинок при ручной вёрстке — программа ImageOptim. Она заметно уменьшает размер картинок без потери качества и этим ускоряет загрузку страницы на всех устройствах.

ImageOptim — полезная программа для оптимизации картинок на сайте

Перетащите папку с вёрсткой внутрь программы, она сама найдёт и оптимизирует все картинки внутри папки

Тест

Какое ЦСС‑правило включит гриды для элемента? 

position: grid;

display: grid;

display: grid-columns;

display: rows-cols;

grid-template-rows: auto;

grid-columns: 1fr 1fr;

Выберите верные утверждения о гридах.

Для грид‑контейнера задают ячейки, элементы внутри контейнера распределяются по этим ячейкам
Размеры колонок и строк задают только в относительных единицах измерения
Ячейки могут быть не фиксированными: тянуться или занимать всё доступное место
Гриды не имеют собственного свойства для управления отступами элементов

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

Какой вид раскладки применится в приведённом коде и почему?

.box {
  display: flex;
  display: grid;
}

При конфликте в ЦСС применяются стили, объявленные ниже, кроме случаев, когда у стилей выше большая специфичность

  • Конфликты стилей 

Гриды, потому что это более современный вид раскладки

Гриды, потому что свойство с ними объявлено ниже

Флексбокс, потому что свойство объявлено выше

Флексбокс, потому что это наиболее поддерживаемый и распространённый вид раскладки

Не применятся ни гриды, ни флексбоксы, потому что произойдёт конфликт свойства

Применятся и гриды и флексбоксы по принципу каскада

За что отвечает свойство grid-auto-flow?

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

По умолчанию элементы заполняют грид‑контейнер ряд за рядом, а если указать grid‑auto‑flow: column — начнут заполнять колонку за колонкой, сверху вниз

grid‑auto‑flow 

grid-template-columns: 1fr 1fr;

grid-template-columns: 2fr 2fr;

grid-template-columns: 1fr auto;

grid-template-columns: auto;

grid-template-columns: equal;

grid-template: equal;

Какой код заставит две грид‑колонки равномерно растянуться и занять всё доступное пространство?

Чтобы равномерно растянуть несколько колонок, укажите им одинаковые размеры в fr

Что рекомендуют авторы книги при выборе между флексбоксами и гридами?

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

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

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

К чему может привести указание размеров элемента в пикселях?

Элемент не влезет в экран, если будет больше него по размеру

Содержимое элемента может переполнить его и обрезаться

Произойдёт синтаксическая ошибка и остановка применения дальнейших стилей

Элемент станет труднее переиспользовать

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

Чем опасны размеры в пикселях в ЦСС?

Как работает свойство overflow?

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

Что такое медиавыражение?

Медиавыражение — это указание предпочтительного формата отображения страницы, например без мобильной версии

Медиавыражение — это набор стилей, применяющиеся при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя

Медиавыражение — это особое представление страницы в виде превью для рассылок, социальных сетей и медиаплатформ

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Какое ЦСС‑правило включит гриды для элемента? 

position: grid;

display: grid;

display: grid-columns;

display: rows-cols;

grid-template-rows: auto;

grid-columns: 1fr 1fr;

Выберите верные утверждения о гридах.

Для грид‑контейнера задают ячейки, элементы внутри контейнера распределяются по этим ячейкам
Размеры колонок и строк задают только в относительных единицах измерения
Ячейки могут быть не фиксированными: тянуться или занимать всё доступное место
Гриды не имеют собственного свойства для управления отступами элементов

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

Какой вид раскладки применится в приведённом коде и почему?

.box {
  display: flex;
  display: grid;
}

При конфликте в ЦСС применяются стили, объявленные ниже, кроме случаев, когда у стилей выше большая специфичность

  • Конфликты стилей 

Гриды, потому что это более современный вид раскладки

Гриды, потому что свойство с ними объявлено ниже

Флексбокс, потому что свойство объявлено выше

Флексбокс, потому что это наиболее поддерживаемый и распространённый вид раскладки

Не применятся ни гриды, ни флексбоксы, потому что произойдёт конфликт свойства

Применятся и гриды и флексбоксы по принципу каскада

За что отвечает свойство grid-auto-flow?

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

По умолчанию элементы заполняют грид‑контейнер ряд за рядом, а если указать grid‑auto‑flow: column — начнут заполнять колонку за колонкой, сверху вниз

grid‑auto‑flow 

grid-template-columns: 1fr 1fr;

grid-template-columns: 2fr 2fr;

grid-template-columns: 1fr auto;

grid-template-columns: auto;

grid-template-columns: equal;

grid-template: equal;

Какой код заставит две грид‑колонки равномерно растянуться и занять всё доступное пространство?

Чтобы равномерно растянуть несколько колонок, укажите им одинаковые размеры в fr

Что рекомендуют авторы книги при выборе между флексбоксами и гридами?

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

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

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

К чему может привести указание размеров элемента в пикселях?

Элемент не влезет в экран, если будет больше него по размеру

Содержимое элемента может переполнить его и обрезаться

Произойдёт синтаксическая ошибка и остановка применения дальнейших стилей

Элемент станет труднее переиспользовать

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

Чем опасны размеры в пикселях в ЦСС?

Как работает свойство overflow?

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

Что такое медиавыражение?

Медиавыражение — это указание предпочтительного формата отображения страницы, например без мобильной версии

Медиавыражение — это набор стилей, применяющиеся при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя

Медиавыражение — это особое представление страницы в виде превью для рассылок, социальных сетей и медиаплатформ

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

4
Страницы

Кон­струк­торы сайтов 

Гото­вые наборы стилей 

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

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

Визитка 

Портфолио 

Промостраница 

Статья 

Каталог 

Интерфейс 

4
Страницы

Конструкторы сайтов 

Готовые наборы стилей 

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

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

Визитка 

Портфолио 

Промостраница 

Статья 

Каталог 

Интерфейс 

Интерфейс конструкторов напоминает Фигму, а получившийся дизайн можно сразу опубликовать в интернете. Редимаг

Конструкторы сайтов

Кон­струк­тор — быст­рый спо­соб запу­стить сайт без напи­са­ния кода.

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

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

Кон­струк­то­ров много, они похожи прин­ци­пи­ально, но отли­ча­ются в дета­лях. В этой главе коротко о Тильде, Реди­маге и Веб­флоу. У всех трёх есть бес­плат­ные и рас­ши­рен­ные плат­ные версии.

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

Интерфейс конструкторов напоминает Фигму, а получившийся дизайн можно сразу опубликовать в интернете. Редимаг

Конструкторы сайтов

Конструктор — быстрый способ запустить сайт без написания кода.

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

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

Конструкторов много, они похожи принципиально, но отличаются в деталях. В этой главе коротко о Тильде, Редимаге и Вебфлоу. У всех трёх есть бесплатные и расширенные платные версии.

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

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