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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Сайдноуты

Сайд­но­уты — это при­ме­ча­ния на полях. Убе­ди­тесь, что раз­мер полей доста­то­чен и поставьте туда сайд­но­уты абсолютом:

/* Абсолют и вынос на поля только когда позволяет ширина экрана */
@media (width > 768px) {
  .layer {
    --sideWidth: 5em;  /* Ширину сайдноута — в переменную, чтобы не повторяться */
    position: relative; /* Для работы абсолютного позиционирования внутри слоя */
    padding-right: calc(var(--sideWidth) + 1em); /* Поля больше ширины сайдноута, чтобы был отступ от текста */
  }

  .sidenote {
    width: var(--sideWidth);
    position: absolute;
    right: 0;
  }
}

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

    <div class="sidenote">
      <a href="…">Интерфейс — зло</a>
    </div>

    <p>…</p>
    <p>…</p>
</div>

Бюро помо­гает созда­вать новые и улуч­шать суще­ству­ю­щие про­дукты и услуги.

Интер­фейс — зло

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

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

Бюро помогает создавать новые и улучшать существующие продукты и услуги.

Интер­фейс — зло

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

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

Сайдноуты

Сайдноуты — это примечания на полях. Убедитесь, что размер полей достаточен и поставьте туда сайдноуты абсолютом:

/* Абсолют и вынос на поля только когда позволяет ширина экрана */
@media (width > 768px) {
  .layer {
    --sideWidth: 5em;  /* Ширину сайдноута — в переменную, чтобы не повторяться */
    position: relative; /* Для работы абсолютного позиционирования внутри слоя */
    padding-right: calc(var(--sideWidth) + 1em); /* Поля больше ширины сайдноута, чтобы был отступ от текста */
  }

  .sidenote {
    width: var(--sideWidth);
    position: absolute;
    right: 0;
  }
}

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

    <div class="sidenote">
      <a href="…">Интерфейс — зло</a>
    </div>

    <p>…</p>
    <p>…</p>
</div>

У сайд­но­у­тов с абсо­лют­ным пози­ци­о­ни­ро­ва­нием есть проблема.

Чтобы на широ­ком экране они встали на поля, в раз­метке сайд­ноут дол­жен сто­ять над тек­стом, к кото­рому относится.

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

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

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

В иде­але — запро­грам­ми­ро­вать сайт, чтобы он созда­вал такие копии сайд­но­у­тов автоматически.

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

.sidenote:not(.is__sm) {
  display: none;
}

@media (width > 768px) {
  .sidenote.is__sm {
    display: none;
  }

  .sidenote:not(.is__sm) {
    display: block;
  }
}

Интер­фейс — зло

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

Интер­фейс — зло


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

Интер­фейс — зло

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

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

Интер­фейс — зло

Интер­фейс — зло

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

Интер­фейс — зло


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

Интер­фейс — зло

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

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

Интер­фейс — зло

У сайдноутов с абсолютным позиционированием есть проблема.

Чтобы на широком экране они встали на поля, в разметке сайдноут должен стоять над текстом, к которому относится.

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

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

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

В идеале — запрограммировать сайт, чтобы он создавал такие копии сайдноутов автоматически.

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

.sidenote:not(.is__sm) {
  display: none;
}

@media (width > 768px) {
  .sidenote.is__sm {
    display: none;
  }

  .sidenote:not(.is__sm) {
    display: block;
  }
}

Плашки

Плашка помо­гает отде­лить модуль от сосед­него и объ­еди­нить его соб­ствен­ные части. Оформ­ле­ние плашки — дань теку­щей моде или фир­мен­ному стилю, но её функ­ция оста­ётся одной и той же — выде­лять и объединять.

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

.boxed {
  padding: 36px 9px 72px;
  background: #f3f5f4;
}

<div class="boxed">
  <div class="cols">
    <!-- … -->
  </div>
</div>

О сетках:

  • Флексбоксы 

  • Гриды 

Когда жерт­во­вать сро­ком, бюд­же­том и каче­ством нельзя, мето­дом исклю­че­ния при­хо­дим к одному: жерт­вуем функ­ци­ями, «флек­сим». Отре­заем то, что не успе­ваем сде­лать. Этот вари­ант — боль­шая удача:

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

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

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

Когда жертвовать сроком, бюджетом и качеством нельзя, методом исключения приходим к одному: жертвуем функциями, «флексим». Отрезаем то, что не успеваем сделать. Этот вариант — большая удача:

Открытый вовремя продукт помогает быстрее узнать правду о продукте: изучить мнение пользователей и проверить гипотезы.

Когда отложенная функция добавится во второй версии, будет кого ей порадовать.

Плашки

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

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

.boxed {
  padding: 36px 9px 72px;
  background: #f3f5f4;
}

<div class="boxed">
  <div class="cols">
    <!-- … -->
  </div>
</div>

О сетках:

  • Флексбоксы 

  • Гриды 

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

Разбиваем проект на короткие итерации с регулярными пусками

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

Выносы и цитаты

Выносы и цитаты при­вле­кают вни­ма­ние. Если они инте­рес­ные — чита­телю захо­чется узнать подроб­но­сти в тек­сте. Вынос вер­стают обёрт­кой с осо­быми стилями:

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

.liftOut {
  font-size: 200%;
  padding-left: 1.25em;
  color: #00aff0;
}

.liftOut:not(:last-child) {
  margin-bottom: 1.25em;
}

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

Разбиваем проект на короткие итерации с регулярными пусками

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

Выносы и цитаты

Выносы и цитаты привлекают внимание. Если они интересные — читателю захочется узнать подробности в тексте. Вынос верстают обёрткой с особыми стилями:

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

.liftOut {
  font-size: 200%;
  padding-left: 1.25em;
  color: #00aff0;
}

.liftOut:not(:last-child) {
  margin-bottom: 1.25em;
}

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

Цитаты внутри тек­ста вер­стают тегом q.

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

<p>
  М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>

q {
  /* Отключаем ЦСС-кавычки */
  quotes: none;

  /* Стилизуем по вкусу */
  font-style: italic;
}

Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“».

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

Цитаты внутри текста верстают тегом q.

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

<p>
  М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>

q {
  /* Отключаем ЦСС-кавычки */
  quotes: none;

  /* Стилизуем по вкусу */
  font-style: italic;
}

Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“».

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