Лабораторная работа 8 (LAB8 Апухтин М.А.)

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

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

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









Лабораторная работа по ВМСС № 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-страницы мультимедиа-контента.

<audio>

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

Атрибуты

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

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

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

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

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

<video>

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

Атрибуты

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

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

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

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

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

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

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

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

<source>

Вставляет звуковой или видеофайл для тегов <audio> и <video>. Обобщенно такие файлы называются медийными.

Атрибуты

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

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

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

<object>

Элемент <object> сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Спецификация HTML 4 разрешает вкладывать несколько тегов <object> с разным содержанием друг в друга. Это позволяет отображать тот контент, который понимает браузер, при отсутствии нужного плагина. Например, внешний тег <object> загружает видеофайл, а для случая, когда соответствующий кодек (программа для сжатия и восстановления видеоданных) не установлен, внутренний тег <object> показывает графическое изображение. Дополнительно внутрь контейнера <object> можно поместить тег <param>, который передает дополнительные параметры для отображения объекта.

Атрибуты

align

Определяет, как объект будет выравниваться на странице и способ его обтекания текстом.

archive

Устанавливает путь к файлам, необходимым для работы объекта.

classid

Адрес программы (приложения или плагина), которая работает с данным объектом, и будет запускать его.

code

Имя объекта для его выполнения.

codebase

Путь к папке с объектом, который указан атрибутом code или classid.

codetype

Указывает на тип объекта, который задан атрибутом classid.

data

Адрес файла для его отображения в окне браузера.

height

Высота объекта.

hspace

Горизонтальный отступ от объекта до окружающего контента.

tabindex

Определяет порядок перехода между элементами с помощью клавиши Tab.

type

MIME-тип объекта.

vspace

Вертикальный отступ от объекта до окружающего контента.

width

Ширина объекта.

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

Существует множество различных программ для разработки анимированных gif-файлов, такие как: Easy GIF Animator, Microsoft GIF Animator, UleadGifAnimator, CoffeeСup GIF Animator и др.

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

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило содержит гиперссылку на сайт рекламодателя или страницу с дополнительной информацией.

Изобретательность рекламодателей не знает пределов и новые варианты баннерной рекламы появляются каждый день. На данный момент можно выделить следующие наиболее распространённые форматы баннеров:

Тип баннера

Описание

Статичные изображения

В основном JPEG-файлы

Анимированные изображения

GIF-файлы, Flash-анимация

Richtext

Текстовые и графические блоки

Интерактивные

Flash- или JavaScript-анимация с элементами взаимодействия с пользователем (например, игра или анкета)


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

Файл
153970.rtf
164976.doc
23566.rtf
posobie.doc
132004.rtf




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