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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Интерактивная статья

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

Раз­бе­рём при­ёмы вёрстки интер­ак­тив­ной статьи.

Вёрстка базовой текстовой страницы:

  • Текстовые модули  

Захари Смол и Рамси Тейлор. How The Legend of Zelda Changed the Game

Интерактивная статья

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

Разберём приёмы вёрстки интерактивной статьи.

Вёрстка базовой текстовой страницы:

  • Текстовые модули  

Захари Смол и Рамси Тейлор. How The Legend of Zelda Changed the Game

Бутерброд

Самая рас­про­стра­нён­ная струк­тура интер­ак­тив­ной ста­тьи — «бутер­брод», в кото­ром модули рас­по­ло­жены сло­ями, или эта­жами, друг под другом.

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

.layer {
  max-width: 768px;
  margin: 0 auto;
}

.layer.fullWidth {
  max-width: none;
}

.layer + .layer {
  margin-top: 72px;
}

<div class="layer fullWidth">
  <img src="cover.jpg" alt="…">
</div>

<div class="layer">
  <p>…</p>
  <p>…</p>
</div>

<div class="layer">
  <figure class="image">
    <img src="…" alt="…">
    <figcaption>…</figcaption>
  </figure>
</div>

<div class="layer">
  <p>…</p>
</div>

Иллюстрация с подписью 

Бутерброд

Самая распространённая структура интерактивной статьи — «бутерброд», в котором модули расположены слоями, или этажами, друг под другом.

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

.layer {
  max-width: 768px;
  margin: 0 auto;
}

.layer.fullWidth {
  max-width: none;
}

.layer + .layer {
  margin-top: 72px;
}

<div class="layer fullWidth">
  <img src="cover.jpg" alt="…">
</div>

<div class="layer">
  <p>…</p>
  <p>…</p>
</div>

<div class="layer">
  <figure class="image">
    <img src="…" alt="…">
    <figcaption>…</figcaption>
  </figure>
</div>

<div class="layer">
  <p>…</p>
</div>

Иллюстрация с подписью 

Фоторама

Фото­рама — это гале­рея фото­гра­фий с одной круп­ной фото­гра­фией и воз­мож­но­стью про­ли­сты­ва­ния и выбора дру­гих фото­гра­фий по превьюшкам.

В ХТМЛ нет спе­ци­аль­ных тегов для вёрстки фото­рамы, для этого исполь­зуют Яваскрипт‑библиотеки.

Сове­туем биб­лио­теку «Фото­рама» Артёма Поли­кар­пова. Она под­клю­ча­ется в одно дви­же­ние, акку­ратно выгля­дит, умеет откры­вать фото на весь экран и под­дер­жи­вает видео.

Ска­чайте архив с сайта «Фото­рамы», рас­па­куйте файлы рядом с вашей вёрст­кой и добавьте код в head: 

<!-- Вспомогательные библиотеки, подключаем из интернета, но можно скачать и тоже держать рядом с вёрсткой -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="./fotorama.css" rel="stylesheet">
<script src="./fotorama.js">
</script>

Затем в нуж­ном месте стра­ницы обер­ните кар­тинки в эле­мент с клас­сом fotorama. Атри­бу­тами по жела­нию вклю­чите инфор­ма­тив­ные пре­вьюшки и воз­мож­ность раз­во­ра­чи­вать фото на весь экран. Инструк­ции на сайте помо­гут настро­ить дизайн и пове­де­ние «Фоторамы».

<div class="fotorama"
  data-allowfullscreen="true"
  data-nav="thumbs"
  data-thumbwidth="160px"
  data-thumbheight="90px">

  <img src="./house-1.jpg">
  <img src="./house-2.jpg">
  <img src="./house-3.jpg">
  <img src="./house-4.jpg">
  <img src="./house-5.jpg">
</div>

Fotorama

Фоторама

Фоторама — это галерея фотографий с одной крупной фотографией и возможностью пролистывания и выбора других фотографий по превьюшкам.

В ХТМЛ нет специальных тегов для вёрстки фоторамы, для этого используют Яваскрипт‑библиотеки.

Советуем библиотеку «Фоторама» Артёма Поликарпова. Она подключается в одно движение, аккуратно выглядит, умеет открывать фото на весь экран и поддерживает видео.

Скачайте архив с сайта «Фоторамы», распакуйте файлы рядом с вашей вёрсткой и добавьте код в head: 

<!-- Вспомогательные библиотеки, подключаем из интернета, но можно скачать и тоже держать рядом с вёрсткой -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="./fotorama.css" rel="stylesheet">
<script src="./fotorama.js">
</script>

Затем в нужном месте страницы оберните картинки в элемент с классом fotorama. Атрибутами по желанию включите информативные превьюшки и возможность разворачивать фото на весь экран. Инструкции на сайте помогут настроить дизайн и поведение «Фоторамы».

<div class="fotorama"
  data-allowfullscreen="true"
  data-nav="thumbs"
  data-thumbwidth="160px"
  data-thumbheight="90px">

  <img src="./house-1.jpg">
  <img src="./house-2.jpg">
  <img src="./house-3.jpg">
  <img src="./house-4.jpg">
  <img src="./house-5.jpg">
</div>

Fotorama

Плееры видеохостингов умеют запоминать позицию, настраивать субтитры и скорость просмотра

Видео

Самый про­стой спо­соб доба­вить видео на стра­ницу — загру­зить на видео­хо­стинг (Ютуб, ВК, Вимео) и встро­ить оттуда.

Так вы не замо­ра­чи­ва­е­тесь с хра­не­нием видео, полу­ча­ете про­дви­ну­тый плеер, а глав­ное — пото­ко­вое вос­про­из­ве­де­ние: видео можно начать смот­реть с любого места, не дожи­да­ясь пол­ной загрузки. Это осо­бенно полезно для длин­ных лек­ций или новостей.

Минус видео­хо­стин­гов — видео хра­нится не у вас. Хостинг может вдруг закрыться или уда­лить ваши видео, хра­ните резерв­ные копии на чёр­ный день.

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

<!-- Уберите из кода встраивания атрибуты width и height, если хотите задать размеры в ЦСС -->
<iframe class="vkVideo" src="https://vk.com/video_ext.php?oid=-113157690&id=456239826&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>

.vkVideo {
  aspect-ratio: 16/9;
}

Плееры видеохостингов умеют запоминать позицию, настраивать субтитры и скорость просмотра

Видео

Самый простой способ добавить видео на страницу — загрузить на видеохостинг (Ютуб, ВК, Вимео) и встроить оттуда.

Так вы не заморачиваетесь с хранением видео, получаете продвинутый плеер, а главное — потоковое воспроизведение: видео можно начать смотреть с любого места, не дожидаясь полной загрузки. Это особенно полезно для длинных лекций или новостей.

Минус видеохостингов — видео хранится не у вас. Хостинг может вдруг закрыться или удалить ваши видео, храните резервные копии на чёрный день.

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

<!-- Уберите из кода встраивания атрибуты width и height, если хотите задать размеры в ЦСС -->
<iframe class="vkVideo" src="https://vk.com/video_ext.php?oid=-113157690&id=456239826&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>

.vkVideo {
  aspect-ratio: 16/9;
}

Видео­файл можно раз­ме­стить в фай­лах вашего сайта и под­клю­чать вруч­ную тегом video:

<!-- poster — путь до обложки, которая будет видна, пока видео не включат, controls — включает элементы управления плеером -->
<video 
  class="video" 
  src="./videos/rickroll.mp4" 
  poster="./videos/rickroll-preview.jpg"
  controls
></video>

.video {
  width: 100%;
  aspect-ratio: 4/3.15;
  /* Заклинание для масштабирования видео под любые размеры тега */
  object-fit: cover;
  object-position: center;
}

С руч­ным под­клю­че­нием много заморочек.

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

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

Ещё видео­файлы при­дётся хра­нить в фай­лах сайта на сер­вере. Место на сер­вере плат­ное, хра­не­ние тяжё­лых фай­лов вле­тит в копеечку.

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

Видеофайл можно разместить в файлах вашего сайта и подключать вручную тегом video:

<!-- poster — путь до обложки, которая будет видна, пока видео не включат, controls — включает элементы управления плеером -->
<video 
  class="video" 
  src="./videos/rickroll.mp4" 
  poster="./videos/rickroll-preview.jpg"
  controls
></video>

.video {
  width: 100%;
  aspect-ratio: 4/3.15;
  /* Заклинание для масштабирования видео под любые размеры тега */
  object-fit: cover;
  object-position: center;
}

С ручным подключением много заморочек.

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

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

Ещё видеофайлы придётся хранить в файлах сайта на сервере. Место на сервере платное, хранение тяжёлых файлов влетит в копеечку.

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

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