Для создания анимированной "шапки" сайта (которая будет использоваться в дальнейшем) была использована таблица стилей, для размещении отдельных элементов анимаций на экране (документ "css/animation.css"). Для этого были использованы свойства "position: absolute" для абсолютного позиционирования элементов и "overflow: auto" для добавления при необходимости полосы прокрутки. Остальные используемые свойства нужны для размещения поверх "фоновой" анимации. Сами gif-изображения (папка source/animation) располагаются внутри блоков div, для размещения на странице.
Для задания фонового изображения (изображение "source/image/fon.jpg") были использованы следующие свойства: "background-image: url(source/image/fon.jpg)" - путь к фоновому изображению, "background-attachment: fixed" фиксация фона веб-страницы, "background-size: cover" - для масштабирования фонового изображения.
Для задания фона для текста (изображение "source/image/texture.jpg") были использованы свойства "border: 1px solid #B25538", "padding: 10px" и "margin: 20px" - для расположения текста внутри "рамки" и "margin-left: 350px", "margin-right: 350px" - для расположения самой "рамки" на экране. Документ стилей для фона: ("css/fon.css").
Для форматирования таблицы был использован документ: ("css/table.css"), и использованы теги "th", "td" и "tr", для задания строк и столбцов для таблицы.
Для реализации игры был использован скрипт ("js/Epic_Sax_Guy_Sound.js"), где реализован отработчик событий на нажатие клавиш (клавиши 0 - 9), и скрипт, для включение соответствующей аудиозаписи.
Пояснение к "игре"| Используемая клавиша | Название воспроизводимого аудиофайла (.mp3) |
|---|---|
| 0 | Epic Sax Guy-MLG Airhorn Remix |
| 1 | Air Horn |
| 2 | Damn Son Where'd You Find This |
| 3 | Explosion |
| 4 | Funny Reactions |
| 5 | Oh Baby A Triple... Oh Yeeah |
| 6 | Punch |
| 7 | Really Nigga |
| 8 | Smoke Weed Everyday |
| 9 | Wow |
Для игры ознакомьтесь с аудиофайлами ("source/audio") с помощью нажатий клавиш (1-0) и прокрутите страницу до анимированной шапки сайта, для большего эффекта. Рекомендуется запустить фоновую мелодию (клавиша "0") и добавлять остальные аудиофайлы по мере необходимости, для их наложения и эффективного звучания. Играйте, балуйтесь, чувствуйте себя mlg-диджеем.
Вывод:Получены опытным путём знания о многих тегов для формирования html-документа, умения применять к ним стили (.css) и возможность придания функционала web-страницы путём применения javascript. Также овладел начальными знаниями пользованием git и создал web-страницу при выполнении лабораторной.