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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

На про­мах обычно раз­ме­щают при­зыв к дей­ствию (call to action) — модуль с кноп­кой покупки, фор­мой реги­стра­ции или теле­фо­ном для связи.

Раз­бе­рём вёрстку про­мо­стра­ницы на при­мере бюро.

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

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

На промах обычно размещают призыв к действию (call to action) — модуль с кнопкой покупки, формой регистрации или телефоном для связи.

Разберём вёрстку промостраницы на примере бюро.

Выра­зи­тель­ную шапку стра­ницы в запад­ном веб‑дизайне назы­вают «героем» (hero). Часто в её вёрстке исполь­зуют aspect-ratio и абсо­лют­ное пози­ци­о­ни­ро­ва­ние, чтобы рас­ста­вить модули вокруг и поверх текста.

Здесь и далее в коде сосре­до­то­чимся на рас­кладке, не вда­ва­ясь в подроб­но­сти сти­ли­за­ции внут­рен­них моду­лей. Об этом доста­точно ска­зано в про­шлых главах.

<!-- Контейнер на всю ширину -->
<div class="hero">

  <!-- Контентная область с ограниченной шириной -->
  <div class="heroIn">
    <div class="heroInfo">
      <b>Дистанционный курс …</b>
      <p>Перерождение классического курса …</p>
      <p>
        <span class="serif">24 февраля — 22 марта.</span>
        <b class="heroExpire">Запись открыта до ВС 23 фев</b>
      </p>
    </div>

    <h1 class="heroTitle">
      <!-- Здесь br уместен -->
      Переговоры <br/>
      и отношения <br/>
      с клиентами

      <span class="heroTitleVersion">2.0</span>
    </h1>

    <img class="heroAuthor" src="./ilya.png" alt="Фото Ильи Синельникова">

    <img class="heroGorilla" src="./gorilla.png" alt="…">
    <img class="heroChuvak" src="./chuvak.png" alt="…">
  </div>
</div>

.hero {
  background: #FCBF32;
  color: #000;
  padding-top: 60px;
}

.heroIn {
  max-width: 768px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  /* Контекст для позиционирования «абсолютных» модулей */
  position: relative;
}

.heroInfo {
  margin-bottom: 10px;
}

.heroExpire {
  color: #fc5621;
}

.heroTitle {
  font-size: 6vw;
  text-transform: uppercase;
}

.heroTitleVersion {
  display: block;
  text-align: right;
  color: #fc5621;
}

.heroAuthor {
  position: absolute;
  bottom: 0;
  /* Трюк для центровки модуля: сдвиг 50% родителя + смещение -50% собственной ширины*/
  left: 50%;
  translate: -50% 0;

  max-width: 50%;
}

.heroGorilla {
  position: absolute;
  top: 5%;
  right: 3%;
  max-width: 25%;
  transform: rotate(-5deg);
}

.heroChuvak {
  position: absolute;
  bottom: 25%;
  left: 7%;
  max-width: 15%;
  transform: rotate(-5deg);
}

Выразительную шапку страницы в западном веб‑дизайне называют «героем» (hero). Часто в её вёрстке используют aspect-ratio и абсолютное позиционирование, чтобы расставить модули вокруг и поверх текста.

Здесь и далее в коде сосредоточимся на раскладке, не вдаваясь в подробности стилизации внутренних модулей. Об этом достаточно сказано в прошлых главах.

<!-- Контейнер на всю ширину -->
<div class="hero">

  <!-- Контентная область с ограниченной шириной -->
  <div class="heroIn">
    <div class="heroInfo">
      <b>Дистанционный курс …</b>
      <p>Перерождение классического курса …</p>
      <p>
        <span class="serif">24 февраля — 22 марта.</span>
        <b class="heroExpire">Запись открыта до ВС 23 фев</b>
      </p>
    </div>

    <h1 class="heroTitle">
      <!-- Здесь br уместен -->
      Переговоры <br/>
      и отношения <br/>
      с клиентами

      <span class="heroTitleVersion">2.0</span>
    </h1>

    <img class="heroAuthor" src="./ilya.png" alt="Фото Ильи Синельникова">

    <img class="heroGorilla" src="./gorilla.png" alt="…">
    <img class="heroChuvak" src="./chuvak.png" alt="…">
  </div>
</div>

.hero {
  background: #FCBF32;
  color: #000;
  padding-top: 60px;
}

.heroIn {
  max-width: 768px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  /* Контекст для позиционирования «абсолютных» модулей */
  position: relative;
}

.heroInfo {
  margin-bottom: 10px;
}

.heroExpire {
  color: #fc5621;
}

.heroTitle {
  font-size: 6vw;
  text-transform: uppercase;
}

.heroTitleVersion {
  display: block;
  text-align: right;
  color: #fc5621;
}

.heroAuthor {
  position: absolute;
  bottom: 0;
  /* Трюк для центровки модуля: сдвиг 50% родителя + смещение -50% собственной ширины*/
  left: 50%;
  translate: -50% 0;

  max-width: 50%;
}

.heroGorilla {
  position: absolute;
  top: 5%;
  right: 3%;
  max-width: 25%;
  transform: rotate(-5deg);
}

.heroChuvak {
  position: absolute;
  bottom: 25%;
  left: 7%;
  max-width: 15%;
  transform: rotate(-5deg);
}

Ино­гда нет вре­мени или воз­мож­но­сти вер­стать слож­ную типо­гра­фику заголовка.

Можно сде­лать заго­ло­вок кар­тин­кой, но это плохо для поис­ко­вых робо­тов и про­грамм чте­ния с экрана.

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

Скройте текст, сде­лав его прозрачным.

Опасность. Исполь­зуйте трюк исклю­чи­тельно для дуб­ли­ро­ва­ния тек­ста, содер­жа­ще­гося на кар­тинке. Наме­рен­ное скры­тие тек­ста от поль­зо­ва­те­лей назы­ва­ется гостин­гом (ghosting) и сурово нака­зы­ва­ется поис­ко­ви­ками, вплоть до исклю­че­ния сайта из поис­ко­вой выдачи.

<div class="fakeHeading">
  <!-- По возможности используйте СВГ -->
  <img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами">

  <h1 class="fakeHeadingHidden">
    Переговоры <br>
    и отношения <br>
    с клиентами
  </h1>
</div>

.fakeHeading {
  max-width: 100%;
  position: relative;
  overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}

.fakeHeadingImg {
  display: block;
  width: 100%;
}

.fakeHeadingHidden {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5vw;
  color: transparent;

  /* Подгоняем текст по к картинке */
  margin: 0;
  text-transform: uppercase;
  font-size: 12.2vw;
  line-height: 1.05;
}
Пере­го­воры
и отно­ше­ния
с кли­ен­тами
Пере­го­воры
и отно­ше­ния
с кли­ен­тами
Переговоры
и отношения
с клиентами
Переговоры
и отношения
с клиентами

Иногда нет времени или возможности верстать сложную типографику заголовка.

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

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

Скройте текст, сделав его прозрачным.

Опасность. Используйте трюк исключительно для дублирования текста, содержащегося на картинке. Намеренное скрытие текста от пользователей называется гостингом (ghosting) и сурово наказывается поисковиками, вплоть до исключения сайта из поисковой выдачи.

<div class="fakeHeading">
  <!-- По возможности используйте СВГ -->
  <img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами">

  <h1 class="fakeHeadingHidden">
    Переговоры <br>
    и отношения <br>
    с клиентами
  </h1>
</div>

.fakeHeading {
  max-width: 100%;
  position: relative;
  overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}

.fakeHeadingImg {
  display: block;
  width: 100%;
}

.fakeHeadingHidden {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5vw;
  color: transparent;

  /* Подгоняем текст по к картинке */
  margin: 0;
  text-transform: uppercase;
  font-size: 12.2vw;
  line-height: 1.05;
}

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

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

<div class="rows">
  <div class="row">
    <div class="cols">
      <div class="col4">…</div>
      <div class="col6">…</div>
      <div class="col6">…</div>
    </div>
  </div>

  <div class="row">
    <h2>Добиваться своего …</h2>
    <div class="cols">
      <div class="col8">…</div>
      <div class="col4">…</div>
      <div class="col4">…</div>
    </div>
  </div>

  <div class="row">
    <h2>Больше зарабатывать</h2>
    <div class="cols">
      <div class="col4">…</div>
      <div class="col4">…</div>
      <div class="col8">…</div>
    </div>
  </div>
</div>

.rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cols {
  display: flex;
  gap: 20px;
}

.col2 {
  flex-grow: 2;
}

.col6 {
  flex-grow: 6;
}

.col8 {
  flex-grow: 8;
}

/* … */

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

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

<div class="rows">
  <div class="row">
    <div class="cols">
      <div class="col4">…</div>
      <div class="col6">…</div>
      <div class="col6">…</div>
    </div>
  </div>

  <div class="row">
    <h2>Добиваться своего …</h2>
    <div class="cols">
      <div class="col8">…</div>
      <div class="col4">…</div>
      <div class="col4">…</div>
    </div>
  </div>

  <div class="row">
    <h2>Больше зарабатывать</h2>
    <div class="cols">
      <div class="col4">…</div>
      <div class="col4">…</div>
      <div class="col8">…</div>
    </div>
  </div>
</div>

.rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cols {
  display: flex;
  gap: 20px;
}

.col2 {
  flex-grow: 2;
}

.col6 {
  flex-grow: 6;
}

.col8 {
  flex-grow: 8;
}

/* … */

Отзывы. Важ­ный модуль на про­мо­стра­нице — отзывы. Для выра­зи­тель­но­сти добавьте фото­гра­фии авто­ров, выносы важ­ных мыс­лей. Здесь так же полезно чере­до­вать ритм по вер­ти­кали: вер­стайте внут­рен­ние модули так, чтобы их можно было менять местами и ничего не ломалось.

<div class="reviews">
  <h2>Отзывы</h2>

  <div class="review">
    <div class="reviewAuthor">…</div>

    <div class="reviewContent">…</div>

    <div class="reviewSide">
      <div class="liftOut">…</div>
    </div>
  </div>

  <div class="review">
    <div class="reviewSide">
      <div class="liftOut">…</div>
    </div>

    <div class="reviewContent">…</div>

    <div class="reviewAuthor">…</div>
  </div>
</div>

.review {
  display: flex;
  gap: 10px;
}

.review + .review {
  margin-top: 20px;
}

.reviewAuthor {
  flex-grow: 2;
}

.reviewContent {
  flex-grow: 9;
}

.reviewSide {
  flex-grow: 2;
}

Отзывы. Важный модуль на промостранице — отзывы. Для выразительности добавьте фотографии авторов, выносы важных мыслей. Здесь так же полезно чередовать ритм по вертикали: верстайте внутренние модули так, чтобы их можно было менять местами и ничего не ломалось.

<div class="reviews">
  <h2>Отзывы</h2>

  <div class="review">
    <div class="reviewAuthor">…</div>

    <div class="reviewContent">…</div>

    <div class="reviewSide">
      <div class="liftOut">…</div>
    </div>
  </div>

  <div class="review">
    <div class="reviewSide">
      <div class="liftOut">…</div>
    </div>

    <div class="reviewContent">…</div>

    <div class="reviewAuthor">…</div>
  </div>
</div>

.review {
  display: flex;
  gap: 10px;
}

.review + .review {
  margin-top: 20px;
}

.reviewAuthor {
  flex-grow: 2;
}

.reviewContent {
  flex-grow: 9;
}

.reviewSide {
  flex-grow: 2;
}
Скрыто 20 разворотов
Закладки
Добавьте закладки
Ничего не нашлось