Модуль 2 - Верстка HTML5/CSS3 по дизайн-макету
Модуль 3 - Создание расписания уроков
Модуль 1. Графический дизайн страниц (3 часа)
Разработка дизайна страниц сайта для компании
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Компания ООО "Товары и услуги", старейшая и известнейшая в своем регионе, решила идти в ногу со временем и наконец-то сделать себе Веб-сайт. Этому немало способствовал приход нового директора по маркетингу фирмы, который разработал структуру двух страниц. Непосредственно верстка и разработка HTML-страниц также будут осуществлена внутренними ресурсами компании.
ЗАДАНИЕ
Разработать дизайн для сайта компании, используя вводные данные и требования. Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из сферы деятельности организации (например, сине-голубая гамма цветов ассоциируется с корпоративным стилем).
Также, дизайн должен использовать принцип единообразия в структуре страниц:
единый размер элементов;
одинаковая высота навигационных кнопок;
единообразное оформление заголовков, подзаголовков и основного текста;
единообразное оформление ссылок и изображений для всех страниц сайта.
Дизайн главной страницы и страницы-каталога с набором товаров или услуг должен полностью соответствовать предоставленным прототипами страниц (Mockup).
К дизайну мобильной версии для просмотра на телефонах с touchscreen и разрешением 320х480 специальных требований по расположению элементов на странице не предъявляется, но необходимо учитывать размер экрана и способ навигации по странице.
ВВОДНЫЕ ДАННЫЕ
Вам предоставляется:
название и уточненная сфера деятельности компании;
логотип фирмы;
краткое описание компании;
список товаров или услуг, их краткое описание и фотографии;
структура двух страниц (главной и страницы с товарами или услугами);
набор случайных изображений и текстов по сфере деятельности компании;
изображения стандартных социальных сервисов;
шрифты;
вспомогательная графика.
Не требуется использовать все изображения и текст. Текст можно писать самостоятельно.
ВЫХОДНЫЕ ДАННЫЕ
Три файла формата PSD с дизайн-макетами страниц сайта: главная страница, страница с набором товаров или услуг, мобильная версия главной страницы.
ВРЕМЯ ВЫПОЛНЕНИЯ
Модуль 2. Графический дизайн страниц (3 часа)
ЗАДАНИЕ
Сверстать соответствующую представленному дизайн-макету страницу в HTML5/CSS3. Весь текст на странице сайта должен быть выделяемым курсором мыши.
Окончательная верстка должна быть адаптивной: дизайн страницы автоматически адаптируется под ширину окно отображения в зависимости от устройства пользователя и размеров браузера. Все изменения на странице должны происходить плавно, без «дерганий».
В скриншотах следует обращать особое внимание на дополнительные изображения, которые показывают, как должны выглядеть некоторые блоки при наведении, фокусе и т.д.
Набор html и css-файлов, java script а также набор других необходимых для корректного отображения страницы в браузерах файлов.
Модуль 3. Создание расписания уроков (1.5 часа)
ЗАДАНИЕ
Описание задачи: Создание HTML-страницы: Создайте HTML-страницу, на которой будет размещено расписание. Загрузка XML-файла: На сервере, где размещен ваш сайт, в которой будет храниться XML-файл с расписанием. XML-файл на сервер. Чтение XML-файла: Используйте серверный скрипт (PHP) для чтения содержимого XML-файла. Обработка данных: Разберите XML-файл и извлеките необходимые данные, такие как дни недели, время начала уроков, предметы. Отображение на веб-странице:
ВВОДНЫЕ ДАННЫЕ
День Время Предмет
Понедельник
Математика Используйте полученные данные для формирования HTML-кода, который отображает расписание на вашей веб-странице. Можно использовать JavaScript для динамического обновления расписания без перезагрузки страницы. Регулярное обновление данных: Доступ к странице: После завершения разработки, ваш пользователь сможет получить доступ к веб-странице с расписанием через браузер.