LAB8 Захаров А.Е. (Лабораторная работа 8)

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

ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ

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

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

Выполнил

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

каф. Прикладной Математики

Захаров Антон

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

Куриленко Иван Евгеньевич

Москва, 2012

Цель работы

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

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

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

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

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

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

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

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

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

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

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

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

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

Символом «H» обозначена область, где не должно быть ссылки.

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

1. Способы организации карт изображений.

Определение

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

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

Однако не следует считать, что карты-изображения должны использоваться всюду, где требуется организовать переходы по ссылкам. Нужно обдумать, имеет ли смысл применение карт-изображений в том или ином случае, взвесив все «за» и «против».

Варианты реализации карт-изображений.

Концепция карты-изображения на Web-страницах может быть реализована в двух различных вариантах – серверный вариант и клиентский вариант. Последнее название часто используют в виде аббревиатуры CSIM. Исторически первым появился и получил распространение серверный вариант карт-изображений, который впервые был реализован в браузере Mosaic. Серверный вариант позволяли использовать первые версии всех трёх ведущих браузеров. Серверный вариант может быть реализован в двух различных форматах, которые получили своё наименование по названиям организаций-разработчиков – NCSA и CERN.

В последнее время все большее развитие получает клиентский вариант, который впервые был реализован в браузере Internet Explorer. Начиная с версии 2.0, этот вариант также поддерживает браузер Netscape. Данный вариант имеет свои неоспоримые преимущества и становится все более популярным.

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

В использовании карт-изображений есть как положительные, так и отрицательные моменты. Большинство из них носит эстетический характер, но некоторые имеют и технические аспекты. Для создания хороших Web-страниц важно понимать преимущества и недостатки карт-изображений.

Карты-изображения наиболее удобно использовать в следующих ситуациях:

• Для представления пространственных связей, например географических координат, которые было бы трудно задать отдельными кнопками или текстом. В качестве примера может быть приведена карта Северной Америки, на которой выбор каждого из штатов ведёт к переходу на соответствующую страницу.

• В качестве меню верхнего уровня, появляющегося на каждой странице. Наличие такого меню предоставляет возможность перехода в интересующий раздел сервера с любой страницы и в любой момент. Создание общего графического меню позволит сократить время разработки.

Несмотря на то, что карты-изображения стали необычайно популярны, очевидно, что они не являются неотъемлемым атрибутом Web-страниц и используются далеко не на всех страницах. Есть ситуации, когда не следует использовать карты-изображения. К недостаткам карт-изображений можно отнести следующие:

• Если не предусмотрено альтернативное текстовое меню, то не остаётся никаких средств навигации для пользователей, которые не могут загрузить графику или отключили её загрузку.

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

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

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

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

Атрибуты:

• name – имя карты-изображения.

<area>

Каждый элемент определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере , который связывает координаты областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Атрибуты:

• accesskey – переход к области с помощью комбинации клавиш.

• alt – альтернативный текст для области изображения.

• coords – координаты активной области.

• href – задаёт адрес документа, на который следует перейти.

• hreflang – указывает язык документа, на который ведет ссылка.

• nohref – область без ссылки на другой документ.

• shape – форма области.

• tabindex – задаёт последовательность перехода между элементами с помощью клавиши Tab.

• target – имя окна или фрейма, куда браузер будет загружать документ.

• type – устанавливает MIME-тип документа, на который ведёт ссылка.

Пример

Особенности использования карт-изображений.

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

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

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

Атрибуты:

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

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

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

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

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

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

Атрибуты:

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

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

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

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

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

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

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

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

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

Атрибуты:

• media – определяет устройство, для которого будет воспроизводиться файл.

• src – адрес файла.

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

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

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

Атрибуты:

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

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

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

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

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

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

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

• height – высота объекта.

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

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

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

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

• width – ширина объекта.

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

E asy GIF Animator.