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

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

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

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

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






Лабораторная работа № 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 располагается выше.

Атрибуты:


Пример

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Тег AREAtitle>

head>

<body>

<div id="title">

<img src="images/ecctitle.png" width="640" height="158" alt="Детский образовательный центр" /><br />

<img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation" />

div>

<p>

<map id="Navigation" name="Navigation">

<area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация" />

<area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия" />

<area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения" />

<area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Тех. информация" />

<area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение" />

<area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа" />

<area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное" />

map>

p>

body>

html>


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

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

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

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

  3. Атрибуты:

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

  2. Атрибуты:

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

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

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

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


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

Файл
2664.rtf
113308.rtf
154141.rtf
70685.rtf
3985-1.rtf




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