Лабораторная работа 3

1.

Лабораторная работа 3
Использование flex-верстки
Верстка шапки и слайдера
главной страницы сайта

2.

• Задание: создать одностраничный сайт (landing page),
включающий 7 блоков (см. следующий слайд)
• Для разработки данного сайта отводится 3 лабораторной работы.
• В лабораторной работе №3 необходимо сверстать первые два
блока: шапку и слайдер с использованием flex-верстки.

3.

4.

Шапка и слайдер

5. Подготовка к работе

1. Создайте структуру файлов и папок, как на рисунке. Скопируйте из материалов
к работе необходимые файлы и разместите их в нужные папки.
Travelly
css
icons
img
index.html
Для написания кода используйте редактор кода
Visual Studio Code.
style.css
Командой File – Open Folder откройте весь
проект.

6.

2. В файле index.html задайте базовую структуру html-страницы. Чтобы получить ее
автоматически, нажмите ! и кнопку Tab.

7.

3. Внесите изменения в блок <head>
• Измените заголовок (содержимое тега <title>) на Travelly | Туристическое агентство
• Подключите внешние стили (файл style.css)
• Добавьте мета-тег description со следующим описанием:
<meta name="description" content="туристическое агентство, путешествия, отпуск">
Мета-тег description предназначен для предоставления поисковым системам краткого описания
содержимого страницы для индексации и вывода сопроводительной информации в выдаче
результатов поиска. В описании (content) указывается содержимое веб-страницы или ключевые
слова.
• Добавьте favicon (значок веб-сайта) – иконку airplane.svg
<link rel="icon" href=«путь к файлу">

8.

4. В файле style.css задайте глобальные стили для всего документа:
• Font-size: 62% - задает стандартный
размер шрифта на web-странице 10px
(по умолчанию стандартный размер
16px)
• Относительная единица измерения
rem задает размер относительно
стандартного размера шрифта
• Например, для нашего сайта:
2rem = 2*10px = 20px

9. Верстка шапки сайта

В файле index.html добавьте теги для верстки шапки сайта, используя данную схему.
Заголовок h1 id="logo"
Список <ul> с пунктами <li>,
включающими ссылки
Блок class="container", внутри него nav class="nav"
Блок header class="main-header"
Блок class="container" будет ограничивать ширину контента во всех
секциях

10.

• Проверьте себя

11.

В файле style.css задайте стили для шапки сайта. В работе будем использовать
flex-верстку.
Цвет текста: белый
Цвет заливки: #131c27
Для блока main-header задайте цвет заливки, цвет текста, максимальную ширину 100%
и минимальную высоту 10vh (единица измерения vh эквивалентна 1% высоты окна браузера)
Контейнер имеет максимальную ширину 90%и выровнен по центру (margin: 0 auto)
Минимальная высота блока nav составляет 10vh
Блок nav является флекс-контейнером, по основной оси элементы разнесены по краям, по
поперечной оси – выравнены по центру.
• У ссылок задайте белый цвет и уберите подчеркивание

12.

• Проверьте себя
Стили для контейнера и
ссылок лучше перенести в
раздел
с глобальными стилями
для всего документа

13.

• Далее преобразуем маркированный список в горизонтальное меню с
помощью flex-свойств.
Самостоятельно сделайте логотип (Travelly) ссылкой на страницу index.html

14. Подключение шрифтов. Необходимо подключить 2 шрифта Poppins и Pattaya Кастомное подключение шрифтов с помощью CSS

• В папке с сайтом имеется папка fonts, в которой находятся шрифты Pattaya и Poppins
(их можно скачать с официального сайта сервиса https://fonts.google.com/).
• В самом начале файла style.css добавьте CSS правило для подключения шрифта
Pattaya.
• Аналогично подключите шрифт Poppins
• Задайте шрифт Poppins во всем документе (если шрифт
не подгрузится, то будет использован другой шрифт
семейства sans-serif – шрифтов без засечек)
• Задайте шрифт Pattaya для логотипа и задайте
нормальное начертание.

15. Верстка секции HERO

В файле index.html добавьте теги для верстки данной секции
section class="hero"
h2
h3
button

16.

В файле style.css задайте стили для секции hero.
• Добавьте фоновую картинку landing-page.jpg
• Установите минимальную высоту в vh (какое нужно задать значение, чтобы
шапка и слайдер занимали всю высоту окна браузера?)
• Добавьте свойства, чтобы картинка растянулась во весь экран без повторов, и
установите ее позицию по центру.
• Задайте цвет текста
• Блок hero также является флекс-контейнером
• Задайте свойства, чтобы элементы флекс-контейнера (заголовки и кнопка)
выстроились по поперечной оси и выровнялись по центру вертикали и
горизонтали?
• Задайте отступы между элементами во флекс-контейнере.
• Задайте свойство, чтобы текст выровнялся по центру?

17.

• Проверьте себя

18.

• Добавим линейный градиент к картинке
Тип градиента - линейный
Второй цвет градиента
Значение transparent означает прозрачный
Первый цвет градиента
Здесь цвет указан в формате rgba:
- Первые три числа (RGB) описывают количество
красного, зеленого и синего цветов (числа от 0 до 255)
- Последнее число (A) – альфа-канал – отвечает за
величину прозрачности
0 – полностью прозрачный
1 – полностью непрозрачный

19.

Оформите стили для кнопки и стили при наведении на кнопку
Самостоятельно для текста в теге h3 установите нормальное начертание: font-weight: normal;

20. Адаптивность блоков

• С помощью отладчика проверьте как ваш сайт выглядит при уменьшении и
увеличении размеров экрана.
• Для блока nav добавьте свойство переноса элементов на новую строку.
flex-wrap: wrap;

21. Добавьте в конце style.css медиа-запрос

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

22. Использование переменных

• CSS переменные — это специальные свойства, которые
позволяют хранить значения для многократного использования
CSS кода.
• CSS переменные позволяют:
• Использовать единую точку изменений в разделе переменных
:root
• Создавать согласованный дизайн
• Упрощать поддержку сайта (легко найти и изменить значения,
меньше ошибок при правках, более читаемый код)

23.

• В самом начале css-файла задайте переменные:
• И далее по коду замените конкретные
значения свойств на имя
соответствующей переменной
• Пример синтаксиса: