2.3.3. Списки определений
В научно-технических и учебных изданиях
нередко используют
списки
или словари определений, которые в
зарубежных книгах называют глоссариями.
(Например, см.
).
Каждый элемент такого списка начинается
с определяемого термина, после которого
следуетего определение. Для создания
списка определений служит тег-контейнер
<DL> (Definition List), внутри котороготег<ОТ>
(Definition Term) задает определяемый термин
в форме единственной строки, а тег<00>
(Definition Description) предшествует абзацу с
определением этого термина. Для примера
приведем фрагмент списка определений
для компьютерной графики.
<html><head><title>Cписок терминов и определений </title></head>
<body bgcolor=#d5d5d5><DL><ОТ>Пиксел
<DD>Наименьший элемент изображения, который характеризуется постоянством параметров по всей своей поверхности <DT> Разрешение монитора
<DD> Разрешение монитора определяется количеством пикселов на единицу длины и составляет около 96 пикселей на дюйм <ОТ>Линиатура растра
<DD> Частота размещения растровых точек в плоскости изображения, измеряется числом линий на дюйм </DL></body></html>
Отображение этого файла в окне просмотра
браузера показано на рис. 2.5
.
Как следует из записи исходного
HTML-документа никаких попыток выравнивания
текста и формирования отступов не
производилось. Сами теги <DT> и <DD>
так форматируют текст, что обеспечивают
оптимальное его восприятие пользователем.
Фон документа задается определенным
уровнем серого в соответствии со
значением параметра BGCOLOR в теге <BODY>.
Кстати, язык HTML, как следует из
представленного выше фрагмента HTML-кода,
нечувствителен к регистру.
2.3.4. Многоуровневые списковые структуры
Многоуровневые
списки в HTML-документах могут создаваться
путем вложения одного типа списка внутрь
другого. Например, фрагменты нумерованного
списка могут быть вложены внутрь
маркированного или наоборот. Сказанное
иллюстрируется простым примером, в
котором перечисляются спутники некоторых
планет нашей солнечной системы.
<HTML><HEAD><TITLE> Пример двухуровневого списка </TITLE></HEAD
<BODY><OL><B> Спутники планет </В>
<BR> ....
<LIбл/> ЗЕМЛЯ
<OL><LI> Луна </OL>
<LI>MAPC
<OL><LI> Фобос
<LI> Деймос </OL>
<BR> ....
</UL></BODY></HTML>
Отображение двухуровнего списка в окне
браузера показано на рис. 2.6
.
Внутри тега-контейнера маркированного
списка <UL> размещены два контейнера
нумерованного списка <О1_> и </О1_>
со своими тегами <LI> каждый.
Дополнительный отступ слева обеспечивает
хорошую читаемость текста. По этой схеме
можно создавать и многоуровневые списки.
2.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> указать действительные размеры основного
изображения в пикселах стем, чтобы при первом проходе и загрузке вспомогательного изображения размеры последнего приводились к размерам основного, а не наоборот.