s

1.

Вёрстка сайта

2.

С чего начать?
Перед началом работы необходимо установить
редактор кода visual studio code https://code.visualstudio.com
Visual Studio Code — это популярный редактор кода
от Microsoft, который поддерживает множество
языков программирования и предлагает широкий
набор функций для разработчиков.

3.

После установки редактора
После установки рекомендую
установить несколько расширений
для вёрстки:
1. Auto Complete Tag
2. eCSStractor for VSCode
3. Live Server
4. Russian Language Pack for Visual
Studio Code

4.

Как устанавливать раширения
В левой панели выберите
вкладку с
расширениями(extentions)
Далее нажимаем на поиск и вводим
название нужного расширения и
выбираем его

5.

Нажимаем на install и ждём установки, после
установки расширение должно
автоматически включиться

6.

Кратко про расширения
Auto Complete Tag — состоит из двух расширений — Auto Close Tag и Auto Rename Tag
Они автоматически закрывают теги и меняют их названия
eCSStractor for VSCode — преобразовывает классы HTML в CSS селекторы
Live Server — запускает локальный сервер с функцией перезагрузки страницы в
реальном времени
Russian Language Pack for Visual Studio Code — Языковой пакет для русского языка
для VS Code

7.

Создание первого проекта
Для начала проекта создайте папку, где будете разрабатывать сайт, назовите
папку project. Далее в vscode откройте эту папку, нажам на кнопку open folder и
выберите нужную папку

8.

Структура проекта
В редакторе кода наверху расположены кнопки для создания
файлов и папок
Создайте в проекте index.html и две
папки: css — для хранения файлов
стилей и images — для хранения
изображений. Теперь ваша структура
проекта должна выглядеть вот так:

9.

Структура проекта
Создайте файл main.css в папке css, в
котором будет определена визуализация
сайта. Также добавьте в эту папку файл для
сброса базовых стилей reset.css(файл
находится в media)

10.

Структура сайта
Страница сайта состоит из трёх основных
блоков:
Шапка
Основная часть
Подвал

11.

Начало вёрстки
Откройте файл index.html и для генерации
скелета сайта воспользуйтесь встроенным
расширением emmet(! + tab или enter)

12.

Для подключения стилей добавьте тег <link> (просто
напишите слово link и нажмите enter, редактор сам всё
напишет) и пропишите путь к файлу main.css

13.

Верстка шапки(header)
Напишите структуру
шапки сайта

14.

Вёрстка шапки(header)
<header class=”header”> — Это основной контейнер для заголовка страницы, которому присвоен класс "header" для
стилизации.
<div class="container">: Внутренний контейнер, который помогает ограничить ширину содержимого и выравнивать его по
центру. Класс "container" используется для применения общих стилей.
<div class="header-flex">: Этот элемент используется для создания гибкой (flex) компоновки, позволяя размещать
элементы заголовка в одной строке и управлять их выравниванием.
<h2 class="logo">logo</h2>: Заголовок второго уровня, который представляет логотип сайта. Класс "logo" может
использоваться для стилизации логотипа.
<ul class="header-links">: Ненумерованный список, содержащий ссылки на различные разделы сайта, такие как "Home",
"About", "Contact" и "Testimonials". Класс "header-links" может применяться для стилизации навигационного меню.
<li><a class="link" href="#">...</a></li>: Каждый элемент списка содержит ссылку (<a>), которая ведет на соответствующие
разделы. Класс "link" может использоваться для стилизации ссылок.
<ul class="cart">: Второй ненумерованный список, который содержит элементы, связанные с корзиной покупок. Это может
включать иконку корзины и кнопку для оформления заказа.
<li><img src="./images/header/cart.svg" alt="cart"></li>: Элемент списка, содержащий изображение иконки корзины. Атрибут
alt предоставляет текстовое описание для доступности.(картинку берёте из папки media и переименовывайте в cart, все
изображения переименовываем по смыслу блока)
<li><a href="#" class="button">Order Now</a></li>: Элемент списка с кнопкой "Order Now", которая может вести на страницу
оформления заказа. Класс "button" может использоваться для стилизации кнопки.

15.

Вёрстка сайта(header)
После того, как мы создали
теги, придумали к ним классы,
нужно теперь стилизовать
шапку, откроем файл main.css
и пропишем классы

16.

Вёрстка сайта(header)

17.

Объяснения по css
• .container: Устанавливает максимальную ширину 1300 пикселей и центрирует
содержимое с помощью автоматических отступов.
• .header: Добавляет верхний отступ в 25 пикселей к заголовку.
• .header-flex: Применяет гибкую компоновку, выравнивая элементы по горизонтали и
вертикали.
• .logo: Задает размер шрифта 20 пикселей и жирное начертание для логотипа.
• .header-links: Создает горизонтальный список ссылок с серым цветом текста.
• .header-links li + li: Добавляет отступ в 15 пикселей между элементами списка.
• .link:hover: Изменяет цвет ссылки на chartreuse при наведении курсора.
• .cart: Устанавливает гибкую компоновку для элементов корзины, выравнивая их по
центру.
• .cart li + li: Добавляет отступ в 15 пикселей между элементами списка корзины.
• .button: Задает белый цвет текста, серый фон, внутренние отступы и скругленные
углы для кнопки.

18.

Вёрстка сайта(main)

19.

Вёрстка сайта(main)
Внутри блока main поделим на 6 секций <section>

20.

Вёрстка сайта (section)
Создайте в index.html структуру секции main

21.

Вёрстка сайта(section)
И стилизуем в main.css

22.

Вёрстка сайта(section)
• Как можно заметить по макету, заголовок текста имеет два
цвета, для этого используется тег <span>

23.

Результат