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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Позициони­ро­вание

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

По умол­ча­нию блоки выстра­и­ва­ются друг под дру­гом. С помо­щью position можно изме­нить это пове­де­ние и раз­ме­стить эле­мент в любом месте стра­ницы, задав ему коор­ди­наты свой­ствами top, right, left и bottom. Есть пять зна­че­ний свойства:

Static

Это зна­че­ние по умол­ча­нию, отсут­ствие какого‑либо пози­ци­о­ни­ро­ва­ния. Эле­менты про­сто выстра­и­ва­ются друг под другом.

Relative

Эле­мент с отно­си­тель­ным пози­ци­о­ни­ро­ва­нием сдви­га­ется со сво­его места, не влияя на поло­же­ние сосед­них элементов.

position: relative;
left: 50px;
top: 80px;

Absolute

Эле­мент с абсо­лют­ным пози­ци­о­ни­ро­ва­нием рас­по­ла­га­ется по задан­ным коор­ди­на­там, а из того места, где он был, удаляется.

position: absolute;
left: 50px;
top: 80px;

По умол­ча­нию эти коор­ди­наты отсчи­ты­ва­ются от окна. Но если у эле­мента есть роди­тель с position: relative или absolute, то коор­ди­наты будут отсчи­ты­ваться уже от него.

Fixed и sticky

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

position: sticky;
top: 18px;

Чаще всего исполь­зу­ется для «зали­па­ю­щих» эле­мен­тов. Напри­мер, с помо­щью position: sticky зали­пают иконки закладки и поиска в нашей книге. Ана­ло­гично рабо­тает и этот раз­во­рот: стра­ница с при­ме­ром зали­пает с position: sticky, а дру­гая прокручивается.

Позициони­ро­вание

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

По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:

Static

Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.

Relative

Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.

position: relative;
left: 50px;
top: 80px;

Absolute

Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.

position: absolute;
left: 50px;
top: 80px;

По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.

Fixed и sticky

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

position: sticky;
top: 18px;

Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.

position: relative

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

.dots { position: relative }
.dot { position: absolute } 

.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }

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

.dots { position: relative }

.dot {
  position: absolute;
  top: 0;
  right: 0;
}

position: relative

Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:

.dots { position: relative }
.dot { position: absolute } 

.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }

Важный момент: абсолютно спозиционированный элемент будет отсчитывать свои координаты от ближайшего родителя с position: relative

.dots { position: relative }

.dot {
  position: absolute;
  top: 0;
  right: 0;
}

position: absolute

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

Так в при­мере выше мы исполь­зуем псевдо‑эле­мент ::before, чтобы доба­вить верх­нюю линейку к меню, и ::after, чтобы доба­вить ниж­нюю линейку и звёз­дочку к пункту меню.

Также обра­тите вни­ма­ние на отри­ца­тель­ные коор­ди­наты: с помо­щью абсо­лют­ного пози­ци­о­ни­ро­ва­ния эле­менты можно рас­тя­ги­вать и выно­сить за пре­делы контейнера.

nav {
  /* Абсолютно спозиционированные линейки
    будут отсчитывать свои координаты от меню */
  position: relative;
  /* Добавляем поля сверху-снизу */
  padding: 0 8px;
}

nav::before,
nav::after {
  /* Используем псевдо-элементы в качестве линеек:
    даём им высоту и фон */
  content: '';
  height: 1px;
  background: rgba(0, 0, 0, .07);
  /* Растягиваем линейки от края до края без полей */
  position: absolute;
  left: -8px;
  right: -8px;
}

nav::before {
  /* Первую линейку ставим над меню */
  top: 0;
}

nav::after {
  /* Вторую линейку ставим под меню */
  bottom: -4px;
}

nav li:nth-child(3) {
  /* У «Домов» будет свой особенный значок */
  position: relative;
}

nav li:nth-child(3)::after {
  /* Добавляем звёздочку перед «Домами» */
  content: '★';
  color: red;
  /* Ставим её перед текстом */
  position: absolute;
  right: 100%;
  margin-right: 1px;
}

position: absolute

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

Так в примере выше мы используем псевдо‑элемент ::before, чтобы добавить верхнюю линейку к меню, и ::after, чтобы добавить нижнюю линейку и звёздочку к пункту меню.

Также обратите внимание на отрицательные координаты: с помощью абсолютного позиционирования элементы можно растягивать и выносить за пределы контейнера.

nav {
  /* Абсолютно спозиционированные линейки
    будут отсчитывать свои координаты от меню */
  position: relative;
  /* Добавляем поля сверху-снизу */
  padding: 0 8px;
}

nav::before,
nav::after {
  /* Используем псевдо-элементы в качестве линеек:
    даём им высоту и фон */
  content: '';
  height: 1px;
  background: rgba(0, 0, 0, .07);
  /* Растягиваем линейки от края до края без полей */
  position: absolute;
  left: -8px;
  right: -8px;
}

nav::before {
  /* Первую линейку ставим над меню */
  top: 0;
}

nav::after {
  /* Вторую линейку ставим под меню */
  bottom: -4px;
}

nav li:nth-child(3) {
  /* У «Домов» будет свой особенный значок */
  position: relative;
}

nav li:nth-child(3)::after {
  /* Добавляем звёздочку перед «Домами» */
  content: '★';
  color: red;
  /* Ставим её перед текстом */
  position: absolute;
  right: 100%;
  margin-right: 1px;
}

position: fixed и sticky

Фик­си­ро­ван­ное пози­ци­о­ни­ро­ва­ние исполь­зуют для штук, кото­рые все­гда должны быть в обла­сти види­мо­сти: кнопка «Зака­зать дизайн», диа­лог в Чатре или сооб­ще­ние об исполь­зо­ва­нии кук на сайте.

.fixed {
  position: fixed;
  left: 20px;
  bottom: 20px;
}
⌘

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

.sticky {
  position: sticky;
  top: 20px;
}
⌘

Как на самом деле работает position: sticky

position: fixed и sticky

Фиксированное позиционирование используют для штук, которые всегда должны быть в области видимости: кнопка «Заказать дизайн», диалог в Чатре или сообщение об использовании кук на сайте.

.fixed {
  position: fixed;
  left: 20px;
  bottom: 20px;
}
⌘

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

.sticky {
  position: sticky;
  top: 20px;
}
⌘

Как на самом деле работает position: sticky

Кто такой? Чем зна­ме­нит?Я вели­кий ком­би­на­тор, идей­ный борец за денеж­ные знаки.Кроме того, я знаю четы­ре­ста срав­ни­тельно чест­ных спо­соба отъ­ёма денег.АферыВ городе Арба­тове выдал себя за сына лей­те­нанта Шмидта и полу­чил от пред­се­да­теля гор­ис­пол­кома неболь­шую мате­ри­аль­ную помощь.

Флоаты

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

Фло­аты исполь­зуют редко, чаще всего, чтобы задать кар­тинке обте­ка­ние текстом:

<section>
  <img src="ostap.jpg">

  <h3>Кто такой? Чем знаменит?</h3>
  <p>
     Я великий комбинатор,
     идейный борец за денежные знаки.
  </p>
  <p>
     Кроме того, я знаю четыреста сравнительно честных
     способа отъёма денег.
  </p>
</section>
img {
  /* Прижимаем картинку вправо */
  float: right;
  /* Фиксируем высоту картинки */
  height: 8em;
  width: auto;
  /* Добавляем отступ слева,
    чтобы текст не влипал в иллюстрацию */
  margin-left: 1em;
}

Давным‑давно разработчики «хакали» ЦСС, создавая колоночную вёрстку на флоатах и маржинах:

Кто такой? Чем знаменит?Я великий комбинатор, идейный борец за денежные знаки.Кроме того, я знаю четыреста сравнительно честных способа отъёма денег.АферыВ городе Арбатове выдал себя за сына лейтенанта Шмидта и получил от председателя горисполкома небольшую материальную помощь.

Флоаты

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

Флоаты используют редко, чаще всего, чтобы задать картинке обтекание текстом:

<section>
  <img src="ostap.jpg">

  <h3>Кто такой? Чем знаменит?</h3>
  <p>
     Я великий комбинатор,
     идейный борец за денежные знаки.
  </p>
  <p>
     Кроме того, я знаю четыреста сравнительно честных
     способа отъёма денег.
  </p>
</section>
img {
  /* Прижимаем картинку вправо */
  float: right;
  /* Фиксируем высоту картинки */
  height: 8em;
  width: auto;
  /* Добавляем отступ слева,
    чтобы текст не влипал в иллюстрацию */
  margin-left: 1em;
}

Давным‑давно разработчики «хакали» ЦСС, создавая колоночную вёрстку на флоатах и маржинах:

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