Читать онлайн «Электронные издания». Страница 14

Автор Владимир Вуль

<html><head> <title>Cписок терминов и определений</title> </head>

<DL> <DT>Пиксел

<DD>Наименьший элемент изображения, который характеризуется постоянством параметров по всей своей поверхности

<DT>Разрешение монитора

<DD>Разрешение монитора определяется количеством пикселов на единицу длины и составляет около 96 пикселей на дюйм

<DT>Линиатура растра

<DD> Частота размещения растровых точек в плоскости изображения, измеряется числом линий на дюйм

</DL> </body> </html>

Отображение этого файла в окне просмотра браузера показано на рис. 2.5. Как следует из записи исходного HTML-документа никаких попыток выравнивания текста и формирования отступов не производилось. Сами тэги <DT> и <DD> так форматируют текст, что обеспечивают оптимальное его восприятие пользователем. Фон документа задается определенным уровнем серого, в соответствии со значением параметра BGCOLOR в тэге <BODY>. Кстати, язык HTML, как следует из представленного выше фрагмента HTMLкода, нечувствителен к регистру.

Рис. 2.5. Пример отображения в браузере документа – списка определений

2.3.4. Многоуровневые списковые структуры Многоуровневые списки в HTML-документах могут создаваться путем вложения одного типа списка внутрь другого. Например, фрагменты нумерованного списка могут быть вложены внутрь маркированного или наоборот. Сказанное иллюстрируется простым примером, в котором перечисляются спутники некоторых планет нашей солнечной системы.

<HTML>

<HEAD>

<TITLE>Пример двухуровневого списка</TITLE> </HEAD>

<BODY> <UL> <B> Спутники планет </B>

<BR>....

<LI> ЗЕМЛЯ

<LI>МАРС

<OL> <LI> Фобос

<LI>Деймос </OL>

<BR>....

</UL> </BODY> </HTML>

Отображение двухуровневого списка в окне браузера показано на рис. 2.6. Внутри тэга-контейнера маркированного списка <UL> размещены 2 контейнера нумерованного списка <OL> и </OL> со своими тэгами <LI> каждый. Дополнительный отступ слева обеспечивает хорошую читаемость текста. По этой схеме можно создавать и многоуровневые списки.

Рис. 2.6. Пример отображения в браузере двухуровневого списка

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

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

С технической точки зрения изображения требуют значительно большего объема информации, чем простой текст, поэтому может возникнуть информационная перегрузка, особенно при использовании сетевых технологий с каналами недостаточной пропускной способности. Известно, что многие пользователи сети Интернет отключают загрузку графических файлов, чтобы быстрее загрузить документ и ознакомиться с ним. Несколько улучшило положение применение компактных форматов графических файлов, таких как JPEG (с частичной потерей информации), GIF и PNG. В качестве иллюстрации сказанного можно привести данные по размеру файлов различного формата, в каждом из которых хранятся одни и те же графические данные, представленные на рис.2.7, а именно TIFF – 46 Кбайт, JPEG – 31 Кбайт, PNG – 8 Кбайт и GIF – около 5 Кбайт.

Мы уже сталкивались с использованием изображения в качестве фонового при знакомстве с тэгом <BODY>. Для этого в параметре BACKGROUND указывался URL файла, хранящего изображения. Если в электронных изданиях, распространяемых на носителях, можно использовать практически любые графические файлы, то для сетевых изданий преимущественно используются GIF-файлы, реже файлы в формате JPEG.

Основным средством встраивания изображений в текст служит тэг <IMG> (Image изображение), обязательным параметром которого является SRC (Source источник), значение которого – адрес (URL) файла изображения. Параметр выравнивания изображения на полосе ALIGN может принимать 8 различных значений, определяющих различные способы его размещения на странице, два параметра позволяют установить размер изображения, еще 2 —расстояние от границы изображения до текста, отдельный параметр позволяет создать вокруг изображения рамку, а еще один – задать альтернативный текст, который будет выведен вместо изображения при отказе пользователя от его загрузки. Рассмотрим последовательно эти параметры.

Выравнивание изображения осуществляется двумя принципиально различными способами:

✓ по левому или правому краю наборной полосы (аналог оборочной иллюстрации в печатном тексте);

✓ изображение выстраивается как элемент одной из строк текста (печатного аналога такого способа выравнивания нет, более того, в печатном издании такое расположение рисунка совершенно недопустимо).

Для выравнивания изображения по левому или правому краю окна браузера параметру ALIGN присваиваются значения LEFT или RIGHT соответственно, а текст обтекает рисунок с противоположной стороны. Для задания размеров изображения используются параметры WIDTH (ширина) и HEIGHT (высота), причем значения каждого параметра могут задаваться как в абсолютных единицах – пикселах, так и в относительных – процентах от соответствующего размера окна браузера. Реальные размеры изображения могут не совпадать со значениями параметров WIDTH и HEIGHT. В этом случае браузер автоматически масштабирует изображение по отдельным координатам.

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

Растровый формат масштабируется с искажениями, файлы в нем имеют большой объем, но он обеспечивает достаточно высокое качество изображения. Кроме того, сама подготовка компьютерных графических файлов связана с оцифровкой (преобразованием в цифровой формат) реальных изображений, например, рисунков и фотографий. Для этой цели используются так называемые сканеры, которые преобразуют изображение в один из растровых форматов, чаще TIFF. С растровыми же форматами работают цифровые фото и видеокамеры, которые все шире используются в современных издательских технологиях для прямого преобразования изображения в его цифровой эквивалент.

Поэтому масштабирование оправдано только для векторной графики, для растровой же следует определить реальные размеры изображения по горизонтали и вертикали в пикселах и задать эти размеры в параметрах WIDTH и HEIGHT. При этом:

✓ изображение будет выведено в реальных размерах и без искажений;

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

Остановимся кратко на других способах выравнивания изображения в электронном издании. Соответствующие значения параметра ALIGN следующие: TOP (самое верхнее), TEXTTOP (самое верхнее для текста), BOTTOM (нижнее), BASELINE (базовая линия), ABSBOTTOM (Absolutely Bottom – самое нижнее), MIDDLE (среднее), ABSMIDDLE (Absolutely Middle – абсолютная средняя).

Значение TOP выравнивает верхнюю границу изображения по самому высокому элементу текущей строки, а TEXTTOP – по самому высокому текстовому элементу. Смысл различия в том, что элементом строки может быть и другое изображение. Значения BASELINE и BOTTOM действуют одинаково и выравнивают нижнюю границу изображения по базовой линии текущей строки, т. е. линии, на которой "стоят" шрифтовые элементы (нижние выносные элементы символов находятся под базовой линией), а ABSBOTTOM – выравнивает нижнюю границу изображения по нижней границе текущей строки, включая все элементы строки, в том числе и графические, если они имеются. Наконец, значения MIDDLE и ABSMIDDLE выравнивают середину изображения по базовой линии или посередине текущей строки соответственно. Еще раз отметим, что применение параметров выравнивания этой группы в большинстве случаев снижают качество оформления страницы и противоречат основным принципам дизайна полос.

Чтобы выделить изображение в текстовом документе, полезно предусмотреть незанятое текстом пространство вокруг него. Это можно осуществить с помощью параметров HSPACE (Horisontal Space – расстояние по горизонтали) и VSPACE (Vertical Space – расстояние по вертикали), которые определяют отступы (осветленное пространство) по горизонтали и вертикали в пикселах. Для выделения изображения на странице можно заключить его в рамку, толщина которой в пикселах задается с помощью параметра BORDER (рамка). Наконец, для пользователей, работающих в режиме отключения загрузки графики, возможность вывода альтернативного текста дает параметр ALT (Alternate альтернативный). В случае же загрузки изображения при выводе на него курсора мыши появляется текст подсказки во всплывающем окне. Ниже приведен пример тэга <IMG> с различными параметрами: