Практическая работа №8

Верстка форм, графических элементов и подготовка изображений

Цель работы:

сверстать формы регистрации, авторизации и основного пользовательского действия;
подготовить графические элементы для веб-приложения;
использовать изображения в интерфейсе;
выполнить начальную оптимизацию изображений;
подготовить публичную часть сайта к дальнейшей интеграции с PHP.

Основные теоретические положения

Формы

Форма — это элемент интерфейса, через который пользователь передаёт данные системе. Формы используются для регистрации, авторизации, записи, заказа, бронирования, заявки или отклика.

Графические элементы

Графические элементы помогают сделать интерфейс понятнее: изображения карточек, иконки, иллюстрации, декоративные элементы и изображения для детальных страниц.

Оптимизация изображений

Изображения должны иметь подходящий формат, разумный размер файла, понятное имя и корректное отображение на разных экранах.

Формат	Когда использовать
JPG	фотографии
PNG	изображения с прозрачностью
SVG	иконки
WebP	оптимизированные изображения
GIF	простая анимация

Производственная ситуация

Вы уже начали верстку публичной части сайта. Теперь необходимо сверстать формы, подготовить изображения и графические элементы, которые будут использоваться в интерфейсе.

Основные требования к практической работе

В рамках практической работы необходимо выполнить проектный этап, подготовить указанные материалы и зафиксировать результат в Git-репозитории.

Работа должна соответствовать выбранной предметной области и использовать материалы, подготовленные на предыдущих этапах проекта.

Задания для выполнения

Сверстайте форму регистрации.
Сверстайте форму авторизации.
Сверстайте форму основного пользовательского действия.
Оформите состояния форм: focus, error, disabled, success.
Подготовьте изображения для главной страницы.
Подготовьте изображения для карточек каталога.
Подготовьте изображения для детальных страниц.
Выполните начальную оптимизацию изображений.
Разложите изображения по папкам hero, catalog, details, icons.
Заполните атрибуты alt у изображений.
Выполните коммит add forms and optimized images.

Требования к результату

К завершению практической работы должны быть подготовлены:

форма регистрации
форма авторизации
форма основного действия
состояния форм
подготовленные изображения
структура assets/images
заполненные alt-атрибуты
коммит в Git

Контрольные вопросы

Какова основная цель данной практической работы?
Какие результаты должны быть получены после выполнения этапа?
Как данный этап связан с предыдущими этапами проекта?
Какие решения были приняты в рамках работы и почему?
Какие файлы были добавлены или изменены в Git-репозитории?
Как результаты работы будут использоваться в следующих практических работах?