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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Призыв к действию. Клю­че­вой модуль про­мо­стра­ницы — при­зыв к целе­вому дей­ствию (CTA, call to action). Мы назы­ваем этот блок товар­ным пред­ло­же­нием. Рас­кладка и состав зави­сят от продукта.

Рецепт вёрстки клас­си­че­ский: собе­рите рас­кладку флек­сами или гри­дами, затем после­до­ва­тельно сти­ли­зуйте внут­рен­ние элементы.

<div class="cols">
  <div class="col">
    <h3>Когда что выйдет</h3>
    <p>…</p>
    <form class="subscriptionForm">…</form>
  </div>
  <div class="col">
    <h3>Подписка</h3>
    <div class="prices">…</div>
    <p>…</p>
  </div>
</div>

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

Призыв к действию. Ключевой модуль промостраницы — призыв к целевому действию (CTA, call to action). Мы называем этот блок товарным предложением. Раскладка и состав зависят от продукта.

Рецепт вёрстки классический: соберите раскладку флексами или гридами, затем последовательно стилизуйте внутренние элементы.

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

<div class="cols">
  <div class="col">
    <h3>Когда что выйдет</h3>
    <p>…</p>
    <form class="subscriptionForm">…</form>
  </div>
  <div class="col">
    <h3>Подписка</h3>
    <div class="prices">…</div>
    <p>…</p>
  </div>
</div>

Залипающая кнопка. Чтобы кнопка оста­ва­лась на виду при про­крутке, её можно зафик­си­ро­вать с помо­щью position: fixed. Но чтобы огра­ни­чить диа­па­зон про­крутки и кнопка не зале­зала в шапку и под­вал, лучше исполь­зо­вать position: sticky в «шахте».

<div class="promo">
  <!-- … -->
  <div class="stickyShaft">
    <div class="stickyContent">…</div>
  </div>
</div>

.stickyShaft {
  position: absolute;
  right: 32px;
  bottom: 144px;
  top: 75vh;
  width: 0;
}

.stickyContent {
  position: sticky;
  top: calc(100vh - 75px);
}

Залипающая кнопка. Чтобы кнопка оставалась на виду при прокрутке, её можно зафиксировать с помощью position: fixed. Но чтобы ограничить диапазон прокрутки и кнопка не залезала в шапку и подвал, лучше использовать position: sticky в «шахте».

<div class="promo">
  <!-- … -->
  <div class="stickyShaft">
    <div class="stickyContent">…</div>
  </div>
</div>

.stickyShaft {
  position: absolute;
  right: 32px;
  bottom: 144px;
  top: 75vh;
  width: 0;
}

.stickyContent {
  position: sticky;
  top: calc(100vh - 75px);
}

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

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

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

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

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

Захари Смол и Рамси Тейлор. 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

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