Разработка веб-приложений: учебное пособие

2. Язык гипертекстовой разметки

2.7. Графика

Возможность использования графики на веб-страницах трудно переоценить. Без иллюстраций документ однообразен, вял и скучен. Правильно подобранная графика делает документ визуально привлекательнее. Изображения могут сделать текст документа более содержательным и помогают лучше передать суть документа.

Однако во всем нужно чувство меры. Довольно часто встречаются веб-страницы, загроможденные фоновыми изображениями, ничего не выражающей графикой и раздражающей анимацией. Планируя разместить на веб-странице то или иное изображение, убедитесь, что оно действительно необходимо.

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

Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для загрузки страницы.

Иногда пользователи работают в режиме отключения графики для увеличения скорости передачи данных. В этом случаи от полученных документов останется только текстовая часть, которая должна давать информацию о содержательной стороне документа.

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

В общем, изображения на веб-страницах могут использоваться двумя способами:

фоновое изображение, на котором располагаются элементы основного документа;
изображение, встраиваемое в документ.

Надежной поддержкой во Всемирной паутине обладают три формата изображений: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group) и PNG (Portable Network Graphics).

GIF – самый старый из трех форматов, распространенных во Всемирной паутины. Как правило, он используется для изображений, в которых много областей с однородной заливкой.

Формат JPEG хорошо подходит для фотографий и поддерживается всеми цифровыми фотоаппаратами. Кроме того JPEG – единственный распространенный формат с надежной поддержкой встроенных цветовых профилей.

Спецификация PNG была разработана и утверждена W3C и являлась реакцией на ограниченность формата GIF с точки зрения технических характеристик и доступности.

Формат BMP является стандартом MS Windows и поддерживается браузерами, однако его применять не рекомендуется, так как он не поддерживает сжатие данных.

Фоновые изображения.

Разработчики веб-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания фонового изображения в документе используется атрибут background тега <body>.

Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени.

Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала.

При выборе фонового изображения следует не забывать о необходимости контраста между цветом текста и фона. Неудачное соотношение цветов может затруднить чтение текста.

CSS предоставляют большие возможности для управления фоновым изображением.

Встраивание изображений в HTML-документы.

Для встраивания изображений в HTML-документ следует использовать тег <img>, имеющий обязательный атрибут src, определяющий URL-адрес файла с изображением.

<img src="http://www.server.ru/pic/risunok.gif">

или

<img src="risunok.gif">

Данный тег может иметь ряд других атрибутов.

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением атрибута align тега <img>, который может принимать следующие значения:

tор – верхняя граница изображения выравнивается по самому высокому элементу текущей строки;
texttop – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки;
middle – выравнивание середины изображения по базовой линии текущей строки;
absmiddle – выравнивание середины изображения посередине текущей строки;
baseline или bottom – выравнивание нижней границы изображения по базовой линии текущей строки;
absbottom – выравнивание нижней границы изображения по нижней границе текущей строки;
left – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны;
right – изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.

<img src="risunok.gif" align="top">

Все значения атрибутов выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения атрибута – left и right. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.

К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки.

По умолчанию изображения выравниваются по базовой линии.

В чем разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассматриваемой строки.

Базовая линия (baseline или bottom) – это нижняя часть линии текста, которая проводится без учета нижней части некоторых символов, например, букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т. е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии.

Аналогично обстоит дело с различием между параметрами tор и texttop. Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква.

Тег <img> имеет два необязательных параметра, указывающих размеры изображения при отображении – width и height. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра:

<img src="risunok.gif" width="90%">

Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению.

Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций.

Для тега <img> можно задавать параметры hspace и vspace, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.

Изображение на веб-странице можно поместить в рамку различной ширины. Для этого служит параметр border тега <img>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется (border="0").

<img src="risunok.gif" border="2">

Одним из параметров тега <img> является параметр alt, определяющий альтернативный текст. Его указание дает возможность пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях.

При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра alt. Браузеры также могут отображать альтернативный текст в качестве подсказки при помещении курсора мыши в область изображения.