LAB8 Логинов А. А. (544758)

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла

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

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

Лабораторная работа №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">

Лаб. 8

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;

}

Характеристики

Тип файла документ

Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.

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

Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.

Список файлов лабораторной работы