Люди устроены так, что первым делом обращают внимание на
рисунки, а не на текст. Поэтому именно графическое оформление
web-страницы во многом определяет, уделит ли читатель ей время
или пройдет мимо. На наш взгляд, феноменальный успех World
Wide Web во многом обязан именно заложенной в эту технологию
возможности включать в документы графику. Недаром говорят, что
лучше один раз увидеть, чем сто раз услышать. Ввиду такой
важности изображений, давайте поближе познакомимся со всеми
методами их использования в web-документах.
Компьютерная графика - одна из важнейших информационных
технологий. Существует огромное множество инструментов,
предназначенных для работы изображениями. В этой главе мы
познакомим вас со средствами для работы графикой в форматах
GIF и JPEG и рассмотрим как выгоды от ее применения, так и
возникающие проблемы. Мы также рассмотрим один из важнейших
методов применения графики на web-страницах - создание
интерактивных размеченных рисунков, или, как их еще называют,
изображений-карт.
Графика в HoTMetaL PRO В HoTMetaL PRO имеются
специальные средства для работы с изображениями и их
просмотра. Большинство команд, управляющих отображением
встроенной в документ графики, находится в меню View. По
умолчанию там присутствует команда Show Inline Images, которая
предназначена для отображения в редактируемом документе не
тегов <IMG>, а самих изображений. Она работает как
переключатель, и после использования на ее месте появится
команда Hide Inline Images.
HoTMetaL PRO позволяет выбрать программу просмотра или
графический редактор для работы со встроенными изображениями.
Приведенные в этой главе примеры редактирования и сохранения
изображений для web-страниц предполагают использование
прекрасного графического редактора Paint Shop Pro. После
установки этой программы на свой компьютер поместите в
редакторе HoTMetaL PRO точку вставки между тегами <IMG>
и выберите команду View д View Image. Откроется
диалоговое окно выбора программы просмотра. Найдите
каталог, в который вы установили Paint Shop Pro, укажите файл
psp.exe и щелкните на кнопке OK. Откроется еще одно окно
выбора программы просмотра. Теперь оно
будет появляться всякий раз после выбора команды View д View
Image. Кроме того, в нем можно добавить дополнительные
программы просмотра или графические редакторы. Чтобы открыть
изображение, выделите в списке нужную строку, например
psp.exe, и щелкните на кнопке View. Запустится Paint Shop Pro
и загрузит указанный рисунок.
Чтобы добавить в список еще один графический редактор,
выберите команду View д View Image и щелкните на кнопке Add. С
помощью диалогового окна найдите
каталог и исполняемый файл редактора и дважды щелкните на нем
кнопкой мыши. Удалить из списка Paint Shop Pro или другую
графическую программу можно с помощью кнопки Delete.
Форматы графических файлов Существует огромное
множество графических форматов, однако для публикаций в
Internet используются, в основном, только два - GIF (Graphics
Interchange Format) и JPEG (Joint Photographic Experts Group).
Web-броузер несложно настроить и на другие форматы, такие как
TIFF (Tagged Image File Format) и EPS (Encapsulated
PostScript), однако практически все web-документы содержат
только встроенные изображения в формате GIF и указатели на
большие графические файлы высокого разрешения в формате JPEG.
Подробности о формате GIF Этот формат графических
файлов был разработан в онлайновой службе CompuServe для
быстрого обмена изображениями по телефонным линиям. Время
передачи файла в формате GIF уменьшается за счет того, что
изображение в нем хранится в сжатом виде. GIF-файлы могут
содержать изображения с индексированной цветовой палитрой,
черно-белые или полутоновые рисунки. Главным достоинством
файлов в формате GIF является возможность просматривать их на
платформах UNIX, Macintosh и Windows.
Существует две версии формата GIF - GIF89a и GIF87a. В
формате GIF89a имеется признак прозрачности. Если определить
для некоторой области изображения «прозрачный» цвет, то
текущий цвет фона экрана в этой области не будет перекрываться
отображаемым рисунком. Это дает возможность накладывать
изображения одно на другое. Чересстрочный формат файлов
(interlaced image) позволяет постепенно «проявлять»
изображение по мере его приема из сети. При загрузке такого
рисунка возникает эффект «жалюзи». Использование чересстрочных
изображений позволяет читателю видеть документ уже тогда,
когда из сети загружена лишь часть GIF-файла. Чересстрочные
GIF-файлы поддерживаются броузерами NCSA Mosaic (версии 2.0) и
Netscape Navigator. К сожалению, не все графические редакторы
поддерживают обе версии формата GIF.
Споры о GIF и алгоритме LZW В декабре 1994 года
возникли юридические проблемы, связанные с авторскими правами
на графический формат GIF. Причиной этого послужило то, что
CompuServe и Unisys, две компании, владеющие правами на GIF,
объявили о своем решении начать платное лицензирование
разработчиков программного обеспечения со встроенной
поддержкой этого формата. До этого объявления GIF считался
общедоступным открытым стандартом, хотя формально таковым не
являлся. В формате GIF используется алгоритм сжатия LZW. Эта
аббревиатура происходит от фамилий Лемпел, Зив и Велч (Lempel,
Ziv и Welch). Лемпел и Зив - математики, разработавшие
несколько алгоритмов сжатия данных. Велч позднее
усовершенствовал алгоритм Лемпела-Зива. Патент на алгоритм LZW
принадлежит компании Unisys, которая хорошо известна на рынке
сетевых и информационных технологий. Эта фирма потребовала
оплаты лицензий от всех разработчиков (не от пользователей!)
программного обеспечения, использующего алгоритм LZW. Компания
CompuServe Information Services, которой принадлежит одна из
крупнейших в США онлайновых служб, предложила разработчикам
программного обеспечения другой вариант лицензирования,
позволяющий им использовать технологию GIF без необходимости
напрямую обращаться в Unisys. Однако производители тех
программных продуктов, которые не «предназначены в первую
очередь для использования в сети CompuServe Information
Service», должны были приобретать лицензии на LZW
непосредственно у Unisys. Компания CompuServe установила
лицензионную плату за использование алгоритма LZW в
поддерживающих формат GIF программных продуктах в размере
1,5 % от их продажной цены. Один процент должен был
отчисляться Unisys. К сожалению, это внесло много путаницы и
натолкнулось на противодействие многих производителей
программного обеспечения.
Форматы GIF24 и PNG Компания CompuServe
предложила новый стандарт под названием GIF24, который должен
стать преемником GIF89a. GIF24 превосходит обычный GIF тем,
что поддерживает изображения с глубиной цвета 24 бита
(TrueColor). В качестве основы для разработки GIF24 был
использован графический формат PNG (Portable Network
Graphics). В нем использована дефляционная (deflation)
технология сжатия данных, которая используется во многих
бесплатных программах. Она изначально разрабатывалась как
бесплатный открытый стандарт. Спецификации PNG можно найти на
web-сервере Томаса Бутелла (Thomas Boutell), по адресу .
Подробности о формате JPEG JPEG представляет
собой великолепный формат, поддерживающий очень высокое
разрешение и обеспечивающий огромный коэффициент сжатия. Во
многих графических редакторах, в том числе Adobe Photoshop,
можно самому выбрать степень сжатия, от которой зависит
качество изображения. При степени сжатия от 5:1 до 15:1 потеря
качества практически не заметна. При загрузке в web-броузер
рисунки в формате JPEG распаковываются автоматически.
Изображения, сохраненные в виде JPEG-файлов, как правило,
занимают не более 10 процентов от своего первоначального
размера.
В формате JPEG используется алгоритм сжатия с потерями, это
означает, что какая-то часть данных теряется. При
преобразовании в JPEG выделяется и отбрасывается информация о
пикселях, которые не являются существенно необходимыми для
передачи изображения, например, особенно сильно сжимаются
большие области, заполненные одним цветом. Как правило,
отсутствие отброшенной информации незаметно. Сжатое в формате
JPEG изображение практически неотличимо от оригинала, но во
много раз меньше его. Одним из преимуществ JPEG является его
поддержка в языке PostScript уровня 2. PostScript долгое время
был стандартом Internet. Когда JPEG-файл печатается на
PostScript-принтере, именно в принтере и происходит его
распаковка. В отличие от стандартного GIF, в формате JPEG
могут быть сохранены изображения с 24-битной цветовой
палитрой. К сожалению, формат JPEG не поддерживает
чересстрочное хранение изображений.
Встроенные изображения Встроенными называются
такие изображения, которые могут отображаться в web-броузере
без использования дополнительных программ. Броузеры Netscape и
Mosaic поддерживают встроенную графику в форматах GIF и JPEG.
Для встраивания графических файлов используется тег
<IMG>. В редакторе HoTMetaL PRO для вставки изображения
достаточно щелкнуть на кнопке <Image> или,
воспользовавшись командой Markup д Insert Element, выбрать тег
<IMG> в открывшемся окне ввода элементов. Количество
встроенных в web-страницу изображений не ограничено.
Изображение и альтернативный текст Не все смогут
или захотят видеть на экране встроенные изображения. Чтобы
повысить скорость работы в Web, множество пользователей,
имеющих модемное соединение с Internet, выключают в своем
броузере режим отображения встроенной графики. Следует
позаботиться и о читателях, пользующихся текстовыми
броузерами, подобными Lynx, и дополнить каждое изображение
альтернативным (заменяющим) текстом. Тогда эти люди по крайней
мере смогут узнать, что же они не могут видеть. Чтобы
определить для изображения альтернативный текст, нужно
поместить точку вставки между тегами <IMG> и выбрать
команду Markup д Edit SGML Attributes. Откроется
окно редактирования атрибутов, в котором есть поле
ALT. В него следует ввести текст, который читатель страницы
сможет увидеть вместо изображения.
Использование изображения в качестве
гиперссылки Любое встроенное изображение может быть
использовано в качестве гиперссылки на другой файл или
HTML-документ. Если между тегами якоря вместо текста ввести
тег изображения, вокруг рисунка при просмотре появится рамка.
В следующем примере в качестве ссылки использовано изображение
orderdsk.gif:
Если читатель щелкнет кнопкой мыши на этом изображении,
произойдет переход к HTML-документу под названием order.html.
На рис. 8.4 показано встроенное изображение, использованное в
качестве гиперссылки.
Источники графических файлов Изображения придают
web-странице привлекательность, тем самым заинтересовывая
читателя в вас и вашей компании. Однако именно получение и
редактирование изображений представляет собой едва ли не
основную сложность при создании web-страницы. Если вы намерены
создать собственный web-узел, возможно, придется поискать
профессионального дизайнера, чтобы создать или отсканировать
изображения web-страниц. Даже если у вас есть достаточно
мощный графический редактор, этого еще не достаточно, чтобы
превратиться в компьютерного художника.
Рисунки для размещения на web-страницах вам придется либо
создать самостоятельно (для этого требуется графический
редактор, например, Adobe Photoshop или Paint Shop Pro), либо
отсканировать. Можно, однако, просто поискать уже готовые
изображения.
Совет Если вы создаете для своей компании коммерческий
web-узел, постарайтесь использовать оцифрованные фотографии, а
не рисованные изображения. Люди подсознательно больше доверяют
фотографиям, а не рисункам.
Профессиональные библиотеки изображений и
фотографий Существует множество коммерческих библиотек
электронных рисунков (clip art) и коллекций оцифрованных
фотографий. Сборники рисунков и фотографий являются наиболее
популярным «довеском» к большинству графических и
мультимедийных программ. С пакетом CorelDRAW! 6, например,
поставляется более 22 000 рисунков и символов, а также 100
фотографий с высоким разрешением. Хотите верьте, хотите нет,
но некоторым и этого недостаточно, поэтому та же компания
Corel отдельно продает библиотеку, содержащую более 200 000
фотоснимков и рисунков. Имейте в виду, что разброс качества
подобных библиотек просто огромен. Только то, что какая-либо
коллекция изображений являются коммерческим продуктом, еще не
гарантирует, что она сделана с профессиональным качеством.
Компания Image Club всегда выделялась качеством своих
библиотек изображений. Image Club также поставляет
оцифрованные фотоснимки профессионального качества. Компания
Adobe приобрела Image Club в 1995 году. Можно посетить
домашнюю страницу Image Club на .
Помните, что не существует одного стандартного графического
формата для коллекций рисунков и фотографий. Image Club
представляет свою графику в форматах EPS и TIFF, PhotoDisk
поставляет изображения в форматах JPEG и TIFF, а фотографии от
CMCD обычно приходят в формате Kodak PhotoCD.
Предупреждение Не смешивайте различные типы графических
изображений. Черно-белые иллюстрации, рисунки и цветные
фотографии имеют строго определенное назначение и создают
разное впечатление у читателя. Тщательно выбирайте
изображения, чтобы они соответствовали содержанию документа и
дополняли его. Не стоит размещать рядом черно-белую
иллюстрацию и цветную фотографию. Такая страница выглядит
эклектично и, как правило, производит плохое впечатление.
Сканирование изображений Чаще всего берут уже
готовое изображение и помещают его в web-документ. Например,
если у вашей фирмы есть логотип, можно разместить его в начале
домашней страницы. Если вы создаете личную страницу, можно
украсить ее своей фотографией. Один из путей «добывания»
изображений - это сканирование имеющихся бумажных фотографий
или рисунков. Однако нужно помнить, что сканирование сделанных
не вами изображений (например, иллюстраций из журналов) может
нарушить чьи-то авторские права. Гораздо безопаснее
использовать свои собственные фотографии, рисунки или заведомо
бесплатные изображения. Сканеры дешевеют со сказочной
быстротой. Если необходимо сканировать цветные изображения, то
стоит позаботиться о том, чтобы сканер поддерживал 24-битную
цветовую палитру (TrueColor). Хотя изображения с таким
количеством цветов обычно не публикуют в Web, редактировать и
хранить их следует именно в этом виде. Как правило,
отсканированные изображения требуют лишь минимального
редактирования. Большинство сканеров сейчас комплектуется
графическими редакторами и программами распознавания символов
(OCR - Optical Character Recognition). Такой комплект
представляет собой весьма выгодную покупку. Мы, например,
используем сканер Relisys Reli 2412 стоимостью менее
$600, в комплект поставки которого входят Adobe
Photoshop 3.0, Kai's Power Tools и OmniPage Direct.
Последний пакет предназначен для распознавания символов и
может сохранять текст в виде ASCII-файла или в форматах
популярных текстовых процессоров. Если нужно отсканировать
всего одно-два изображения, проще обратиться в фирму, которая
оказывает такие услуги. Если организуется собственный
web-узел, то вполне возможно, стоит приобрести недорогой
цветной планшетный сканер, такой, например, как Relisys
Reli 2412.
Adobe Acrobat Capture Этот пакет позволяет
сканировать документы и изображения и сохранять их в
переносимом формате Acrobat PDF. Следующая версия броузера
Netscape будет включать прямую поддержку PDF, что позволит без
проблем публиковать профессионально сверстанные документы.
Acrobat Capture достаточно дорог, однако в тех случаях, когда
необходимо опубликовать в Web значительное количество
существующих документов, он может стать эффективным вложением
денег.
Информация об авторском праве Если вы хотите
побольше узнать о юридических аспектах интеллектуальной
собственности, посетите web-узел компании Thomson &
Thomson, которая специализируется на торговых марках и
авторском праве. URL ее домашней страницы - .
На рынке присутствует широкий выбор коммерческих
графических пакетов. Для начинающих компьютерных художников
можно порекомендовать Image Pals 2 и Hijaak Graphics
Suite. Оба этих редактора способны конвертировать большинство
графических форматов в GIF или JPEG. Пакет CorelDRAW!
представляет собой великолепный комплект графических средств,
включающий в себя Corel Photo Paint, также позволяющий
работать с файлами в этих форматах. Всякому, кто планирует
серьезно заняться изображениями, стоит приобрести Adobe
Photoshop. Это лучший графический редактор из всех, попадавших
к нам в руки. Хотя он довольно дорог, за свои деньги вы
получите абсолютно все средства, которые могут понадобиться
при работе с растровыми изображениями. Версия 3.0 позволяет
работать со слоями и добавлять световые эффекты. После работы
с Photoshop очень трудно вернуться к какому-то другому
редактору.
Нужно стремиться размещать на web-страницах запоминающиеся
рисунки. Существует несколько графических приложений и утилит,
назначение которых выходит за рамки простого редактирования
изображений. Одно из них - Fractal Design Painter. Этот пакет
позволяет создавать картины с помощью средств, имитирующих
инструменты и краски традиционных художников - акварели,
картины, написанные маслом, рисунки углем и пастелью. С
помощью Painter и графического планшета Kurta XGT мы создали
несколько изумительных работ. Помимо этого, в Painter имеются
некоторые возможности для создания и редактирования анимации и
видео. Пакеты для трехмерной визуализации, такие как 3-D
Studio, Visual Reality и trueSpace, гораздо сложнее
графических редакторов, однако они позволяют работать с
трехмерными изображениями и создавать весьма впечатляющие
картины. В таких пакетах можно имитировать материал и текстуру
поверхности объектов, а также управлять освещением, чтобы
изображенные предметы отражали свет и отбрасывали тень. Многие
приложения для трехмерной графики способны создавать и
редактировать анимационные ролики, использование которых
обсуждается в следующей главе. В большинстве графических
редакторов и пакетов трехмерной графики предусмотрено
использование специальных фильтров, которые называются
расширениями (plug-ins). Пакет Kai's Power Tools, по нашему
мнению, является наилучшим набором таких расширений,
предназначенных для создания специальных эффектов в редакторах
Adobe Photoshop и Corel Photo Paint. Прежде чем приступить к
непосредственному использованию графических пакетов,
необходимо познакомиться с основами компьютерной графики и
факторами, которые необходимо учитывать при подготовке
изображений для публикации в Web.
Пиксели и цветовые палитры Пикселем (pixel)
называется наименьшая неделимая точка изображения с
однородными характеристиками. Глубина пикселя (pixel-depth),
или битовое разрешение (bit resolution) - это количество бит
информации, характеризующих один пиксель. Другими словами,
каждому пикселу изображения соответствует числовое значение,
которое описывает его цвет, поэтому глубину пикселя еще
называют глубиной цвета. Чем больше глубина пикселя, тем
большее количество оттенков может быть передано. Изображения в
формате GIF имеют глубину цвета, равную 8 битам, что
соответствует 256 возможным цветам. GIF является форматом с
индексированным цветом и использует цветовую палитру. Цветовая
палитра (color palette), которую иногда называют таблицей
поиска цвета (color look-up table, CLUT) - это таблица,
определяющая цвета пикселей. Подобно номерам оттенков в наборе
художественных красок, каждый пиксель изображения
характеризуется числом, которое соответствует определенной
пронумерованной позиции в таблице. По этой причине палитру
иногда называют системой с индексированием цвета (indexed
color system).
Большинство графических редакторов способно демонстрировать
палитру возможных цветов, в которой можно указать мышью нужный
оттенок. Как уже упоминалось выше, формат GIF поддерживает
палитру из 256 цветов. Это значит, что из миллионов
всевозможных цветов одновременно можно использовать
определенные в конкретной палитре 256. В каждый момент времени
может использоваться только одна палитра. В Windows для
отображения окон зарезервированы 20 цветов. Если во время
работы сменить стандартную палитру на другую, в которой
определены дополнительные оттенки, экран может неожиданно
заблистать весьма необычной раскраской, поскольку цвета из
новой палитры заменят старые.
При использовании более 256 цветов существует опасность
искажения изображений. Цвета размещаются до тех пор, пока не
будут использованы все 256 «ячеек» палитры. Любые другие
изображения, отображаемые одновременно с первоначальным, до
смены палитры могут использовать только уже заданные цвета.
Именно поэтому на некоторых web-страницах первое изображение
выглядит нормально, а последующие при отображении искажаются.
Например, если расположить на странице два изображения, в
которых в общей сложности использовано более 256 цветов, то
при отображении такого документа в броузере дополнительные
цвета не смогут быть созданы. Вместо них будут использованы
цвета, уже определенные в текущей палитре. Одно из изображений
может при этом быть сильно искажено.
Чтобы этого не случалось, следует размещать на одной
странице изображения с одинаковой цветовой палитрой.
Графические редакторы позволяют перераспределять цвета в
палитре, оптимизировать и настраивать ее. С другой стороны,
формат JPEG поддерживает 24-битный цвет, что позволяет
получить около 16,7 миллионов оттенков. При работе с 16- и
24-битными изображениями можно практически не заботиться о
палитре. Однако, не стоит использовать JPEG-изображения в
качестве встроенной графики, поскольку они слишком велики по
сравнению с 256-цветными GIF-файлами, и страница будет
загружаться слишком медленно.
Совет Для работы с палитрой необходимо преобразовать
изображение в цветовую схему RGB (красный, зеленый, синий).
При этом открывается больше возможностей для редактирования.
После того как изображение будет готово, преобразуйте его в
формат с индексированным цветом.
Обрезка, изменение разрешения и размеров
изображения Давайте попробуем понять, что зависит от
разрешения изображения. Прежде всего оговорим, что существует
два различных типа разрешения: разрешение изображения и
разрешение монитора. Разрешением изображения называется шаг
пикселей в изображении. Оно измеряется в пикселях на дюйм
(ppi, pixels per inch). Если изображение имеет разрешение
96 ppi, на его квадратный дюйм приходится 9 216 пикселей
(96 ґ 96 = 9 216). Разрешение монитора - это шаг точек на
экране монитора. Оно измеряется в точках на дюйм (dpi, dots
per inch).
От него зависит размер изображения на экране. Большинство
мониторов в графическом режиме имеют разрешение 72 dpi.
Важно, чтобы все значки и кнопки на экране были одного
размера. Для этого можно обрезать края изображения до нужной
величины. Документы, в которые встроены изображения одного
размера, выглядят более аккуратными и последовательными.
В результате изменения разрешения или размера изображение
может исказиться. Как упоминалось ранее, большинство коллекций
состоит из рисунков высокого разрешения. Лучше всего
редактировать их именно в этом формате, и только готовое
изображение конвертировать в формат GIF. Проверьте, чтобы
разрешение изображения в пикселях на дюйм не изменилось при
сохранении его в другом формате. Не увлекайтесь увеличением
размеров изображений в форматах GIF и JPEG - обычно ничего
хорошего из этого не получается.
Смешивание цветов После того как вы
отредактируете изображение и уменьшите глубину цвета до 8 бит,
необходимо выбрать метод преобразования оттенков. При
сокращении палитры цвета пиксели должны быть преобразованы в
наиболее близкие оттенки новой палитры. Для уменьшения
количества цветов, необходимых для отображения графики,
используется «смешивание красок» (dithering). При этом точки
разного цвета помещаются рядом друг с другом, что визуально
выглядит как еще один оттенок, которого на самом деле в
палитре нет. С помощью этой техники можно также создавать
плавные переходы от одного цвета к другому, смешивая точки,
окрашенные в эти цвета, в постепенно изменяющейся пропорции.
Большинство программ редактирования изображений включают в
себя возможность такой работы с цветом. Подобные эффекты
позволяют сделать так, что изображение будет казаться более
многоцветным, чем оно есть на самом деле. Например,
диффузионное рассеивание (diffusion dithering) -
распространенное средство, позволяющее «разбрызгивать» пиксели
не по заданному шаблону, а случайным образом. С помощью
команды Error Diffusion Dither изображению в Paint Shop Pro
можно придать очень необычный вид.
Сглаживание контуров текста Если вводить в
изображение текст, то из-за конечного размера пикселей контуры
символов могут быть ступенчатыми или, как это еще называют,
зазубренными. При вводе текста в редакторе растровых
изображений следует установить опцию сглаживания
(anti-aliasing). При ее использовании текст выглядит более
ровным, а переход контура символа в фон слегка
растушевывается.
Отображение текста как графического
изображения HTML не позволяет управлять шрифтами в
web-документах. При необходимости набрать текст декоративным
шрифтом нужно представить его в виде растрового изображения.
Некоторые графические редакторы, такие как Adobe Photoshop и
Paint Shop Pro, предоставляют возможность набрать текст и
сохранить его в виде изображения формата GIF или JPEG.
Многие программы редактирования растровых и векторных
изображений позволяют выводить текст со специальными
эффектами. Например, в Adobe Photoshop можно создавать
многослойный (layered), оттененный (shadowed), «тисненый»
(recessed), выпуклый (embossed), «светящийся» (glowing) и
«подсвеченный» (translucent) текст. Самые мощные графические
пакеты, такие как trueSpace 2 и 3D Studio, позволяют
создавать трехмерные буквы с заданной текстурой поверхности.
Пример текста, созданного в Adobe
Photoshop и сохраненного в виде GIF-изображения.
Преобразование GIF-файлов в прозрачные чересстрочные
изображения Есть несколько методов создания изображений
с прозрачным фоном. Иногда такие изображения называют
«плавающими», поскольку они как бы висят над web-страницей.
«прозрачный» рисунок, наложенный на
стандартный серый фон web-страницы.
Большинство рисунков и фотографий, которые вы можете найти,
еще не готово к использованию в составе web-документов. К
счастью, преобразовать изображение в форматы GIF или JPEG не
сложнее, чем сохранить файл - большинство графических
редакторов умеет это делать. Существует несколько важных опций
преобразования, которыми следует пользоваться. Среди них -
чередование (interlacing) и прозрачный фон (transparent
background).
Совет Компания Adobe объявила, что в скором времени
будет выпущено расширение (plug-in) для Photoshop 3.x, с
помощью которого можно будет создавать чересстрочные
GIF-изображения с прозрачным фоном - специально для
публикаций в Web. Посмотрите, не появилось ли оно на узле
Adobe: .
Чересстрочные изображения позволяют читателю увидеть
страницу, не дожидаясь, пока будет загружен весь рисунок.
Изображения с прозрачным фоном как бы парят над web-страницей.
Все больше и больше графических редакторов позволяют сохранять
изображения в виде чересстрочных GIF-файлов. Два следующих
раздела посвящены методам создания изображений с прозрачным
фоном и сохранения их в чересстрочном формате GIF89a.
Использование Paint Shop Pro для
создания чересстрочных изображений с прозрачным
фоном Возможность создавать изображения с прозрачным
фоном и сохранять их в чересстрочном формате появилась в Paint
Shop Pro, наверное, раньше, чем во всех других графических
редакторах. Ниже приводится последовательность действий по
определению цвета фона изображения, приданию ему прозрачности
и сохранению изображения в чересстрочном формате GIF89a.
1. Запустите Paint Shop Pro и откройте изображение, с
которым вы хотите все это проделать.
2. Щелкните на кнопке Color picker (кнопка с изображением
пипетки, расположенная на плавающей панели инструментов).
Щелкните указателем мыши где-нибудь на фоне изображения. В
середине строки состояния после буквы «I» появится индекс
цвета. За ним будут расположены значения цветовых составляющих
RGB (red, green, blue),. Запомните
значение индекса.
Замечание. Если фон изображения залит не сплошным цветом, а
вы хотите сделать его прозрачным, следует воспользоваться
средством Magic Wand (волшебная палочка) и указать допустимый
разброс оттенков относительно цвета указанной точки в
выделяемой области. После того как фон будет выделен, нужно
залить его сплошным цветом (используйте для этого кнопку с
изображением малярного ведерка).
3. Чтобы установить прозрачный цвет фона, используйте
команду Save As и выберите в списке типов файлов пункт GIF -
CompuServe image.
4. выберите в списке подтипов
файлов вариант Version 89a - Interlaced.
Замечание. Если позднее понадобится отредактировать это
изображение, не забудьте установить опцию Maintain Original
Files Transparency Information, чтобы сохранить прозрачный
фон.
6. Выберите пункт Set the Transparency Value to.
7. С помощью стрелок установите в соседнем поле ввода
числовое значение индекса цвета, которое вы определили на
шаге 2.
Предупреждение Мнение о том, что один и тот же цвет
должен иметь один и тот же индекс во всех изображениях,
является ошибочным. Действительно, многие изображения могут
иметь одинаковые установки для черного и белого цветов, но
номера оттенков при использовании различных палитр могут и не
совпадать. Если белый цвет в одной палитре определен под
номером 0, в другой палитре ему может быть назначен
совершенно другой номер.
Создание чересстрочных изображений с прозрачным фоном
при помощи LView Pro Программа LView Pro по умолчанию
используется как внешнее приложение для просмотра графики в
большинстве web-броузеров. LView Pro можно найти на следующих
web-узлах: .
Существуют две версии LView Pro - 16- и 32-разрядная. При
написании этой главы использовалась 32-разрядная версия. После
того как вы установите LView Pro на свой компьютер, для
создания изображения с прозрачным фоном и сохранения его в
чересстрочном формате GIF необходимо будет выполнить следующие
действия:
1. Запустите LView Pro и откройте нужное GIF-изображение с
помощью команды File д Open.
2. Выберите команду Retouch д Background Color. Откроется
диалоговое окно выбора цвета в
палитре.
3. Установите флажок Mask selection using и выберите пункт
White. После этого изображение будет закрашено белым цветом.
Если фон у изображения белый, следует установить переключатель
в положение Black. В результате изображение будет залито
черным цветом. Не беспокойтесь по поводу того, что изображение
пропало из окна редактирования LView Pro - это временное
явление.
4. Выберите в палитре цвет, соответствующий фону
изображения, и щелкните на кнопке OK. Если вы выбрали верный
цвет фона, он станет виден в окне изображения и на нем,
появится силуэт изображения в выбранном
цвете маски. Индекс цвета фона и значения его RGB-составляющих
появятся в нижней части диалогового окна.
5. Выберите команду File д Save As.
6. Выберите опцию GIF89a из разворачивающегося списка типов
файлов.
7. Введите новое имя файла и щелкните на кнопке OK.
Увеличение производительности при помощи уменьшенных
копий изображений Как уже говорилось ранее, не стоит
встраивать в web-страницу большие 24-битные JPEG-изображения.
Лучше сообщить на ней о том, что у вас есть потрясающая
картинка, которую при желании можно посмотреть. Расположите на
странице уменьшенную копию изображения (thumbnail) в формате
GIF и свяжите ее с JPEG-файлом гиперссылкой. Тогда читатель
при желании просмотреть многоцветное изображение с большим
разрешением сможет сделать это, щелкнув кнопкой мыши на
уменьшенной копии. расположенная на
web-странице уменьшенная копия фотографии, связанная с
оригиналом,. Для создания
связи между копией и оригиналом используется тег якоря. Ниже
приведен пример HTML-кода, в котором устанавливается связь
между GIF-копией small.gif и файлом оригинала large.jpg:
<A>HREF=large.jpg><IMG
SRC=small.gif></A>
Позиционирование изображений на
web-странице Подтверждая важность использования графики
в web-документах, наибольшее число расширений фирма Netscape
предложила именно для тега <IMG>. Некоторые из них
предназначены для выравнивания текста и рисунков. Две новых
установки, «left» и «right», позволяют управлять положением
рисунка относительно границ страницы. Остальные предназначены
для исправления того, что Марк Андрисен назвал «ужасными
ошибками», допущенными им при разработке первой спецификации
этого тега.
Чтобы установить выравнивание изображения в HoTMetaL PRO,
поместите точку вставки между открывающим и завершающим тегами
<IMG> и выберите команду Markup д Edit SGML Attributes.
Откроется диалоговое окно
редактирования атрибутов. Синтаксис HTML для определения типа
выравнивания изображения выглядит следующим образом: <IMG
ALIGN=позиция>. В таблице 8.2 описаны возможные
значения атрибута ALIGN,
Таблица 8.2. Возможные значения атрибута ALIGN
Позиция Описание
left Изображение выравнивается по левому полю страницы.
Последующий текст будет размещен справа от него.
right Изображение выравнивается по правому полю страни-
цы. Последующий текст будет размещен слева от него.
top Верх изображения будет выровнен по самому высокому
элементу строки.
texttop Верх изображения будет выровнен по самому высокому
символу в тексте строки. В большинстве случаев это
равносильно предыдущему варианту.
middle Изображение располагается таким образом, чтобы
базовая линия текущей строки проходила по
середине высоты изображения.
absmiddle Середина высоты текущей строки выравнивается по
середине высоты изображения.
baseline Низ изображения выравнивается по базисной линии
текущей строки.
bottom Выравнивает низ изображения по базисной линии те-
кущей строки. Равносильно предыдущему варианту.
absbottom Выравнивает низ изображения по нижней линии
строки.
Управление пространством вокруг
рисунка Существует два расширения Netscape,
предназначенных для увеличения расстояния между изображением и
окружающими его объектами: <IMG VSPACE=n> и
<HSPACE=n>. Без этих атрибутов текст может подойти
вплотную к рисунку. Атрибут VSPACE устанавливает размер
пустого пространства над и под изображением, с помощью
атрибута HSPACE можно задать расстояние между рисунком и
текстом слева и справа от него.
Для более полного управления размещением текста и
изображений на странице предназначен расширенный атрибут CLEAR
тега <BR>. Этот атрибут может принимать три значения:
left, right и all. При CLEAR=left новая строка начнется там,
где освобождается левое поле страницы. При CLEAR=right текущая
строка оканчивается, а следующая начнется только там, где
правое поле страницы свободно. Значение CLEAR=all начнет новую
строку там, где изображения не за-крывают ни левой, ни правой
границы окна просмотра.
Совет Прозрачные GIF-изображения могут использоваться в
качестве вставок, с помощью которых можно размещать рисунки на
заданном расстоянии друг от друга или в заданном месте
страницы. Такие прозрачные вставки могут иметь один пиксель в
высоту и нужный размер по ширине. Помните: чем меньше площадь
изображения, тем быстрее оно будет загружаться.
Добавление рамок и теней Обрамление рисунка
всегда привлекает к нему внимание читателя. Для управления
толщиной рамки вокруг изображения фирмой Netscape был введен
расширенный атрибут BORDER. Чтобы не ввести читателей в
заблуждение, не следует применять этот атрибут в изображении,
которое используется в качестве ссылки, поскольку индикатором
гиперссылки служит стандартная цветная рамка.
Чтобы добавить рамку вокруг изображения при редактировании
документа в HoTMetaL, выберите команду Markup д Edit SGML
Attributes. Откроется окно редактирования атрибутов. В поле
Border введите значение толщины линии в пикселях. В исходном
HTML-коде этот атрибут выглядит следующим образом: <IMG
BORDER=n>, где n - количество пикселей.
Среди других способов привлечения
внимания к изображению - использование декоративных рамок или
эффекта отбрасывания тени. Создание тени заключается в
добавлении толстой темной линии вдоль части границ рисунка.
Особенно хорошо этот эффект выглядит для изображений с
прозрачным фоном.
Использование встроенных рисунков в качестве
горизонтальных разделителей С помощью горизонтальных
разделителей можно визуально разбить web-страницу на несколько
разделов. Чтобы добиться лучшего эффекта, можно применять
вместо стандартных элементов цветные линии или более сложные
фигуры. Такие разделители создаются без помощи тега <HR>
и представляют собой встроенные изображения, которые могут
очень украсить документ. На многих web-страницах использованы
разделители в виде полос с цветовым градиентом (плавным
переходом от одного цвета к другому).
Подобрать подходящий графический файл можно на одном из
web-узлов, адреса которых уже приводились в этой главе.
Использование рисунков в качестве вводных символов для
списков Кроме использования встроенной графики вместо
горизонтальных разделителей, можно заменить рисунками
стандартные вводные символы в неупорядоченных списках. На
многих из упомянутых в этой главе web-узлов с библиотеками
изображений можно найти подходящие для такой замены значки.
Ниже приводится пример HTML-кода, иллюстрирующий создание
перечня гиперссылок с оригинальными вводными символами без
использования стандартного тега неупорядоченного списка
<UL>.
Управление размером изображения Следующие
расширения Netscape для тега <IMG> - атрибуты WIDTH и
HEIGHT, которые в основном используются для ускорения загрузки
документа. Когда броузер Netscape обнаруживает web-страницу с
изображениями, он должен зарезервировать для них прямоугольные
области соответствующей площади. Указанные значения WIDTH и
HEIGHT позволяют уменьшить время, необходимое для расчета
размеров изображения. Если web-броузер не поддерживает этих
атрибутов, он их просто проигнорирует. Если введены
неправильные значения ширины и высоты изображения, оно
масштабируется до указанного размера.
Определить точный размер изображения можно с помощью
графического редактора. Paint Shop Pro, например, выводит
размер изображения и количество использованных в нем цветов в
левой части строки состояния. Как и другие атрибуты тега
<IMG>, значения WIDTH и HEIGHT можно отредактировать с
помощью команды Markup д Edit SGML Attributes. В открывшемся
диалоговом окне необходимо ввести значения для ширины и высоты
изображения соответственно в поля Width и Height. В HTML-коде
эти атрибуты выглядят следующим образом:
<IMG WIDTH=125 HEIGHT=125> Плавная замена
низкокачественной копии изображения его оригиналом с высоким
разрешением
Еще один из расширенных атрибутов Netscape для тега
<IMG>, атрибут LOWSRC, позволяет указать для изображения
его копию низкого разрешения, которая загрузится
первоначально, а впоследствии будет заменена на оригинал с
высоким разрешением. Броузер Netscape отображает web-страницу
в два прохода. Если для изображения определено значение
атрибута LOWSRC, то при первом проходе загружается вариант с
низким разрешением. Когда все изображения на странице будут
загружены, начнется второй проход, и все первоначальные
изображения постепенно исчезнут, заменившись на определенные в
атрибуте SRC оригиналы с высоким разрешением. Броузеры,
которые не поддерживают атрибута LOWSRC, сразу загрузят
оригинал изображения. Чтобы определить значение этого
атрибута, выберите команду Markup д Edit SGML Attributes и
введите имя файла в соответствующее поле окна редактирования
атрибутов. Можно указывать графические файлы в форматах GIF и
JPEG. Если при этом указать размеры рисунка с помощью
атрибутов WIDTH и HEIGHT, оба варианта изображения будут
масштабированы в соответствии с указанными значениями. Ниже
приводится пример тега IMG, в котором определен атрибут
LOWSRC:
<IMG SRC="high-res.gif" LOWSRC="low-res.jpg">
Управление фоном и передним планом окна
просмотра В версию броузера Netscape Navigator 1.1
введено дополнительное расширение, позволяющее управлять
цветом фона и переднего плана окна просмотра. Фон может быть
залит произвольным цветом или заполнен повторяющимся
изображением подобно «обоям» (wallpaper) рабочего стола
(Desktop) в Windows. Имейте в виду, что не все броузеры
поддерживают эту возможность, так что некоторые читатели не
смогут увидеть установленный цвет фона или фоновый рисунок. В
следующих разделах описано, как оформить web-страницу с
помощью этих расширений.
Определение цвета Чтобы задать цвет, необходимо
преобразовать значения его RGB-составляющих в
шестнадцатеричную форму. Как уже упоминалось, Windows
резервирует 20 цветов для отображения окон, а каждое
изображение использует палитру из 256 цветов. Если
используется более 256 цветов, изображения будут искажаться.
Если вы решите, что на вашей странице использовано слишком
много цветов, приведите все изображения в соответствие со
стандартной 256-цветной палитрой Windows. Это уменьшит
опасность неверного вывода оттенков при отображении встроенной
графики. Значения RGB-составляющих в шестнадцатеричной форме
для ста цветов приведены в таблице 8.3. Стандартные цвета
Windows отмечены звездочкой. Заметьте, что в таблице красная,
зеленая и синяя составляющие разделены запятой, однако при
вводе этих значений в HTML-редакторе разделителя не требуется.
Преобразовать значения RGB-составляющих из десятеричной
формы в шестнадцатеричную несложно. В состав Windows входит
расположенный в папке Стандартные (Accessories) калькулятор,
который может автоматически преобразовывать десятичные числа в
шестнадцатеричные. Чтобы сделать такое преобразование,
выполните следующую последовательность действий:
1. Щелкните на кнопке Пуск (Start) панели задач и выберите
пункт Калькулятор (Calculator) в меню Стандартные
(Accessories). В результате откроется окно калькулятора.
2. Выберите команду Вид д Инженерный (View д Scientific).
3. Введите десятичное значение какой-либо из цветовых
составляющих. Например, теплый розовый цвет определяется
следующими составляющими: Red (Красный)=255, Green
(Зеленый)=204, Blue (Синий)=153. Введите для начала число 255.
4. Щелкните кнопкой мыши на переключателе Hex, и в поле
ввода появится шестнадцатеричное значение. Например,
десятичному числу 255 соответствует шестнадцатеричное FF.
Запишите это значение и переключитесь опять в десятичный
режим.
5. Повторите шаги 3 и 4 для синей и зеленой составляющих.
Полученные значения можно использовать для указания цветов
фона и переднего плана документа. О том, как это сделать,
рассказано в следующих разделах.
Таблица 8.3. Шестнадцатеричные коды для некоторых
цветов
Управление цветом фона в Netscape
Navigator Расширение Netscape BGCOLOR является
атрибутом тега <BODY>. Чтобы указать цвет фона,
поместите точку вставки сразу после открывающего тега
<BODY> и выберите команду Markup д Edit SGML Attributes.
Откроется диалоговое окно
редактирования атрибутов. В поле BGCOLOR нужно ввести значения
для красной, зеленой и синей составляющих (RRGGBB) в
шестнадцатеричной форме. Утилита Color Browser, о которой
рассказывается в следующем разделе, поможет выбрать в палитре
нужный оттенок и получить значения его RGB-составляющих. В
таблице 8.3. были приведены эти значения для ста цветов.
В предыдущем разделе была также описана последовательность
действий по преобразованию полученных в графическом редакторе
десятичных значений в шестнадцатеричную форму. Синтаксис HTML
для атрибута BGCOLOR выглядит следующим образом: <BODY
BGCOLOR="#rrggbb"> Текст документа </BODY>
Чтобы определить светло-синий фон окна, следует ввести
следующее: <BODY BGCOLOR="#A5CAF0"> Текст документа
</BODY>
Выбор цвета фона с помощью утилиты Color
Browser С помощью утилиты Color Browser можно выбрать
любой из 16,7 миллионов цветов и получить значения его
RGB-составляющих. Color Browser работает в средах
Windows 3.x, Windows 95 и Windows NT. Эта
программа написана на Visual Basic и требует наличия
библиотеки vbrun300.dll. Если у вас ее еще нет, этот файл
можно найти на принадлежащем Microsoft узле .
Файл vbrun300.dll нужно переписать в каталог Windows. Color
Browser хранит до 16 определенных пользователем цветов. Ниже
описана последовательность действий, позволяющая подобрать
цвет фона страницы с помощью Color Browser и HoTMetaL PRO.
1. Дважды щелкните на значке файла clrbrwsr.exe чтобы
запустить утилиту Color Browser. Откроется окно.
2. Щелкните на кнопке Browse Color, чтобы открыть
диалоговое окно выбора цвета.
3. Чтобы определить собственный цвет, укажите с помощью
мыши нужный оттенок в цветовом поле, а затем с помощью
расположенного справа движка подберите нужную яркость.
Совет 4. Щелкните на кнопке Add to Custom Colors, и
определенный вами цвет появится в одном из шестнадцати
прямоугольников, расположенных под предустановленными цветами.
Щелкните на кнопке OK. Цвет появится в области просмотра
(Sample box) основного окна Color Browser.
5. Снимите флажок Copy with "" marks, чтобы строка с
RGB-значениями копировалась в буфер без символов кавычек.
6. Щелкните на кнопке Copy to Clipboard или нажмите клавиши
Ctrl+C. Шестнадцатеричные значения RGB-составляющих будут
скопированы в буфер Windows, и к ним будет добавлен символ #.
После этого можно вставить эту строку в соответствующее поле
окна редактирования атрибутов HoTMetaL PRO. Нажмите клавиши
Alt+F4, чтобы закрыть Color Browser.
7. Запустите HoTMetaL PRO и откройте страницу, для которой
нужно указать цвет фона.
8. Щелкните кнопкой мыши сразу за открывающим тегом
<BODY> и выберите команду Markup д Edit SGML Attributes.
Откроется диалоговое окно редактирования атрибутов.
9. Щелкните в поле BGCOLOR и нажмите клавиши Ctrl+V.
10. Щелкните на кнопке Apply.
11. Выберите команду File д Save.
12. Щелкните на кнопке Preview, чтобы увидеть, как будет
выглядеть в броузере документ с установленным цветом фона.
Использование фоновых рисунков в Netscape
Navigator В проект спецификаций HTML 3.0 среди
прочих дополнений был включен расширенный атрибут BACKGROUND
для тега . В качестве значения этого атрибута можно определить
URL, указывающий на изображение, которым будет выложен фон в
окне просмотра броузера Netscape. Синтаксис HTML для атрибута
BACKGROUND выглядит следующим образом:
<BODY BACKGROUND="path/image.gif"> Текст документа
</BODY>
Файл изображения может находиться в любом месте. Netscape
предлагает несколько фоновых изображений, среди которых
фактуры ткани, камней и водной поверхности. Их можно найти на
узле http://home.netscape.com/home/. Ниже приведен фрагмент
HTML-кода документа, в котором фон выложен изображением,
хранящемся на узле Netscape.
документ, использующий в качестве фона
прозрачное изображение raindrops_light.gif. Этот рисунок также
можно найти на узле Netscape.
Одной из самых больших проблем при заполнении фона
изображениями являются неровные или несоответствующие друг
другу края рисунка, которые часто портят вид документа. Чтобы
выровнять края фонового изображения, можно использовать фильтр
Seamless Welder, имеющийся в графическом пакете Kai's Power
Tools. Этот фильтр подгоняет края изображения друг к другу
таким образом, что на выложенном им фоне незаметны переходы
между отдельными «плитками».
Передний план : текст и ссылки Помимо изменения
цвета фона, Netscape позволяет указать цвет текста и
гиперссылок на web-странице. Атрибут TEXT позволяет задать
цвет всего текста на странице, за исключением текста ссылок.
Этот атрибут применяется следующим образом:
<BODY TEXT="rrggbb">Текст документа</BODY>
Как и для фона, RGB-составляющие цвета должны быть указаны
в шестнадцатеричном формате. Различные способы определения
значений этих составляющих описаны в разделе «Управление
цветом фона в Netscape Navigator». Вы можете также
воспользоваться для этого таблицей 8.3.
Существуют три атрибута, которые позволяют указать цвет
гиперсссылок: LINK, VLINK и ALINK. Первый из них, LINK,
определяет цвет ссылок на только что открытой странице. По
умолчанию для них определен голубой цвет. Первая буква V в
атрибуте VLINK означает visited - посещены. С помощью этого
атрибута можно изменить цвет для ссылок, по которым читатель
уже путешествовал. По умолчанию они отображаются пурпурным
цветом. В атрибуте ALINK первая буква A означает active -
активные. С помощью этого атрибута задается цвет выбранной
пользователем ссылки (по умолчанию - красный). В следующем
примере устанавливаются следующие цвета: темный циан для фона,
белый - для текста, желтый, серый и пурпурный - для обычных,
использованных и активных ссылок, соответственно.
<BODY BGCOLOR="#000080" TEXT="#FFFFFF" LINK="#FFFF00"
VLINK="#A0A0A0" ALINK="#FF00FF"> Текст документа
</BODY>
Изображения-карты С помощью элемента <IMG>
можно создавать «изображения-карты». Изображение-карта (image
map) представляет собой графическое изображение, в котором
определены «горячие точки», используемые в качестве
гиперссылок. Если читатель щелкнет кнопкой мыши на такой
горячей точке, то, как и при выборе обычной ссылки, он
перейдет к ресурсу, на который указывает определенный для
данной области изображения URL. Изображения-карты позволяют
по-новому компоновать интерактивные web-страницы. Например,
можно создать изображение, представляющее собой блок из
кнопок, каждая из которых предназначена для перехода по
ссылке.
Имейте в виду, что вооруженные текстовыми броузерами
читатели не смогут воспользоваться таким способом навигации, и
создайте для них обычные гиперссылки.
Чтобы разместить на web-странице изображение-карту,
необходимо сначала создать изображение, в котором будут
размещены горячие точки. Постарайтесь подобрать рисунок,
метафорически подчеркивающий содержание вашего документа.
Например, можно использовать изображение группы зданий или
нескольких планет, для каждой из которых определена
собственная ссылка. На странице Архива музыкального
андерграунда Internet (Internet Underground Music Archive,
IUMA) есть рисунки старомодных предметов: старой стиральной
машины, тостера, кофеварки и древнего музыкального центра.
Каждый из этих предметов связан с соответствующими разделами,
например, «Bands» (Группы) или «What's Brewing» (Что
затевается).
Определение «горячих точек» Существует несколько
способов, которыми можно ограничить «горячую» область
изображения. Можно вручную ввести в файл ее координаты и URL
точки назначения, а можно использовать специальную
«картографическую» программу, которая разметит изображение и
создаст для вас соответствующий код.
Можно указать область, вычислив ее координаты, однако это
не самый легкий путь. Такие программы, как Mapedit Томаса
Бутелла (Thomas Boutell) позволяют сэкономить массу времени
при определении горячих точек. Mapedit представляет собой
утилиту, с помощью которой можно выделять в изображении
прямоугольники, окружности и произвольные многоугольники,
автоматически добавляя их координаты в файл разметки карты.
Посмотрите, не появилось ли свежей версии по адресу .
Файл называется mapedit.zip.
Горячие точки могут быть любой формы, например, в виде
круга, прямоугольника или многоугольника. Левый верхний
пиксель изображения используется как начало координат. Ось Y
идет вниз от левого верхнего угла изображения. Все горячие
точки (вернее, «горячие области») определяются в этой системе
координат. В большинстве графических редакторов используется
такая же координатная сетка, поэтому в них можно легко
определить координаты нужных точек. В следующем разделе
объясняется, как создать файл разметки карты (map file) с
помощью Mapedit. Чтобы использовать размеченные изображения,
необходимо специальным образом настроить ваш web-сервер, об
этом рассказано в .
Создание изображения-карты с помощью программы
Mapedit Если вы еще не установили Mapedit, создайте
каталог и скопируйте в него файл mapedit.exe. С помощью
Проводника (Explorer) Windows создайте папку для Mapedit и
мышью перетащите в нее файл mapedit.exe. Ниже описана
последовательность действий по созданию файла карты при помощи
утилиты Mapedit.
1. Дважды щелкните кнопкой мыши на значке файла Mapedit.
Откроется окно этого приложения.
2. Выберите команду File д Open/Create. Откроется
диалоговое окно, с помощью которого
можно открыть существующий или создать новый файл.
3. Выберите вариант NCSA, если вы используете 16-битный
web-сервер Роберта Денни WinHTTPD (для Windows 95), или
вариант CERN - при использовании сервера EMWAC HTTPS (для
Windows NT).
4. Введите название изображения-карты. Под этим именем
будет сохранен файл с координатами горячих точек. По умолчанию
такие файлы хранятся в каталоге httpd\conf\maps. Для сервера
EMWAC HTTPS, замените «httpd» на «https» (получится
https\conf\maps). Все файлы карт необходимо размещать в этом
каталоге, поскольку именно там их ищет программа обработки.
Для соответствия вашей карты приведенным в этой главе
примерам, назовите файл w95imap.map для сервера HTTPD или
wntimap.map для сервера EMWAC HTTPS. Если вы хотите открыть
уже существующий файл карты, щелкните на кнопке Browse и
укажите его в открывшемся диалоговом окне.
5. Введите имя GIF-файла с изображением в поле GIF
Filename. Можно также воспользоваться кнопкой Browse.
6. Щелкните на кнопке OK. Появится сообщение «Map file not
found. Create it?» (Файл карты не найден. Создать его?).
Выберите OK. Файл с изображением будет загружен в Mapedit, и с
ним можно начинать работать. Если изображение большое, процесс
загрузки может занять несколько секунд.
Этот
рисунок состоит из треугольника, круга и квадрата. Файл
shapes.gif создан с помощью пакета трехмерной графики и
анимации trueSpace.
7. Выберите команду File д Edit default URL. Откроется
диалоговое окно редактирования URL для
основной области изображения.
8. Введите URL, который будет соответствовать области
изображения за пределами горячих точек. Если вы хотите
использовать локальный файл, то перед его именем введите
дробную черту. Если вы обращаетесь к документу на другом
сервере, введите полный URL, например, http://www.sq.com/.
Затем щелкните на кнопке OK.
9. Выберите в меню Tools команду, соответствующую форме
области, которую вы хотите задать. В этом меню три команды:
Polygon (многоугольник), Circle (круг) и Rectangle
(прямоугольник). Ниже описано, как размечать области всех этих
форм. Если области перекрываются, URL будет возвращен для той
из них, которая указана в файле карты первой. Если вы хотите
отказаться от определения горячей точки, нажмите клавишу ESC,
чтобы убрать маркировку и начать все сначала. Ниже приведены
примеры для горячих точек всех трех возможных форм.
Многоугольник Щелкните левой кнопкой мыши в любой
точке на границе будущей горячей области. После этого за
указателем мыши будет тянуться от этой точки линия. Щелкните
еще раз в следующей вершине многоугольника, который должен
ограничить область. Укажите таким образом все стороны
многоугольника кроме последней, соединяющей последнюю вершину
с самой первой. Чтобы завершить создание многоугольника,
перейдите к шагу 10.
Круг Поместите указатель мыши в центр будущего
круга. Щелкните левой кнопкой и перемещайте указатель,
расширяя круг. Чтобы завершить его, перейдите к шагу 10.
Прямоугольник Щелкните левой кнопкой мыши в одной
из вершин прямоугольной области, которую вы хотите ограничить.
Перемещайте мышь до тех пор, пока прямоугольник не примет
нужных размеров.
10. Щелкните правой кнопкой мыши, чтобы завершить создание
области. Откроется диалоговое окно ввода URL объекта,
11. Введите URL точки назначения ссылки. В поле Comments
можно ввести ее произвольное описание. После этого щелкните на
кнопке OK. Для рассматриваемого примера следует ввести для прямоугольника.
12. Выберите команду File д Save. Появится сообщение о том,
что карта сохранена. Чтобы закрыть окно сообщения, щелкните на
кнопке OK. Если открыть файл карты в текстовом редакторе,
можно будет увидеть код
Что такое файл карты Конкретный вид файла
разметки карты зависит от того, какой web-сервер используется
- NCSA или EMWAC. Карта представляет собой текстовый файл, в
котором могут содержаться операторы, комментарии и пустые
строки. Этот файл можно отредактировать в любом текстовом
редакторе. Файлы карт имеют расширение .map. В следующих
разделах описаны все компоненты, которые могут появляться в
этих файлах.
Оператор Default При работе с сервером HTTPS
можно сокращать это ключевое слово до def. Оператор default
определяет URL, к которому будет осуществлен переход, если
читатель web-страницы щелкнет кнопкой мыши где-нибудь за
пределами всех размеченных областей. Оба сервера - HTTPS и
HTTPD - имеют одинаковый синтаксис для определения этого
параметра: «default URL». В следующем примере параметр
«default» определяет переход к домашней странице компании
SoftQuad.
default http://www.sq.com
Многоугольники Многоугольные области определяются
в файле карты при помощи оператора polygon.
Сервер HTTPS позволяет сокращать слово «polygon» до «poly».
Описание многоугольника похоже на головоломку «соедини точки»
и имеет вид совокупности вершин: (x0,y0), (x1,y1), (x2,y2)
и т. д. Ниже приведен код для сервера HTTPS, описывающий
треугольную область, связанную с документом GALAXY.html:
Сервер HTTPD также позволяет сокращать слово «polygon» до
«poly». При работе с этим сервером можно создавать
многоугольники с числом вершин не более 100.
Ниже приведен пример кода для сервера HTTPD, описывающий
треугольную область, связанную с домашней страницей EINet
Galaxy.
Круги С помощью оператора circle для сервера
HTTPS можно определить круг с центром в точке с координатами
(x,y) и радиусом r, а также указать URL ресурса, к которому
читатель перейдет, щелкнув в этом круге кнопкой мыши. В
следующем примере для сервера HTTPS определяется круглая
область, связанная с домашней страницей издательства Ventana
Online, которым был издан английский оригинал этой книги.
circle (310,119) 90 http://www.vmedia.com/
В сервере HTTPD указатель URL располагается между ключевым
словом circle и определяющими круг координатами. В следующем
примере для сервера HTTPD также определяется круглая область,
связанная с домашней страницей компании Ventana Online.
circle http://www.vmedia.com/ 309,118 371,184
Прямоугольники Сервер HTTPS позволяет сокращать
ключевое слово rectangle до rect. С помощью этого оператора
задается прямоугольник, левый верхний угол которого находится
в точке с координатами (x0,y0), а правый нижний - в
точке (x1,y1), а также URL, к которому осуществляется переход
при щелчке кнопкой мыши в ограниченной таким образом области
изображения. Ниже приведена строка кода для сервера HTTPS,
определяющая прямоугольную область, связанную с базой данных
web-узлов Yahoo.
rect (451,29) (632,211) http://www.yahoo.com/
В сервере HTTPD указатель URL располагается перед
координатами прямоугольника. Ниже приведена строка кода для
сервера HTTPD, определяющая прямоугольную область, связанную с
базой данных web-узлов Yahoo.
rect http://www.yahoo.com/ 451,29 632,211
Использование атрибута ISMAP Изображение-карта
определяется с помощью атрибута ISMAP элемента <IMG>.
При щелчке кнопкой мыши на изображении, отмеченном этим
атрибутом, броузер должен добавить к URL координаты указателя
мыши и отправить их серверу. В теге якоря <A> должен
быть определен URL, указывающий на файл карты, который
находится на HTTP-сервере. Файл карты - это текстовый
файл, в котором определяются координаты горячих точек в
изображении. Читатель страницы, щелкнув на такой горячей
точке, перемещается к ресурсу, с которым она связана. Если
атрибут ISMAP не определен, координаты указателя мыши не
пересылаются.
Чтобы добавить атрибут ISMAP в HoTMetaL PRO, поместите
точку вставки между открывающим и завершающим тегами
<IMG> и выберите команду Markup д Edit SGML Attributes.
Укажите значение для атрибута ISMAP в открывшемся диалоговом
окне. HTML-код при этом может выглядеть, например, следующим
образом: <IMG SRC="shapes.gif" ISMAP>
Иногда атрибут ISMAP определяется так: <IMG
SRC="shapes.gif" ISMAP="ISMAP">
Наличие атрибута ISMAP сигнализирует броузеру о том, что
изображение является картой. Элемент <IMG> при этом
должен быть включен в элемент якоря, чтобы броузер «знал»,
куда ему отправлять сообщение, когда пользователь нажимает
кнопку мыши в пределах изображения. Когда происходит это
событие, броузер посылает серверу запрос, состоящий из
указанного в теге якоря URL и координат указателя мыши.
Web-сервер обычно запускает внешнюю программу, которая на
основе файла карты осуществляет преобразование координат
указателя мыши в URL другого гипертекстового документа.
Включение карты в файл конфигурации сервера
HTTPD Если вы используете сервер HTTPD, необходимо
сделать некоторые настройки в конфигурационном файле
изображений-карт imagemap.cnf. Этот текстовый файл находится в
каталоге httpd/conf. Добавить свои файлы карт к уже описанным
в конфигурационном файле можно с помощью простого текстового
редактора, такого как Блокнот Windows (Notepad). Программа
обработки координат изображений-карт сервера HTTPD требует,
чтобы все файлы карт были описаны в конфигурационном файле
imagemap.cnf, иначе она просто не сработает. В приведенном
ниже примере к существующему файлу конфигурации добавлено
описание карты w95imap.map, которая была создана в процессе
выполнения приведенных в этой главе упражнений.
