🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора
В других браузерах пункт меню может называться «Проверить элемент»
Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома
В других браузерах есть отличия в деталях, но общий подход тот же
Изменения сохранились в браузере. Если обновить страницу, они исчезнут
Редактирование разметки. Чтобы выбрать элемент для редактирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора: слева элементы, справа их свойства.
Чтобы перейти в режим редактирования, дважды кликнем по тексту.
Затем изменим текст и нажмём «энтер», чтобы применить изменения.
Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора
В других браузерах пункт меню может называться «Проверить элемент»
Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома
В других браузерах есть отличия в деталях, но общий подход тот же
Изменения сохранились в браузере. Если обновить страницу, они исчезнут
Редактирование разметки. Чтобы выбрать элемент для редактирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора: слева элементы, справа их свойства.
Чтобы перейти в режим редактирования, дважды кликнем по тексту.
Затем изменим текст и нажмём «энтер», чтобы применить изменения.
Посмотрим, как выглядит кнопка в разных состояниях. Дважды кликнем по списку классов кнопки.
Поменяем класс 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.
Чтобы перейти в режим редактирования атрибута, дважды кликнем по нему.
Затем удалим атрибут и его значение и нажмём «энтер», чтобы применить изменения.
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.