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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Редимаг

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

Но Реди­маг — доро­гое удо­воль­ствие. Годо­вая под­писка обой­дётся при­мерно в 500 дол­ла­ров, могут быть про­блемы с опла­той рос­сий­ской кар­той. Без плат­ной под­писки нельзя раз­ме­стить сайт на соб­ствен­ном домене и недо­ступны важ­ные биз­нес‑функ­ции вроде при­ёма заявок из форм и под­клю­че­ния систем аналитики.

readymag.com

Красивые сайты, сделанные в Редимаге
Readymag Examples

Редимаг

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

Но Редимаг — дорогое удовольствие. Годовая подписка обойдётся примерно в 500 долларов, могут быть проблемы с оплатой российской картой. Без платной подписки нельзя разместить сайт на собственном домене и недоступны важные бизнес‑функции вроде приёма заявок из форм и подключения систем аналитики.

readymag.com

Красивые сайты, сделанные в Редимаге
Readymag Examples

webflow.com

Webflow

Вебфлоу

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

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

webflow.com

Webflow

Вебфлоу

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

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

Готовые наборы стилей

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

Наборы отли­ча­ются содер­жи­мым: в лег­ко­вес­ном «Симпл‑грид» только классы для работы с модуль­ной сет­кой, а в огром­ном «Бут­страпе» есть стили на любой слу­чай жизни, свой набор ико­нок и даже опци­о­наль­ный пакет Яваскрипт‑примочек.

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

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

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

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

Набор стилей «Бутстрап»

Готовые наборы стилей

Чтобы сэкономить время на написании стилей, разработчики используют готовые наборы — файлы с ЦСС‑классами для решения типовых задач.

Наборы отличаются содержимым: в легковесном «Симпл‑грид» только классы для работы с модульной сеткой, а в огромном «Бутстрапе» есть стили на любой случай жизни, свой набор иконок и даже опциональный пакет Яваскрипт‑примочек.

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

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

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

Готовые наборы подойдут, когда нужно верстать много, быстро и без заморочек с уникальным дизайном. Например, для вёрстки прототипов или внутренних интерфейсов.

Набор стилей «Бутстрап»

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

Сна­чала под­клю­чим файл сти­лей Бут­страпа к стра­нице. Проще всего под­клю­чать прямо с сер­ве­ров Бут­страпа. Доба­вим акту­аль­ную ссылку с сайта Бут­страпа в 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>

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

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

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