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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

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

<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;
}

Призыв к действию. Клю­че­вой модуль про­мо­стра­ницы — при­зыв к целе­вому дей­ствию (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

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