Документ представляет собой учебный материал по веб-верстке, охватывающий использование инструментов и приемов фронтенд-разработки, включая CSS Flexbox, Grid и работу с графическими редакторами. В нем также приведены примеры кода для позиционирования элементов и описаны директивы CSS, такие как @media и @font-face. Учебник включает пошаговые инструкции по созданию структуры страниц и сопутствующие ресурсы для дополнительного изучения.

1. Приёмы верстки веб-
страниц
Курс Frontend-разработки на Javascript + Vue/React

2. Инструменты быстрой
разработки
• Ctrl + S для быстрого сохранения
• Alt + Tab для переключения между вкладками в ОС
• Ctrl + R, F5 для обновления страницы в браузере
• Ctrl + Shift + I, Ctrl + Shift + C: Использование консоли разработки в
браузере
• Сброс кэша Ctrl + Shift + R при перезагрузке страницы

3. Консоль разработки в браузере

4. В этом уроке
• Подходы к верстке структуры страницы
• Flexbox
• Директивы
• Работа с графическими редакторами
• Последовательность верстки страницы

5. Расположение элементов
относительно друг друга
• Для расположения элементов относительно друг друга как-либо,
кроме как сверху вниз друг за другом, используется
позиционирование элементов на основе display.
• Существующие подходы к взаимному расположению элементов:
• Табличная верстка (Deprecated)
• CSS Float (Deprecated)
• CSS Inline-block
• CSS Flex
• CSS Grid

6. Свойство display –
дополнительно
Свойство Описание
flex Блочный флекс-контейнер. Ведет себя как блочный, но располагает элементы внутри
себя по флекс-осям
inline-flex Строчный флекс-контейнер. Ведет себя как inline-block.
grid Блочный контейнер для сетки (см. CSS Grid)
table Блочная таблица
inline-table Строчная таблица
table-cell Ячейка таблицы
table-row Строка таблицы
list-item Элемент списка (добавляется маркер)

7. Расположение элементов при
помощи inline-block
• Выстраивание элементов в несколько колонок осуществляется путем задания
этим колонкам display:inline-block и установки этим колонкам нужной ширины
и внешних отступов.
• При использовании этого способа стоит учитывать, что в отступы между
инлайн-блоками будут входить пробелы между тегами.
• При использовании инлайн-блоков требуется задавать им вертикальное
выравнивание при помощи свойства vertical-align.
• Недостаток этого способа в том, что он базируется всё же на расположении
текста и верстка страницы таким способом достаточно долго настраивается.
Кроме того, необходимо вручную вычислять размеры каждой колонки.

8. Расположение элементов при
помощи inline-block
html {
font-size: 16px;
}
.wrapper {
font-size: 0;
}
aside {
display: inline-block;
vertical-align: top;
font-size: 1rem;
width: 20%;
margin-right: 5%;
}
section {
display: inline-block;
width: 75%;
vertical-align: top;
}
.images {
font-size: 0;
}
.images .item {
font-size: 1rem;
display: inline-block;
width: 22%;
margin-right: 4%;
}
.images .item:last-child {
margin-right: 0;
}

9. Расположение элементов при
помощи CSS Flex
• Спецификация CSS Flex разработана для гибкого расположения
элементов внутри флекс-контейнера.
• Для использования этого способа необходимо указать флекс-
контейнер и задать для него правила размещения элементов внутри.
• Этот способ позволяет автоматически комбинировать элементы
внутри контейнера без ёмких вычислений и обработки проблем с
текстовой природой контейнера.

10. Расположение элементов при
помощи inline-block
.wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
aside {
width: 25%;
}
section {
width: 70%;
}
.images {
display: flex;
align-items: center;
justify-content: space-between;
}
.images .item {
width: 22%;
}

11. CSS Flex
• Внутри Flex-контейнера существуют две оси – главная и побочная.
• Главная ось – ось, вдоль которой будут располагаться элементы.
• Поперечная (побочная) ось – ось, перпендикулярная главной.

12. CSS Flex
Свойство Значения Описание
flex-direction row | column | row-reverse | column-
reverse
По умолчанию row. Указывает направление главной оси.
justify-content Flex-start | flex-end | space-between
| space-around | space-evenly
Выравнивание элементов по главной оси
align-items flex-start | flex-end | center |
stretch | baseline
Выравнивание элементов по поперечной оси
flex-wrap nowrap | wrap | wrap-reverse Указывает, будут ли переноситься элементы в случае
переполнения их на оси, либо же сжиматься.
margin auto | auto <> | <> auto Значение auto для элемента внутри флекс-контейнера
позволяет выровнять его по центру горизонтальной и/или
вертикальной оси.

13. Верстка структурных частей
страницы
• Пример 1.
• Пример 2.
• Самостоятельно: составить прототип страницы со следующего слайда.

14. Задача 1.
• Как решать:
• Сделать три глобальные колонки с отступами и ширинами
• Разметить внутри большого блока три контейнера.
• Внутри последнего контейнера большого блока сделать три одинаковых блока в
строку.
• Разметить два контейнера внутри правого блока
• Создать два элемента с блоком и текстом внутри первого из них
• Добавить последний блок.

15. Директива media
• Директива @media
используется для того, чтобы
задать стилевые правила для
различных типов и размеров
экранов.
• Внутри этой директивы после
описания типа и размера
экрана указываются стилевые
правила, которые будут
включены на экранах,
удовлетворяющих директиве.
@media screen and (max-width: 1000px) {
.wrapper {
width: 700px;
}
}
@media screen and (min-width: 1000px) {
.wrapper {
width: 1000px;
}
}

16. Директива font-face
• Директива @font-face
используется для того, чтобы
подключить к странице шрифты,
которых может не быть на
компьютере пользователя, у
которого будет открыта
страница.
• Внутри этой директивы
указываются свойства: название
шрифта, которое будет
использоваться далее в CSS, и
ссылки на файл с
местоположением шрифта
относительно CSS-файла.
@font-face {
font-family: "My Font Name";
src: local("My Font Name"), url("../fo
nts/my-font.ttf");
}
body {
font-family: "My Font Name", Arial;
}

17. Графические редакторы во
Frontend
• Adobe Photoshop
• Figma
• Zeplin
• Adobe Illustrator

18. Операции в графическом
редакторе
• Во время верстки с графическим редактором необходимо
осуществлять действия:
• Извлечение иконок и картинок для страницы
• Получение размеров элементов на сайте
• Получение внешних и внутренних отступов для элементов
• Получение настроек и названия используемых шрифтов
• Получение цветов элементов страницы
• Эти операции необходимо научиться выполнять в графическом
редакторе перед началом верстки страницы по макету

19. Пример работы с Photoshop

20. Последовательность верстки
страницы
• Написание HTML-каркаса, подключение стилевых файлов
• Установка глобальных стилей: цвета, шрифты, сбросы, блочная
модель
• Разбиение страницы на структурные компоненты в HTML- коде
(семантические классы). Позиционирование
• Верстка повторяющихся компонентов и выделение им отдельного
класса (UI Kit)
• Разбиение структурных компонентов на интерфейсные в HTML-коде
(интерфейсные классы)
• Верстка интерфейсных компонентов из уже созданного UI Kit
• Отладка верстки

21. Дополнительные материалы
Примеры использования псевдоэлементов
https://habr.com/ru/post/154319/
Собственные стили для полосы прокрутки
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
CSS Float
http://www.css-tricks.ru/articles/css/all-about-floats
CSS Flexbox
https://html5.by/blog/flexbox/
CSS Grid
https://bit.ly/2GZAcQn
Нестатичное позиционирование
https://html5book.ru/css-position

22. Дополнительные материалы (2)
Пример последовательной верстки веб-страницы (+см. комментарии)
https://habr.com/ru/post/202408/
Набор бесплатных шрифтов
https://www.fonts-online.ru/
Подключаемые шрифты от Google
https://fonts.google.com/
CSS Keyframes
https://webref.ru/css/keyframes
CSS Import
https://developer.mozilla.org/en-US/docs/Web/CSS/@import
VSCode приемы работы
https://bit.ly/39bSE4k
CSS Transitions
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_tra
nsitions
Figma Google Material UI Kit
https://www.figma.com/file/8jpq7NtJhG5ldXrlBoMXrA/Google-Material-
Design?node-id=0%3A1
Photoshop бесплатные макеты
https://freebiesbug.com/psd-freebies/website-template/
https://www.os-templates.com/free-psd-templates/
Figma бесплатные макеты
https://www.uistore.design/types/figma/
Видеоурок по использованию Photoshop для верстки
https://www.youtube.com/watch?v=Kmkx3SfJwuc