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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Пора­бо­таем с гото­вым набо­ром сти­лей на при­мере Бутстрапа.

Сна­чала под­клю­чим файл сти­лей Бут­страпа к стра­нице. Проще всего под­клю­чать прямо с сер­ве­ров Бут­страпа. Доба­вим акту­аль­ную ссылку с сайта Бут­страпа в head:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Или для надёж­но­сти ска­чаем файл по ссылке и будем дер­жать рядом с вёрсткой:

<link rel="stylesheet" href="./bootstrap.min.css">

Берём при­мер кода из доку­мен­та­ции Бут­страпа и убеж­да­емся, что стили под­клю­чи­лись и рабо­тают — на стра­нице появи­лась сти­ли­зо­ван­ная кнопка.

<button type="button" class="btn btn-primary">
  Inbox
  <span class="badge rounded-pill bg-danger">
    9+
  </span>
</button>

Кнопки. Документация Бутстрапа

Поработаем с готовым набором стилей на примере Бутстрапа.

Сначала подключим файл стилей Бутстрапа к странице. Проще всего подключать прямо с серверов Бутстрапа. Добавим актуальную ссылку с сайта Бутстрапа в head:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Или для надёжности скачаем файл по ссылке и будем держать рядом с вёрсткой:

<link rel="stylesheet" href="./bootstrap.min.css">

Берём пример кода из документации Бутстрапа и убеждаемся, что стили подключились и работают — на странице появилась стилизованная кнопка.

<button type="button" class="btn btn-primary">
  Inbox
  <span class="badge rounded-pill bg-danger">
    9+
  </span>
</button>

Кнопки. Документация Бутстрапа

8
4
2
10
6
4
2

Сетка в Бутстрапе

Клю­че­вая фишка Бут­страпа и дру­гих набо­ров сти­лей — гото­вые классы для работы с модуль­ной сеткой.

В Бут­страпе строки и ячейки сетки задают клас­сами row и col. Есть несколько вари­ан­тов работы с ними.

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

<div class="row">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-10"></div>
</div>

<div class="row">
  <div class="col-6"></div>
  <div class="col-4"></div>
  <div class="col-2"></div>
</div>

Вто­рой вари­ант — не ука­зы­вать ширину ячеек. Тогда они поде­лят доступ­ную ширину рав­но­мерно. Коли­че­ство таких ячеек в строке огра­ни­чено лишь здра­вым смыслом.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Ячейки с ука­зан­ной шири­ной и без можно ком­би­ни­ро­вать, но только если вы хорошо пони­ма­ете, зачем это дела­ете и как пове­дёт себя ито­го­вая вёрстка. Разо­браться с пове­де­нием клас­сов Бут­страпа в этом и дру­гих нестан­дарт­ных слу­чаях помо­жет тща­тель­ное изу­че­ние документации.

Модульная сетка. Документация Бутстрапа

8
4
2
10
6
4
2

Сетка в Бутстрапе

Ключевая фишка Бутстрапа и других наборов стилей — готовые классы для работы с модульной сеткой.

В Бутстрапе строки и ячейки сетки задают классами row и col. Есть несколько вариантов работы с ними.

Первый вариант — явно указать ширину ячеек в колонках в рамках 12‑колоночной сетки. Для корректной работы в таком случае, общая ширина ячеек в строке должна быть равна числу колонок — 12.

<div class="row">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-10"></div>
</div>

<div class="row">
  <div class="col-6"></div>
  <div class="col-4"></div>
  <div class="col-2"></div>
</div>

Второй вариант — не указывать ширину ячеек. Тогда они поделят доступную ширину равномерно. Количество таких ячеек в строке ограничено лишь здравым смыслом.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Ячейки с указанной шириной и без можно комбинировать, но только если вы хорошо понимаете, зачем это делаете и как поведёт себя итоговая вёрстка. Разобраться с поведением классов Бутстрапа в этом и других нестандартных случаях поможет тщательное изучение документации.

Модульная сетка. Документация Бутстрапа

Отступы в Бутстрапе

Отдель­ные классы в Бут­страпе управ­ляют падин­гами и мар­жи­нами — внут­рен­ними и внеш­ними отсту­пами эле­мента. Есть пять стан­дарт­ных раз­ме­ров отступов.

Класс p-1 уста­но­вит мини­маль­ный, а p-5 — мак­си­маль­ный воз­мож­ный падинг со всех четы­рёх сторон.

Классы с уточ­не­нием t, b, l, r (top, bottom, left, right) уста­но­вят падинг только с одной сто­роны, а с уточ­не­нием x или y — слева‑справа или сверху‑снизу.

<!-- Со всех сторон -->
<div class="p-1"></div>

<!-- Только сверху -->
<div class="pt-3"></div>

<!-- Сверху и снизу -->
<div class="pt-1 pb-2"></div>

<!-- Сверху и снизу -->
<div class="py-2"></div>

<!-- Сверху, снизу, слева и справа -->
<div class="pt-1 pb-2 px-2"></div>

Мар­жины зада­ются тем же обра­зом, но p меня­ется на m, а кроме зна­че­ний 1…5 доступно auto — отжать эле­мент до предела.

<div class="m-1"></div>

<div class="ml-2"></div>

<div class="ml-auto mt-4"></div>

Класcы падин­гов и мар­жи­нов можно комбинировать:

<div class="p-1 m-1"></div>

<div class="p-1 pl-3 ml-2"></div>

<div class="p-2 ml-auto mt-4"></div>

Отступы:

p‑1
pt‑3
pt‑1 pb‑2
py‑2
pt‑1 pb‑2 px‑2
m‑1
ml‑2
ml‑auto mt‑4
p‑1 m‑1
p‑1 pl‑3 ml‑2
p‑2 ml‑auto mt‑4
p‑1
pt‑3
pt‑1 pb‑2
py‑2
pt‑1 pb‑2 px‑2
m‑1
ml‑2
ml‑auto mt‑4
p‑1 m‑1
p‑1 pl‑3 ml‑2
p‑2 ml‑auto mt‑4

Отступы в Бутстрапе

Отдельные классы в Бутстрапе управляют падингами и маржинами — внутренними и внешними отступами элемента. Есть пять стандартных размеров отступов.

Класс p-1 установит минимальный, а p-5 — максимальный возможный падинг со всех четырёх сторон.

Классы с уточнением t, b, l, r (top, bottom, left, right) установят падинг только с одной стороны, а с уточнением x или y — слева‑справа или сверху‑снизу.

<!-- Со всех сторон -->
<div class="p-1"></div>

<!-- Только сверху -->
<div class="pt-3"></div>

<!-- Сверху и снизу -->
<div class="pt-1 pb-2"></div>

<!-- Сверху и снизу -->
<div class="py-2"></div>

<!-- Сверху, снизу, слева и справа -->
<div class="pt-1 pb-2 px-2"></div>

Маржины задаются тем же образом, но p меняется на m, а кроме значений 1…5 доступно auto — отжать элемент до предела.

<div class="m-1"></div>

<div class="ml-2"></div>

<div class="ml-auto mt-4"></div>

Класcы падингов и маржинов можно комбинировать:

<div class="p-1 m-1"></div>

<div class="p-1 pl-3 ml-2"></div>

<div class="p-2 ml-auto mt-4"></div>

Отступы:

Модификаторы ширины экрана в Бутстрапе

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

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Но если допи­сать к классу осо­бый моди­фи­ка­тор, то класс нач­нёт рабо­тать только начи­ная с опре­де­лён­ной ширины экрана.

Напри­мер, моди­фи­ка­тор lg (large) при­ме­нит класс только на ширине экрана от 992 пк. Доба­вив такой класс, можно поста­вить ячейки друг над дру­гом на узком экране и в ряд на широком:

<div class="row">
  <div class="col-12 col-lg-6"></div>
  <div class="col-12 col-lg-6"></div>
</div>

В Бут­страпе есть пять моди­фи­ка­то­ров экрана: sm, md, lg, xl, xxl. Они при­ме­нят класс от ширины 576, 768, 992, 1200 и 1400 пк соответственно.

По умол­ча­нию все­гда при­ме­нятся классы без моди­фи­ка­тора, а классы с моди­фи­ка­то­ром пере­би­вают их на своей ширине экрана. Напри­мер, такой код изме­нит внут­рен­ний отступ от мини­маль­ного на теле­фоне до мак­си­маль­ного на экране шири­ной 1200⁠—1399 пк и снова на мини­маль­ный, начи­ная с ширины 1400 пк:

<div class="p-1 p-md-3 p-xl-5 p-xxl-1"></div>

Не все классы Бут­страпа под­дер­жи­вают моди­фи­ка­торы. Про­ве­рить под­держку можно экс­пе­ри­мен­таль­ным путём или загля­нув в доку­мен­та­цию инте­ре­су­ю­щего класса.

Документация Бутстрапа

Модификаторы ширины экрана в Бутстрапе

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

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Но если дописать к классу особый модификатор, то класс начнёт работать только начиная с определённой ширины экрана.

Например, модификатор lg (large) применит класс только на ширине экрана от 992 пк. Добавив такой класс, можно поставить ячейки друг над другом на узком экране и в ряд на широком:

<div class="row">
  <div class="col-12 col-lg-6"></div>
  <div class="col-12 col-lg-6"></div>
</div>

В Бутстрапе есть пять модификаторов экрана: sm, md, lg, xl, xxl. Они применят класс от ширины 576, 768, 992, 1200 и 1400 пк соответственно.

По умолчанию всегда применятся классы без модификатора, а классы с модификатором перебивают их на своей ширине экрана. Например, такой код изменит внутренний отступ от минимального на телефоне до максимального на экране шириной 1200⁠—1399 пк и снова на минимальный, начиная с ширины 1400 пк:

<div class="p-1 p-md-3 p-xl-5 p-xxl-1"></div>

Не все классы Бутстрапа поддерживают модификаторы. Проверить поддержку можно экспериментальным путём или заглянув в документацию интересующего класса.

Документация Бутстрапа

Гото­вый набор сти­лей — не все­гда хоро­ший выбор. Не cтоит без­думно тащить его в любую вёрстку.

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

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

Изучать и применять осмысленно следует любые готовые решения

Готовый набор стилей — не всегда хороший выбор. Не cтоит бездумно тащить его в любую вёрстку.

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

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

Изучать и применять осмысленно следует любые готовые решения

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