Модуль A. Дизайн и верстка веб-приложения
Технологии этого модуля: граф. Дизайн, HTML5, CSS3

Время на выполнение: 6 часа

В современном мире с каждым днём появляется всё больше и больше новых технологий. В настоящее время сложно представить организацию, у которой нет веб-сайта.

Нижний Новгород отмечает 800-летие. Город активно меняется. Уже фиксируем серьезный рост туристического потока. В 2021 году Нижегородская область планирует принять более двух миллионов гостей. Это будет способствовать развитию туристической отрасли.

К вам обратился сервис поиска туров по Нижегородской области «НН-ТУР». Главная цель сервиса - развитие туризма в Нижнем Новгороде и Нижегородской области.

Основная черта отличающая наш сервис от других и наш девиз – Выбери место куда ты хочешь и мы тебя доставим

Основные принципы работы сервиса:

• 
  Выбираем необходимые места для путешествия
  
• 
  Выбираем дату или диапазон дат
  
• 
  Высокие стандарты сервиса
  
• 
  Лучшее соотношение цена/качество
  
• 
  Каждый клиент уникален!
  

Акции фирмы: представлены в отдельном файле.

ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ

Ваша задача – сверстать следующие страницы веб-сайта:

• 
  Главная страница - Landing Page
  
• 
  Страница входа в личный кабинет
  
• 
  Страница регистрации в личном кабинете
  
• 
  Страница личного кабинета
  
• 
  Страница с результатами поиска
  
• 
  Страница с полным описанием тура
  
• 
  Страница бронирования
  
• 
  Страница экскурсовода
  

Главная страница (landing page)

Главная страница должна содержать следующие блоки:

• 
  Шапка сайта
  
  • 
    Логотип «НН ТУР»
    
  • 
    Меню навигации
    
    • 
      Путеводитель
      
    • 
      Поиск
      
    • 
      Регистрация
      
    • 
      Личный кабинет
      
• 
  Вывод акций в виде слайдера с индикацией активного слайда (работа слайдера не проверяется, только дизайн и верстка). Слайд должен содержать следующую информацию:
  
  • 
    Изображение
    
  • 
    Название акции
    
  • 
    Краткое описание акции
    
  • 
    Кнопка подробнее
    
• 
  Секция с быстрым поиском тура. Предусматривает наличие одного поля ввода и кнопки поиск. В поле ввода должны выводится подсказки по поиску.
  
• 
  Преимущества
  
  • 
    Высокие стандарты сервиса
    
  • 
    Лучшее соотношение цена/качество
    
  • 
    Каждый клиент уникален!
    
• 
  Путеводитель. Секция отображения примеров туров. Пример тура должен выглядеть в виде одной картинки, название тур. Необходимо визуализировать при помощи анимированной инфографики пример туров. Отображается 6 случайных туров.
  
• 
  Форма поиска. Должна содержать следующие поля ввода:
  
  • 
    Запрос – поле ввода
    
  • 
    Поля выбора диапазона дат для путешествия (дата начала/дата окончания)
    
  • 
    Количество пассажиров
    
  • 
    Кнопка поиска тура.
    
• 
  Отзывы клиентов в слайдсета с бесконечной прокруткой по 1 элементу. (Реализация JS не требуется)
  
  • 
    Название тура
    
  • 
    Имя автора отзыва
    
  • 
    Фото
    
  • 
    Экскурсовод
    
  • 
    Отзыв
    
• 
  Форма для подписки на акции
  
  • 
    Email
    
  • 
    Кнопка для подписки
    
• 
  Подвал сайта
  
  • 
    Телефон “8 (800) 100-10-10”
    
  • 
    Навигация по сайту
    
    • 
      Авторизация
      
    • 
      Регистрация
      
    • 
      Личный кабинет
      
    • 
      Поиск тура
      
    • 
      Путеводитель
      

---

Страница с результатами поиска

Попасть на эту страницу можно с главной (из формы поиска рейсов). На этой странице необходимо отобразить все найденные туры, а именно:

• 
  Название тура
  
• 
  Изображение тура
  
• 
  Описание тура
  
  • 
    Кнопка подробнее – переход на страницу с полным описание тура
    
• 
  Стоимость одного места в туре
  
• 
  Даты тура
  
• 
  Кнопка бронирование тура – по нажатию на которую происходит переход на страницу бронирования тура.
  

Использовать пагинация для отображения результатов поиска. Не более 10 туров на одной странице. Предусмотреть способ изменения критерии поиска тура.

Страница описание тура

Попасть на данную страницу можно с главной страницы и со страницы результатов поиска. Должна содержать следующую информацию:

• 
  Изображение тура
  
• 
  Полное описание тура
  
• 
  Список локаций
  
• 
  Скидка для детей
  
• 
  Стоимость тура
  
• 
  Название тура
  
• 
  Рейтинг тура
  
• 
  Список запланированных туров с кнопками забронировать
  

Страница бронирования

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

• 
  Данные о туре (заполняется автоматически из выбранного тура)
  
  • 
    Название тура
    
  • 
    Дата проведения тура
    
  • 
    Город выезда
    
  • 
    Список локаций
    
  • 
    Скидка для детей
    
• 
  Форма ввода данные о туристах.
  
  • 
    ФИО
    
  • 
    Дата рождения
    
  • 
    Телефон
    
• 
  Кнопка добавления туриста.
  
• 
  Кнопка для удаления туриста
  
• 
  Итоговая стоимость тура для всех туристов
  
• 
  Кнопка для оформления бронирования
  

В списки туристов, необходимо наглядно продемонстрировать на кого из туристов распространяется скидка, с указанием цены после скидки.

Страница регистрации в личном кабинете

На этой странице вам необходимо сделать форму со следующими полями:

• 
  Имя
  
• 
  Фамилия
  
• 
  Телефон
  
• 
  E-mail
  
• 
  Роль
  
  • 
    Пользователь
    
  • 
    Экскурсовод
    
• 
  Пол
  
• 
  Дата рождения
  
• 
  Пароль
  
• 
  Повтор пароля
  
• 
  Согласие на обработку персональных данных
  
• 
  Кнопка для регистрации
  

Страница входа в личный кабинет

---

На этой странице вам необходимо сделать форму со следующими полями:

• 
  Телефон
  
• 
  Пароль
  
• 
  Кнопка для входа
  

Страница личного кабинета

На этой странице необходимо отобразить информацию о пользователе, а именно:

• 
  Имя
  
• 
  Фамилия
  
• 
  Количество посещенных туров
  
• 
  Кнопка выхода из личного кабинета
  
• 
  Предстоящие туры. Каждое бронирование должно отражать следующую информацию:
  
  • 
    Название тура
    
  • 
    Дата начала тура
    
  • 
    Город отправления
    
  • 
    Количество туристов (при наведение отображается список туристов в виде списка)
    
  • 
    Стоимость тура
    
  • 
    Кнопка отмены тура
    

Страница экскурсовода

На этой странице отображается информация о экскурсоводе и о проводимых турах, а именно:

• 
  Информация о проводимых турах (представлена в виде списка)
  
  • 
    Изображения тура
    
  • 
    Название тура
    
  • 
    Всего проведено
    
  • 
    Запланировано провести
    
  • 
    Кнопка запланировать тур
    
  • 
    Кнопка редактирование тура
    
  • 
    Кнопка удаления тура
    
• 
  Подтверждение тура
  
  • 
    Название тура
    
  • 
    Количество занятых мест в туре
    
  • 
    Дата начала тура
    
  • 
    Кнопки управления туром
    
    • 
      Кнопка подтверждения тура
      
    • 
      Кнопка отмены тура
      
• 
  Форма добавления тура
  
  • 
    Название тура
    
  • 
    Описание тура
    
  • 
    Динамическое добавление локаций, поля ввода с вариантами выбора и кнопкой добавить изображение, если локация новая (отобразить не менее 2 строк), добавить еще локацию, удалить локацию
    
  • 
    Количество мест
    
  • 
    Кнопка загрузки изображения тура
    
  • 
    Стоимость тура
    
  • 
    Кнопка добавления тура
    

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА

Сверстанный веб-сайт должен быть доступен по адресу http://xxxxxx-m1.wsr.ru/, где xxxxxx - логин участника (указан на индивидуальной карточке).

Сохраните сверстанные страницы со следующими именами:

• 
  Главная страница - Landing Page – index.html, index.png
  
• 
  Страница входа в личный кабинет – login.html, login.png
  
• 
  Страница регистрации в личном кабинете – register.html, register.png
  
• 
  Страница личного кабинета – profile.html, profile.png
  
• 
  Страница с результатами поиска – search.html, search.png
  
• 
  Страница бронирования – booking.html, booking.png
  
• 
  Страница экскурсовода – booking_management.html, booking_management.png
  
• 
  Страница с полным описанием тура – description.html, description.png
  

---

Все страницы указанные выше должны быть доступны к просмотру по соответствующим адресам: http://xxxxxx-m1.wsr.ru/index.html , http://xxxxxx-m1.wsr.ru/login.html и т.д.

Проверяются только работы, загруженные на сервер! Страницы, расположенные в других местах или с ошибками в названии проверяться не будут!

Ваш HTML/CSS должен быть валидным.

Оценка будет производиться в браузере Google Chrome.

СИСТЕМА ОЦЕНКИ

Секция	Критерий	Сумма
A	Организация работы и управление	2,50
B	Коммуникация и навыки межличностного общения	2,50
C	Графический дизайн	16,00
D	Верстка	18,00
E	Программирование на стороне клиента	0,00
F	Программирование на стороне сервера	0,00
G	CMS	0,00
Всего		39,00

---

Смотрите также файлы

• 5 Объективные признаки состава преступления.docx

• 1. Введение Мои ученики будут узнавать новое не от меня. Они будут открывать это новое сами.docx

• Техническая термодинамика.pdf

• Практическая работа к разделу 2 Страна патриотизм Что мы Родиной зовем Новополеводино наша малая Родина.docx

• Реферат таймменеджмент Студент Курс, группа 20 г. Оценка, 20 г.docx