Известно, что с помощью графики можно точнее передать идеи и назначение любого издания, в том числе и электронного. Без иллюстрации полосы набора выглядят однообразными, а хорошо подобранная и умело размещенная графика делает издание гораздо более привлекательным. Ограничения в использовании графики с позиций эстетики связано с опасностью загромождения документа изображениями, в том числе и фоновыми, и навязчивой анимацией, зачастую не связанной непосредственно с тематикой издания.
С технической точки зрения изображения требуют значительно большего объема информации, чем простой текст, поэтому может возникнуть информационная перегрузка, особенно при использовании сетевых технологий с каналами недостаточной пропускной способности. Известно, что многие пользователи сети Интернет отключают за грузку графических файлов, чтобы быстрее загрузить документ и ознакомиться с ним. Несколько улучшило положение применение компактных форматов графических файлов, таких как JPEG (с частичной потерей информации), GIF и PNG. В качестве иллюстрации сказанного можно привести данные по информационному объему файла, в котором хранится рис. 2.6: в формате TIFF - 46 Кб, JPEG - 31 Кб, PNG - 8 Кб и GIF - около 5 Кб.
Мы уже сталкивались с использованием изображения в качестве фонового при знакомстве с тегом <BODY>. Для этого в параметре BACKGROUND указывался URI-файла, хранящего изображения. Если в электронных изданиях, распространяемых на носителях, можно использовать практически любые графические файлы, то для сетевых изданий преимущественно используются GIF-файлы, реже файлы в формате JPEG.
Основным средством встраивания изображений в текст служит тег <IMG>, обязательным параметром которого является SRC, значение которого - адрес (URL) файла изображения. Параметр выравнивания изображения на полосе ALIGN может принимать восемь различных значений, определяющие различные способы его размещения на странице, два параметра позволяют установить размер изображения, еще два - расстояние от границы изображения до текста, отдельный параметр позволяет создать вокруг изображения рамку, а еще один - задать альтернативный текст, который будет выведен вместо изображения при отказе пользователя от его загрузки. Рассмотрим последовательно эти параметры.
Выравнивание изображения осуществляется двумя принципиально различными способами:
по левому или правому краю наборной полосы (аналог оборочной иллюстрации в печатном тексте);
изображение встраивается как элемент одной из строк текста (печатного аналога такого способа выравнивания нет, более того, в печатном издании такое расположение рисунка совершенно недопустимо).
Для выравнивания изображения по левому или правому краю окна браузера параметру ALIGN присваиваются значения LEFT или RIGHT соответственно, а текст обтекает рисунок с противоположной стороны. Для задания размеров изображения используются параметры WIDTH (ширина) и HEIGHT (высота), причем значения каждого параметра могут задаваться как в абсолютных единицах - пикселах, так и в относительных - процентах от соответствующего размера окна браузера. Реальные размеры изображения могут не совпадать со значениями параметров WIDTH и HEIGHT. В этом случае браузер автоматически масштабирует изображение по отдельным координатам.
Графические изображения могут задаваться в двух основных форматах: векторном и растровом. В соответствии с первым форматом создаются файлы сравнительно малого информационного объема, легко масштабируемые, однако в них не может быть достигнуто высокое художественное качество. Кроме того, преобразование описания изображения, содержащегося в файле, в реальный рисунок требует значительных вычислительных ресурсов.
Растровый формат масштабируется с искажениями, файлы в нем имеют большой информационный объем, но он обеспечивает достаточно высокое качество изображения. Кроме того, сама подготовка компьютерных графических файлов связана с оцифровкой (преобразованием в цифровой формат) реальных изображений, например рисунков и фотографий. Для этой цели используются так называемые сканеры, которые преобразуют изображение в один из растровых форматов, чаще TIFF.
С растровыми же форматами работают цифровые фото- и видеокамеры, которые все шире используются в современных издательских технологиях для прямого преобразования изображения в его цифровой эквивалент.
Поэтому масштабирование оправдано только для векторной графики, для растровой же следует определить реальные размеры изображения по горизонтали и вертикали в пикселах и задать эти размеры в параметрах WIDTH и HEIGHT. При этом:
изображение будет выведено в реальных размерах и без искажений;
при сетевом распространении документа пользователь сразу будет знать размеры изображения, а в остальную часть документа будет без промедления загружаться текст.
Остановимся кратко на других способах выравнивания изображения в электронном издании. Соответствующие значения параметра ALIGN следующие: ТОР, ТЕХТТОР, BOTTOM, BASELINE, ABSBOTTOM, MIDDLE, ABSMIDDLE. Значение TOP выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, а ТЕХТТОР - по самому высокому текстовому элементу. Смысл различия в том, что элементом строки можетбыть и другое изображение. Значения BASELINE и BOTTOM действуют одинаково и выравнивают нижнюю границу изображения по базовой линии текущей строки, т. е. линии, на которой «стоят» шрифтовые элементы (нижние выносные элементы символов находятся под базовой линией), a ABSBOTTOM - выравнивает нижнюю границу изображения по нижней границе текущей строки, включая все элементы строки, в том числе и графические, если они имеются. Наконец, значения MIDDLE и ABSMIDDLE выравнивают середину изображения по базовой линии или посередине текущей строки соответственно. Еще раз отметим, что по нашему мнению, применение параметров выравнивания этой группы в большинстве случаев снижает качество оформления страницы, противоречит основным принципам дизайна полос.
Чтобы выделить изображение в текстовом документе, полезно предусмотреть незанятое текстом пространство вокруг него. Это можно осуществить с помощью параметров HSPACE и VSPACE, которые определяют отступы (осветленное пространство) по горизонтали и вертикали в пикселах. Для выделения изображения на странице можно заключить его в рамку, толщина которой в пикселах задается с помощью параметра BORDER. Наконец, для пользователей, работающих в режиме отключения загрузки графики, возможность вывода альтернативного текста дает параметр ALT. В случае же загрузки изображения при выводе на него курсора мыши появляется текст подсказки во всплывающем окне. Ниже приводятся пример тега <IMG> с различными параметрами:
<HTML><HEAD><TITLE> Пример вставки изображения в документ </TITLE></HEAD>
<Р ALIGN='Justify'> В данном документе рисунок выравнивается влево, т. е. он должен размещаться в левом верхнем углу. Размеры рисунка 60 на 60 пикселей. Рисунок окружен рамкой шириной в 5 пикселей и отделен от текста полями по 10 пикселей с каждой стороны. Текст размещается справа от рисунка и, в дальнейшем, ниже его.</Р></BODY></HTML>
Приведенный выше HTML-документ отображался в браузере MS Internet Explorer и полученное в окне браузера изображение показано на рис. 2.7. В частности, на рисунке видна надпись «Рельеф земной поверхности», заданная в виде значения параметра ALT и возникающая на экране при подведении указателя мыши к изображению.
В заключение отметим, что фирма Netscape в своем браузере предусмотрела возможность использования еще одного параметра втеге<1МС>, а именно LOWSRC. В качестве значения этого параметра указывается графический файл с альтернативным изображением того же самого объекта, но с гораздо более низким разрешением и глубиной цвета. В результате альтернативное изображение имеет на порядок меньший информационный объем и быстро загружается на Web-страницу, а только позднее загружается основное изображение. Пример записи тега с этим параметром представлен ниже:
<IMG SRC=globus.gif LOWSRC=low-globus.gif>
Следует заметить, что размеры этих двух изображений должны совпадать. Если параметр LOWSRC задает изображение меньших размеров, то основное изображение будеттакже трансформироваться к этим меньшим размерам. Чтобы избежать возникающих вследствие этого эффекта искажений, следует в теге <IMG> указать действительные размеры основного
изображения в пикселах стем, чтобы при первом проходе и загрузке вспомогательного изображения размеры последнего приводились к размерам основного, а не наоборот.
