){kind=link}
Web-страница мертва без графики. Графические изображения применяются для иллюстрации текстов уже много столетий. Еще на первых рукописных пергаментных свитках, обнаруженных учеными-археологами в руинах городов древности, были найдены сделанные рукой давно ушедших в небытие художников рисунки, несущие как пояснительную, так и чисто декоративную функцию. С изобретением книгопечатания иллюстрации стали неотъемлемой частью практически любых книг, не только художественных, но и научных. Пройдя нелегкий путь от многостраничных рукописей до первых книг, отпечатанных на типографских машинах, во второй половине XX века носители информации обрели еще одну форму, на сегодня самую удобную для хранения и представления человеческих знаний — электронную, перенеся с собой в мир двоичных чисел и графику. А с появлением сети Интернет, позволившей сделать эту информацию доступной для всего человечества, графические иллюстрации, сопровождающие текст, обрели свое второе рождение, поскольку автор каждого сетевого ресурса может сам выбирать для своего проекта любое оформление, соответствующее его эстетическим вкусам.
Безусловно, первые сайты, появившиеся еще в эпоху становления Всемирной сети, представляли собой строгие текстовые документы, главным и единственным компонентом которых являлось их содержательное информационное наполнение. Шло время, и по мере того, как складывались общепринятые ныне в Интернете стандарты на графические изображения, чаша дизайнерских весов склонялась в сторону хорошо иллюстрированных ресурсов, привлекающих посетителей своей красочностью и ярким оформлением. В те времена это было в новинку, и подобно пестрой витрине магазина, такие сайты привлекали внимание зрителя неординарностью представления контента и нестандартностью оформления. Некоторые ресурсы оказались буквально перегружены графикой, которой иногда было даже больше, нежели собственно текста.
Времена менялись, к иллюстрированным проектам привыкли, и пользователям стало надоедать десятками минут дожидаться окончания загрузки какой-нибудь странички, на которую они и заглянули-то, чтобы узнать текущий курс доллар а по отношению к немецкой марке или выяснить прогноз погоды на завтра. Онлайновое время весьма дорого, скорости модемов и пропускная способность линий связи весьма далеки от идеала, да и тратить оплаченные кровными центами секунды впустую никому не хочется. Виртуальная чаша весов качнулась в обратную сторону, достигнув относительного равновесия, которое и наблюдается в Интернете на сегодняшний день. Иными словами, встретить во Всемирной сети неиллюстрированный проект сейчас достаточно сложно (в большинстве случаев это либо литературные тексты, либо технические спецификации и справочники), графика же применяется только тогда и только там, где это действительно необходимо.
Графические компоненты web-страниц по назначению можно условно разделить на три обширные категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, наконец, декоративная графика — элементы дизайна страницы, включенные в нее «для красоты» и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и многое другое).
Что же, с лирикой, полагаю, закончим. Пора переходить к прозе жизни. А поскольку проза — стиль весьма и весьма специфический, по закону жанра начнем с обширного раздела
Как говорили И. Ильф и Е. Петров, «статистика знает все». Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи со Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский броузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера, занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90 % всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.
В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.
Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.
Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.
Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком — голубым. Информация об изображении в файле стандарта GIF записывается построчно то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне. Вот они.
ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.
В упрощенном виде данный закон «web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.
ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.
Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать «работает некорректно почти всегда». Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF — его уникальная особенность, названная разработчиками «interlace», или, по-русски, «черессторность». Она позволяет загружать картинку с сервера в клиентский броузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем — вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно «проявляется» на странице, что иногда бывает очень полезно при включении в документ изображений большого размера —психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.
Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в броузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.
СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.
Другая полезная особенность стандарта GIF89a заключается том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена весьма распространенная в Интернете GIF-анимация, о которой мы поговорим подробнее в этом же уроке.
JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) — для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень — собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация — менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.
Из всего сказанного можно сделать вполне очевидное заключение: JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило.
ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».
Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера «грязно» и неопрятно, фон сохраненного в JPEG логотипа, «подогнанный» под фоновый цвет html-документа, «поплывет» при изменении свойств экранной палитры.
Существует несколько разновидностей стандарта JPEG. Среди них — формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG — возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.
СОВЕТ При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.
Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics — PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.
PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.
Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения web-страниц на компьютерах от различных производителей.
Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые броузеры отобразить картинку в формате PNG не смогут.
Оптимизация графических изображений
Несмотря на наличие довольно эффективных алгоритмов сжатия графической информации, при сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество «лишних» данных, таких, например, как невидимые текстовые комментарии, автоматически добавляемые в заголовок файла некоторыми графическими редакторами, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т. д. Все эти дополнения лишь увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений.
Существуют два способа дополнительной компрессии графических файлов: с использованием специальных утилит, так называемых оптимизаторов графики, и в ручную. Рассмотрим оба варианта. А начнем мы, пожалуй, с небольшой и очень удобной программы-компрессора файлов GIF, разработанной МартиномХарингом (Martin Haring), которая называется GifClean32 (рис. 5.1).
Рме. 5.1. Внешний вид программы GifClean32
Данная программа хороша, прежде всего, тем, что позволяет гибко настраивать список тех компонентов GIF-изображений, которые подлежат удалению, в частности комментарии из самого файла и редко встречающиеся цвета из файловой палитры. Левая кнопка, расположенная на панели инструментов GifClean32,открывает файл GIF для компрессии и редактирования. При помощи следующей кнопки вы можете внести в открытый графический файл собственные комментарии, с помощью третьей кнопки — записать комментарии текущего изображения в отдельный текстовый документ, а посредством четвертой — сохранить само изображение в любую директорию на диске. Функции следующих четырех кнопок (слева направо): удаление всех комментариев из изображения, удаление малоиспользуемых оттенков, отображение извлекаемых комментариев на экране, отображение обрабатываемого изображения. И наконец, последние три кнопки (опять же слева направо) — это вызов справки о программе GifClean32,остановка компрессии после завершения обработки текущего файла и автоматическая перезапись оптимизированного изображения в файл с тем же именем, что и исходный. Все перечисленные процедуры продублированы в командной панели.
Оптимизаторы JPEG, в отличие от компрессоров для файлов стандарта GIF, в большинстве случаев рассчитаны на эксплуатацию под MS-DOS. Среди них —небольшая утилита JPEG Cleaner, предназначенная для удаления из изображений JPEG комментариев, записанных в файл различными графическими редакторами. Это позволяет сократить объем целевого файла на 5-10 %, а если иллюстрация создана с применением редактора Adobe Photoshop, то можно добиться сокращения ее объема вплоть до 45 % без потери качества. Программа имеет русскоязычный интерфейс и работает только с MS-DOS. При ее запуске под Windows возможно появление непредвиденных ошибок.
Для оптимизации графики следует скопировать все необходимые файлы JPEGв тот же каталог, где хранятся файлы jc.exe и jc.cfg, и выполнить из командной строки процедуру jc file.jpg или jc *.jpg. Программа самостоятельно найдет и удалит из предложенных ей файлов всю лишнюю информацию. Для изменения настроек программы необходимо отдать из командной строки DOS команду jc /с.
Универсальным программным продуктом для оптимизации графики, ориентированной на Интернет, является пакет WebGraphics Optimizer производства компании Plenio Software Solutions (рис. 5.2). Данную программу можно бесплатно загрузить с сайта разработчика (http://www.webOpt.com) в виде shareware-версии, доступной для свободного использования в течение 30 дней.
Рис. 5.2. Интерфейс программы WebGraphics Optimizer
WebGraphics Optimizer — 32-рязрядное приложение Windows, содержащее множество функций полноценного графического редактора. Эта программа умеет работать с 24 типами графических файлов, включая PNG, формат Adobe Photoshop PSD и даже MAC (Mac Paint), применяющийся на компьютерах Apple Macintosh.
Интерфейс WebGraphics Optimizer достаточно прост. На панели инструментов расположено всего лишь тринадцать кнопок и меню управления масштабом обрабатываемой картинки (рис. 5.3). Их функции таковы.
Риc. 5.3. Панель инструментов программы WebGraphics Optimizer
1 — создать новый проект WebGraphics Optimizer;
2 — открыть графический файл для редактирования;
3 — сохранить текущий проект;
4 — отменить последнюю операцию;
5 — скопировать выделенные данные в буфер обмена;
6 — вставить данные из буфера обмена;
7 — сделать снимок экрана;
8 — изменить масштаб отображения графики на экране;
9 — отобразить на экране окно инструментов;
10 — кнопки управления глубиной оптимизации изображения.
Окно инструментов включает в себя четыре функциональные вкладки, позволяющие оперировать с исходным изображением, редактируя его параметры. Вкладка Resize (рис. 5.4) дает возможность изменить геометрические размеры исходного изображения или его выделенного участка путем перемещения мышью «ползунков» для ширины (Width) и высоты (Height) картинки.
Рис. 5.4. Окно инструментов, вкладка Resize
Ha вкладке Adjust Color/Intensity (рис. 5.5) можно корректировать цвета, точнее их интенсивность. Рабочее поле данной вкладки содержит выпадающее меню со следующими опциями:
Brightness — управление яркостью;
Gamma correction корректировка гаммы;
Contrast — управление контрастностью;
Histogram contrast — настройка контраста гистограммы;
Stretch Intensity построчная интенсивность отображения иллюстрации;
Invert — инвертирование цветов;
Hue — коррекция оттенков;
Saturation — настройка насыщенности цветов;
Histogram equalize выравнивание цветовой гистограммы;
Fill color заполнение выделенного участка каким-либо цветом.
Рие. 5.5. Окно инструментов, вкладка Adjust Color/Intensity
Каждая опция данного меню, за исключением пунктов Stretch Intensity, Invert и Histogram equalize, имеет в нижней части окна собственный «ползунок» настройки, перемещая который пользователь может задать индивидуальные значения того или иного параметра.
Вкладка Filters содержит различные графические фильтры, повторяющие в основном аналогичные фильтры Adobe Photoshop:
Halftone — «Полутона»;
Blur/Sharpen «Размытие/Резкость»;
Posterize «Пастеризация» («Схематизация»);
Mosaic — «Мозаика»;
Emboss — «Чекан»;
Soften — «Смягчение полутонов»;
Oil Painting — «Масляная живопись»;
Reduce Noise — «Уменьшить шум»;
Add Noise — «Добавить шум»;
Intensity Detect — «Выделение интенсивности»;
Edge Detect — «Выделение краев»;
Line Detect — «Выделение строк».
Каждый из перечисленных фильтров имеет собственные параметры настройки, отображаемые в том же окне чуть ниже основного меню. И наконец, вкладка Special (рис. 5.6) служит для следующих манипуляций с исходным изображением: поворот картинки на любой угол (Rotate), деформация ее в горизонтальной проекции (Parallelogram) и зеркальное отражение по вертикали или горизонтали (Flip Image).
Рис. 5.6. Окно инструментов, вкладка Special
Все команды, вызываемые нажатием кнопок на панели инструментов, продублированы в панели команд. Более того, программа Web Graphics Optimizer позволяет работать с выделенными участками изображения, которые можно задать при помощи пункта системного меню Edit > Select Region, причем выделение фрагментов возможно в виде нескольких геометрических фигур: Rectangle (прямоугольник), Ellipse (овал), Rounded Rectangle (прямоугольник со скругленными углами) и, наконец, Freehand — произвольная фигура. Можно создать копию текущего изображения (команда меню Edit > Duplicdate Image), эта функция применяется в случае, когда пользователь желает поэкспериментировать с дублем, опасаясь испортить исходную картинку.
Основное рабочее поле программы Plenio WebGraphics Optimizer занимает разделенное вертикально окно, отображающее исходное изображение и его оптимизированную копию. В нижней части панели указаны размеры исходного и оптимизированного файла, а также коэффициент сэкономленного на компрессии дискового пространства в процентах. При выборе одного из пяти уровней оптимизации графики (функция вызывается нажатием кнопок, обозначенных на рис. 5.3 цифрой 10) для каждого дубликата картинки открывается новое окно, причем пользователь может выбрать тот вариант изображения, который в наибольшей степени устраивает его по качеству и размеру файла.
Процедура компрессии файлов JPEG вручную выглядит достаточно просто в графическом редакторе, позволяющем обрабатывать изображение, при сохранении картинки в файл обычно появляется меню, содержащее «ползунок» регулятора степени сжатия. Она отображается, как правило, в условных пунктах от 1 до 10, причем максимальному сжатию соответствует минимальное качество картинки. Здесь перед дизайнером стоит только одна задача: найти «золотую середину», компромисс между наименьшим объемом целевого файла и допустимым качеством изображения. В большинстве случаев такой компромисс удается отыскать экспериментальным путем, варьируя настройки компрессора. С GIF все обстоит гораздо сложнее. Оптимизировать файл по размеру с помощью встроенных функций графических редакторов не всегда возможно а использование внешних компрессоров зачастую ведет к нежелательной и неоправданной потере качества изображения. Происходит это, прежде всего, потому что все без исключения программы-оптимизаторы графики используют один алгоритм сжатия GIF для разных картинок, а именно метод удаления из палитры GIF неиспользуемых и малоиспользуемых цветов с подстановкой вместо них цветов, близких по оттенкам, что, как правило, портит изображение. Поэтому, если вы хотите, чтобы ваша страница выглядела качественно и профессионально, лучше всего оптимизировать GIF вручную. Это занимает чрезвычайно много времени и требует большого терпения, но для получения хорошего результата такой способ вполне оправдан.
Поскольку информация об изображении в файле стандарта GIF записывается построчно, чем однороднее будет ваше изображение по горизонтали тем компактнее получится целевой файл. Пример? Пожалуйста. Создадим изображение GIF, состоящее из семи цветов, соответствующих спектру радуги: красная полоса, оранжевая, желтая, зеленая, голубая, синяя и фиолетовая, причем все цветовые полосы иллюстрации разместим на картинке вертикально. Размер изображения составляет 210 на 210 пикселов. Как записывается информация о каждой строке такого рисунка в графический файл? Приблизительно так: «первая строка: тридцать точек красного цвета, тридцать точек оранжевого, тридцать точек желтого» и т. д. При сохранении изображения получится файл объемом 3,9 Кбайт. Теперь развернем картинку на 90° чтобы полосы стали горизонтальными (рис. 5.7). Логическая запись первой строки в этом случае звучит так: «двести десять точек красного цвета». Компактнее? Конечно: файл уменьшился почти в три раза, теперь его объем составляет1,34 Кбайт.
Рис. 5.7. Пример оптимизации файла GIF методом увеличения однотонных горизонтальных участков
Таким образом, напрашивается вполне логичный вывод: чем больше ваше изображение будет содержать однотонных горизонтальных участков, тем компактнее получится целевой файл.
Следует проследить также за тем, чтобы ваше изображение не содержало большого количества полутонов. Если на вашей картинке синий цвет плавно «перетекает» в белый фон посредством восьми полутоновых переходов голубого оттенка, не проще ли свести этот градиентный участок к трем оттенкам голубого? Теперь, отредактировав вручную палитру файла и удалив из нее все цвета, исчезновение которых не повлияет, по вашему мнению, на качество изображения(пункт Таблица цветов в меню Изображение редактора Adobe Photoshop), вы сократите время загрузки иллюстрации, а также сэкономите определенное количество килобайт на диске сервера, где будет размещаться сайт. Следует помнить, что создание прозрачного фона для GIF также способствует уменьшению его объема. Затем с помощью любой подходящей утилиты, широкий ассортимент которых представлен на серверах, предлагающих бесплатное программное обеспечение, можно удалить из файла все ненужные комментарии, и ваша картинка готова к публикации.
Включение графики в web-страницу
Интеграция графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:
<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">
В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).
ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, напримерpicture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.
С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:
ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные броузеры интерпретируют данное значение атрибута ALIGN по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator.
BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.
MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.
BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.
В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах. Некоторые web-мастеры используют данные атрибуты для масштабирования иллюстраций. Подобный подход вполне допустим, однако далеко не все броузеры выполняют процедуру масштабирования корректно, поэтому рекомендуется указывать реальные геометрические размеры картинки, масштабируя изображение при помощи любого графического редактора.
Почему же использование данных атрибутов необходимо? При отображении на экране компьютера html-документа транслятор броузера, встречающий в его тексте процедуру вызова графического изображения, не снабженную указанием на его геометрические размеры, приостанавливает дальнейшую загрузку страницы до тех пор, пока изображение не будет считано полностью. Только после этого он компонует документ согласно получаемому им с сервера html-кодудальше. Если же размеры картинки указаны явно, броузер резервирует под нее свободное пространство, продолжая считывание кода и отображение результатов его обработки на экране, то есть графика загружается параллельно с этим процессом.
И наконец, атрибут ALT содержит некий альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.
Вот пример применения тега <IMG>:
<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:
<А HREF="URL документа, на который организуется ссылка">
<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"
АLТ="Альтернативный текст" BORDER="значение"></A>
Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.
Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:
<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>
Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.
Путешествуя по ресурсам Всемирной сети, вы наверняка неоднократно сталкивались с весьма распространенным дизайнерским приемом использованием графических изображений в качестве своеобразных карт (image map), в которых определенным участкам картинки соответствуют гиперссылки на различные ресурсы сервера. Такие карты можно создать с помощью тега <МАР>, о правилах применения которого мы поговорим в следующем уроке. Однако существует и другой способ реализации этого приема, к которому прибегают в тех случаях, когда включение в код HTML команды <МАР> по каким-либо причинам невозможно. Речь идет о рассечении целого изображения на отдельные фрагменты и «склеивании» его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы<А>. Иногда данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера.
Однако аккуратно «разрезать» изображение при помощи традиционных графических редакторов, причем так, чтобы готовая «мозаика» правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита — фрагментатор графики ShoeString Picture Dicer (рис. 5.8). Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, «склеивающей» изображение в единое целое.
Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода изображений можно задать в меню Output Format.
Рие. 5.8. Интерфейс программы Picture Dicer
После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения.Левой кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой — горизонтальные границы (линии с синими стрелками). Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image. Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории.
В этом разделе мы немного поговорим о представлении во Всемирной сети анимированной графики, или, кратко, о web-анимации. Возможностей применения движущихся изображений существует великое множество: их можно разместить в заголовках web-страниц в качестве управляющих навигацией элементов, вместо кнопок, вызывающих почтовый клиент или заносящих ярлык ресурса в системную папку «избранное» с помощью специального скрипта, выполненного на языке Java. Но чаще всего анимированная графика встречается в размещаемой на интернетовских сайтах рекламе, то есть в виде разнообразных баннеров. Использование в рекламных изображениях движущихся элементов стало на сегодняшний день повсеместной традицией.
Во Всемирной сети ныне применяют несколько видов анимации. Среди более или менее современных подходов следует упомянуть технологию Macromedia Flash, оперирующую векторными графическими объектами, и технологию Java, когда графика и текст перемещаются посредством включения в html-документспециального кода, обрабатываемого клиентским броузером совместно с кодом самой web-страницы. Оба эти варианта не лишены целого ряда недостатков. Прежде всего, это пропорциональное увеличение времени загрузки html-доку-мента, которое к тому же чрезвычайно плохо поддается регулировке. Болеетого, для отображения элементов flash требуется специальная надстройка для пользовательского броузера, а скрипт Java не будет обработан броузерами старых версий и броузерами, в которых отключена поддержка компиляции этого языка. Обе технологии подробно рассматриваются в соответствующих справочниках и журнальных публикациях, поэтому я остановлюсь на наиболее традиционном способе передачи движения на web-странице, а именно — на GIF-анимации.
Вскоре после появления стандарта Compu Serve GIF было замечено, что принцип записи графической информации в файл этого формата позволяет помещать под одним заголовком последовательность отдельных кадров, которые можно чередовать на экране с определенным временным интервалом. Именноэта особенность файлов GIF, точнее — модификации данного стандарта, известной под названием GIF89a, и легла в основу анимации, исторически первой появившейся в Интернете. Для того чтобы пользователи Всемирной сети могли наблюдать GIF-анимацию, не требуется какого-либо дополнительного программного обеспечения, помимо любого стандартного броузера, поддерживающего отображение графики.
Процесс подготовки анимированного GIF можно условно разделить на несколько этапов: создание отдельных кадров, генерация движущегося изображения и оптимизация целевого файла. Базовые кадры формируются в любом графическом редакторе и сохраняются на диске в формате GIF, их изготавливают приблизительно по такому же принципу, по которому создается обычная мультипликация (рис. 5.9). Рекомендуется заранее нарисовать соответствующий вашей задумке шаблон — файл, содержащий изображение фиксированного размера суже нанесенным на него неподвижным фоном, однотонным или текстурным, поверх которого будут перемещаться движущиеся объекты. При подготовке рисунков следует обращать внимание на то, чтобы подвижный элемент смещался в каждом кадре на равное расстояние и именно в том направлении, в котором необходимо. Если, например, какой-то объект должен перемещаться строго по горизонтали, но в одном из кадров вы разместите его чуть ниже или выше первоначального положения, траектория его движения получится ломаной. Для того чтобы избежать этого, используют имеющиеся в составе большинства профессиональных графических редакторов линейки и направляющие. Если фон будущей анимации предполагается сделать однотонным, можно нанести на ранее созданную заготовку шаблонную сетку, которая по окончании работы без труда удаляется замещением соответствующей цветовой маски фоновым цветом.
Рис. 5.9. Подготовка кадров GIF-анимации
Уже в процессе работы над исходными кадрами следует подумать о сокращении размера будущего файла. Во-первых, постарайтесь не включать в анимациюбольшое количество цветов: чем меньше их число, тем меньше килобайт необходимо будет впоследствии перекачать пользователю с сервера, на котором размещен ваш сайт. Однако простого сокращения числа оттенков, составляющих изображение, как правило, недостаточно: необходимо уменьшить соответствующее значение в используемой файлом цветовой палитре. Это лучше делать путем редактирования палитры вручную, а не с помощью стандартных средств, поскольку в этом случае автоматическое уменьшение, скорее всего, приведет к некорректной замене некоторых оттенков участком из нескольких используемых цветов. Необходимо на глаз определить количество составляющих рисунок оттенков, при переводе изображения в индексированный формат указать эту цифру в параметрах сохраняемого файла (пункт Цвета диалогового окна Индексированный цвет в меню Изображение/Режим/Индексированные цвета редактора AdobePhotoshop), после чего откорректировать элементы палитры (например, с помощью инструмента пипетка в меню Изображение/Режим/Таблица цветов того же редактора). Использование прозрачного фона также уменьшает размер целевого файла.
Анимация собирается из готовых кадров в любой предназначенной для этого специализированной программе, например, с помощью наиболее популярного и удобного инструмента — условно-бесплатной программы Ulead Gif Animator, которую можно загрузить с сайта фирмы-разработчика (http://www.ulead.com).Gif Animator позволяет не только создавать новое анимированное изображение, но и генерировать его из импортированных видео файлов формата AVI, множество дополнительных фильтров позволяют добиться огромного количества различных визуальных эффектов, а встроенный оптимизатор графики — сократить размер целевого файла до возможного минимума. Имеется возможность задавать различные временные интервалы между сменой кадров, записывать в файл комментарии и добавлять произвольный текст.
Оптимизация GIF-анимации достигается удалением из изображения неиспользуемых цветов и замещением статичных участков картинки прозрачным фоном(рис. 5.10). Иными словами, после оптимизации картинки все неподвижные фрагменты изображения остаются только на первом кадре, а остальные кадры содержат лишь динамические объекты, наложенные на прозрачную подложку. Существует множество программ для сжатия анимированной графики, их можно найти на серверах, предлагающих бесплатное программное обеспечение. Однако опыт показывает, что гибко настраиваемый оптимизатор, интегрированный в Ulead Gif Animator, позволяет добиться в этом наилучшего результата.
Рие. 5.10. Замещение статичных участков прозрачным фоном в файле анимации
Внешний вид программы Ulead Gif Animator версии 4.0 показан на рис. 5.11.
Рис. 5.11. Интерфейс программы Ulead Gif Animator .Рассмотрим элементы управления данной программой более подробно (рис. 5.12).
Рис. 5.12. Элементы управления программой Ulead Gif Animator
File — работа с файлами
New — создать новый файл;
Open GIF — открыть готовый файл в формате GIF;
Open Video — открыть готовый файл в форматах Microsoft AVI или Autodeskanimation;
Animation Wizard — разработка GIF-анимации из готовых файлов с помощью специального мастера;
Restore — отмена внесенных изменений;
Save — сохранить файл в формате GIF;
Save AS — сохранить файл в формате GIF под другим именем;
Optimization Wizard — мастер оптимизации, автоматически уменьшает размерыфайла;
Batch process — оптимизация в пакетном режиме;
Export — сохранение GIF-файла в виде кода HTML или видеофайла;
Preferences — свойства программы (общие настройки);
Recent — вызвать на редактирование файл, который открывался последним.
Меню Edit — редактирование файлов
Undo moving — отменить перемещение;
Redo moving — повторить перемещение;
Cut — вырезать в буфер обмена;
Сору — скопировать в буфер обмена;
Copy HTML code — копировать в код HTML;
Paste comment — вставить комментарий;
Delete — удалить;
Select all — выделить все;
Invert selection — инвертировать выделение;
Duplicate — создать копию изображения как еще одного кадра анимации;
Crop — создать копию выделенной части изображения как еще одного кадраанимации;
Resample — изменить размеры кадра;
Rotate and flip — развернуть изображение на определенный угол и создать зеркальное отражение кадра;
Regenerate frames — регенерация кадров;
Global attribute change — смена общих атрибутов изображения.
Меню View — просмотр изображения
Actual view — просмотр в масштабе 1:1;
Zoom in — просмотр в увеличенном виде;
Zoom out — просмотр в уменьшенном виде;
Start preview — предварительный просмотр движущегося изображения в окнепрограммы;
Full screen preview — предварительный просмотр изображения в полноэкранномрежиме;
Layer panel — показать/убрать панель слоев;
Thumbnail size — изменить размер изображения для предварительного просмотра;
Previous image — вернуться к предыдущему изображению;
Next image — перейти к следующему изображению;
Properties — ввести свойства изображения (размеры и скорость загрузки);
Standard toolbar — показать/убрать стандартную панель инструментов;
Attribute toolbar — показать/убрать панель атрибутов файла;
Palette toolbar — показать/убрать панель палитры;
Status bar — показать/убрать панель статуса.
Меню Layer — слои анимации
Add blank image — добавить пустой кадр;
Add image — добавить изображение;
Add video — добавить видео;
Add comments — добавить комментарий;
Add banner text — добавить текст поверх изображения;
Add simple transition — смена кадров с эффектом типа «жалюзи»;
Add color animation — появление цветов в заданном порядке;
Add cube effect — смена кадров с эффектом «вращение куба»;
Add scrolling — смена кадров с эффектом «вращение»;
Move layer up — передвинуть слой вверх;
Move layer down — передвинуть слой вниз;
Reverse order — поменять порядок кадров.
Меню Filters — фильтры
About filters — информация о фильтрах, имеющихся в программе.
Меню Video F/X
Включает следующие анимационные графические фильтры.
3D
Gate 3D — эффект «открывание ворот».
Build
Diagonal build — построение изображения по диагонали.
Clock
Sweep clock — смена изображения по (против) часовой стрелки.
F/X
Diamond a-f/x — смена кадров в форме граней алмаза;
Iris f/x — смена кадров в форме раскрывающегося цветка;
Mosaic f/x — смена кадров в форме мозаики;
Power off f/x — смена кадров в виде постепенного гашения экрана.
Film
Flap b-film — смена кадров в виде постепенного «отрывания» частей изображения;
Progressive film — смена кадров в виде постепенного замещения частей изображения;
Turn page film — смена кадров в виде переворачивания страницы.
Peel
Turn page peel — смена кадров в виде переворачивания страницы.
Push
Run and stop push — смена кадров в виде «выталкивания» изображения с экрана.
Roll
Side roll — смена кадров в виде «скатывания» изображения за пределы видимости.
Slide
Bar slide — смена кадров в виде «раздвигания» изображения.
Stretch
Cross zoom-stretch — смена кадров в виде увеличения масштаба изображения.
Wipe
Star wipe — вырезание изображения в форме звезды.
2D mapping
Crop — рамка.
Camera lens
Gradient — изменение оттенков цвета;
Mirror — эффект «отражение в воде (рябь)»;
Zoom motion — приближение изображения в движении.
Dark room
Hue, saturation — смешение цветов.
Natural painting
Charcoal — рисунок углем.
Special
Add noise — добавление «шумовых» пикселов;
Wind — эффект «флаг на ветру»;
About video f/x — меню содержит информацию о видеоэфектах.
Add blank image — добавить пустой кадр;
Add image — добавить изображение;
Add video — добавить видео;
Add comments — добавить комментарий;
Move layer up — передвинуть слой вверх;
Move layer down — передвинуть слой вниз;
Preview in Internet Explorer — предварительный просмотр в MS Internet Explorer;
Preview in Netscape Navigator — предварительный просмотр в Netscape Navigator;
Preview in custom browser — предварительный просмотр в любом другом броузере, указанном пользователем в настройках программы.
Image title — наименование изображения;
How to remove — описание правил удаления из изображения лишних компонентов;
Global attribute change — смена общих атрибутов изображения;
Width — ширина изображения;
Height — высота изображения;
Interlace — чересстрочная развертка;
Transparent index — степень прозрачности изображения;
Local palette — применить местную (собственную) палитру;
Wait for user input — ожидать действий пользователя (с).
Save palette — сохранить палитру пользователя;
Load palette — загрузить палитру пользователя;
Add color — добавить цвет в палитру;
Delete color — удалить цвет из палитры;
Replace color — заменить один цвет в палитре на другой;
Gradient — градиент;
Sort by — тип сортировки;
R — количество красного в цвете;
G — количество зеленого в цвете;
В — количество синего в цвете;
ххх colors — количество цветов, использованных в палитре (от 2 до 256).
На панели статуса отображаются комментарии к производимым пользователем действиям.
Compose — компоновка изображения (произведение изменений в файле);Edit — редактирование изображения;
Crop — создание копии выделенной части изображения как еще одногб кадраанимации;
Paint tool — инструмент «карандаш»;
Resample — изменение размеров изображения;
Flip horizontal — перевернуть изображение по горизонтали;
Flip vertical — перевернуть изображение по вертикали;
Magic wand tool — волшебная палочка (выделение части изображения);
Polygon tool — рисование нестандартных фигур;
Rotate left 90° — развернуть рисунок на 90° влево;
Rotate right 90° — развернуть рисунок на 90° вправо;
Erase tool — инструмент «ластик»;
Zoom in — увеличить изображение;
Zoom out — уменьшить изображение;
Actual view — просмотр в масштабе 1:1.
Optimize — оптимизация изображения
Presets — выбор алгоритма оптимизации;
Save presets — сохранение пользовательского алгоритма оптимизации;
Delete presets — удаление текущего алгоритма оптимизации;
Optimize now — оптимизировать сейчас (запуск оптимизации);
Download time is calculated based on xxx kbps — скорость загрузки изображения,с расчетом на которую производится оптимизация;
Wizard — оптимизация с помощью мастера;
Normal/advanced — просмотр дополнительных параметров оптимизации;
Number of color — количество цветов в палитре (остальные цвета подлежат удалению в процессе оптимизации);
Use palette — выбор используемой палитры;
Preview — предварительный просмотр готового GIF-изображения.
Как видим, разработчики постарались сделать интуитивно понятную, максимально простую в освоении и надежную программу, являющуюся вместе с тем мощным средством разработки анимированной графики. Можно смело сказать, что им это удалось. Ulead Gif Animator позволяет создавать «на лету» как сложные клипы, так и простейшую анимацию, состоящую буквально из двух кадров, с использованием широкого ассортимента входящих в комплект поставки программы визуальных эффектов.
Настало время применить полученные вами навыки на практике. Для этого с помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.
Рис. 5.13. Файл bockground.gif
Теперь откройте файл index.html для редактирования и дополните тег <BODY> атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#OOOOFF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" А1_Т="Это моя фотография">
Таким образом, код данного участка нашего html-документа будет иметь следующий вид:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mofl домашняя страничка</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" ALT="Этоo моя фотография">
<P ALIGN="JUSTIFY">
и т. д.
Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 5.14).
Рис. 5.14. Web-страница после внесения изменений в код HTML
Как видите, ваша страница приобрела приятный текстурный фон, в левой части экрана появилась фотография ее владельца. Добавив отображение фона во все остальные документы сайта, сохраните их на диске, после чего заново опубликуйте измененные web-страницы в Интернете, не забыв перенести на сервер используемые вами графические изображения — файлы background.gif иmypicture.jpg.
В этом уроке мы изучили: