1989 году компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две особенности. Первая называется "transparancy" и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно "подогнать" части изображений друг к другу не представляется возможным. Убрать ненужный фон из файла GIF можно встроенной процедурой графического редактора Adobe Photoshop. Другая особенность стандарта GIF89a заключается в том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена GIF-анимация. JPEG (Joint Photographic Experts Group, объединенная группа экспертов в области фотографии) - графический стандарт, созданный на основе одноименного алгоритма сжатия, изображений с потерей качества, кодирующего не идентичные элементы, а межпиксельные интервалы. Механизм сжатия изображения в файл формата JPEG. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) - для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной но принципу непрерывного спектра. Вторя ступень - собственно компрессия; из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8х8 точек, и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация - менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке. JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Существует несколько разновидностей стандарта JPEG. Формат JPEG Baseline Optimized основан на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG - возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF. PNG (Portable Network Graphics, портативная сетевая графика), пользователи придумали этой аббревиатуре иную расшифровку: Picture is Not GIF. PNG поддерживает interlacing (черезстрочность) не только по горизонтали, но и по вертикали. Палитра PNG позволяет создавать изображения с глубиной цвета до 48 бит, а также поддерживает альфа-канал, но состоит он не из одного уровня, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности от 0 до 99%. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной "гамма" в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этот формат поддерживают броузеры Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Оптимизация графических изображений. При сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество "лишних" данных, таких, например, как невидимые текстовые комментарии, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т.д. Все эти дополнения увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений с использованием специальных программ - оптимизаторов графики. 7.2 Включение графики в web-страницуВключение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом: <IMG src=”URL” аlign=”значение” border=”значение”width=”значение” height=”значение” alt=”текст”hspace=”значение”vspace=”значение”ismap>В качестве параметра атрибута src указывается путь к изображению в виде либо полного URL (например, http: // www. mys1te. ru/images/picture. jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,. . /Images/picture. jpg). С помощью атрибута align картинка позиционируется в документе HTML. Этот атрибут может принимать значения: right - изображение выравнивается по правому краю, left - изображение выравнивается по левому краю, center - изображение выравнивается по центру, texttop или top - изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка,absbottom или bottom - изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки,absmiddle или middle - центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки,baseline - изображение выравнивается по условной "базовой линии". Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Атрибут border управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение border равным нулю. В качестве параметров атрибутов width и height указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах. Атрибут alt содержит альтернативный текст, который отображается вместо картинки в браузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в виде всплывающей "подсказки", если пользователь задержит на изображении курсор мыши. Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу. Атрибут ismap говорит о том, что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Пример применения тега <IMG>: <IMG src=”/images/sunset. ipg”align=”CENTER” width=”325” height=”215” аlt=”Красивый закат на берегу Карибского моря”>7.3 Изображения ссылкиДля того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом: <А href=”URL документа, на который организуется ссылка”> <IMG src=”URL изображения”align=”значение”width=”значение”hеight=”значение”alt=”альтернативный текст”bоrder=”значение”></А>Пример кода HTML, позволяющего использовать изображение в качестве гиперссылки: <А href=”/hobbie/index. htm1”> <IMG src=”/mages/hobbie. jpg” align=”BASELINE”width=”315” height=”226” alt=”Тематический раздел 'Мои увлечения'” border=”0”></A>7.4 Карты ссылокКарта ссылок (image map) представляет собой графическое изображение, разбитое на фрагменты, причем каждый фрагмент является одновременно гиперссылкой. Для задания карты ссылок необходимо: 1. Задать изображение карты с указанием того, что это изображение представляет собой карту, а не простой рисунок. 2. Разбить изображение на отдельные фрагменты и составить их описание. 3. Описать каждый фрагмент. Графические карты создаются с помощью тега <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом: <МАР name=”имя карты”><AREA href=”URL” shаре=”параметр” coords=”x1, y1, x2, y2”аlt=”альтернативный текст”target=”параметр”nohref> </МАР>Атрибут name тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. При задании имени карты необходимо соблюдать регистр. Тег <AREA> определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут alt определяет всплывающую подсказку при наведении курсора мыши на данный элемент. Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect - прямоугольник, circle - круг или poly - многоугольник. Атрибут coords позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута: |
Значение shape | Синтаксис записи coords | Значения параметров coords | | shape=rect | coords=”xl,yl,x2,y2” | x1 и yl - координаты левого верхнего угла фигуры, x2 и y2 - правого нижнего | | shape=circle | coords="x,y,r" | х и y - координаты центра окружности, r - ее радиус в пикселах | | shape=poly | coords="x1,y1,x2,y2, x3,y3,... xn,yn,x1,y1" | x1, y1... xn, yn - координаты вершин многоугольника | | |
Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. То есть, значение х возрастает справа налево, а значение у - сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: shape="rect" coords= "0,0,50%,50%". Если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA> первой, имеет приоритет. Значения атрибута target такие же, как и у тега <A>. Необязательный атрибут nohref определяет неактивные участки карты и исключает переходы при щелчке мышью по данному фрагменту. Пример 1. Пусть изображение состоит из четырех прямоугольников, а его полный размер составляет 340x60 пикселов. Каждый из этих прямоугольников может быть использован в качестве фрагмента карты ссылок. <IMG src=”map1. gif” usemap=”#refer”> <MAP name=”refer”> <AREA shape=”rect” coords=”0,0,169,29” href=”html. html”> <AREA shape=”rect” coords=”170,0,339,29” href=”css. html”> <AREA shape=”rect” coords=”0,30,169,59” href=”dhtml. html”> <AREA shape=”rect” coords=”170,30,339,59” href=”javascript. html”> </MAP> Пример 2. Пусть изображение состоит из многоугольников, а его полный размер составляет 370x120 пикселов. Координаты вершин многоугольников задаются последовательно, причем первая и последняя координаты должны совпадать, чтобы многоугольник был замкнутым. 1 3 <IMG src=”map2. gif”
Страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
|
