Электронная библиотека книг Александра Фролова и Григория Фролова.
Shop2You.ru Создайте свой интернет-магазин
Библиотека
Братьев
Фроловых
[Назад] [Содержание] [Дальше]

Создание Web-приложений: Практическое руководство

© Александр Фролов, Григорий Фролов
М.: Русская Редакция, 2001, 1040 стр.

3. Графика, анимация, видео и звук

3. Графика, анимация, видео и звук.. 1

Размещение графических изображений.. 2

Как выбрать формат графического файла.. 10

Формат JPEG.. 10

Формат GIF.. 11

Выбор палитры.. 12

Прозрачные изображения.. 13

Подготовка чересстрочных изображений.. 18

Анимация.. 19

Редактор GIF Construction Set Professional 19

Редактор Microsoft GIF Animator. 24

Редактор PhotoImpact GIF Animator. 26

Видеофрагменты в документах HTML. 26

Звук в документах HTML. 28

Вставка звука для браузера Microsoft Internet Explorer. 28

Вставка звука для браузера Netscape Navigator. 28

Вставка звука для браузера NCSA Mosaic. 28

Универсальный способ. 29

Использование графики в ссылках.. 29

Вставка графического изображения в ссылку. 30

Сегментированная графика. 30

Adobe Photoshop 6.0, ImageReady 3.0 и графика для Web.. 32

Создание изображений GIF.. 32

Размеры нового изображения. 33

Цветовой формат изображения. 33

Фон нового изображения. 33

Вставка из буфера обмена Clipboard. 35

Многослойные изображения в Adobe Photoshop. 36

Сохранение изображения. 37

Сохранение в файле типа JPG.. 37

Сохранение в файле типа GIF. 39

Создание анимированных файлов GIF.. 40

Создание нового изображения. 41

Добавление новых слоев. 42

Создание дополнительных кадров анимации. 44

Указание параметров отдельных кадров анимации. 45

Выбор режима проигрывания анимации. 45

Оптимизация изображения. 46

Сохранение полученного многосекционного файла GIF. 46

Создание сегментированной графики. 47

Выделение сегментов. 47

Привязка сегментов к адресам URL. 48

Сохранение сегментированного изображения. 48

 

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

Для подготовки мультимедийной информации Вам могут потребоваться специальные приложения, такие как графические редакторы, средства ввода и обработки видео и звука. Для подготовки изображений часто применяют, например, программы Corel Draw, Adobe Photoshop и Adobe ImageReady. Хотя объем нашей книги не позволяет привести подробное описание всех этих программ, мы приведем некоторые сведения, которые помогут Вам быстро приступить к работе с основными средствами создания мультимедийных данных. Более подробную информацию Вы найдете в дополнительной литературе.

Не исключено, что для создания иллюстраций и видео Вам придется приобрести видеокамеру, адаптер для ввода видеосигнала от видеомагнитофона или видеокамеры, а также редактор файлов с видеофрагментами. В [5] мы рассмотрели основные средства и методики, пользуясь которыми Вы сможете самостоятельно создавать небольшие видеофрагменты в формате файлов AVI.

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

Размещение графических изображений

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

В табл. 3-1 мы привели список атрибутов, определенных для тега <IMG> в стандарте языка HTML версии 3.2.

Таблица 3-1. Атрибуты тега <IMG>

Атрибут

Описание

SRC

Адрес URL файла с графическим изображением

ALT

Текстовая строка, которая отображается на месте иллюстрации в тех случаях, когда браузер не может показывать графические изображения или когда такая возможность отключена

ALIGN

Выравнивание текста относительно графического изображения:

LEFT      по левой границе,

RIGHT   по правой границе,

TOP        по верхней границе,

MIDDLE                по центру изображения,

BOTTOM              по нижней границе,

TEXTTOP             выравнивание по верхней границе относительно самых высоких символов в текстовой строке,

ABSMIDDLE        выравнивание середины текстовой строки относительно середины изображения,

BASELINE             выравнивание нижней рамки изображения относительно базовой линии текстовой строки,

ABSBOTTOM      выравнивание нижней границы изображения относительно нижней границы текущей строки

HEIGHT

Высота изображения в пикселах

WIDTH

Ширина изображения в пикселах

BORDER

Ширина рамки вокруг изображения в пикселах (этот атрибут используется только браузером Netscape Navigator)

HSPACE

Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали

VSPACE

Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали

USEMAP

Адрес URL файла, содержащего так называемую карту сегментированного изображения (будет рассмотрена позже)

ISMAP

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

 

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

Масштабирование позволяет подготовить графический файл относительно небольшого размера, который быстро передается по каналам Интернета, и занимает при этом значительную площадь в окне браузера. Этот прием часто применяется для «заливки» ячеек таблиц неоднородным фоном. Вы, однако, не можете масштабировать сегментированные графические изображения (они будут описаны позже в этой главе) и фоновые изображения.

Растровые и векторные графические изображения

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

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

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

Редакторы векторных изображений, такие как, например, Corel Draw, позволяют изменять характеристики отдельных объектов, составляющих изображение:  вытягивать, изгибать, разделять объекты на части и объединять их, изменять взаимное расположение объектов и т.д. При этом векторные изображения легко поддаются масштабированию. Они будут отображаться с максимально возможным качеством на устройствах отображения, обладающих любой разрешающей способностью.

Что же касается редактирования растровых изображений, то этот процесс больше всего напоминает рисование карандашами на обычном листе бумаги. При помощи ластика Вы можете удалять те или иные фрагменты изображения, но нет никаких средств выделения и редактирования отдельных объектов. Типичным примером редактора растровых изображений является приложение Microsoft Paint, входящее в состав операционной системы Microsoft Windows.

Современные редакторы растровых изображений, такие как Adobe Photoshop, позволяют создавать многослойные растровые изображения. Расположив отдельные объекты на разных слоях, Вы можете изменять их взаимное расположение. Однако после объединения слоев такая операция становится невозможной.

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

 

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

Листинг 3-1. Вы найдете в файле chap3\inline.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение графических изображений</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Служба восстановления компьютерных данных<br>www.DataRecovery.Ru</H2>
<P><img border="0" src="logo_help_me.gif" align="left" hspace="5" vspace="5" width="149" height="190">Наша
служба поможет Вам: извлечь файлы из дисковых разделов NTFS, FAT, FAT32, разрушенных в результате программных ошибок, заражения компьютерными вирусами или сбоев в работе оборудования, а также данные из частично разрушенных дисковых массивов RAID; восстановить разрушенные тома типа Volume Set, созданные операционной системой Microsoft Windows NT; извлечь данные из физически поврежденных дисковых устройств; разработать методику антивирусной защиты, удалить компьютерные вирусы и выполнить антивирусную профилактику, выбрать и установить антивирусное программное обеспечение</P>
<P><IMG SRC="clock.jpg"> Чем быстрее Вы к нам
обратитесь, тем больше вероятность успеха!</P>
</BODY>
</HTML>

Первое изображение имеет большие размеры и расположено в начале параграфа, а второе, небольших размеров, вставлено в середину параграфа (рис. 3-1).

Рис. 3-1. Два графических изображения в документе HTML

Чтобы отделить изображение от расположенного рядом с ним текста, мы указали значение атрибутов hspace и vspace, равное 5 пикселам.

Задавая различные типы выравнивания, Вы можете изменить относительное расположение графического изображения и текста, находящегося рядом. Ниже мы приведем несколько примеров для всех типов выравнивания, задаваемых атрибутом  ALIGN тега  <IMG>.

В документе HTML, исходный текст которого приведен в листинге 3-2, для параметра ALIGN мы указали значение TOP (выравнивание по верхней границе).

Листинг 3-2. Вы найдете в файле chap3\top.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение графических изображений</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
<P>Приведем пример документа HTML, в котором имеется
графическое изображение.</P>
<P><IMG SRC="sun.gif" ALIGN=TOP>Есть несколько способов выравнивания
текста относительно графического изображения, которые
можно выбирать при помощи атрибута &lt;ALIGN&gt;
тега &lt;IMG&gt;</P>
</BODY>
</HTML>

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

Рис. 3-2. Выравнивание текста по верхней границе изображения

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

В листинге 3-3 мы привели исходный текст документа HTML, в котором помимо выравнивания, задаваемого атрибутом BOTTOM (выравнивание по нижней границе изображения), указан атрибут BORDER. Этот атрибут позволяет создать вокруг графического изображения рамку заданной толщины.

К сожалению, атрибут BORDER распознается только браузером Netscape Navigator. Что же касается Microsoft Internet Explorer, то он его игнорирует.

Листинг 3-3. Вы найдете в файле chap3\bottom.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение графических изображений</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
Приведем пример документа HTML, в котором имеется
графическое изображение.
<P><IMG SRC="sun.gif" ALIGN=BOTTOM BORDER=2>Есть несколько способов выравнивания
текста относительно графического изображения, которые
можно выбирать при помощи атрибута &lt;ALIGN&gt;
тега &lt;IMG&gt;
</BODY>
</HTML>

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

Рис. 3-3. Выравнивание текста по нижней границе изображения

На рис. 3-4 мы показали центрирование текста относительно графического изображения, которое получается при использовании для атрибута ALIGN значения MIDDLE.

Текст соответствующего документа HTML Вы найдете в файле chap3\middle.htm на компакт-диске, который продается вместе с книгой. Этот текст мы опустили для экономии места, так как он отличается от текста, приведенного в листинге 3-3 только значением параметра ALIGN.

Рис. 3-4. Центрирование текста относительно изображения

Указывая для атрибута ALIGN значения LEFT и RIGHT, Вы можете добиться эффекта обтекания изображения текстом, соответственно, с правой и левой стороны.

На рис. 3-5 показано взаимное расположение текста и графического изображения для выравнивания по левой границе (атрибут ALIGN имеет значение LEFT). Исходный текст соответствующего документа HTML Вы найдете в файле chap3\left.htm на компакт-диске.

Рис. 3-5. Выравнивание, задаваемое атрибутом LEFT

Для выравнивания по правой границе, которое получается, если атрибут ALIGN имеет значение RIGHT, взаимное расположение текста и графического изображения показано на рис. 3-6. Исходный текст документа HTML расположен в файле chap3\right.htm.

Рис. 3-6. Выравнивание, задаваемое атрибутом RIGHT

Браузеры Netscape Navigator и Microsoft Internet Explorer версии 3.0 и более новых версий распознают еще несколько типов выравнивания.

Выравнивание, задаваемое атрибутом TEXTTOP, аналогично выравниванию, которое получается при использовании атрибута TOP, однако оно выполняется относительно самых высоких символов в текстовой строке (рис. 3-7). Пример соответствующего документа HTML находится в файле chap3\texttop.htm.

Рис. 3-7. Выравнивание, задаваемое атрибутом TEXTTOP

Если указан атрибут ABSMIDDLE, то выполняется выравнивание середины текстовой строки относительно середины изображения (рис. 3-8). Пример соответствующего документа HTML Вы найдете в файле chap3\absmiddle.htm.

Рис. 3-8. Выравнивание, задаваемое атрибутом ABSMIDDLE

Указав атрибут BASELINE, Вы можете выполнить выравнивание нижней рамки изображения относительно базовой линии текстовой строки (рис. 3-9). Соответствующий документ HTML расположен в файле chap3\baseline.htm.

Рис. 3-9. Выравнивание, задаваемое атрибутом BASELINE

Атрибут ABSBOTTOM задает выравнивание нижней границы изображения относительно нижней границы текущей строки, которая расположена под базовой линией (рис. 3-10). Документ HTML, демонстрирующий выравнивание этого типа, расположен в файле chap3\absbottom.htm.

Рис. 3-10. Выравнивание, задаваемое атрибутом ABSBOTTOM

Как выбрать формат графического файла

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

Прежде всего, Вы должны выбрать формат файла, в котором будет храниться графическое изображение. Несмотря на то, что сегодня существуют десятки различных графических форматов, практически для оформления документов HTML используются только два. Первый формат — это формат обмена графикой GIF (Graphics Interchange Format), второй — JPEG. Современные браузеры позволяют работать с форматами GIF, JPEG, PCX, BMP, PNG и XBM, однако форматы PCX и BMP не обладают развитыми средствами компрессии, поэтому они практически не используются. Формат XBM родился в мире операционной системы UNIX с оболочкой X-Windows и применяется только для хранения черно-белых изображений. Формат PNG обладает многими достоинствами, но пока еще мало распространен. Поэтому при размещении в документе HTML графического изображения Вы должны будете сделать выбор между форматами GIF и JPEG.

Если Вы размещаете в документе HTML копию экрана или другое аналогичное изображение (например, изображение окна приложения или диалоговой панели), выбор сделать легко. В этом случае Вам придется использовать формат GIF, так как сжатие с потерей качества приведет к неудовлетворительному результату.

Аналогично, если требуется получить эффект прозрачности или анимации, выбора тоже нет — только формат GIF позволит Вам создать необходимые изображения.

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

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

Рассмотрим особенности форматов JPEG и GIF, не углубляясь в несущественные для нас технические подробности.

Формат JPEG

Хотя исторически формат GIF появился раньше, сначала мы расскажем о формате JPEG. Этот формат имеет особенности, делающие привлекательным его использование в документах HTML, особенно для отображения цветных фотографий.

Прежде всего, формат JPEG допускает сжатие графической информации с некоторой потерей качества изображения. Подготавливая файл в формате JPEG, Вы можете указать допустимый процент потери качества. Чем больше этот процент, тем меньший объем дискового пространства потребуется для хранения файла и, что самое главное, тем меньшее время потребуется посетителю узла Web для загрузки изображения.

Оптимизация размера графического изображения

Оптимизация размера графического изображения при сохранении его качества — очень важная процедура. Дело в том, что в среднем информация передается через Интернет со скоростью примерно 1 Кбайт/с, поэтому на загрузку больших изображений может уйти слишком много времени. Даже и не думайте о том, чтобы разместить на главной странице узла Web цветную фотографию, занимающую на диске 1 Мбайт — посчитайте сами, сколько времени эта фотография будет загружаться в браузер посетителя.

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

Другое преимущество формата JPEG заключается в том, что он позволяет хранить изображения с высоким цветовым разрешением (16 млн. цветов).

Есть ли у формата JPEG недостатки?

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

Формат GIF

Формат GIF был разработан пользователями сети CompuServe и в настоящее время стал очень популярен. Несмотря на то, что изображения, хранящиеся в этом формате, не могут иметь более 256 цветов, формат GIF обладает возможностями, которые делают его незаменимым в целом ряде случаев:

·         в формате GIF используются алгоритмы сжатия изображения без потерь качества, поэтому этот формат как нельзя лучше подходит для хранения копий экранов или штриховых рисунков, содержащих большие однотонные площади;

·         можно существенно уменьшить размер графического файла, записав в него сокращенную цветовую палитру вместо полной 256-цветной палитры;

·         размещая в документах HTML специальным образом подготовленные изображения GIF, вы можете получить эффект прозрачности. Части изображения могут быть прозрачными, поэтому видимая форма изображения может отличаться от квадрата или прямоугольника;

·         формат GIF позволяет создавать анимационные графические изображения, оживляющие внешний вид документа HTML;

·         формат GIF позволяет создавать файлы с чересстрочным (interlaced) изображением.

Как устроен файл GIF?

Файл в формате GIF версии 89a состоит из блоков нескольких типов, два из которых являются обязательными, а остальные — дополнительными. Обязательные блоки — это блоки заголовка и блоки изображения. Дополнительно файл GIF может содержать блоки комментария, текстовые и управляющие блоки, а также блоки данных, содержащие произвольную информацию.

В блоке заголовка расположена палитра и сведения о размерах области, в которой желательно отображать содержимое файла. Что же касается палитры, то в файле GIF может быть определена одна глобальная палитра, которая используется для всех графических изображений, записанных в файле, или несколько локальных палитр для отдельных изображений.

Палитра в файле GIF

Растровые изображения в так называемом формате RGB хранят информацию о цвете каждого пиксела в виде трех чисел. Если значение каждой компоненты цвета меняется от 0 до 256, то для хранения цвета каждого пиксела потребуется целых три байта. Поэтому размер файла с изображением в формате RGB может быть довольно большим.

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

При использовании палитры цвет каждого пиксела задается через индекс в таблице цветов. Если палитра имеет небольшие размеры, информация о цвете каждого пиксела может занимать всего несколько бит. При этом размер файла с таблицей цветов  сильно уменьшается по сравнению с размером файла в формате RGB.

Современные графические редакторы, такие как Adobe Photoshop, позволяют изменять палитру. При этом дизайнер может добиться приемлемого компромисса между размером файла с изображением и качеством представления цвета.

В одном файле GIF может быть один или несколько блоков изображений. Если Вы создаете прозрачные или анимационные изображения, необходимо подготовить несколько изображений и записать их в файл.

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

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

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

Теперь мы расскажем о чересстрочных изображениях GIF.

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

Чересстрочное изображение проявляется в окне браузера постепенно, увеличивая свою четкость по мере получения новых порций данных. Это дает посетителю возможность оценить содержимое графического изображения до момента его полной загрузки. Если получаемое изображение не нужно, он может отказаться от загрузки до полного завершения процесса и тем самым сэкономить время.

Выбор палитры

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

На что влияет этот размер?

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

Например, если палитра (то есть таблица цветов) содержит только два элемента, в изображении имеются два цвета (например, черный и белый, либо красный и желтый). При этом для представления цвета каждого пиксела достаточно использовать один бит. Если же палитра содержит 256 цветов, для представления цвета пиксела необходимо использовать восемь бит данных (т.е. один байт).

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

Web-палитра

Сегодня уже редко можно встретить компьютеры с видеоадаптерами, способными отображать только 256 различных цветов. Как правило, цветовое разрешение современных видеоадаптеров достигает 16,7 млн. цветов. Тем не менее, некоторые компьютеры (например, блокнотные или карманные) либо вообще не способны отображать цвет, либо обладают ограниченными цветовыми возможностями.

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

Современные версии графического редактора AdobePhotoshop, а также программа Adobe ImageReady умеют автоматически преобразовывать исходную палитру изображения в Web-палитру. Разумеется, качество изображения при этом снижается.

При выборе палитры для графического изображения следует учитывать возможные ограничения цветовой разрешающей способности видеоадаптера посетителя. Если видеоадаптер способен отображать одновременно только 256 цветов, могут возникнуть цветовые искажения.

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

Подробнее об использовании палитр в операционной системе Microsoft Windows Вы можете узнать из [6].

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

В этом разделе мы научим Вас создавать прозрачные изображения в формате GIF. В качестве инструмента мы воспользуемся приложением GIF Construction Set Professional, пробную версию которого можно бесплатно загрузить из Интернета по адресу http://www.mindworkshop.com. Далее в этой главе мы расскажем о создании изображений с прозрачным фоном средствами графического редактора Adobe Photoshop.

Для примера попробуем решить достаточно распространенную задачу: поместим небольшое графическое изображение в документе HTML, имеющем графическую подложку. Проблема здесь заключается в том, что если в документе есть подложка, а размещаемое в нем изображение имеет форму, отличную от прямоугольной, то фон изображения заслонит собой изображение подложки.

Пусть, например, мы заполняем фон документа HTML изображением небольшого квадрата (рис. 3-11).

Рис. 3-11. Графическое изображение для фона документа HTML

В результате такого заполнения документ будет разлинован как школьная тетрадь в клеточку. Теперь разместим в документе изображение, показанное на рис. 3‑12.

Рис. 3-12. Графическое изображение для размещения в документе HTML

Исходный текст документа HTML, который мы подготовили для демонстрации прозрачного изображения, приведен в листинге 3-4.

Листинг 3-4. Вы найдете в файле chap3\transpar\transpar.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Прозрачные графические изображения</TITLE>
</HEAD>
<BODY BACKGROUND="bkg.gif">
<TABLE>
<TR><TD><IMG SRC="suntr.gif"></TD><TD><IMG SRC="sun.gif"></TD></TR>
</TABLE>
</BODY>
</HTML>

В теге <BODY> задан атрибут BACKGROUND, в качестве значения которого мы указали имя файла с изображением квадрата, показанного на рис. 3-11. Это изображение заполнит фон всего документа.

«Водяные знаки» в документе HTML

Если вместе с атрибутом BACKGROUND указать атрибут BGPROPERTIES со значением FIXED, фоновое изображение не будет сдвигаться в окне браузера при просмотре документа.

Вот пример определения этого атрибута в теле <BODY>:

<BODY BACKGROUND="bkg.gif" BGPROPERTIES=FIXED>

Такой прием позволяет получить интересный эффект «водяных знаков».

Далее в документе имеется таблица, состоящая из одной строки и двух столбцов. В ячейках этой таблицы с помощью тега <IMG> мы разместили два графических изображения suntr.gif и sun.gif. Эти изображения имеют одинаковый вид, показанный на рис. 3-12, однако первое из них подготовлено с использованием прозрачности, а второе — обычное.

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

Рис. 3-13. Прозрачное и непрозрачное изображение в документе HTML

Как же создать прозрачное изображение?

Если Вы пользуетесь редактором Adobe Photoshop, достаточно выбрать для нового изображения (в формате Color Table, т.е. с таблицей цветов) прозрачный фон. Далее на этом фоне нужно нарисовать изображение. Ниже мы рассмотрим технологию подготовки изображений с прозрачным фоном с использованием условно-бесплатной программы Construction Set Professional.

Прежде всего, Вы должны подготовить рисунок, для чего можно использовать любой подходящий графический редактор. Простые изображения, такие, как показаны на рис. 4.11 и 4.12, можно подготовить в редакторе Microsoft Paint, входящем в комплект операционной системы Microsoft Windows. Для подготовки более сложных изображений Вам придется воспользоваться редакторами Corel Draw, Corel PhotoPaint, Adobe Photoshop или аналогичными.

Учтите, что только один цвет в изображении может быть прозрачным. В нашем случае на изображении, показанном на рис. 3-12, мы нарисовали желтое солнце с черным контуром и черными лучами, сделали подпись красного цвета, а для фона выбрали белый цвет. Именно белый цвет и будет прозрачным, что позволит сделать фон нашего изображения невидимым.

Подготовив изображение, сохраните его в формате GIF, BMP или PCX. Приложение GIF Construction Set Professional может импортировать графические файлы во многих форматах, однако перечисленные выше форматы доступны практически во всех графических редакторах.

Теперь сделаем наше изображение прозрачным.

Запустите приложение GIF Construction Set Professional. Из меню File выберите строку New для создания нового изображения. После этого главное окно приложения GIF Construction Set Professional примет вид, показанный на рис. 3-14.

Рис. 3-14. Главное окно приложения GIF Construction Set Professional

В окне программы имеется список блоков файла GIF. Пока в нем есть только блок заголовка. С помощью строки Insert Block меню Edit Вы можете вставить в файл блок любого допустимого типа. Аналогичное действие выполняет кнопка Insert blocks, расположенная на инструментальной линейке в верхней части окна программы (кнопка с изображением большого знака +).

Далее нужно добавить в новый файл блок изображения. Для этого щелкните кнопку Insert blocks и из появившегося меню выберите строку Image. На экране появится стандартное диалоговое окно Open, предназначенное для выбора файла (рис. 3-15).

Рис. 3-15. Окно Open

Выбрав в этом окне файл, Вы можете добавить его в создаваемое изображение. После выбора файла на экране появится диалоговая панель Palette, в которой нужно указать, что делать с палитрой для данного изображения (рис. 3-16).

Рис. 3-16. Диалоговая панель Palette

По умолчанию в этой диалоговой панели включен переключатель Dither this image to the global palette, в результате чего при выполнении вставки изображения его палитра будет приведена к глобальной палитре с использованием диффузии. Так как мы вставляем первое изображение, то для него нужно включить переключатель Use this selection for subsequent images. В результате палитра изображения будет использована и для последующих вставляемых изображений (если таковые будут).

После вставки в списке блоков появится новая строка (рис. 3-17), а справа от списка — уменьшенное изображение, которое Вы только что вставили.

Рис. 3-17. Окно приложения GIF Construction Set Professional после вставки изображения

На следующем шаге Вы должны выделить в списке блоков строку изображения IMAGE и затем выбрать из меню Block строку Manage. На экране появится диалоговая панель Block Managment, показанная на рис. 3-18.

Рис. 3-18. Редактирование управляющего блока

Далее в поле Controls щелкните кнопку Apply. На экране появится диалоговая панель Edit Control. Здесь необходимо отметить флажок Transparent colour.

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

После этого панель Edit Control примет вид, показанный на рис. 3‑19.

Рис. 3-19. Диалоговая панель Edit Control после выбора прозрачного цвета

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

Завершив редактирование управляющего блока, щелкните кнопку OK. Изображение готово. Теперь его нужно сохранить в файле, выбрав из меню File строку Save As. Укажите имя для файла и щелкните кнопку OK. Описанная процедура была использована нами для подготовки файла chap3\transpar\suntr.gif, который Вы найдете на компакт-диске, прилагаемом к книге.

Подготовка чересстрочных изображений

Приложение GIF Construction Set Professional позволяет создавать графические файлы GIF с чересстрочным изображением. Напомним, что такое изображение появляется в окне браузера постепенно, причем каждый раз четкость повышается. Это позволяет увидеть изображение до момента его полной загрузки из Интернета.

В этом разделе мы расскажем о том, как подготовить чересстрочное изображение средствами  GIF Construction Set Professional. В конце этой главы Вы узнаете, что эту операцию можно выполнить и при помощи редактора Adobe Photoshop.

Итак, для того чтобы превратить обычное изображение в чересстрочное, Вы должны загрузить его в GIF Construction Set Professional, как это было описано выше. После загрузки необходимо отредактировать блок изображения, дважды щелкнув соответствующую строку IMAGE в списке блоков файла GIF. На экране появится диалоговая панель Edit Image (рис. 3-20).

Рис. 3-20. Диалоговая панель Edit Image

В этой панели нужно отметить флажок Interlaced и затем щелкнуть кнопку OK. После сохранения в файле будет храниться чересстрочное изображение.

В листинге 3-5 мы привели исходный текст документа HTML, в котором расположены два изображения — обычное cpanel.gif и чересстрочное cpaneli.gif.

Листинг 3-5. Вы найдете в файле chap3\interl\interl.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Чересстрочные графические изображения</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR><TD><IMG SRC="cpanel.gif"></TD><TD><IMG SRC="cpaneli.gif"></TD></TR>
</TABLE>
</BODY>
</HTML>

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

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

Анимация

Как мы уже говорили, формат GIF позволяет хранить в одном файле несколько графических изображений. При отображении такого файла браузер будет показывать эти изображения по очереди, как кадры обычного кинофильма. Подготовив достаточное количество кадров, Вы можете создать небольшой фильм (или мультфильм) и поместить его в документ HTML.

Flash-анимация

В последние годы получила популярность относительно новая технология создания интерактивных анимированных изображений — так называемая Flash-анимация. Эта технология предполагает использование специального программного модуля, устанавливаемого в браузер и предназначенного для «проигрывания» Flash-анимации.

Несмотря на то, что Flash-анимация позволяет достичь весьма интересных эффектов, чем-то напоминающих эффекты, применяемые в презентациях Microsoft PowerPoint, этой технологии присущи многие недостатки.

Например, для просмотра Flash-анимации необходима установка в браузер специального модуля. Хотя современные версии браузеров Microsoft Internet Explorer и Netscape Navigator имеют в своем составе этот модуль, некоторые из Ваших посетителей могут отказаться от его установки. В результате вместо красивой анимации они увидят лишь пустой прямоугольник и могут подумать, что на Вашем узле Web что-то не работает.

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

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

В нашей книге мы не будем рассказывать о том, как создавать Flash-анимацию, но при необходимости Вы легко найдете информацию об этом в другой литературе.

Редактор GIF Construction Set Professional

В этом разделе мы создадим маленький мультфильм с использованием приложения GIF Construction Set Professional, с которым Вы уже знакомы.

За основу мы возьмем рисунок, показанный на рис. 3-12. Подготовим на базе этого рисунка семь изображений, как это показано на рис. 3-21. Все эти рисунки отличаются изображением лучей солнца, которые как бы расходятся из центра. Кроме того, в каждом рисунке изменяется цвет одной буквы в слове Picture.

Рис. 3-21. Семь изображений для мультфильма

Теперь, когда кадры нашего мультфильма готовы, займемся их объединением в один графический файл GIF.

Запустите приложение GIF Construction Set Professional и выберите из меню File строку Animation Wizard. На экране появится первое диалоговое окно мастера полуавтоматического создания мультфильма. Нажмите в ней кнопку Next.

На экране появится следующее диалоговое окно (рис. 3-22).

Рис. 3-22. Выбор назначения создаваемого анимационного файла GIF

В нем нужно указать назначение создаваемого анимационного изображения. Если Вы собираетесь поместить это изображение в документ HTML, отметьте флажок Yes, for use with a Web page. При этом будет использована палитра, максимально совместимая с браузерами.

Далее щелкните кнопку Next. После этого на экране появится диалоговое окно, в котором Вы должны указать, как будет отображаться ваш мультфильм (рис. 3-23).

Рис. 3-23. Выбор способа отображения анимационного файла GIF

Если отметить флажок Loop indefinitely, анимационный файл будет прокручиваться непрерывно. Обычно используется именно этот режим отображения. Однако Вы можете отметить флажок Animate once and stop, при этом содержимое файла будет показано только один раз.

Продолжим работу, щелкнув кнопку Next. В следующем диалоговом окне Вы должны указать способ, которым были получены исходные изображения для анимационного файла GIF (рис. 3-24).

Рис. 3-24. Указание способа получения изображений

Если анимационный файл создается из сканированных фотографий, отметьте флажок Photorealistic (фотореалистичные изображения). В том случае, когда изображения были нарисованы при помощи графического редактора, воспользуйтесь флажком Drawn. Если к тому же в нарисованном изображении были использованы только 16 цветов, отметьте флажок Drawn in sixteen colours.

Введенная Вами информация будет использована мастером создания анимационного файла GIF для выбора подходящей палитры.

Указав способ получения изображения, щелкните кнопку Next и переходите к следующему диалоговому окну, позволяющему задать интервал времени между отображением отдельных кадров файла (рис. 3-25).

Рис. 3-25. Указание интервала отображения кадров

По умолчанию интервал между кадрами составляет 0.1 секунды, однако Вы можете выбрать другое значение при помощи списка, расположенного в данном диалоговом окне.

Выбрав интервал, щелкните кнопку Next и переходите к формированию списка файлов GIF, из которых будет создан анимационный файл. На рис. 3-26 мы показали заполненный  список.

Рис. 3-26. Создание списка изображений для анимационного файла

Для заполнения списка в диалоговом окне, показанном на рис. 3-26, щелкните кнопку Select. На экране появится диалоговое окно Open (рис. 3-27).

Рис. 3-27. Диалоговое окно Open

В этом окне нужно выбрать один или несколько добавляемых файлов.

Список, показанный на рис. 3-26, можно редактировать, удаляя из него отдельные файлы при помощи кнопки Remove и добавляя новые.

Когда список будет заполнен, щелкните  кнопку Next. Вслед за этим Вы увидите диалоговое окно с сообщением о том, что все готово и можно приступать к созданию анимационного файла. Щелкните в этом окне кнопку Done.

В результате работы мастера создания анимационного файла GIF будут автоматически созданы блоки заголовка и блоки изображений (рис. 3-28).

Рис. 3-28. Созданные блоки анимационного файла

При необходимости Вы можете отредактировать любой блок, например, изменив интервал отображения отдельных кадров или настройку палитры. Можно также задать смещение расположения кадров по вертикали или горизонтали, а также другие параметры.

Теперь сохраните созданный файл, выбрав из меню File строку Save as, и указав имя для файла.

Анимационный графический файл включатся в документ HTML таким же способом, что и обычный. В листинге 3-6 мы привели исходный текст простейшего документа HTML, в который включен только что созданный нами анимационный графический файл sunani.gif.

Листинг 3-6. Вы найдете в файле chap3\animate\animate.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Прозрачные графические изображения</TITLE>
  </HEAD>
  <BODY>
    <IMG SRC="sunani.gif">
  </BODY>
</HTML>

Внешний вид этого документа показан на рис. 3-29.

Рис. 3-29. Документ HTML с анимационным графическим изображением

Редактор Microsoft GIF Animator

Еще одно удобное приложение для подготовки анимационных графических файлов GIF создано компанией Microsoft и называется Microsoft GIF Animator. Главное окно этого приложения показано на рис. 3-30.

Рис. 3-30. Главное окно приложения Microsoft GIF Animator

Пользоваться этим приложением очень просто. Сначала Вам нужно подготовить набор обычных файлов GIF, из которых будет создаваться анимационное изображение. Затем щелкните кнопку Open, расположенную в верхней части окна приложения (вторая слева на рис. 3-30) и при помощи появившейся на экране диалогового окна выберите файл изображения для первого кадра вашего мультфильма.

В левой части окна приложения Microsoft GIF Animator отображаются значки кадров мультфильма. После выполнения только что описанной процедуры в списке значков появится содержимое добавленного Вами файла. Далее при помощи кнопки с изображением чистого листа бумаги и знака «плюс» (четвертая слева на рис. 3-30) добавьте в мультфильм по одному файлы остальных кадров.

Теперь обратите внимание на вкладки блокнота, расположенные в правой части главного окна приложения.

На вкладке Option этого блокнота находится список Import Color Palette, с помощью которого можно выбрать палитру для создаваемого изображения. В большинстве случаев Вы должны выбрать значение Browser Palette. При этом создается глобальная палитра с использованием так называемого безопасного набора цветов, который гарантированно отображается без искажений наиболее популярными браузерами.

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

На вкладке Animation обратите внимание на флажок Looping. Если он отмечен, изображение будет проигрываться столько раз, сколько указано в поле Repeat Count. Для бесконечного зацикленного проигрывания отметьте флажок Repeat Forever.

Вкладка Image позволяет задать параметры изображений, такие как размеры и смещение, продолжительность отображения для отдельных кадров, метод перерисовки, прозрачность и комментарий.

После добавления кадров и настройки всех параметров Вы можете выполнить предварительный просмотр созданного вами мультфильма. Для этого нужно щелкнуть кнопку Preview с изображением треугольника, направленного острием вправо (вторая справа на рис. 3‑30).

Готовый анимационный файл можно записать на диск, щелкнув кнопку с изображением дискеты.

Более подробную информацию об использовании программы Вы найдете в электронной справочной системе. Чтобы вызвать ее на экран, щелкните кнопку с изображением вопросительного знака. Эта кнопка находится в правом верхнем углу главного окна программы (рис. 3-30).

Редактор PhotoImpact GIF Animator

Еще одно средство для подготовки анимационных файлов GIF, которое, безусловно, заслуживает внимание, это редактор PhotoImpact GIF Animator. Этот редактор Вы можете загрузить бесплатно через Интернет с сервера www.ulead.com компании Ulead Systems.

Главное окно приложения PhotoImpact GIF Animator показано на рис. 3-31.

Рис. 3-31. Главное окно приложения PhotoImpact GIF Animator

Это приложение очень удобно, так как Вы можете добавлять файлы отдельных кадров создаваемого мультфильма, просто перемещая их мышью из папки, раскрытой на поверхности рабочего стола Microsoft Windows в окно списка пиктограмм, расположенное в левом нижнем углу главного окна.

Кроме того, Вы можете щелкнуть правой клавишей мыши строку кадра и при помощи контекстного меню изменить параметры соответствующего кадра.

Справочная система программы PhotoImpact GIF Animator содержит подробное описание способов выполнения основных операций.

Видеофрагменты в документах HTML

Анимационные изображения, выполненные в виде файлов GIF, используются в документах HTML достаточно широко, так как для их подготовки можно использовать недорогие или даже бесплатные средства. Кроме того, что немаловажно, такие изображения правильно показываются наиболее популярными браузерами и занимают немного места. Следовательно, они достаточно быстро передаются по медленным каналам Интернета.

Однако с помощью анимированных изображений GIF Вы сможете сделать только «немое кино». Полноценные озвученные видеофрагменты можно разместить в документах HTML как ссылки на файлы в формате Microsoft Video for Windows (файлы с расширением имени AVI) или файлы формата MPEG. Кроме того, есть технологии передачи видео через Интернет в реальном времени, однако об этом мы поговорим позже.

Существует несколько возможностей для создания файлов AVI и MPEG.

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

Заметим, что файлы AVI или MPEG с высококачественным видеофрагментом длительностью порядка нескольких минут может занимать десятки Мбайт дискового пространства (даже после сжатия с целью устранения избыточной информации). Через модем такой файл будет загружаться довольно долго, однако, при использовании скоростных каналов связи (например, упомянутых во введении к этой книге асимметричных спутниковых каналов), это время может составить всего несколько минут.

Обычно в документе HTML размещают ссылку на файл AVI или MPEG в виде небольшого значка с наиболее характерным кадром видеофрагмента. Щелкнув такой значок, пользователь сможет загрузить видеофрагмент полностью и просмотреть его автономно, отключившись от Интернета.

Во-вторых, можно сделать файл AVI или MPEG как мультфильм из отдельных изображений, нарисованных любым графическим редактором. Эта технология напоминает технологию создания анимационных файлов GIF, с тем исключением, что в отличие от файла GIF файл AVI или MPEG можно озвучить. Причем озвучивание файла AVI можно выполнить в любое время уже после записи видео.

Более подробно технология подготовки файлов AVI с использованием пакета программ Microsoft Video for Windows была нами подробно описана [5].

Если размер файла AVI не превышает нескольких десятков Кбайт, его можно вставить непосредственно в документ HTML. Обычно видеофрагменты такого маленького размера либо не озвучены, либо имеют очень небольшую продолжительность.

Для вставки файлов AVI Вы можете использовать описанный ранее тег <IMG> с различными атрибутами, такими как DYNSRC, START и CONTROLS.

В табл. 3-2 мы приведем список атрибутов тега <IMG>, которые используются для вставки файлов AVI с их кратким описанием.

Таблица 3-2. Атрибуты тега <IMG>

Атрибут

Описание

DYNSRC

Этот атрибут аналогичен атрибуту SRC, указывающему путь к файлу с графическим изображением. Он определяет путь к файлу AVI, содержащему видеофрагмент

SRC

С помощью атрибута SRC можно указать путь к графическому изображению, которое появится в документе HTML вместо файла AVI в том случае, если браузер не способен проигрывать видеофрагменты

START

Атрибут START определяет момент, когда нужно начинать проигрывание видеофрагмента. Если этот атрибут имеет значение FILEOPEN, проигрывание начинается сразу, как только файл будет загружен. Если же значение атрибута равно MOUSEMOVE, проигрывание начнется после того, как пользователь поместит курсор над окном, предназначенным для проигрывания видеофрагмента

CONTROLS

Если указан этот атрибут, под окном с видеофрагментом отображаются элементы управления, позволяющие контролировать процесс проигрывания

LOOP

Атрибут LOOP определяет, сколько раз будет проигрываться видеофрагмент. Если значение этого атрибута равно -1 или INFINITE, проигрывание будет выполняться бесконечно (то есть пока Вы не перейдете к просмотру другой страницы или не завершите работу браузера)

LOOPDELAY

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

 

Помимо перечисленных выше, при вставке файла AVI в теге <IMG> Вы можете использовать и другие атрибуты, о которых мы рассказывали раньше в разделе «Размещение графических изображений». Например, Вы можете создать рамку вокруг окна просмотра файла AVI или задать тип выравнивания текста, расположенного около этого окна.

Приведем простой пример (листинг 3-8).

Листинг 3-8. Вы найдете в файле chap3\avi\avi.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>
Вставка файла AVI</TITLE>
  </HEAD>
  <BODY>
    <IMG DYNSRC="skymove.avi" START="FILEOPEN" CONTROLS>
 
</BODY>
</HTML>

При загрузке этой страницы автоматически начинается проигрывание файла skymove.avi.

Звук в документах HTML

Попадая на главную страницу сервера Web корпорации Microsoft в конце 1996 года, Вы могли услышать приглашение в Интернет (на чистом английском языке). Страницы Вашего сервера также можно озвучить, используя специальные теги языка HTML, предназначенные для вставки звуковых файлов WAV и музыкальных файлов MIDI. Но здесь тоже важно не переборщить — излишне навязчивое музыкальное оформление может отпугнуть посетителей от Вашего узла Web, особенно если они не могут отказаться от принудительного прослушивания музыки. Помните и о том, что разным людям нравится разная музыка, поэтому эффект от озвучивания страниц может оказаться вовсе не таким, какой Вы ожидаете.

К сожалению, браузеры Microsoft Internet Explorer и Netscape Navigator используют разные способы для вставки звука в документы HTML.

Вставка звука для браузера Microsoft Internet Explorer

Для того чтобы вставить звуковой файл в документ HTML, предназначенный для просмотра браузером Microsoft Internet Explorer, Вы должны воспользоваться тегом <BGSOUND>. Этот тег имеет два атрибута — SRC и LOOP.

Атрибут SRC указывает адрес URL звукового файла, который может быть в формате WAV, AU или MIDI. С помощью параметра LOOP можно указать, сколько раз необходимо проиграть звуковой файл при загрузке страницы. Если файл должен проигрываться в бесконечном цикле, параметр LOOP должен иметь значение INFINITE.

Ниже мы привели пример тега, с помощью которого выполняется звуковое оформление документа HTML:

<BGSOUND SRC="kaas.wav">

При загрузке страницы выполняется однократное проигрывание файла kaas.wav.

Вставка звука для браузера Netscape Navigator

Браузер Netscape Navigator позволяет использовать другой способ вставки звуковых фрагментов, основанный на применении тега <EMBED>:

<EMBED SRC="kaas.wav" HIDDEN="true">

Заметим, что указанный оператор распознается не всеми браузерами.

Вставка звука для браузера NCSA Mosaic

Есть и еще один, третий, способ озвучивания документов HTML, который работает только с браузером NCSA Mosaic. Этот способ заключается в использовании тега <SOUND>:

<SOUND SRC="kaas.wav" LOOP=infinite DELAY=15>

Назначение атрибутов SRC и LOOP аналогично назначению одноименных атриубтов тега <BGSOUND>. Атрибут DELAY позволяет задержать начало проигрывания звукового файла на заданное количество секунд.

Универсальный способ

Какой же из перечисленных трех способов можно порекомендовать для звукового оформления ваших страниц — первый, второй или третий?

Ответ будет такой — Вам следует использовать комбинацию первого и второго метода, как это сделано в документе, исходный текст которого приведен в листинге 3-9.

Листинг 3-9. Вы найдете в файле chap3\wave\wave.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>
Вставка файла WAVE</TITLE>
  </HEAD>
  <BODY>
    <EMBED SRC="kaas.wav" HIDDEN="True">
    <BGSOUND SRC="kaas.wav">
  </BODY>
</HTML>

Данная комбинация будет успешно работать с браузерами Microsoft Internet Explorer и Netscape Navigator. Что же касается браузера NCSA Mosaic, послужившего прообразом для Microsoft Internet Explorer, то он способен распознавать тег <BGSOUND>. Поэтому наш документ будет звучать и в том случае, если пользователь работает с браузером NCSA Mosaic.

Браузер Microsoft Internet Explorer успешно проигрывает звуковые файлы WAV и музыкальные файлы MIDI, встроенные с помощью тега <EMBED>, поэтому Вы можете также ограничиться только этим оператором. Мы так и поступили в документе, исходный текст которого представлен в листинге 3-10. К сожалению, этот документ «не звучит» в браузере NCSA Mosaic.

Листинг 3-10. Вы найдете в файле chap3\midi\midi.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>
Вставка файла MIDI</TITLE>
  </HEAD>
  <BODY>
    <EMBED SRC="bach.mid" HIDDEN="
true">
 
</BODY>
</HTML>

Небольшое замечание относительно браузера NCSA Mosaic. Если Вы вставляете в документ HTML файл MIDI с помощью тега <BGSOUND>, то для проигрывания этого файла будет запущено соответствующее приложение, зарегистрированное для проигрывания файлов MIDI, например, Media Player.

Использование графики в ссылках

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

Для выполнения такого оформления у Вас есть две возможности.

·         Во-первых, Вы можете вставить между тегами <A> и </A> графическое изображение небольшого размера. При этом оно будет использовано как чувствительная область. Если щелкнуть левой клавишей мыши эту область, произойдет загрузка объекта, указанного в ссылке.

·         Во-вторых, для организации ссылок можно применить так называемые сегментированные графические изображения (image maps). Такие изображения содержат несколько чувствительных областей, с каждой из которых при помощи отдельного текстового файла связывается та или иная ссылка.

Рассмотрим обе эти возможности.

Вставка графического изображения в ссылку

Это очень просто. Вы вставляете изображение между тегами <A> и </A> с помощью тега <IMG>, например:

<A HREF="http://www.frolov.pp.ru"<IMG>SRC="homepage.gif" BORDER=0></A>

Здесь на месте ссылки в документе появляется графическое изображение, записанное в файле homepage.gif. Если щелкнуть левой клавишей мыши это изображение, в окно браузера будет загружен документ, имеющий адрес http://www.frolov.pp.ru. Обратите также внимание на то, что мы убрали рамку вокруг графического изображения, указав значение атрибута BORDER, равное нулю.

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

Сегментированная графика

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

Нарисовав изображение, определите координаты чувствительных областей (сегментов), которые будут использованы для ссылок (в пикселах). Каждое изображение может содержать произвольное количество чувствительных областей.

Теперь нужно подготовить описание этих областей (карту сегментов), воспользовавшись для этого тегами <MAP> и </MAP>.

Тег <MAP> имеет один атрибут — имя карты чувствительных сегментов сегментированного графического изображения. Между тегами <MAP> и </MAP> располагаются теги <AREA>, атрибуты которых описывают отдельные чувствительные сегменты:

<MAP NAME="image_map">
  <AREA ...>
  <AREA
...>
</MAP>

Пусть, например, мы подготовили графическое изображение, показанное на рис. 3-32.

Рис. 3-32. Графическое изображение с тремя чувствительными областями

В этом изображении имеются три области в виде прямоугольников с координатами, каждый из которых имеет свой цвет. Фрагмент кода HTML с картой, описывающей эти сегменты, имеет следующий вид:

<MAP NAME="buttons">
  <AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">
  <AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">
  <AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red.htm">
</MAP>

Атрибут NAME тега <MAP> имеет значение buttons. Это название карты чувствительных сегментов, которое будет использовано при вставке сегментированного графического изображения в документ HTML.

Тег <AREA> имеет три атрибута: SHAPE, COORDS и HREF.

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

Таблица 3-3. Значения атрибута SHAPE тега <AREA>

Значение атрибута SHAPE

Форма чувствительной области

RECT

Прямоугольная область. Атрибут COORDS задает координаты верхнего левого и правого нижнего углов области

CIRC

Окружность. Атрибут COORDS определяет три значения: координату центра окружности по оси X, координату центра окружности по оси Y, и радиус окружности

POLY

Многоугольник. Атрибут COORDS задает координаты вершин многоугольника в виде пар значений

 

Атрибут HREF тега <MAP> задает адрес URL объекта, который должен быть загружен, когда посетитель щелкает левой клавишей мыши чувствительную область. Дополнительно с помощью атрибута NOHREF можно указать области, нечувствительные к щелчкам мыши.

После того как Вы создали карту чувствительных областей, можно вставлять сегментированное изображение в документ HTML. Эта процедура выполняется с помощью тега <IMG>, для которого дополнительно указывается атрибут USEMAP:

<IMG SRC="buttons.gif" BORDER=0 USEMAP="#buttons">

В атрибуте USEMAP указывается имя карты чувствительных областей. Если эта карта располагается в том же файле, что и ссылка на сегментированное изображение, имя карты записывается в атрибуте USEMAP после символа #. Если же карта находится в отдельном файле (что допустимо), перед символом # необходимо указать имя файла, содержащего карту:

<IMG SRC="buttons.gif" BORDER=0 USEMAP="map.htm#buttons">

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

В листинге 3-11 мы привели исходный текст документа HTML, в котором используется сегментированная графика.

Листинг 3-11. Вы найдете в файле chap3\imgmap\imgmap.htm на прилагаемом к книге компакт-диске

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Сегментированная графика для ссылок</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <MAP NAME="buttons">
      <AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">
      <AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">
      <AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red.htm">
      <AREA SHAPE="RECT" COORDS="0,0,70,50" NOHREF>
    </MAP>
    <IMG SRC="buttons.gif" BORDER=0 USEMAP="#buttons">
  </BODY>
</HTML>

Этот документ ссылается на графический файл buttons.gif, показанный на рис. 3-32. Обратите внимание, что последний тег <AREA> описывает всю поверхность изображения, как нечувствительную к щелчкам мыши. Тем не менее, области, описанные ранее другими тегами <AREA>, будут работать в качестве чувствительных областей. Это происходит потому, что если области перекрываются, то браузер использует первое описание, которое встретилось в карте.

Для чего лучше всего использовать сегментированную графику?

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

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

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

Adobe Photoshop 6.0, ImageReady 3.0 и графика для Web

Осознавая потребность Web-дизайнеров в мощных современных средствах разработки графических иллюстраций для размещения на страницах узлов Web, компания Adobe создала такие средства в рамках хорошо известного графического процессора Adobe Photoshop. Теперь с помощью Adobe Photoshop версии 6.0 и поставляющегося вместе с ним приложения ImageReady версии 3.0 Web-дизайнеры могут легко решать задачу подготовки иллюстраций для Интернета.

Рамки нашей книги, к сожалению, не позволяют рассмотреть использование этих средств хоть сколько-нибудь подробно, однако мы постараемся сделать краткое введение. Мы надеемся, что с его помощью Вы сможете легко освоить выполнение некоторых наиболее  важных операций. Что же касается подробного описания возможностей приложений Adobe Photoshop и Adobe ImageReady, то мы адресуем Вас к дополнительной литературе, представленной на книжном рынке в избытке.

Например, в [7] и [8] Вы найдете неплохое описание приложений Adobe Photoshop и Adobe ImageReady. Хотя эти книги рассказывают об устаревших версиях данных программ, она будет Вам полезна. Что же касается современных версий, то на момент подготовки этой книги в продаже не было никакой литературы об Adobe Photoshop 6.0 и ImageReady 3.0, написанной на русском языке.

Создание изображений GIF

Чтобы создать новое изображение GIF, запустите Adobe Photoshop и выберите из меню File строку New. На экране появится диалоговое окно New, показанное на рис. 3-33.

Рис. 3-33. Создание нового изображения

При помощи этого окна можно создать новое графическое изображение, указав для него ряд параметров, такие как размеры, разрешение, цветовой формат и начальное содержимое (фон). Заполнив все поля, щелкните кнопку OK, и изображение будет создано.

Однако прежде мы расскажем об использовании некоторых параметров применительно к графике, создаваемой для страниц Web.

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

Обратите внимание, что в полях Width и Height указаны размеры создаваемого изображения в пикселах. При необходимости Вы можете изменить эти размеры.

Если перед тем как создавать новое изображение описанным выше способом Вы скопировали какое-нибудь изображение в универсальный буфер обмена Clipboard, то поля Width и Height будут содержать размеры этого изображения. Например, сделав окно какого-либо приложения активным и нажав комбинацию клавиш Control+Print Screen, Вы скопируете в Clipboard изображение главного окна данного приложения. Именно таким образом были скопированы иллюстрации для нашей книги.

Таким образом, при создании нового изображения Adobe Photoshop определяет размеры изображения, сохраненного в Clipboard (если такое там есть), и устанавливает соответствующим образом значения в полях Width и Height диалогового окна New.

Цветовой формат изображения

С помощью списка Mode (рис. 3-33) Вы можете выбрать один из цветовых форматов (режимов) изображения. Это форматы Bitmap, GrayscaleRGB Color, CMYK Color и Lab Color.

Создавая иллюстрацию для размещения на страницах Web, выберите цветовой формат  RGB Color. В этом формате цвет каждого пиксела изображения представляется в виде трех чисел, соответственно, для красной (Red), зеленой (Green) и голубой (Blue) компоненты. Значения этих чисел могут изменяться от 0 (наименьшая интенсивность цвета) до 255 (наибольшая интенсивность цвета).

В дальнейшем перед сохранением созданного изображения в файле GIF мы преобразуем его в формат Indexed Color, предполагающей использование таблицы цветов (палитры).

Фон нового изображения

Отметив один из флажков в поле Contents диалогового окна New (рис. 3-33), Вы можете выбрать один из способов начальной раскраски создаваемого изображения.

Если отметить флажок White, то для раскрашивания фона изображения будет использован белый цвет.

Отметив флажок Background Color, Вы можете закрасить изображение цветом, выбранным в палитре цветов Adobe Photoshop в качестве фонового цвета. На рис. 3-34 фоновый цвет задается в правом нижнем поле квадратной формы, имеющем более светлую окраску.

Рис. 3-34. Палитра для выбора цвета изображения и цвета фона

Cразу после запуска Adobe Photoshop в этом поле указан белый цвет, а в левом верхнем поле, определяющим цвет изображения, — черный цвет. Вы можете изменить любой из этих цветов, дважды щелкнув нужный квадрат левой клавишей мыши и выбрав нужный цвет в диалоговом окне Color Picker, показанном на рис. 3-35.

Рис. 3-35. Выбор цвета в диалоговом окне Color Picker

Обратите внимание на поля R, G и B, расположенные в правой нижней части окна Color Picker. В этих полях Вы можете задать значения интенсивности для отдельных компонент цвета, используя десятичные числа.

Ниже полей R, G, B находится поле с названием #. Здесь отображается значение цвета в виде, пригодном для вставки в документ HTML. Напомним, что многие теги HTML допускают указание цвета при помощи тега COLOR. Значение этого тега задается в виде трех шестнадцатеричных чисел, расположенных после символа #. Как видите,  Adobe Photoshop облегчает задачу определения нужных числовых значений интенсивности компонент цвета.

Отметив флажок Only Web Colors, Вы можете ограничить выбор цветов исходя из цветовых возможностей браузеров (рис. 3-36). Напомним, что если видеоадаптер работает в режиме с цветовым разрешением 256 цветов, то браузер может отображать не все цвета, а только некоторые в количестве 215. Палитра из этих 215 цветов называется палитрой, оптимизированной для Web.

Рис. 3-36. Сокращенная палитра, оптимизированная для Web

Возвращаясь к флажкам поля Contents диалогового окна New (рис. 3-33), расскажем о флажке Transparent. Этот флажок позволяет создавать графические изображения с прозрачным фоном, о которых мы уже рассказывали в этой главе. Если Вам нужно создать такое изображение, просто включите флажок Transparent. При этом новое изображение будет иметь прозрачный фон.

Вставка из буфера обмена Clipboard

После того как Вы создали новое изображение описанным выше способом, оно появится в главном окне редактора Adobe Photoshop.  На рис. 3-37 мы показали внешний вид окна Adobe Photoshop сразу после создания нового изображения с прозрачным фоном.

Рис. 3-37. Новое изображение с прозрачным фоном

Пользуясь инструментами из палитры, расположенной в левой части окна, Вы можете рисовать в окне холста Untitled-1 все, что пожелаете.

Если у Вас уже есть некоторые фрагменты изображения, их можно добавить в создаваемый рисунок через универсальный буфер обмена Clipboard. Для этого нужно сделать окно холста активным, щелкнув мышью его заголовок, а затем воспользоваться строкой Paste меню Edit.

На рис. 3-38 мы показали результат вставки изображения баннера в наш рисунок.

Рис. 3-38. В изображении появился второй слой

Многослойные изображения в Adobe Photoshop

Здесь мы столкнулись с таким понятием, как слои изображения. Графический редактор Adobe Photoshop позволяет создавать многослойные изображения, предоставляя возможность редактировать отдельные слои. Эта возможность очень удобна, так как позволяет перемещать различные объекты, составляющие рисунок, относительно друг друга.

В нашем случае после вставки изображения баннера был автоматически создан новый слой изображения. Это видно на вкладке Layers, где появились слои Layer 1 и Layer 2 (рис. 3-38). Щелкая изображение «глаза», расположенное слева от названия слоя, можно делать слои видимыми или невидимыми.

Выделяя название слоев, их можно редактировать по отдельности. Предусмотрены также операции слияния слоев, создания новых слоев и т.д. Чтобы получить доступ к меню операций над слоями (рис. 3-39), нужно щелкнуть круглую кнопку с изображением треугольника, расположенную в правом верхнем углу окна с вкладкой Layers.

Рис. 3-39. Меню операций со слоями

В частности, с помощью строки Falttern Image этого меню можно объединить все слои изображения в один, после чего послойное редактирование станет невозможным.

Сохранение изображения

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

Итак, пусть Вы создали новое изображение, выбрав в списке Mode (рис. 3-33) цветовой формат RGB Color. Затем Вы отредактировали его при помощи инструментов, расположенных на соответствующей панели редактора Adobe Photoshop.

Теперь полученное изображение необходимо сохранить в формате JPG или GIF, так как только такие изображения можно вставлять в документы HTML. Однако, перед тем, как выполнять эту процедуру, мы рекомендуем Вам сохранить изображение в «естественном» формате программы Adobe Photoshop — в файле с расширением имени PSD. Только такой файл может хранить полную информацию об изображении, в частности, информацию о разделении изображения на слои.

Сохранение в файле типа JPG

Перед тем как сохранять файл в формате JPG, необходимо установить цветовой формат изображения RGB Color (если такой формат не был установлен ранее), выбрав строку RGB Color из меню второго уровня Mode, как это показано на рис. 3-40. Меню Mode можно вызвать через меню Image.

Рис. 3-40. Меню изменения цветового формата изображения

При этом если в исходном изображении имеется несколько слоев, на экране появится диалоговое окно с запросом на объединение этих слоев в один (рис. 3-41).

Рис. 3-41. Запрос на объединение слоев изображения

В том случае, когда преобразование цветового формата выполняется с целью сохранения изображения в файле JPG, нужно щелкнуть кнопку Merge, объединив таким способом все слои изображения в один. Если же предполагается дальнейшее послойное редактирование изображение, щелкните кнопку Dont Merge. Кнопка Cancel позволяет отказаться от изменения цветового формата изображения.

Теперь Вам нужно выбрать из меню File главного окна программы Adobe Photoshop строку Save As. После этого на экране появится диалоговое окно сохранения файла  Save As, показанное на рис. 3-42.

Рис. 3-42. Окно Save As для сохранения файла

Здесь в списке Format Вам нужно выбрать строку JPEG (*.JPG,*JPE) и затем щелкнуть кнопку Save. Теперь на экране появится диалоговое окно JPEG Options (рис. 3-43), с помощью которого можно регулировать соотношение между качеством сохраняемого изображения и размером полученного файла.

Рис. 3-43. Окно JPEG Options для регулирования качества изображения

Здесь нужно обратить внимание на поле Image Options. Перемещая расположенный там движок можно изменять размер файла от маленького (small file) до большого (large file). При этом соответствующим образом будет изменяться качество — чем меньше размер файла, тем хуже качество полученного изображения. Допускается также точное указание качества при помощи поля Quality.

При помощи поля Size нетрудно узнать, сколько времени потребуется на загрузку сохраненного изображения JPEG через соединение с той или иной скоростью передачи данных. Например, на рис. 3-43 видно, что на загрузку иллюстрации через модем со скоростью 28,8 Кбит/с потребуется примерно семь с половиной секунд. Сама по себе эта величина вполне приемлема, если на странице находится только одна такая иллюстрация. Если же иллюстраций несколько, нужно учитывать суммарное время загрузки всех файлов.

Установив в диалоговом окне JPEG Options все необходимые параметры, щелкните кнопку OK для сохранения файла.

Сохранение в файле типа GIF

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

Прежде всего, перед сохранением изображения в файле GIF Вам необходимо установить для него цветовой формат RGB Color, выбрав строку RGB Color в меню, показанном на рис. 3‑40. Если изображение многослойное, на экране появится запрос о слиянии слоев, аналогичный запросу, показанному на рис. 3-41. Здесь необходимо щелкнуть кнопку OK, объединив все слои в один.

После этого на экране появится окно Indexed Color, показанное на рис. 3-44. С помощью того окна можно изменить палитру изображения, размер которой сильно влияет на размер полученного файла GIF и, соответственно, на время его загрузки через Интернет.

Рис. 3-44. Окно Indexed Color

Если в списке Palette выбрана строка Exact, в создаваемом файле GIF будет сформирована палитра, содержащая столько цветов, сколько указано в поле Colors. Для уменьшения размера полученного файла Вы можете оптимизировать палитру. Проще всего выбрать в списке Palette строку Local (Adaptive), а затем задать количество цветов в поле Colors (рис. 3-45). Более подробную информацию о редактировании палитры Вы найдете в литературе, посвященной приложению Adobe Photoshop 

Рис. 3-45. Определение размера палитры

Установив параметры палитры, щелкните кнопку OK и оцените качество полученного изображения. Если оно окажется неудовлетворительным, отмените изменения, выбрав из меню Edit строку Undo Indexed Color.

Далее выберите из меню File главного окна программы Adobe Photoshop строку Save As. На экране появится диалоговое окно сохранения файла  Save As (рис. 3-42). Выберите в списке Format строку CompuServ GIF (*.GIF) и щелкните кнопку Save.

При сохранении изображения в файле GIF в окне GIF Options Вам будет предложено сделать выбор между обычным форматом и чересстрочным (рис. 3-46).

Рис. 3-46. Выбор между обычным и чересстрочным изображением

Таким образом, чтобы создать чересстрочное изображение, достаточно отметить в окне GIF Options флажок Interlaced. Для сохранения обычного изображения воспользуйтесь флажком Normal.

Создание анимированных файлов GIF

Приложение Adobe ImageReady версии 3.0, входящее в комплект редактора Adobe Photoshop, позволяет легко создавать анимированные изображения GIF. Такие изображения используются очень часто, например, для привлечения внимания к рекламным баннерам.

Основная идея при этом заключается в том, чтобы сначала подготовить многослойное изображение формата PSD, каждый слой которого представляет собой один кадр анимации, а затем преобразовать это многослойное изображение в многосекционный анимированный файл GIF. При этом многослойное изображение PSD может быть создано в Adobe Photoshop, а преобразование в анимированный файл GIF нетрудно выполнить при помощи программы Adobe ImageReady.

В этом разделе мы рассмотрим процесс создания анимированного баннера для узла Web службы восстановления данных DataRecovery.Ru (http://www.datarecovery.ru). Размер стандартного баннера должен составлять 60х468 пикселов.

Создание нового изображения

Вначале мы запустили приложение Adobe ImageReady и создали новое изображение, выбрав из меню File строку New. На экране появилось диалоговое окно New Document (рис. 3-47).

Рис. 3-47. Создание нового изображения

Если Вы рисуете стандартный баннер, установите размеры изображения Width и Height как это показано на рис. 3-47. Кроме того, выберите прозрачный фон, отметив флажок Transparent.

После того как мы щелкнули кнопку OK, приложение  Adobe ImageReady создало первый кадр анимации (рис. 3-48).

Рис. 3-48. Появился первый кадр анимации

В центральной части главного окна программы на вкладке Original находится изображение первого кадра, пока пустое. Его можно редактировать при помощи палитры инструментов, аналогичной палитре инструментов редактора Adobe Photoshop (эта палитра располагается в левой части главного окна Adobe ImageReady).

В нижней части главного окна Adobe ImageReady на вкладке Animation изображен в уменьшенном виде первый и пока единственный кадр анимации, отмеченный цифрой 1 в левом верхнем углу.

Теперь открываем в новом окне файл с рисунком, показанный на рис. 3-49.

Рис. 3-49. Фрагмент изображения для оформления баннера

Вырезаем из него полоску высотой 60 пикселов для размещения в левой части баннера и копируем ее в Clipboard. Затем вставляем вырезанный фрагмент в левую часть баннера, а всю правую часть заливаем слегка голубоватым фоном. Для выбора цвета фона можно воспользоваться пипеткой, а для заливки — инструментом в виде ведерка с ручкой, из которого выливается краска.

Результат вставки фрагмента изображения показан на рис. 3-50.

Рис. 3-50. Первый кадр анимации готов

Добавление новых слоев

Далее нам нужно написать в правой части баннера текст «DataRecovery.Ru. Служба восстановления компьютерных данных». К сожалению, с символами кириллицы у приложения Adobe ImageReady возникают проблемы. Поэтому мы напишем этот текст в окне программы Microsoft Paint и затем перенесем его через Clipboard в баннер (рис. 3-51).

Рис. 3-51. Наш баннер после вставки текста

Обратите внимание на правый нижний угол окна Adobe ImageReady, показанного на рис. 3-51. После того как мы вставили текст, на вкладке Layers появился второй слой Layer 2. Теперь изображение первого кадра баннера, в котором нет текста, находится в слое Layer 1, а изображение первой строки текста — в слое Layer 2.

После того как мы добавили подобным образом еще несколько строк текста, в нашем изображении появились дополнительные слои. На рис. 3-52 мы сделали видимыми первый и пятый слои изображения.

Кириллица в Adobe Photoshop и Adobe ImageReady

К сожалению, при работе с программами Adobe Photoshop и Adobe ImageReady возникают проблемы с отображением символов кириллицы.

В Интернете можно найти рекомендацию, как избавиться от этой проблемы. Например, предлагается запустить программу редактора регистрационной базы данных Windows с названием REGEDT32 и отредактировать ключ HKLM\System\CurrentControlSet\Control\Nls\Codepage. В нем для кодовой страницы 1252 нужно изменить параметр CP_1252.nls на CP_1251.nls.

Мы также советуем Вам почитать сообщения конференции на узле Web компании Adobe с адресом www.adobe.ru.

Рис. 3-52. Теперь изображение состоит из 5 слоев

Создание дополнительных кадров анимации

Таким образом, мы подготовили один кадр пятислойного изображения. Теперь наша задача состоит в том, чтобы сделать из этого кадра пять кадров, причем на первом кадре должен быть виден только первый слой, а на всех остальных — первый в паре с остальными.

Чтобы создать новый кадр анимации, щелкните левой клавишей мыши круглую кнопку, расположенную в правом верхнем углу вкладки Animation и выберите из открывшегося меню строку New Frame (рис. 3-53).

Рис. 3-53. Создание нового кадра анимации

Результат добавления описанным выше способом пяти кадров анимации показан на рис. 3-54.

Рис. 3-54. Теперь анимация состоит из пяти кадров

Указание параметров отдельных кадров анимации

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

Для самого первого кадра мы делаем видимым только первый слой, устанавливая «глаз» на слое Layer 1 и снимая его с остальных слоев. Перед выполнением этой операции не забудьте выделить первый кадр, щелкнув его мышью.

Для того чтобы задать время, в течение которого кадр будет виден в окне браузера, щелкните мышью строку 0,00 s, расположенную непосредственно под кадром. В результате на экране появится меню выбора времени.

Рис. 3-55. Выбор времени, в течение которого будет отображаться первый кадр анимации

Выберите одно из значений, представленных в этом меню, или задайте другое при помощи строки Other. Такую операцию необходимо проделать для всех кадров анимации, выделяя их по очереди мышью.

Выбор режима проигрывания анимации

На следующем этапе Вы должны указать, должна ли анимация проигрываться один раз, бесконечное или заданное количество раз. Для этого щелкните строку Forever, расположенную под первым кадром анимации (3-53). После этого раскроется меню, показанное на рис. 3-56.

Рис. 3-56. Выбор количества раз, которое должна проигрываться анимация

Если выбрать в этом меню строку Once, анимация будет проигрываться только один раз сразу после загрузки страницы HTML, на которой Вы расположите анимированную иллюстрацию. Выбор строки Forever приведет к бесконечному проигрыванию кадров анимации в цикле. И, наконец, выбрав строку Other, Вы сможете задать количество раз, которое будет проигрываться анимация.

Оптимизация изображения

Хотя наш баннер состоит из пяти многослойных кадров, это вовсе не означает, что размер полученного анимированного файла GIF обязательно будет в пять раз больше размера обычного файла GIF, полученного из одного кадра. Дело в том, что программа Adobe ImageReady «умеет» оптимизировать создаваемый многосекционный файл GIF, убирая избыточную информацию.

Чтобы оптимизировать полученное анимированное изображение, откройте вкладку Optimized, как это показано на рис. 3-57.

Рис. 3-57. Результат оптимизации

В нижней части вкладки отображается результат оптимизации. Как видите, исходный размер файла PSD составлял 110 Кбайт. Размер полученного анимированного файла GIF составляет около 14 Кбайт, а на его загрузку через модем при скорости передачи данных 28,8 Кбит/с потребуется 6 секунд.

Для дальнейшего сокращения размера полученного файла воспользуйтесь вкладкой Optimize, показанной на рис. 3-58.

Рис. 3-58. Вкладка Optimize

Здесь Вы можете, например, уменьшить количество цветов в палитре (поле Colors), изменить способ преобразования палитры (список, расположенный слева от поля Colors) и «поиграть» с другими параметрами, подробное описание которых Вы найдете в справочной документации к Adobe ImageReady.

Сохранение полученного многосекционного файла GIF

После подготовки анимированного многосекционного файла GIF его нужно сохранить. Это самая простая операция — просто выберите из меню File программы Adobe ImageReady строку Save Optimized As и укажите путь к сохраняемому файлу.

Создание сегментированной графики

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

На рис. 3-59 мы показали изображение, загруженное в Adobe ImageReady. На нем изображена карта проезда, содержащая четыре сегмента прямоугольной формы, один сегмент в виде многоугольника и один в виде окружности.

Рис. 3-59. Выделение нескольких сегментов различной формы

Выделение сегментов

Если Вам нужно создать сегментированное изображение GIF из обычного, сначала откройте обычное изображение в Adobe ImageReady, воспользовавшись строкой Open меню File. Можно также с этой целью перетащить пиктограмму изображения в окно предварительно открытой программы Adobe ImageReady.

Далее воспользуйтесь инструментом, предназначенным для выделения сегментов изображения (рис. 3-60).

Рис. 3-60. Инструмент для выделения сегментов

По умолчанию этот инструмент позволяет выделять сегменты прямоугольной формы. Но если щелкнуть его мышью, удержав клавишу мыши в нажатом состоянии несколько секунд, то рядом с кнопкой, показанной на рис. 3-60, появится меню. В этом меню будет несколько строк с кнопками и одна строка с небольшим треугольником. Выбрав строку с треугольником, Вы откроете окно с набором инструментов, предназначенным для выделения сегментов различной формы (рис. 3-61).

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

Рис. 3-61. Окно с инструментами, предназначенными для выделения сегментов разной формы

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

Привязка сегментов к адресам URL

Подготовив все необходимые сегменты, отрегулировав их расположение и размер, можно приступать к привязке сегментов к адресам URL. Для этого Вам потребуется вкладка Image Map, показанная на рис. 3-61.

Если окно с этой вкладкой отсутствует на экране, то чтобы сделать его видимой, выберите из меню Window программы Adobe ImageReady строку Show Image Map.

 

Рис. 3-61. Вкладка Image Map для редактирования параметров сегментов

Выделяя по очереди сегменты изображения, заполните для каждого сегмента на вкладке Image Map поля Name (имя сегмента), URL (адрес URL для перехода), Target (фрейм, в который нужно загрузить страницу) и Alt (текст, отображаемый при установке курсора мыши на данный сегмент).

При заполнении Вы можете оставить поле Name в исходном состоянии, так как программа Adobe ImageReady создает имена сегментов автоматически.

Поле URL нужно заполнить обязательно. Когда пользователь щелкнет данный сегмент изображения, в окно браузера загрузится страница, адрес которой указан в этом поле.

Что касается поля Target, то с его помощью Вы сможете указать имя фрейма, в который необходимо загрузить страницу с адресом из поля URL. О фреймах мы расскажем позже в отдельной главе. Если Ваш узел Web не использует фреймы, поле Target можно оставить незаполненным.

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

Сохранение сегментированного изображения

После того как Вы отредактировали параметры всех сегментов, необходимо сохранить сегментированное изображение и текст документа HTML с описаниями этих параметров. Чтобы это сделать, воспользуйтесь строкой Save Optimized As меню File программы Adobe ImageReady.

На экране появится окно Save Optimized As (рис. 3-62).

Рис. 3-62. Сохранение сегментированного изображения

Выберите здесь в списке Save as type строку HTML and Images (*.html), а затем щелкните кнопку Save. В результате программа Adobe ImageReady создаст документ HTML, аналогичный документу, текст которого приведен в листинге 3-12.

Листинг 3-12. Вы найдете в файле chap3\map.htm на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
<TITLE>map</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<!-- ImageReady Slices (map.gif) -->
<IMG SRC="map.gif" WIDTH=448 HEIGHT=237 BORDER=0 USEMAP="#map_Map">
<MAP NAME="map_Map">
<AREA SHAPE="rect" ALT="" COORDS="100,19,193,71" HREF="#">
<AREA SHAPE="circle" ALT="" COORDS="401,117,31" HREF="http://www.my_site/metro">
<AREA SHAPE="poly" ALT="" COORDS="132,89, 132,74, 167,74, 167,88, 184,89, 184,124, 166,124, 166,141, 131,141, 131,125, 115,125, 115,89, 116,89" HREF="http://www.my_site/page1.html">
<AREA SHAPE="rect" ALT="" COORDS="244,84,298,129" HREF="#">
<AREA SHAPE="rect" ALT="" COORDS="190,85,239,129" HREF="#">
<AREA SHAPE="rect" ALT="" COORDS="56,84,109,129" HREF="#">
</MAP>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

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

Заметим, что программа Adobe ImageReady позволяет создавать сегментированные изображения различных типов, в том числе серверные. Чтобы изменить тип создаваемого сегментированного изображения, а также настроить различные параметры создаваемого документа HTML, щелкните кнопку Output Settings в окне Save Optimized As (рис. 3-62). Затем укажите нужные Вам параметры.

 

[Назад] [Содержание] [Дальше]