В этой главе мы расскажем о том, как оживить страницы вашего сервера WWW, разместив на них графические изображения, видеофрагменты, анимацию, а также звук, - словом мультимедийную информацию.
Для подготовки мультимедийной информации вам могут потребоваться специальные приложения, такие как графические редакторы, средства ввода и обработки звука. В качестве примера мы можем назвать такие графические редакторы как Corel Draw и Adobe Photoshop.
Не исключено, что вам придется приобрести видеокамеру, адаптер для ввода видеосигнала от видеомагнитофона или видеокамеры, а также редактор файлов с видеофрагментами. В 15 томе “Библиотеки системного программиста”, который называется “Мультимедиа для Windows”, мы рассмотрели основные средства и методики, пользуясь которыми вы сможете самостоятельно создавать небольшие видеофрагменты в формате файлов AVI.
Если вы не обладаете художественными талантами, необходимыми для создания графических изображений или видеофрагментов, можно их заказать у художника либо приобрести отдельно. В любом случае вам нужно позаботиться о соблюдении авторских прав на всю информацию, которую вы собираетесь опубликовать на вашем сервере WWW, а также на все приложения, которые вы установите как расширение сервера (программы CGI или расширения типа ISAPI.
Для размещения графических изображений внутри текста или таблиц вы можете воспользоваться оператором <IMG>. Для этого оператора можно указывать ряд параметров, определяющих адрес файла с изображением, выравнивание текста, расположенного возле изображения и так далее. Ниже мы привели список параметров, допустимых для оператора <IMG> в стандарте языка HTML версии 3.2.
Параметр |
Описание |
SRC |
Адрес URL файла с графическим изображением |
ALT |
Текстовая строка, которая отображается вместо графического изображения в тех случаях, когда навигатор не может показывать графические изображения или когда такая возможность отключена |
ALIGN |
Выравнивание текста относительно графического изображения |
HEIGHT |
Высота изображения в пикселах |
WIDTH |
Ширина изображения в пикселах |
BORDER |
Ширина рамки вокруг изображения в пикселах (используется только навигатором Netscape Navigator) |
HSPACE |
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали |
VSPACE |
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали |
USEMAP |
Адрес URL файла, содержащего так называемую карту изображения, которая используется для сегментированной графики. Сегментированная графика будет рассмотрена нами позже в этой главе |
ISMAP |
Этот параметр указывает, что данное изображение является сегментированным |
С помощью параметров HEIGHT и WIDTH вы можете выполнять масштабирование графических изображений. Значение этих параметров можно указывать в процентах от ширины окна просмотра.
Масштабирование позволяет подготовить графический файл относительно небольшого размера, который быстро передается через Internet, и занимает при этом значительную площадь в окне навигатора. Вы, однако, не можете масштабировать сегментированные графические изображения и фоновые изображения.
В листинге 4.1 мы привели пример документа HTML, в который вставлено два растровых графических изображения.
Листинг 4.1. Файл chap4\inline.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение графических изображений</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
<IMG SRC="cpanel.JPG">Это содержимое папки
Control Panel на моем компьютере
<P>Вы можете включать графические
изображения <IMG SRC="clock.JPG">непосредственно в текст
</BODY>
</HTML>
Первое изображение имеет большие размеры и расположено в начале параграфа, а второе, небольших размеров, вставлено в середину параграфа (рис. 4.1).
Рис. 4.1. Два графических изображения в документе HTML
Задавая различные типы выравнивания, вы можете изменить относительное расположение графического изображения и текста, расположенного рядом. Ниже мы приведем несколько примеров для всех типов выравнивания, допустимых в параметре ALIGN оператора <IMG>.
В документе HTML, исходный текст которого приведен в листинге 4.2, для параметра ALIGN мы указали значение TOP (выравнивание по верхней границе).
Листинг 4.2. Файл chap4\top.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=TOP>Есть несколько способов выравнивания
текста относительно графического изображения, которые
можно выбирать при помощи параметра <ALIGN>
оператора <IMG>
</BODY>
</HTML>
В результате текст оказался выровнен по верхней границе графического изображения, как это показано на рис. 4.2.
Рис. 4.2. Выравнивание текста по верхней границе изображения
Заметим, что при использовании выравнивания по верхней границе изображения мы не получили эффект обтекания изображения текстом. Такой эффект можно получить при помощи выравнивания других типов, о чем мы расскажем позже.
В листинге 4.3 мы привели исходный текст документа HTML, в котором помимо выравнивания типа BOTTOM (выравнивание по нижней границе изображения) указан параметр BORDER. Этот параметр позволяет создать вокруг графического изображения рамку заданной толщины. К сожалению, параметр BORDER распознается только навигатором Netscape Navigator. Что же касается навигатора Microsoft Internet Explorer, то он игнорирует параметр BORDER.
Листинг 4.3. Файл chap4\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>Есть несколько способов выравнивания
текста относительно графического изображения, которые
можно выбирать при помощи параметра <ALIGN>
оператора <IMG>
</BODY>
</HTML>
На рис. 4.3 изображен внешний вид документа с графическим изображением, взятым в рамку. Для него также указано выравнивание текста по нижней границе.
Рис. 4.3. Выравнивание текста по нижней границе изображения
На рис. 4.4 мы показали центрирование текста относительно графического изображения, которое получается при использовании для параметра ALIGN значения MIDDLE. Текст соответствующего документа HTML вы найдете в файле chap4\bottom.htm на дискете, которая продается вместе с книгой. Этот текст мы опустили для экономии места, так как он отличается от текста, приведенного в листинге 4.3 только значением параметра ALIGN.
Рис. 4.4. Центрирование текста относительно изображения
Указывая для параметра ALIGN значения LEFT и RIGHT вы можете добиться эффекта обтекания изображения текстом, соответственно, с правой и левой стороны.
На рис. 4.5 показано взаимное расположение текста и графического изображения для выравнивания по левой границе (параметр ALIGN имеет значение LEFT). Исходный текст соответствующего документа HTML вы найдете в файле chap4\left.htm на дискете.
Рис. 4.5. Выравнивание типа LEFT
Для выравнивания по правой границе, которое получается если параметр ALIGN имеет значение RIGHT, взаимное расположение текста и графического изображения показано на рис. 4.6. Исходный текст документа HTML расположен в файле chap4\right.htm, который вы найдете на дискете.
Рис. 4.6. Выравнивание типа RIGHT
Навигаторы Netscape Navigator, а также навигатор Microsoft Internet Explorer версии 3.0, распознают еще несколько типов выравнивания.
Выравнивание типа TEXTTOP аналогично выравниванию типа TOP, однако выравнивание выполняется относительно самых высоких символов в текстовой строке (рис. 4.7). Пример документа HTML находится в файле chap4\texttop.htm, расположенный на дискете.
Рис. 4.7. Выравнивание типа TEXTTOP
Если указано выравнивание типа ABSMIDDLE, то выполняется выравнивание середины текстовой строки относительно середины изображения (рис. 4.8). Пример соответствующего документа HTML вы найдете в файле chap4\absmiddle.htm.
Рис. 4.8. Выравнивание типа ABSMIDDLE
Указав тип выравнивания как BASELINE, вы можете выполнить выравнивание нижней рамки изображения относительно базовой линии текстовой строки (рис. 4.9). Соответствующий документ HTML расположен в файле chap4\baseline.htm.
Рис. 4.9. Выравнивание типа BASELINE
Тип выравнивания ABSBOTTOM задает выравнивание нижней границы изображения относительно нижней границы текущей строки, которая расположена под базовой линией (рис. 4.10). Документ HTML, демонстрирующий выравнивание этого типа, расположен в файле chap4\absbottom.htm.
Рис. 4.10. Выравнивание типа ABSBOTTOM
Подготовка и размещение графических изображений в документах HTML - это большое искусство. Однако помимо художественного вкуса, от вас потребуются знание различных технических тонкостей, от правильного учета которых во многих случаях зависит многое.
Прежде всего вы должны выбрать формат файла, в котором будет храниться графическое изображение. Несмотря на то что сегодня существуют десятки различных графических форматов, практически для оформления документов HTML используются только два. Первый формат - это формат обмена графикой GIF (Graphics Interchange Format), второй - JPEG. Рассмотрим особенности этих форматов, не углубляясь в несущественные для нас технические подробности.
Хотя исторически формат GIF появился раньше, сначала мы расскажем о формате JPEG. Этот формат имеет особенности, делающие привлекательным его использование в документах HTML, особенно для отображения многоцветных фотографий.
Прежде всего, формат JPEG допускает сжатие графической информации с потерями. Подготавливая файл в формате JPEG, вы можете указать допустимый процент потери качества. Чем больше этот процент, тем меньший объем дискового пространства потребуется для хранения файла и, что самое главное, тем меньшее время потребуется удаленному пользователю для загрузки изображения.
Минимизация размера графического изображения без существенных потерь качества - очень важная процедура. Дело здесь в том, что в среднем информация передается через сеть Internet со скоростью примерно 1 Кбайт в секунду, поэтому на загрузку больших изображений может уйти слишком много времени. Поэтому даже и не думайте о том, чтобы разместить в документе HTML цветную фотографию, занимающую на диске 1 Мбайт - посчитайте сами, сколько времени эта фотография будет передаваться пользователю.
Реальные объемы изображений, которые можно использовать, лежат в пределах от нескольких Кбайт до нескольких десятков Кбайт. Если же существует принципиальная необходимость размещения в документе HTML графического изображения высокого разрешения, занимающего много места, вы можете создать в документе ссылку на это изображение в виде небольшой пиктограммы. О том как это сделать, мы расскажем позже.
Другое преимущество формата JPEG заключается в том, что он позволяет хранить изображения с высоким цветовым разрешением (например, содержащие 16 млн. цветов).
Есть ли у формата JPEG недостатки?
Конечно есть, а как же без них.
Наиболее заметный недостаток алгоритма сжатия с потерей качества сказывается при попытке сжать изображение с большим количеством четких контуров, например, копий экрана или штриховых рисунков. Даже при небольших потерях качества контуры размываются, что может оказаться совершенно неприемлемо. Поэтому мы рекомендуем применять формат JPEG только для хранения фотографий или рисунков с плавными переходами цветов и яркостей.
Формат GIF был разработан пользователями сети CompuServe и в настоящее время стал очень популярен. Несмотря на то что изображения, хранящиеся в этом формате, не могут иметь более 256 цветов, формат GIF обладает возможностями, которые делают его незаменимым в целом ряде случаев.
Во-первых, в формате GIF используются алгоритмы сжатия изображения без потерь качества. Поэтому этот формат как нельзя лучше подходит для хранения копий экранов или штриховых рисунков, содержащих большие однотонные площади.
Во-вторых, вы можете существенно уменьшить размер графического файла, записав в него сокращенную цветовую палитру вместо полной 256-цветной.
В-третьих, размещая в документах HTML специальным образом подготовленные изображения GIF, вы можете получить эффект прозрачности. Части изображения могут быть прозрачными, поэтому видимая форма изображения может отличаться от квадратной или прямоугольной.
В-четвертых, формат GIF и только формат GIF позволяет создавать анимационные графические изображения, оживляющие внешний вид документа HTML.
И, наконец, в пятых, формат GIF позволяет создавать файлы с чересстрочным (interlaced) изображением. Что это такое?
Строки чересстрочных изображений GIF располагаются не подряд, а по очереди. Вначале в этом файле находятся строки, номера которых кратны восьми, затем - четырем и так далее. Чересстрочное изображение проявляется на экране навигатора постепенно, увеличивая свою четкость по мере получения новых порций данных. Это дает пользователю возможность оценить содержимое графического изображения до момента его полной загрузки. Если изображение вам не нужно, вы можете отказаться от его загрузки до полного завершения процесса и тем самым сэкономить время.
Как устроен файл GIF?
Файл в формате GIF версии 89a состоит из блоков нескольких типов, два из которых являются обязательными, а остальные - дополнительными. Обязательные блоки - это блоки заголовка и блоки изображения. Дополнительно файл GIF может содержать блоки комментария, текстовые и управляющие блоки, а также блоки данных, содержащие произвольную информацию.
В блоке заголовка расположена палитра и сведения о размерах области, в которой желательно отображать содержимое файла. Что же касается палитры, то в файле GIF может быть определена одна глобальная палитра, которая используется для всех графических изображений, записанных в файле, или несколько локальных палитр для отдельных изображений.
В одном файле GIF может быть один или несколько блоков изображений. Если вы создаете прозрачные или анимационные изображения, вам будет нужно подготовить несколько изображений и записать их в файл.
В блок комментария вы можете записать текст, описывающий изображение, или сведения о правах на изображение. Содержимое блока комментария не появится на экране во время отображения файла GIF, однако его можно увидеть непосредственно в файле, например, с помощью программы просмотра содержимого файла, встроенного в оболочку Norton Commander.
Что же касается текстовых блоков, то расположенный в них текст будет выведен на экран поверх изображения. При подготовке текстового блока вы можете указать цвет и расположение текста.
Создавая управляющие блоки, вы можете определить цвет в изображении или тексте как прозрачный. При отображении такого изображения прозрачные фрагменты не будут закрывать рисунок, который используется в качестве фона.
Дополнительные блоки данных с произвольной информацией могут использоваться приложениями, отображающими изображение.
Палитрой называется таблица цветов, которая имеется в графическом файле, и содержит все цвета, использованные в изображении. Формат GIF позволяет указывать точный размер таблицы цветов, необходимый для изображения.
На что влияет этот размер?
Количество элементов в таблице цветов самым непосредственным образом влияет на размер файла, содержащего графическое изображение, так как от него зависит количество бит данных, используемых для представления цвета.
Например, если палитра (то есть таблица цветов) содержит только два элемента, в изображении имеются два цвета (например, черный и белый, либо красный и желтый). При этом для представления цвета каждого пиксела достаточно использовать один бит. Если же палитра содержит 256 цветов, для представления цвета пиксела необходимо использовать восемь бит данных.
Многие графические редакторы позволяют указывать точный размер палитры либо задавать количество бит, используемых для представления цвета. В качестве примера мы можем назвать графический редактор Adobe Photoshop. Подробное описание этого редактора, однако, выходит за рамки нашей книги.
При выборе палитры для графического изображения следует учитывать возможные ограничения цветовой разрешающей способности видеоадаптера удаленного пользователя. Если видеоадаптер способен отображать одновременно только 256 цветов, могут возникнуть цветовые искажения.
Если в файле GIF имеется несколько изображений, вы должны решить, следует ли использовать для них одну глобальную палитру или подготовить для каждого изображения свою локальную палитру. Если вы создаете анимационное изображение из нескольких кадров, в которых применяются сходные цвета, имеет смысл подготовить одну глобальную палитру. Заметим также, что на загрузку новой палитры может уйти много времени, что приведет к замедлению процесса отображения.
Подробнее об использовании палитр в операционной системе Microsoft Windows вы можете узнать из 14 тома “Библиотеки системного программиста”, который называется “Операционная система Microsoft Windows для программиста. Графический интерфейс GDI”.
Современные навигаторы позволяют работать с форматами GIF, JPEG, PCX, BMP и XBM, однако форматы PCX и BMP не обладают развитыми средствами компрессии, поэтому они практически не используются. Формат XBM родился в мире операционной системы UNIX с оболочкой X-Windows и применяется только для хранения черно-белых изображений. При размещении в документе HTML графического изображения вы должны будете сделать выбор между форматами GIF и JPEG.
Если вы размещаете в документе HTML копию экрана или другое аналогичное изображение (например, изображение окна приложения или диалоговой панели), выбор сделать легко. В этом случае вам придется использовать формат GIF, так как сжатие с потерей качества приведет к неудовлетворительному результату.
Аналогично, если требуется получить эффект прозрачности или анимации, выбора тоже нет - только формат GIF позволит вам создать необходимые изображения.
Труднее всего сделать выбор для фотографических изображений или для рисунков с плавными изменениями цветов, так как трудно заранее сказать, какой из форматов позволит достичь минимального размера файла при приемлемом качестве изображения. Возможно, что вам придется провести эксперименты, выбирая различные степени потери качества для формата JPEG. При этом не исключено, что формат GIF даст лучшие результаты, особенно если учесть возможность использования сокращенной палитры.
В этом разделе мы научим вас создавать прозрачные изображения в формате GIF. В качестве инструмента мы воспользуемся приложением GIF Construction Set, пробную версию которого можно бесплатно загрузить из сети Internet по адресу http://www.mindworkshop.com.
Для примера мы попробуем решить достаточно распространенную задачу: разместим небольшое графическое изображение в документе HTML, имеющем графическую подложку. Проблема здесь заключается в том, что если в документе есть подложка, а размещаемое в нем изображение имеет форму, отличную от прямоугольной, то фон изображения заслонит собой изображение подложки.
Пусть, например, мы заполняем фон документа HTML изображением небольшого квадрата (рис. 4.11).
Рис. 4.11. Графическое изображение для фона документа HTML
В результате такого заполнения документ будет разлинован как школьная тетрадь в клеточку. Теперь разместим в документе изображение, показанное на рис. 4.12.
Рис. 4.12. Графическое изображение для размещения в документе HTML
Исходный текст документа HTML, который мы подготовили для демонстрации прозрачного изображения, приведен в листинге 4.4.
Листинг 4.4. Файл chap4\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>XE "<BODY>" задан параметр BACKGROUND, в качестве значения которого мы указали имя изображения квадрата, показанного на рис. 4.11. Это изображение заполнит фон всего документа.
Заметим, что если вместе с параметром BACKGROUND указать значение параметра BGPROPERTIES, равное FIXED, фоновое изображение не будет сдвигаться в окне навигатора при просмотре документа:
<BODY BACKGROUND="bkg.GIF" BGPROPERTIES=FIXED>
Это позволяет получить интересный эффект “водяных знаков”.
Далее в документе имеется таблица, состоящая из одной строки и двух столбцов. В ячейках этой таблицы с помощью оператора <IMG> мы разместили два графических изображения suntr.GIF и sun.GIF. Эти изображения имеют одинаковый вид, показанный на рис. 4.12, однако первое из них подготовлено с использованием прозрачности, а второе - обычное.
На рис. 4.13 мы показали внешний вид нашего документа. Здесь легко заметны отличия - прозрачное изображение, которое находится слева, смотрится как нарисованное на подложке, а обычное - как наклеенное.
Рис. 4.13. Прозрачное и непрозрачное изображение в документе HTML
Как же создать прозрачное изображение?
Прежде всего вы должны подготовить рисунок, для чего можно использовать любой подходящий графический редактор. Простые изображения, вроде показанных на рис. 4.11 и 4.12 можно подготовить в редакторе Microsoft Paint, входящем в комплект операционной системы Microsoft Windows 95 или Microsoft Windows NT. Для подготовки более сложных изображений вам придется воспользоваться такими редакторами, как Corel Draw, Corel PhotoPaint, Micrografx Designer или аналогичными.
Учтите, что только один цвет в изображении может быть прозрачным. В нашем случае на изображении, показанном на рис. 4.12, мы нарисовали желтое солнце с черным контуром и черными лучами, сделали подпись красного цвета, а для фона выбрали белый цвет. Именно белый цвет и будет прозрачным, что позволит сделать фон нашего изображения невидимым.
Подготовив изображение, сохраните его в формате GIF, BMP или PCX. Приложение GIF Construction Set может импортировать графические файлы во многих форматах, однако перечисленные выше форматы доступны практически во всех графических редакторах.
Теперь превратим наше изображение в прозрачное.
Запустите приложение GIF Construction Set. Из меню File выберите строку New для создания нового изображения. После этого главное окно приложения GIF Construction Set примет вид, показанный на рис. 4.14.
Рис. 4.14. Главное окно приложения GIF Construction Set
В средней части окна имеется список блоков файла GIF, в котором вначале имеется только блок заголовка. С помощью кнопки Insert, расположенной на инструментальной линейки или соответствующего меню вы можете добавить в файл блок любого допустимого типа.
Прежде всего нужно добавить изображение. Для этого нажмите кнопку Insert. На экране появится окно Insert Object с кнопками (рис. 4.15).
Рис. 4.15. Окно Insert Object
С помощью кнопки Image вы можете добавить в файл изображение. Кнопка Control предназначена для добавления управляющего блока. С помощью кнопок Comment и Plain Text вы можете добавить, соответственно, комментарий к изображению или текстовый блок. Кнопка Loop предназначена для указания количества циклов в анимационном изображении. И, наконец, с помощью кнопки Cancel можно отменить операцию добавления блока.
Для добавления изображения нажмите кнопку Image. Сразу после этого вы увидите стандартную диалоговую панель Open, с помощью которой вам нужно выбрать файл с изображением. После выбора файла на экране появится диалоговая панель Palette, в которой вам нужно указать, что делать с палитрой для данного изображения (рис. 4.16).
Рис. 4.16. Диалоговая панель Palette
По умолчанию в этой диалоговой панели включен переключатель Dither this image to the global palette, в результате чего при выполнении вставки изображения его палитра будет приведена к глобальной палитре с использованием диффузии. Так как мы вставляем первое изображение, то для него нужно включить переключатель Use this image as the global palette. Палитра вставленного изображения будет использована в качестве глобальной.
После вставки в списке блоков появится новая строка (рис. 4.17), а справа от списка - уменьшенное изображение, которое вы только что вставили.
Рис. 4.17. Окно приложения GIF Construction Set после вставки изображения
На следующем шаге вы должны выделить в списке блоков строку заголовка (HEADER GIF89a) и вставить управляющий блок, нажав кнопку Insert и затем в появившемся окне - кнопку Control. В списке появится блок CONTROL. Обращаем ваше внимание на то, что блок CONTROL должен находиться перед блоком изображения, к которому он относится.
Вставив управляющий блок, отредактируйте его. Это можно сделать либо выделив строку CONTROL и нажав кнопку Edit, либо двойным щелчком левой клавишей мыши по строке CONTROL. В любом случае на экране появится диалоговая панель Edit Control Block, показанная на рис. 4.18.
Рис. 4.18. Редактирование управляющего блока
Все, что вы должны изменить в диалоговой панели Edit Control Block, - это состояние переключателя Transparent colour. Включите этот переключатель и нажмите на кнопку с изображением пипетки, расположенную справа от указанного переключателя. Сразу после этого на экране появится изображение, вставленное вами ранее, и вы с помощью мыши сможете выбрать цвет, который должен стать прозрачным. Выберите белый цвет, щелкнув мышью по фону изображения.
После выбора прозрачного цвета панель Edit Control Block примет вид, показанный на рис. 4.19.
Рис. 4.19. Диалоговая панель Edit Control Block после выбора прозрачного цвета
Выбор прозрачного цвета можно выполнять не только пипеткой, но и указывая цвет явным образом. Для этого нужно нажать кнопку, расположенную слева от кнопки с пипеткой. Нажав эту кнопку, вы увидите палитру цветов изображения, из которой можно будет сделать выбор.
Завершив редактирование управляющего блока, нажмите кнопку OK. Изображение готово. Теперь вы должны его сохранить в файле, выбрав из меню File строку Save As. Укажите имя для файла и нажмите кнопку OK. Описанная процедура была использована нами для подготовки файла suntr.GIF.
Приложение GIF Construction Set позволяет создавать графические файлы GIF с чересстрочным изображением. Напомним, что такое изображение рисуется навигаторами в несколько приемов, причем каждый раз четкость изображения повышается. Это позволяет увидеть изображение до момента его полной загрузки из сети.
Для того чтобы превратить обычное изображение в чересстрочное, вы должны загрузить его в GIF Construction Set, как это было описано выше. Управляющий блок вставлять не надо (если, разумеется, вы не собираетесь использовать эффект прозрачности).
После загрузки необходимо отредактировать блок изображения, сделав двойной щелчок по соответствующей строке (по строке IMAGE) в списке блоков файла GIF. На экране появится диалоговая панель Edit Image (рис. 4.20).
Рис. 4.20. Диалоговая панель Edit Image
В этой панели вам нужно включить переключатель Interlaced и затем нажать кнопку OK. После сохранения в файле будет храниться чересстрочное изображение.
В листинге 4.5 мы привели исходный текст документа HTML, в котором расположены два изображения - обычное cpanel.GIF и чересстрочное cpaneli.GIF.
Листинг 4.5. Файл chap4\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>
На рис. 4.21 показан фрагмент окна навигатора в момент загрузки изображений, расположенных в документе. Из рисунка видно, что обычное изображение загружается сверху вниз и появляется сразу с нормальной четкостью. Чересстрочное изображение отображается целиком, однако его четкость увеличивается по мере загрузки документа.
Рис. 4.21. Рисование обычного и чересстрочного изображения
Как мы уже говорили, формат GIF позволяет хранить в одном файле несколько графических изображений. При отображении такого файла навигаторы могут показывать эти изображения по очереди, как кадры обычного кинофильма. Подготовив достаточное количество кадров, вы можете создать небольшой фильм (или мультфильм) и разместить его в документе HTML.
В этом разделе мы создадим маленький мультфильм с использованием приложения GIF Construction Set, с которым вы уже знакомы.
За основу мы возьмем рисунок, показанный на рис. 4.12. Подготовим на базе этого рисунка семь изображений, как это показано на рис. 4.22.
sun1.GIF |
sun2.GIF |
sun3.GIF |
sun4.GIF |
sun5.GIF |
sun6.GIF |
sun7.GIF |
|
|
Рис. 4.22. Семь изображений для мультфильма
Все эти рисунки отличаются изображением лучей солнца, которые как бы расходятся из центра. Кроме того, в каждом рисунке изменяется цвет одной буквы в слове Picture.
Теперь, когда кадры нашего мультфильма готовы, займемся их объединением в один графический файл GIF.
Запустите приложение GIF Construction Set и выберите из меню File строку Animation Wizard. На экране появится первая диалоговая панель программы полуавтоматического создания мультфильма. Нажмите в ней кнопку Next.
На экране появится следующая диалоговая панель (рис. 4.23).
Рис. 4.23. Выбор назначения создаваемого анимационного файла GIF
В ней вы должны указать назначение создаваемого анимационного изображения. Если вы собираетесь разместить это изображение в документе HTML, включите переключатель Yes, for use with a Web page. При этом будет использована палитра, максимально совместимая с навигатором Netscape Navigator.
Включив указанный выше переключатель, нажмите кнопку Next. После этого на экране появится диалоговая панель, в которой вы должны выбрать, как будет отображаться ваш мультфильм (рис. 4.24).
Рис. 4.24. Выбор способа отображения анимационного файла GIF
Если включить переключатель Loop indefinitely, анимационный файл будет прокручиваться непрерывно. Обычно используется именно этот режим отображения. Однако вы можете включить переключатель Animate once and stop, при этом содержимое файла будет показано только один раз.
Продолжим работу, нажав кнопку NEXT. В следующей диалоговой панели вы должны указать способ, которым были получены изображения, из которых создается анимационный файл GIF (рис. 4.25).
Рис. 4.25. Указание способа получения изображений
Если анимационный файл создается из сканированных фотографий, включите переключатель Photorealistic (фотореалистичные изображения). В том случае, когда изображения были нарисованы при помощи графического редактора, включите переключатель Drawn. Если к тому же в нарисованном изображении были использованы только 16 цветов, включите переключатель Drawn in sixteen colours. Введенная вами информация будет использована программой полуавтоматического создания анимационного файла GIF для выбора подходящей палитры.
Указав способ получения изображения, нажмите кнопку Next и переходите к следующей диалоговой панели, позволяющей задать интервал времени между отображением отдельных кадров файла (рис. 4.26).
Рис. 4.26. Указание интервала отображения кадров
По умолчанию интервал между кадрами составляет 0.1 секунды, однако вы можете выбрать другое значение при помощи списка, расположенного в диалоговой панели.
Выбрав интервал, нажмите кнопку Next и переходите к формированию списка файлов GIF, из которых будет создан анимационный файл. На рис. 4.27 мы показали этот список уже заполненным.
Рис. 4.27. Создание списка изображений для анимационного файла
Для заполнения списка в диалоговой панели, показанной на рис. 4.27, нажмите кнопку Select. На экране появится диалоговая панель Open, показанная на рис. 4.28.
Рис. 4.28. Диалоговая панель Open
В этой панели вам нужно выбрать сначала первый файл, который будет использован для первого кадра, и нажать кнопку OK, затем второй и так далее. После добавления всех кадров нажмите кнопку Done.
Список, показанный на рис. 4.27, можно редактировать, удаляя из него отдельные файлы при помощи кнопки Delete и добавляя новые. Когда список будет готов, нажмите кнопку Next. Вслед за этим вы увидите диалоговую панель с сообщением о том, что все готово и можно приступать к созданию анимационного файла. Нажмите в этой диалоговой панели кнопку Done.
В результате работы программы полуавтоматического создания анимационного файла GIF будут автоматически созданы блоки заголовка, управляющие блоки и блоки изображений (рис. 4.29).
Рис. 4.29. Созданные блоки анимационного файла
При необходимости вы можете отредактировать любой блок, например, изменив интервал отображения отдельных кадров или настройку палитры. Можно также задать смещение расположения кадров по вертикали или горизонтали, а также других параметры.
В заключение сохраните созданный файл, выбрав из меню File строку Save as, и указав имя для файла.
Анимационный графический файл включатся в документ HTML таким же образом, что и обычный. В листинге 4.6 мы привели исходный текст простейшего документа HTML, в который включен только что созданный нами анимационный графический файл sunani.GIF.
Листинг 4.6. Файл chap4\animate\animate.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Прозрачные графические изображения</TITLE>
</HEAD>
<BODY>
<IMG SRC="sunani.GIF">
</BODY>
</HTML>
Внешний вид этого документа показан на рис. 4.30.
Рис. 4.30. Документ HTML с анимационным графическим изображением
Еще одно удобное приложение для создания анимационных графических файлов GIF создано корпорацией Microsoft и называется Microsoft GIF Animator. Главное окно этого приложения показано на рис. 4.31.
Рис. 4.31. Главное окно приложения Microsoft GIF Animator
Пользоваться этим приложением очень просто. Сначала вам нужно подготовить набор обычных файлов GIF, из которых будет создаваться анимационное изображение.
|
Затем нажмите вторую слева кнопку, расположенную в верхней части окна приложения и при помощи появившейся на экране диалоговой панели выберите файл изображения для первого кадра вашего мультфильма. |
В левой части окна приложения Microsoft GIF Animator отображаются пиктограммы кадров мультфильма. После выполнения только что описанной процедуры в списке пиктограмм появится содержимое добавленного вами файла.
|
Далее при помощи кнопки с изображением чистого листа бумаги и знака “плюс” добавьте в мультфильм по одному файлы остальных кадров. |
Теперь обратите внимание на блокнот, расположенный в правой части главного окна приложения.
На странице Option этого блокнота находится меню Import Color Palette, с помощью которого можно выбрать палитру для создаваемого изображения.
В большинстве случаев вы должны выбрать значение Browser Palette. При этом создается глобальная палитра с использованием так называемого безопасного набора цветов, который гарантированно отображается без искажений наиболее популярными навигаторами.
Если же выбрать строку Optimal Palette, для каждого кадра будет создана отдельная палитра, что обеспечивает более высокое качество изображения, но приводит к увеличению размера файла.
На странице Animation обратите внимание на переключатель Looping. Если он включен, изображение будет проигрываться столько раз, сколько указано в поле Repeat Count. Для бесконечного зацикленного проигрывания включите переключатель Repeat Forever.
Страница Image позволяет задать параметры изображений, такие как размеры и смещение, продолжительность отображения для отдельных кадров, метод перерисовки, прозрачность и комментарий.
|
После добавления кадров и настройки всех параметров вы можете выполнить предварительный просмотр созданного вами мультфильма. Для этого нужно нажать кнопку с изображением треугольника, направленного острием вправо. |
Готовый анимационный файл можно записать на диск, нажав кнопку с изображением дискеты.
Еще одно средство для подготовки анимационных файлов GIF, которое, безусловно, заслуживает внимание, это редактор PhotoImpact GIF Animator. Этот редактор вы можете получить через Internet на сервере www.ulead.com фирмы Ulead Systems.
Главное окно приложения PhotoImpact GIF Animator показано на рис. 4.32.
Рис. 4.32. Главное окно приложения PhotoImpact GIF Animator
Это приложение очень удобно, так как вы можете добавлять файлы отдельных кадров создаваемого мультфильма, просто перемещая их мышью из папки, раскрытой на поверхности рабочего стола Microsoft Windows 95 или Microsoft Windows NT в окно списка пиктограмм, расположенное в левом нижнем углу главного окна. Кроме того, вы можете сделать щелчок правой клавишей мыши по строке кадра и при помощи контекстного меню изменить параметры любого кадра.
Анимационные изображения, выполненные в виде файлов GIF, используются в документах WWW достаточно широко, так как для их подготовки можно использовать недорогие или даже бесплатные средства. Однако таким образом вы сможете сделать только “немое кино”. Полноценные озвученные видеофрагментыXE "видеофрагменты" можно разместить в документах HTML как ссылки на файлы в формате Microsoft Video for Windows (файл AVI).
Существует несколько возможностей для создания файла AVI.
Во-первых, вы можете записать в файл AVI сигнал от видеомагнитофона или видеокамеры. Для этого вам придется приобрести специальный адаптер, предназначенный для ввода видеосигнала. В зависимости от возможностей такой адаптер может стоить от нескольких сотен до нескольких тысяч долларов. Более дорогие модели обеспечивают аппаратное сжатие сигнала и более высокое разрешение.
Заметим, однако, что файл AVI с высококачественным видеофрагментом длительностью порядка нескольких минут может занимать десятки Мбайт дискового пространства (даже после сжатия с целью устранения избыточной информации). Если разместить в документе HTML такой файл, то удаленный пользователь никогда не дождется его полной загрузки, так как средняя скорость передачи данных через Internet составляет 1 Кбайт в секунду. Поэтому для размещения на сервере WWW пригодны файлы AVI размером не более нескольких десятков Кбайт. А для создания такого файла вы можете использовать самый недорогой адаптер, лишь бы он был способен записывать видеосигнал в реальном времени.
Во-вторых, вы можете сделать файл AVI как мультфильм из отдельных изображений, нарисованных любым графическим редактором. Эта технология напоминает технологию создания анимационных файлов GIF, с тем исключением, что в отличие от файла GIF файл AVI можно озвучить. Причем озвучивание файла AVI можно выполнить в любое время.
Более подробно технология подготовки файлов AVI с использованием пакета программ Microsoft Video for Windows была нами подробно описана в 15 томе ”Библиотеки системного программиста”, который называется “Мультимедиа для Windows”.
Теперь о том, как вставить файл AVI в документ HTML.
Для вставки файлов AVI вы можете использовать описанный выше оператор <IMG> с различными параметрами, такими как DYNSRC, START и CONTROLS.
Приведем список параметров оператора <IMG>, которые используются для вставки файлов AVI с их кратким описанием.
Параметр |
Описание |
DYNSRC |
Этот параметр аналогичен параметру SRC, указывающему путь к файлу с графическим изображением. Он определяет путь к файлу AVI, содержащему видеофрагмент |
SRC |
С помощью параметра SRC можно указать путь к графическому изображению, которое появится в документе HTML вместо файла AVI в том случае, если навигатор не способен проигрывать видеофрагменты |
START |
Параметр определяет момент, когда нужно начинать проигрывание видеофрагмента. Если этот параметр имеет значение FILEOPEN, проигрывание начинается сразу, как только файл будет загружен. Если же значение параметра равно MOUSEMOVE, проигрывание начнется после того, как пользователь поместит курсор на окно, предназначенное для проигрывания видеофрагмента |
CONTROLS |
Если указан этот параметр, под окном с видеофрагментом отображаются органы управления, позволяющие управлять процессом проигрывания |
LOOP |
Параметр LOOP определяет, сколько раз будет проигрываться видеофрагмент. Если значение этого параметра равно -1 или INFINITE, проигрывание будет выполняться бесконечно (то есть пока вы не перейдете к просмотру другой страницы или не завершите работу навигатора) |
LOOPDELAY |
С помощью параметра LOOPDELAY можно задать задержку в миллисекундах перед началом очередной операции проигрывания видеофрагмента |
Помимо перечисленных выше, при вставке файла AVI в операторе <IMG> вы можете использовать и другие параметры, о которых мы рассказывали раньше в разделе “Размещение графических изображений”. Например, вы можете создать рамку вокруг окна просмотра файла AVI или задать тип выравнивания текста, расположенного около этого окна.
Приведем простой пример (листинг 4.7).
Листинг 4.7. Файл chap4\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, причем окно снабжается органами управления в виде кнопки запуска или остановки проигрывания и движкового регулятора, позволяющего перемещаться в произвольное место видеофрагмента (рис. 4.33).
Рис. 4.33. Страница WWW, в которую вставлен видеофрагмент
Попадая на главную страницу сервера WWW корпорации Microsoft в конце 1996 года, вы могли услышать приглашение в Internet (на чистом английском языке). Страницы вашего сервера также можно озвучить, используя специальные операторы языка HTML, предназначенные для вставки звуковых файлов WAV и музыкальных файлов MIDI.
К сожалению, навигаторы Microsoft Internet Explorer и Netscape Navigator используют разные способы для вставки звука в документы HTML.
Для того чтобы вставить звуковой файл в документ HTML, предназначенный для просмотра навигатором Microsoft Internet Explorer, вы должны воспользоваться оператором <BGSOUND>. Этот оператор имеет два параметра - SRC и LOOP.
Параметр SRC указывает адрес URL звукового файла, который может быть в формате WAV, AU или MIDI. С помощью параметра LOOP можно указать, сколько раз необходимо проиграть звуковой файл при загрузке страницы. Если файл должен проигрываться в бесконечном цикле, параметр LOOP должен иметь значение INFINITE.
Ниже мы привели пример оператора, с помощью которого выполняется звуковое оформление документа HTML:
<BGSOUND SRC="kaas.wav">
При загрузке страницы выполняется однократное проигрывание файла kaas.wav.
Навигатор Netscape Navigator позволяет использовать другой способ вставки звуковых фрагментов, основанный на применении оператора <EMBED>:
<EMBED SRC="kaas.wav" HIDDEN="true">
Оператор <EMBED> предназначен для вставки произвольных объектов OLE. Технология OLE работает только в среде операционной системы Microsoft Windows, поэтому указанный оператор распознается не всеми навигаторами.
Есть и еще один, третий, способ озвучивания документов HTML, который работает только с навигатором NCSA Mosaic. Этот способ заключается в использовании оператора <SOUND>:
<SOUND SRC="kaas.wav" LOOP=infinite DELAY=15>
Назначение параметров SRC и LOOP аналогично назначению одноименных параметров оператора <BGSOUND>. Параметр DELAY позволяет задержать начало проигрывания звукового файла на заданное количество секунд.
Какой же из перечисленных трех способов можно порекомендовать для звукового оформления ваших страниц - первый, второй или третий?
Ответ будет такой - вам следует использовать комбинацию первого и второго метода, как это сделано в документе, исходный текст которого приведен в листинге 4.8.
Листинг 4.8. Файл chap4\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 версии 3.0 успешно проигрывает звуковые файлы WAV и музыкальные файлы MIDI, встроенные с помощью оператора <EMBED>, поэтому вы можете также ограничиться только этим оператором. Мы так и поступили в документе, исходный текст которого представлен в листинге 4.9. К сожалению, этот документ “не звучит” в навигаторе NCSA Mosaic.
Листинг 4.9. Файл chap4\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.