Последний отзыв
Очень интересная!
По всем вопросам обращайтесь на: info@litportal.ru
(©) 2003-2024.
✖
Электронные издания
Настройки чтения
Размер шрифта
Высота строк
Поля
Мы уже сталкивались с использованием изображения в качестве фонового при знакомстве с тэгом <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> с различными параметрами:
<HTML><HEAD><TITLE>Пример вставки изображения в документ</TITLE> </HEAD>
<BODY><IMG SRC=globus.jpg ALIGN=LEFT WIDTH=40% HEIGHT=40%
HSPACE=8 VSPACE=10 BORDER=5
ALT="Рельеф земной поверхности">
<P ALIGN="Justify">В данном документе рисунок выравнивается влево, т. е. он должен размещаться в левом верхнем углу. Размеры рисунка 60 на 60 пикселей. Рисунок окружен рамкой шириной в 5 пикселей и отделен от текста полями по 10 пикселей с каждой стороны. Текст размещается справа от рисунка и, в дальнейшем, ниже его.</P>
</BODY> </HTML>
Приведенный выше HTML-документ отображался в браузере MS Internet Explorer и полученное в окне браузера изображение показано на рис. 2.7. В частности, на рисунке видна надпись "Рельеф земной поверхности", заданная в виде значения параметра ALT и возникающая на экране при подведении указателя мыши к изображению.
В заключение отметим, что фирма Netscape в своем браузере предусмотрела возможность использования еще одного параметра в тэге <IMG>, а именно LOWSRC. В качестве значения этого параметра указывается графический файл с альтернативным изображением того же самого объекта, но с гораздо более низким разрешением и глубиной цвета. В результате альтернативное изображение имеет на порядок меньший объем и быстро загружается на Web-страницу – а только позднее загружается основное изображение. Пример записи тэга с этим параметром представлен ниже:
<IMG SRC=globus.gif LOWSRC=low-globus.gif>
Рис. 2.7. Пример отображения в браузере MS Internet Explorer документа, содержащего изображение
Следует заметить, что размеры этих двух изображений должны совпадать. Если параметр LOWSRC задает изображение меньших размеров, то основное изображение будет также трансформироваться к этим меньшим размерам. Чтобы избежать возникающих вследствие этого эффекта искажений, следует в тэге <IMG> указать действительные размеры основного изображения в пикселах с тем, чтобы при первом проходе и загрузке вспомогательного изображения размеры последнего приводились к размерам основного, а не наоборот.
2.5. Включение в издание ссылок и комментариев
Ссылки являются важнейшей составляющей HTML-документа, так как именно они и делают этот документ гипертекстовым, реализуя важнейшее преимущество электронного документа по сравнению с печатным, состоящее в широчайших возможностях перемещения по документу и вне его. Ссылка состоит из указателя и адресной части. Указатель представляет собой малый фрагмент документа (одно или два слово или изображение), который каким-либо образом выделен (например, цветом или подчеркиванием). Если подвести указатель мыши к ссылке и щелкнуть кнопкой мыши, то браузер загрузит новый документ или перейдет к той части данного документа, адрес которой указан во второй части ссылки.
Текстовые указатели чаще всего выделяются в окне браузера подчеркиванием. Если же в качестве ссылки использовано изображение, то такое изображение браузер самостоятельно заключает в рамку. Второй частью ссылки является адрес той страницы, которая должна быть загружена. Адрес, как уже указывалось ранее, может быть абсолютным или относительным. В последнем случае адрес формируется относительно того каталога, в котором расположен исходный документ. Пример предыдущего раздела содержит относительный адрес рисунка globus.jpg, который расположен в том же каталоге, что и сам HTML-документ.
Для организации ссылок используется тэг-контейнер <A> (Access Address указатель, ссылка), который имеет параметр HREF, причем значение этого параметра и является адресом загружаемой страницы, о чем говорилось выше. Конструкция данного контейнера выглядит следующим образом:
<A HREF=URL-адрес нужной страницы> Текст-указатель ссылки </A>
Когда курсор мыши подводится к текстовому указателю, во всплывающем окне появляется адрес ссылки, который записан в качестве значения параметра HREF. Щелкнув левой кнопкой мыши по этому указателю, мы инициируем процесс загрузки документа или страницы с этим адресом.
Запись ссылки, указателем в которой служит не текст, а изображение, выглядит следующим образом:
<A HREF=URL-адрес нужной страницы> <IMG SRC=(имя графического файла)>
</A>
Действительно, в представленном примере тэг <IMG> с параметром SRC, задающим имя графического файла, играет ту же самую роль, что и текст-указатель ссылки в предыдущем примере. Некоторым преимуществом последнего способа является то, что изображение занимает больше места в окне браузера, чем текст-указатель ссылки, и на него может быть быстрее выведен курсор мыши.
Ранее уже отмечалось, что относительная ссылка указывает не полный путь к файлу, а его местоположение относительно того документа, из которого производится ссылка. Для облегчения работы с относительными ссылками в заголовочной части документа может использоваться тэг <BASE>, в котором с помощью параметра HREF указывается абсолютный URL-адрес этого документа, относительно которого и строится вся адресация ссылок (см. также разд. 2.1).
Если ссылки на внешние документы позволяют свободно ориентироваться пользователю в безбрежном море сети Интернет, то для качественной навигации в каждом электронном изданий необходимы ссылки внутренние (в пределах самого издания). Скажем, встретив в издании незнакомый термин, вы захотите узнать его смысл и назначение, для чего необходимо обратится к списку терминов и определений, т. е. глоссарию (см. разд. 2.3), а затем вернуться к исходному тексту. Любой большой документ требует также наличия ссылок из его оглавления к соответствующим разделам. Могут потребоваться и другие ссылки, например, в текущем и предыдущем абзацах, по существу, такие ссылки указаны в виде адресации пользователя к определенным разделам данной книги. Однако, в печатном издании пользователь должен заложить текущую страницу, найти раздел, на который указывает ссылка, прочесть его и вернуться к заложенному месту. В электронном же издании эти операции автоматизированы и их выполняет компьютерная программа браузер. И это их существенное преимущество.
Для организации переходов необходимо нечто, напоминающее закладки в печатном издании. Такие закладки, на которые может быть организована ссылка, реализуются с помощью параметра NAME (имя) уже упоминавшегося тэга <A>. Параметр NAME позволяет определить имя закладки с тем, чтобы в дальнейшем адресоваться именно к ней. Например, из данного раздела книги мы адресовались к разд. 2.1 и 2.3. Чтобы такие переходы можно было осуществить в электронном издании, к названиям таких разделов надо добавить закладки:
<A NAME=section_2-1>
<A NAME=section_2-3>
а в оглавлении записать названия этих параграфов внутри тэга-контейнера <A>:
<A HREF="#section_2-1"> 2.1. Общая структура гипертекстового документа, заголовок и тело документа, тэги оформления заголовка </A>
<A HREF="#section_2-3"> 2.3. Оформление списков терминов и определений </A>.
Когда такие закладки имеются, переходы к ним можно было бы оформить не только из оглавления, но и из любого другого места электронного издания. Вместо указания в скобках (см. разд. 2.1) можно было бы вставить конструкцию с тэгом-контейнером, а именно:
<A HREF="#section_2-1"> (см. разд. 2.1) </A>
Можно настроить браузер таким образом, что соответствующая любой ссылке страница будет демонстрироваться в отдельном окне. Тогда, просмотрев текст или рисунок на этой странице, мы можем ее закрыть или свернуть, возвращаясь, таким образом, к основному документу. Отрегулировав размер этого отдельного окна, мы можем одновременно рассматривать как ссылку, так и основной документ. Эти возможности будут подробнее рассмотрены в разд. 2.7 при изучении фреймовой структуры гипертекстового документа.
Ссылки могут указывать и на специальные виды документов, например, на аудио– или видеофайлы или анимационные файлы в GIF-формате. Браузер может уметь или же не уметь работать с указанным специальным типом документа. Скажем, все современные браузеры умеют работать с анимацией в формате GIF89a, часто встречающейся на страницах в сети Интернет. Ссылка на такой файл приводит к появлению на странице "движущегося" изображения. Если же браузер не умеет работать со специальным документом (не распознает тип принятого документа), он обратится к другим программам на компьютере пользователя. Если нужная программа будет обнаружена, браузер передаст полученный документ этой программе для дальнейшей его обработки. Скажем, ссылка на видео файл формата AVI (см. разд. 3.5, 4.5, 5.5), может привести к запуску программы для демонстрации видеофайлов. В результате видеофайл будет показан в специальном дополнительном окне.
В заключение несколько слов о включении комментариев в HTML-документ. Комментарий может состоять из любого числа строк и слов, расположенных внутри контейнера из двух тэгов, а именно: открывающего текст комментария <!–и завершающего этот текст –>. Текст комментария не отображается в окне браузера, поэтому его можно рассматривать как личные заметки авторов или редакторов в процессе работы над изданием. В то же время, если не убрать комментарий из окончательного текста издания, то он принципиально становится доступным и для читателей. Другой тэгконтейнер для записи комментариев – <COMMENT> – поддерживается только браузером MS Internet Explorer и не нашел широкого применения.
2.6. Оформление таблиц
Таблицы достаточно широко применяются в электронной документации, причем для Web-страниц они используются не только в традиционном смысле, как метод упорядоченного представления данных, но и для форматирования самих этих страниц. Описание таблицы на языке HTML размещается внутри тела документа, т. е. в контейнере <BODY> и </BODY>. Внутри документа допускается любое число таблиц, причем некоторые из них могут быть вложенными. Каждая таблица создается в пределах контейнера <TABLE> (таблица) и </TABLE>, где размещается описание структуры самой таблицы и ее содержимое. Каждая строка таблицы размещается после тэга <TR> (Table Row – строка таблицы).
Последний отзыв
Очень интересная!