«Создание доступной фотогалереи» — практический проект для тех, кто знает основы HTML, CSS и JavaScript и хочет объединить их в полноценный интерфейс просмотра. Вы создадите локальную фотовыставку, в которой миниатюры, полноразмерные изображения, названия и описания остаются правильно связанными при просмотре.
Пошаговые лабораторные работы последовательно развивают макет галереи и окно подробного просмотра. В самостоятельном задании вы примените те же приёмы к другой выставке с фотографиями, у которых встречаются одинаковые названия, длинные названия и разные пропорции. Каждая лабораторная работа начинается со своего набора подготовленных файлов.
Чему вы научитесь
После завершения курса вы сможете:
- связывать каждый постоянный ID фотографии с правильной миниатюрой, полноразмерным изображением, альтернативным текстом и подписью;
- создавать адаптивную галерею с семантическим HTML и видимым индикатором клавиатурного фокуса;
- использовать встроенный элемент
dialogдля показа фотографии и одновременно обновлять изображение, название и описание при переходах; - ясно обозначать границы переходов на первой и последней фотографии, закрывать окно клавишей
Escи возвращать фокус на карточку, которая его открыла; - показывать понятное сообщение об ошибке загрузки изображения, не подменяя его незаметно другой фотографией, и исправлять неверный путь к файлу.
Для кого этот курс
Курс предназначен для учащихся, которые готовы объединить отдельные веб-упражнения в пригодную для использования фотовыставку.
Предварительные требования: Знакомство с элементами HTML, основами макета CSS, объектами и функциями JavaScript, работой с DOM и событиями. Вы должны уметь открывать и сохранять файлы проекта. Пошаговые лабораторные работы объясняют семантику галереи, поведение встроенного диалога и управление фокусом. Знание React не требуется.
Учебная среда: LabEx предоставляет подготовленные входы WebIDE, Terminal и Gallery, а также локальные изображения. В WebIDE вы читаете существующий HTML, CSS и JavaScript, прогнозируете поведение кода и сохраняете точечные изменения. В Gallery вы наблюдаете работу настоящего сайта и проверяете управление с клавиатуры. Подписи интерфейса галереи остаются на английском.
Часто задаваемые вопросы
Буду ли я писать код галереи?
Да. Вы дополняете макет и поведение в браузере в подготовленном проекте, а затем пользуетесь полученной галереей с помощью мыши и клавиатуры.
Нужно ли загружать фотографии или устанавливать фреймворк?
Нет. Локальные изображения и учебная среда подготовлены заранее. Проект использует HTML, CSS и браузерный JavaScript без React и сервиса загрузки изображений.
Даёт ли завершение курса сертификат соответствия требованиям доступности?
Нет. Вы отрабатываете конкретное поведение изображений, клавиатуры и фокуса. Полная оценка доступности охватывает больше аспектов, чем эти упражнения.
