НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ

Лабораторная работа по ВМСС № 8.

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

Выполнил

студент группы А-13-08

Апухтин М.А.

Преподаватель

Куриленко И.Е.

Москва, 2012

Оглавлени

Карты-изображения. 3

Преимущества карт-изображений 3

Недостатки 4

Способы интеграции на html-страницы мультимедиа-контента. 4

Средства разработки gif-анимации. 6

Стандарты разработки рекламных баннеров. 6

Выполнение работы. 7

layer.htm 7

layer.css 8

Список использованных источников 9

Карты-изображения.

Карта изображений — это графический объект языка разметки HTML, связанный с изображением и содержащий специальные области (активные зоны), при нажатии на которые происходит переход по определённому URL. Использование карт изображений позволяет хранить несколько ссылок в одном изображении.

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.

Для указания того, что изображение является картой, используется атрибут usemap тега . В качестве значения указывается ссылка на описание конфигурации карты.

Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой на описание конфигурации карты, которая задается тегом . Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег .

Атрибуты тега AREA

shape

Определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).

alt

Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.

coords

Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

Для полигона задаются координаты его вершин.

href

Определяет адрес ссылки для области. Правила записи такие же, как и для тега .

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

Преимущества карт-изображений

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

2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.

Недостатки

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

2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.

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

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

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

Атрибуты

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

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

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

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

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

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

Атрибуты

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

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

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

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

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

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

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

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

Вставляет звуковой или видеофайл для тегов

Атрибуты

Media - Определяет устройство, для которого будет воспроизводиться файл.

Src - Адрес файла.

Type - MIME-тип медийного источника.