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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Лайфхак: краткая запись

У неко­то­рых ЦСС‑свойств есть крат­кая запись. Это спо­соб опти­ми­зи­ро­вать и сокра­тить код, заме­нить несколько свойств одним.

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

.example {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
  padding-left: 5px;

  padding: 10px 5px 20px 5px; /* Верх, право, низ, лево */

  padding: 10px 5px 20px; /* Верх, право-лево, низ */

  padding: 10px 5px; /* Низ-верх, право-лево */

  padding: 5px; /* Все отступы */
}

Можно опи­сать базо­вые стили крат­кой запи­сью, а в осо­бых слу­чаях ука­зать отличия.

p {
  margin: 0 18px 24px 0;
}

.lead {
  margin-bottom: 24px; /* Меняем только нижний маржин */
}

.noIndent {
  margin: 0; /* Меняем краткую запись целиком, все маржины обнулятся */
}

/* И наоборот: краткая запись переопределит все маржины */
h1 {
  margin-top: 8px;
  margin-bottom: 18px;
}

.pageTitle {
  margin: 27px 0 36px;
}

Краткая запись. МДН

Лайфхак: краткая запись

У некоторых ЦСС‑свойств есть краткая запись. Это способ оптимизировать и сократить код, заменить несколько свойств одним.

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

.example {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
  padding-left: 5px;

  padding: 10px 5px 20px 5px; /* Верх, право, низ, лево */

  padding: 10px 5px 20px; /* Верх, право-лево, низ */

  padding: 10px 5px; /* Низ-верх, право-лево */

  padding: 5px; /* Все отступы */
}

Можно описать базовые стили краткой записью, а в особых случаях указать отличия.

p {
  margin: 0 18px 24px 0;
}

.lead {
  margin-bottom: 24px; /* Меняем только нижний маржин */
}

.noIndent {
  margin: 0; /* Меняем краткую запись целиком, все маржины обнулятся */
}

/* И наоборот: краткая запись переопределит все маржины */
h1 {
  margin-top: 8px;
  margin-bottom: 18px;
}

.pageTitle {
  margin: 27px 0 36px;
}

Краткая запись. МДН

Веб‑инспектор

В Хроме

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

Проще всего это сде­лать в бра­у­зере с помо­щью веб‑инспек­тора — встро­ен­ного набора инстру­мен­тов для разработчиков.

В Сафари

Открыть его можно с помо­щью соче­та­ния ⌘+Option+I на Маке и Ctrl+Shift+I или F12 в дру­гих ОС.

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

Веб‑инспектор

В Хроме

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

Проще всего это сделать в браузере с помощью веб‑инспектора — встроенного набора инструментов для разработчиков.

В Сафари

Открыть его можно с помощью сочетания ⌘+Option+I на Маке и Ctrl+Shift+I или F12 в других ОС.

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

Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора

В других браузерах пункт меню может называться «Проверить элемент»

Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома

В других браузерах есть отличия в деталях, но общий подход тот же

Изменения сохранились в браузере. Если обновить страницу, они исчезнут

Редактирование разметки. Чтобы выбрать эле­мент для редак­ти­ро­ва­ния, клик­нем на нём пра­вой кноп­кой и выбе­рем в кон­текст­ном меню «Инспектировать».

Откро­ется панель веб‑инспек­тора: слева эле­менты, справа их свойства.

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

Затем изме­ним текст и нажмём «энтер», чтобы при­ме­нить изменения.

Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора

В других браузерах пункт меню может называться «Проверить элемент»

Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома

В других браузерах есть отличия в деталях, но общий подход тот же

Изменения сохранились в браузере. Если обновить страницу, они исчезнут

Редактирование разметки. Чтобы выбрать элемент для редактирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать».

Откроется панель веб‑инспектора: слева элементы, справа их свойства.

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

Затем изменим текст и нажмём «энтер», чтобы применить изменения.

Посмот­рим, как выгля­дит кнопка в раз­ных состо­я­ниях. Два­жды клик­нем по списку клас­сов кнопки.

Поме­няем класс btn‑bg на btn‑sm и нажмём «энтер», чтобы при­ме­нить изменения.

Чтобы посмот­реть, как выгля­дит нажа­тая кнопка, клик­нем пра­вой кноп­кой и выбе­рем Force State — :active.

Новое состо­я­ние при­ме­нится к кнопке, соот­вет­ству­ю­щие стили появятся в панели справа.

Поэкспериментируем с кнопкой и её состояниями на промостранице Бутстрапа

В Бустрапе используют комбинации классов для модификации элементов

В нашем случае, btn — базовый класс, а btn‑sm и btn‑lg — модификаторы размера

Здесь же можно включить ховер, фокус или «посещённость» у ссылки

Оранжевый кружок отмечает элементы с изменёнными вручную состояниями

Поэкспериментируем с кнопкой и её состояниями на промостранице Бутстрапа

В Бустрапе используют комбинации классов для модификации элементов

В нашем случае, btn — базовый класс, а btn‑sm и btn‑lg — модификаторы размера

Здесь же можно включить ховер, фокус или «посещённость» у ссылки

Оранжевый кружок отмечает элементы с изменёнными вручную состояниями

Посмотрим, как выглядит кнопка в разных состояниях. Дважды кликнем по списку классов кнопки.

Поменяем класс btn‑bg на btn‑sm и нажмём «энтер», чтобы применить изменения.

Чтобы посмотреть, как выглядит нажатая кнопка, кликнем правой кнопкой и выберем Force State — :active.

Новое состояние применится к кнопке, соответствующие стили появятся в панели справа.

Поэкспериментируем с формой отправки вопроса в советы бюро

Бывает, кнопки и поля блокируются отдельно или в родительском <fieldset>

Атрибут disabled блокирует кнопки, инпуты, выпадайки и текстареи

Если атрибут disabled стоит у <fieldset>, то блокируются все вложенные элементы

Поэтому хорошие программисты дополнительно проверяют данные на сервере

Раз­бло­ки­руем отклю­чён­ную форму. Клик­нем по забло­ки­ро­ван­ной кнопке пра­вой кноп­кой и выбе­рем в кон­текст­ном меню «Инспектировать».

Откро­ется панель веб‑инспек­тора. Най­дём в ней забло­ки­ро­ван­ный эле­мент с атри­бу­том disabled.

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

Затем уда­лим атри­бут и его зна­че­ние и нажмём «энтер», чтобы при­ме­нить изменения.

Поэкспериментируем с формой отправки вопроса в советы бюро

Бывает, кнопки и поля блокируются отдельно или в родительском <fieldset>

Атрибут disabled блокирует кнопки, инпуты, выпадайки и текстареи

Если атрибут disabled стоит у <fieldset>, то блокируются все вложенные элементы

Поэтому хорошие программисты дополнительно проверяют данные на сервере

Разблокируем отключённую форму. Кликнем по заблокированной кнопке правой кнопкой и выберем в контекстном меню «Инспектировать».

Откроется панель веб‑инспектора. Найдём в ней заблокированный элемент с атрибутом disabled.

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

Затем удалим атрибут и его значение и нажмём «энтер», чтобы применить изменения.

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