VP_LR2

Лабораторная работа №2

Тема: интерактивные элементы сайта.

Цель работы: Изучение принципов верстки интерактивных элементов web

страниц при помощи JS.

Справочные ресурсы

Самоучители HTML и CSS https://htmlbook.ru/samhtml https://developer.mozilla.org/ru/docs/Learn/HTML https://developer.mozilla.org/ru/docs/Learn/CSS

Справочники по HTML5 и CSS3 https://htmlbook.ru/html5 https://htmlbook.ru/css3

Цветовые схемы https://colorscheme.ru/

Самоучители JS https://learn.javascript.ru/

https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Java Script_basics

Справочники по JS https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference https://www.w3schools.com/jsrEF/default.asp https://javascript.info

Задание на лабораторную работу

1.Выполнить первую лабораторную работу согласно выданному варианту.

2.Сделать слайдер фотографий с возможностью сдвига фотографий вправо

ивлево при помощи мыши и указанием количество фотографий и текущей

1

фотографии. Слайдер должен автоматически пролистывать фотографии через

некоторый интервал времени.

3.Сделать интерактивное всплывающее окно, появляющееся при нажатии на ссылку\кнопку на сайте, в зависимости от варианта это может быть: «заказать звонок», «добавить товар» и т.п. При открытии веб страница должна быть частично затенена, и отключена возможность перелистывания.

4.Сделать полноэкранное меню для мобильной версии сайта, открываемое по кнопке «меню» или по пиктограмме «бутерброд» (три горизонтальные линии).

5.Сделать средства просмотра фотографий, при нажатии на фото,

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

6. Сделать фиксированную кнопку на сайте для плавного перемещения вверх по странице (переопределить поведение якоря)

Ограничения на лабораторную работу

1. Использовать только JS без подключения каких-либо библиотек

(bootstrap).

2. Весь код должен быть в отдельном файле, единым для всех страниц

сайта

Варианты

1.Интернет магазин (стройматериалы)

2.Интернет магазин (компьютерная техника)

3.Интернет магазин (цветы и букеты)

4.Интернет магазин (курсовые работы)

5.Заказ билетов (театр)

6.Заказ билетов (рок группа)

2

7.Заказ билетов (музей)

8.Каталог автозапчастей

9.Каталог книг

10.Сайт автошколы

11.Сайт хоккейной группы

12.Сайт шахматного турнира

13.Онлайн кинотеатр (любая тематика)

14.Форум (любая тематика)

15.Новостной сайт (электроника)

16.Новостной сайт (спорт)

17.Новостной сайт (медицина)

18.Каталог рецептов

19.Каталог программ

20.Новостной сайт (литература)

21.Интернет магазин (компьютерные игры)

22.Интернет магазин (доставка еды)

23.Сайт университета

24.Сайт знакомств

3