Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать неотразимый комплимент Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Использование графики при оформлении электронного издания





Доверь свою работу кандидату наук!
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

 

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

С технической точки зрения изображения требуют значительно большего объема информации, чем простой текст, поэтому может возникнуть информационная перегрузка, особенно при использовании сетевых технологий с каналами недостаточной пропускной способности. Известно, что многие пользователи сети Интернет отключают за грузку графических файлов, чтобы быстрее загрузить документ и ознакомиться с ним. Несколько улучшило положение применение компактных форматов графических файлов, таких как 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>

<BODYXIM6 SRC=globus.jpg ALIGN=LEFT WIDTH=40% HEI6HT=40% HSPACE=8 VSPACE=10 BORDER=5 А1/Г='Рельеф земной поверхности'>

<Р 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> указать действительные размеры основного

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

 







Date: 2015-05-22; view: 398; Нарушение авторских прав



mydocx.ru - 2015-2022 year. (0.008 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию