Web – графика

Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web- документов. Сегодня графические элементы Web – страницы используют два основных формата – GIF и JPEG (новый формат PNG пока еще нельзя считать общепринятым). Все графические браузеры, предназначены для отображения Web- страниц на экране компьютера, способны распознавать и отображать файлы этих форматов.

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

Файлы формата GIF (Graphic Interchange Format) имеют расширение GIF. Изображение в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растровый рисунок (например, в формате BMP). Спецификация формата GIF89a позволяет создавать файлы GIF, обладающие специальными возможностями.

o Один из цветов изображения может быть объявлен прозрачным. Это означает, что в соответствующих местах сквозь него будет проглядывать фон Web – страницы, что позволяет задать не только прямоугольную форму рисунка, но и делать его более естественным.

o Чересстрочные изображения при их приеме из Интернета прорисовывается постепенное, вначале грубо, а затем все более четко. Это «скрадывает» время, необходимое на их загрузку из Интернета, особенно при приёме информации по медленным линиям.

o GIF- анимация превращает обычный рисунок в небольшой видеоролик. В стандартном файле с расширением GIF хранится набор кадров, а так же сценарий их отображения.

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

Файл формата JPEG(Joint Photographic Expert Group – по названию группы исследователей, предложивших этот формат, читается «джей - пег») могут иметь расширение JPEG или JPG. Формат предназначен для хранения фотографических изображений, использующих 24- разрядный цвет. При конвертировании в формат JPEG происходит потеря части информации, приводящая к некоторому ухудшению качества изображения, обычно незаметному на глаз.

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

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

< IMG SRC= “picture1.gif “>

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

<IMG SRC=“picture2.jpg”WIDTH=”100”HEIGHT=”40”>

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

Для изображения, которое действительно включено в строку, можно задать режим взаимодействия с текстом с помощью атрибута ALIGN=.

<IMG SRC=”picture3.gif”ALIGN=”BOTTOM”>)

Этот атрибут может принимать три значения:

· Если заданно ALIGN=”BOTTOM”, то нижняя граница изображения совмещается с основанием текстовой строки;

· Если заданно ALIGN=”MIDDLE”, то нижняя граница изображения совмещается с основанием текстовой строки;

· Если заданно ALIGN=”TOP”, то верхняя граница изображения выравнивается по верхнему образу текстовой строки.

Однако более предпочтительно использование «плавающего» изображения, обтекаемого текстом, что также достигается использованием атрибута ALIGN=:

· Если заданно ALIGN=”LEFT”, то изображение размещается у левого края страницы, а последующий текст размещается слева от него;

· Если заданно ALIGN=”RIGHT”, то изображение размещается у правого края страницы, а последующий текст размещается слева от него.

В этом случае рекомендуется помещать тег <IMG> в самое начало соответствующего абзаца.

Однако нормальный режим требует, чтобы между текстом и изображением оставался некоторый промежуток (рис.19.3). Задать величину этого промежутка можно при помощи атрибутов HSPACE=(по горизонтали) и VSPACE=(по вертикали). Размеры задаются в пикселях.

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

Так как изображение задается как текстовый элемент, оно может быть помещено внутрь другого текстового элемента, например, задающего гиперссылку (тег <A>). В этом случае изображение становится изображением – ссылкой. При отображении документа на экране компьютера такое изображение отличается синей рамкой и изменением формы указателя при наведении.

Еще один способ применения на Web- страницах состоит в использовании их в качестве фонового рисунка. При отображении документа, содержащего фоновый рисунок, на компьютере рабочая область окна заполняется этим рисунком последовательно (как паркетом), считая от верхнего левого угла документа или окна (рис.19.4). Фоновый рисунок задается с помощью атрибута BACKGROUND= в теге <BODY>. Значением этого атрибута должен быть абсолютный или относительный адрес URL для файла с изображением.

<BODY BACKGROUND=”waves.gif” TEXT=”YELLOW”>