Лабораторная работа 8 (LAB8 Логинов А. А.)

Посмотреть архив целиком

Национальный исследовательский университет

Московский Энергетический Институт











Лабораторная работа №8.

Разработка страниц с сегментированной графикой, анимированной графикой и мультимедиа.













Выполнил: Логинов Андрей

группа А-13-08

Преподаватель: Куриленко Иван Евгеньевич











Москва, 2012.

Цель работы:

Научиться использовать сегментированную графику при верстке web-страниц. Получить навыки разработки и внедрения на web-страницы анимированной графики, звука и видео-изображений.

Подготовка к работе:

  1. Ознакомиться с способом организации карт изображений.

  2. Ознакомиться с способом интеграции на html-страницы мультимедиа-контента.

  3. Ознакомиться с средствами разработки gif-анимации.

  4. Ознакомиться с стандартами разработки рекламных баннеров.

Порядок выполнения работы:

  1. Добавить на одну из страниц карту изображений с несколькими ссылками использую теги map и area.

  2. Добавить на одну из страниц карту изображений, содержащую области, показанные в задании ниже.

  1. Реализовать дубликат карты изображения (созданной в рамках п.1) с применением CSS и без применения тегов map и area.

  2. Разработать и включить на одну из созданных ранее страниц gif-анимацию.

  3. Включить на страницу звуковой файл.

  4. Включить на страницу видео-ролик.





















Тег служит контейнером для элементов , которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега  — в связывании тега с клиентской картой-изображением.

Тег > задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ.

Тег <audio> - добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

Атрибуты:

autoplay - Звук начинает играть сразу после загрузки страницы.

controls - Добавляет панель управления к аудиофайлу.

loop - Повторяет воспроизведение звука с начала после его завершения.

preload - Используется для загрузки файла вместе с загрузкой веб-страницы.

src - Указывает путь к воспроизводимому файлу.


Тег <video> - добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег .

Атрибуты:

autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.

controls - Добавляет панель управления к видеоролику.

height - Задает высоту области для воспроизведения видеоролика.

loop - Повторяет воспроизведение видео с начала после его завершения.

poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится.

preload - Используется для загрузки видео вместе с загрузкой веб-страницы.

src - Указывает путь к воспроизводимому видеоролику.

width - Задает ширину области для воспроизведения видеоролика.







Для создания gif-анимации существует множество редакторов: GIF Construction Set, Microsoft GIF Animator, PhotoImpact GIF Animator, Adobe Photpshop, The Gimp и другие.

Рекламные баннеры бывают:

Баннер статичный - Актуально при имиджевой рекламе, для отображения насыщенного цветом  изображения.

Баннер с анимацией - Позволяет представить небольшой рекламный сюжет.

Flash-баннер - Наиболее эффективный рекламный носитель. Позволяет сложные рекламные сюжеты, интерактивность.

Рекламный модуль  (FLASH технологии) - Предназначен для размещения на стартовой странице сайта и привлечения внимания к текущей рекламной акции. Может быть интерактивным и содержать несколько сцен.


"http://www.w3.org/TR/html4/strict.dtd">

</span></font></font><font face="Calibri, serif"><font size="2" class="CL_13">Лаб</font></font><font face="Calibri, serif"><font size="2" class="CL_13"><span lang="en-US">. 8





Messi and Xavi

picture

GIF
Animation

About Messi

About Xavi

Visit
FCBarcelona.cat









Audio and Video



Mozart Symphony No.39 III Menuetto - Allegretto





Стили:

.map3 {

width: 534px;

height: 356px;

background: url(messi_and_xavi.jpg);

position: absolute;

top: 616px

}

ul {

list-style: none;

margin: 0;

padding: 0

}

.messi a {

position: absolute;

left: 79px;

top: 18px;

width: 159px;

height: 130px;

}

.xavi a {

position: absolute;

left: 240px;

top: 18px;

width: 142px;

height: 130px;

}

.official a {

position: absolute;

left: 130px;

top: 165px;

width: 272px;

height: 32px;

}




Случайные файлы

Файл
48472.rtf
35845.rtf
187050.rtf
73299.rtf
3394.rtf




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.