Приёмы верстки страниц с использованием HTML + CSS
- 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