SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Приёмы верстки веб-
страниц
Курс Frontend-разработки на Javascript + Vue/React
Инструменты быстрой
разработки
• Ctrl + S для быстрого сохранения
• Alt + Tab для переключения между вкладками в ОС
• Ctrl + R, F5 для обновления страницы в браузере
• Ctrl + Shift + I, Ctrl + Shift + C: Использование консоли разработки в
браузере
• Сброс кэша Ctrl + Shift + R при перезагрузке страницы
Консоль разработки в браузере
В этом уроке
• Подходы к верстке структуры страницы
• Flexbox
• Директивы
• Работа с графическими редакторами
• Последовательность верстки страницы
Расположение элементов
относительно друг друга
• Для расположения элементов относительно друг друга как-либо,
кроме как сверху вниз друг за другом, используется
позиционирование элементов на основе display.
• Существующие подходы к взаимному расположению элементов:
• Табличная верстка (Deprecated)
• CSS Float (Deprecated)
• CSS Inline-block
• CSS Flex
• CSS Grid
Свойство display –
дополнительно
Свойство Описание
flex Блочный флекс-контейнер. Ведет себя как блочный, но располагает элементы внутри
себя по флекс-осям
inline-flex Строчный флекс-контейнер. Ведет себя как inline-block.
grid Блочный контейнер для сетки (см. CSS Grid)
table Блочная таблица
inline-table Строчная таблица
table-cell Ячейка таблицы
table-row Строка таблицы
list-item Элемент списка (добавляется маркер)
Расположение элементов при
помощи inline-block
• Выстраивание элементов в несколько колонок осуществляется путем задания
этим колонкам display:inline-block и установки этим колонкам нужной ширины
и внешних отступов.
• При использовании этого способа стоит учитывать, что в отступы между
инлайн-блоками будут входить пробелы между тегами.
• При использовании инлайн-блоков требуется задавать им вертикальное
выравнивание при помощи свойства vertical-align.
• Недостаток этого способа в том, что он базируется всё же на расположении
текста и верстка страницы таким способом достаточно долго настраивается.
Кроме того, необходимо вручную вычислять размеры каждой колонки.
Расположение элементов при
помощи 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;
}
Расположение элементов при
помощи CSS Flex
• Спецификация CSS Flex разработана для гибкого расположения
элементов внутри флекс-контейнера.
• Для использования этого способа необходимо указать флекс-
контейнер и задать для него правила размещения элементов внутри.
• Этот способ позволяет автоматически комбинировать элементы
внутри контейнера без ёмких вычислений и обработки проблем с
текстовой природой контейнера.
Расположение элементов при
помощи 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%;
}
CSS Flex
• Внутри Flex-контейнера существуют две оси – главная и побочная.
• Главная ось – ось, вдоль которой будут располагаться элементы.
• Поперечная (побочная) ось – ось, перпендикулярная главной.
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 для элемента внутри флекс-контейнера
позволяет выровнять его по центру горизонтальной и/или
вертикальной оси.
Верстка структурных частей
страницы
• Пример 1.
• Пример 2.
• Самостоятельно: составить прототип страницы со следующего слайда.
Задача 1.
• Как решать:
• Сделать три глобальные колонки с отступами и ширинами
• Разметить внутри большого блока три контейнера.
• Внутри последнего контейнера большого блока сделать три одинаковых блока в
строку.
• Разметить два контейнера внутри правого блока
• Создать два элемента с блоком и текстом внутри первого из них
• Добавить последний блок.
Директива media
• Директива @media
используется для того, чтобы
задать стилевые правила для
различных типов и размеров
экранов.
• Внутри этой директивы после
описания типа и размера
экрана указываются стилевые
правила, которые будут
включены на экранах,
удовлетворяющих директиве.
@media screen and (max-width: 1000px) {
.wrapper {
width: 700px;
}
}
@media screen and (min-width: 1000px) {
.wrapper {
width: 1000px;
}
}
Директива 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;
}
Графические редакторы во
Frontend
• Adobe Photoshop
• Figma
• Zeplin
• Adobe Illustrator
Операции в графическом
редакторе
• Во время верстки с графическим редактором необходимо
осуществлять действия:
• Извлечение иконок и картинок для страницы
• Получение размеров элементов на сайте
• Получение внешних и внутренних отступов для элементов
• Получение настроек и названия используемых шрифтов
• Получение цветов элементов страницы
• Эти операции необходимо научиться выполнять в графическом
редакторе перед началом верстки страницы по макету
Пример работы с Photoshop
Последовательность верстки
страницы
• Написание HTML-каркаса, подключение стилевых файлов
• Установка глобальных стилей: цвета, шрифты, сбросы, блочная
модель
• Разбиение страницы на структурные компоненты в HTML- коде
(семантические классы). Позиционирование
• Верстка повторяющихся компонентов и выделение им отдельного
класса (UI Kit)
• Разбиение структурных компонентов на интерфейсные в HTML-коде
(интерфейсные классы)
• Верстка интерфейсных компонентов из уже созданного UI Kit
• Отладка верстки
Дополнительные материалы
Примеры использования псевдоэлементов
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
Дополнительные материалы (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

Weitere ähnliche Inhalte

Ähnlich wie Приёмы верстки страниц с использованием HTML + CSS

Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Gotti Vartanyan
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSDataArt
 
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...Docsvision
 
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...it-people
 
Принципы разработки гибких и поддерживаемых интерфейсов
Принципы разработки гибких и поддерживаемых интерфейсовПринципы разработки гибких и поддерживаемых интерфейсов
Принципы разработки гибких и поддерживаемых интерфейсовVasiliy Aksyonov
 
Практическое использование модуля Panels. Богуцкий Виктор
Практическое использование модуля Panels. Богуцкий ВикторПрактическое использование модуля Panels. Богуцкий Виктор
Практическое использование модуля Panels. Богуцкий ВикторPVasili
 
Александр Кашеверов - Коротко про WEB
Александр Кашеверов - Коротко про WEBАлександр Кашеверов - Коротко про WEB
Александр Кашеверов - Коротко про WEBDataArt
 
Sozdanie saita v_ mc_mediadw3_steps
Sozdanie saita v_ mc_mediadw3_stepsSozdanie saita v_ mc_mediadw3_steps
Sozdanie saita v_ mc_mediadw3_stepsStiv-redter
 
Saita v mc_mediadw3_steps
Saita v  mc_mediadw3_stepsSaita v  mc_mediadw3_steps
Saita v mc_mediadw3_stepsStiv-redter
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinyaevents
 
18. синтаксис css
18. синтаксис css18. синтаксис css
18. синтаксис cssSergei Dubrov
 
Flex 4 gumbo framework
Flex 4 gumbo frameworkFlex 4 gumbo framework
Flex 4 gumbo frameworkValery
 
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...Ontico
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Yandex
 
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...GeeksLab Odessa
 
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Ontico
 
самоучитель по креативному Web дизайну
самоучитель по креативному Web дизайнусамоучитель по креативному Web дизайну
самоучитель по креативному Web дизайнуStAlKeRoV
 

Ähnlich wie Приёмы верстки страниц с использованием HTML + CSS (20)

Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"Презентация на тему "WEB-программирование"
Презентация на тему "WEB-программирование"
 
Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
 
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...
Миграция карточек, разработанных на Конструкторе решений 4.5, на платформу Do...
 
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов ...
 
Принципы разработки гибких и поддерживаемых интерфейсов
Принципы разработки гибких и поддерживаемых интерфейсовПринципы разработки гибких и поддерживаемых интерфейсов
Принципы разработки гибких и поддерживаемых интерфейсов
 
Практическое использование модуля Panels. Богуцкий Виктор
Практическое использование модуля Panels. Богуцкий ВикторПрактическое использование модуля Panels. Богуцкий Виктор
Практическое использование модуля Panels. Богуцкий Виктор
 
633942
633942633942
633942
 
Александр Кашеверов - Коротко про WEB
Александр Кашеверов - Коротко про WEBАлександр Кашеверов - Коротко про WEB
Александр Кашеверов - Коротко про WEB
 
Sozdanie saita v_ mc_mediadw3_steps
Sozdanie saita v_ mc_mediadw3_stepsSozdanie saita v_ mc_mediadw3_steps
Sozdanie saita v_ mc_mediadw3_steps
 
Saita v mc_mediadw3_steps
Saita v  mc_mediadw3_stepsSaita v  mc_mediadw3_steps
Saita v mc_mediadw3_steps
 
Osvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshinOsvaivaem 250px max_shirshin
Osvaivaem 250px max_shirshin
 
18. синтаксис css
18. синтаксис css18. синтаксис css
18. синтаксис css
 
Flex 4 gumbo framework
Flex 4 gumbo frameworkFlex 4 gumbo framework
Flex 4 gumbo framework
 
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...
Принципы разработки поддерживаемых и гибких интерфейсов / Василий Аксёнов (Ян...
 
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"Максим Ширшин "Яндекс.Панель: осваиваем 250px"
Максим Ширшин "Яндекс.Панель: осваиваем 250px"
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
 
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
 
самоучитель по креативному Web дизайну
самоучитель по креативному Web дизайнусамоучитель по креативному Web дизайну
самоучитель по креативному Web дизайну
 

Mehr von Denis Latushkin

Дополнительные возможности Javascript
Дополнительные возможности JavascriptДополнительные возможности Javascript
Дополнительные возможности JavascriptDenis Latushkin
 
Дополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMДополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMDenis Latushkin
 
Отладка веб-приложений на Javascript
Отладка веб-приложений на JavascriptОтладка веб-приложений на Javascript
Отладка веб-приложений на JavascriptDenis Latushkin
 
Нестатичное позиционирование и верстка форм
Нестатичное позиционирование и верстка формНестатичное позиционирование и верстка форм
Нестатичное позиционирование и верстка формDenis Latushkin
 
Габаритные свойства, блочная модель и псевдоэлементы CSS
Габаритные свойства, блочная модель и псевдоэлементы CSSГабаритные свойства, блочная модель и псевдоэлементы CSS
Габаритные свойства, блочная модель и псевдоэлементы CSSDenis Latushkin
 
Основы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSSОсновы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSSDenis Latushkin
 
Продвинутый HTML
Продвинутый HTMLПродвинутый HTML
Продвинутый HTMLDenis Latushkin
 
Основы работы с Git
Основы работы с GitОсновы работы с Git
Основы работы с GitDenis Latushkin
 
NPM и модульная архитектура приложения
NPM и модульная архитектура приложенияNPM и модульная архитектура приложения
NPM и модульная архитектура приложенияDenis Latushkin
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 
Введение во фронтенд-разработку
Введение во фронтенд-разработкуВведение во фронтенд-разработку
Введение во фронтенд-разработкуDenis Latushkin
 
Использование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложенииИспользование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложенииDenis Latushkin
 
Объектное и прототипное программирование в Javascript
Объектное и прототипное программирование в JavascriptОбъектное и прототипное программирование в Javascript
Объектное и прототипное программирование в JavascriptDenis Latushkin
 

Mehr von Denis Latushkin (13)

Дополнительные возможности Javascript
Дополнительные возможности JavascriptДополнительные возможности Javascript
Дополнительные возможности Javascript
 
Дополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOMДополнительные приёмы работы в DOM
Дополнительные приёмы работы в DOM
 
Отладка веб-приложений на Javascript
Отладка веб-приложений на JavascriptОтладка веб-приложений на Javascript
Отладка веб-приложений на Javascript
 
Нестатичное позиционирование и верстка форм
Нестатичное позиционирование и верстка формНестатичное позиционирование и верстка форм
Нестатичное позиционирование и верстка форм
 
Габаритные свойства, блочная модель и псевдоэлементы CSS
Габаритные свойства, блочная модель и псевдоэлементы CSSГабаритные свойства, блочная модель и псевдоэлементы CSS
Габаритные свойства, блочная модель и псевдоэлементы CSS
 
Основы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSSОсновы работы с таблицами стилей CSS
Основы работы с таблицами стилей CSS
 
Продвинутый HTML
Продвинутый HTMLПродвинутый HTML
Продвинутый HTML
 
Основы работы с Git
Основы работы с GitОсновы работы с Git
Основы работы с Git
 
NPM и модульная архитектура приложения
NPM и модульная архитектура приложенияNPM и модульная архитектура приложения
NPM и модульная архитектура приложения
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Введение во фронтенд-разработку
Введение во фронтенд-разработкуВведение во фронтенд-разработку
Введение во фронтенд-разработку
 
Использование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложенииИспользование сторонних библиотек в веб-приложении
Использование сторонних библиотек в веб-приложении
 
Объектное и прототипное программирование в Javascript
Объектное и прототипное программирование в JavascriptОбъектное и прототипное программирование в Javascript
Объектное и прототипное программирование в Javascript
 

Приёмы верстки страниц с использованием HTML + CSS

  • 1. Приёмы верстки веб- страниц Курс Frontend-разработки на Javascript + Vue/React
  • 2. Инструменты быстрой разработки • Ctrl + S для быстрого сохранения • Alt + Tab для переключения между вкладками в ОС • Ctrl + R, F5 для обновления страницы в браузере • Ctrl + Shift + I, Ctrl + Shift + C: Использование консоли разработки в браузере • Сброс кэша Ctrl + Shift + R при перезагрузке страницы
  • 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. Операции в графическом редакторе • Во время верстки с графическим редактором необходимо осуществлять действия: • Извлечение иконок и картинок для страницы • Получение размеров элементов на сайте • Получение внешних и внутренних отступов для элементов • Получение настроек и названия используемых шрифтов • Получение цветов элементов страницы • Эти операции необходимо научиться выполнять в графическом редакторе перед началом верстки страницы по макету
  • 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