Сетевые технологии и базы данных. В 2 ч. Ч. 2. Разработка HTML-страниц
.pdfментов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG>.
Возможные значения этого параметра приведены в табл. 3.1.
|
|
Таблица 3.1 |
|
Значения параметра ALIGN |
|
|
|
|
Значение |
|
Действие |
ТОР |
|
Верхняя граница изображения выравнивается |
|
|
по самому высокому элементу текущей строки |
ТЕХТТОР |
|
Верхняя граница изображения выравнивается |
|
|
по самому высокому текстовому элементу |
|
|
текущей строки |
MIDDLE |
|
Выравнивание середины изображения по |
|
|
базовой линии текущей строки |
ABSMIDDLE |
|
Выравнивание середины изображения посере- |
|
|
дине текущей строки |
BASELINE или |
|
Выравнивание нижней границы изображения |
BOTTOM |
|
по базовой линии текущей строки |
ABSBOTTOM |
|
Выравнивание нижней границы изображения |
|
|
по нижней границе текущей строки |
LEFT |
|
Изображение прижимается к левому полю |
|
|
окна. Текст обтекает изображение с правой |
|
|
стороны |
RIGHT |
|
Изображение прижимается к правому полю |
|
|
окна. Текст обтекает изображение с левой |
|
|
стороны |
Поясним действие параметров выравнивания, приведенных в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по принципу их действия. К одной группе относятся два значения параметра – LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) «обтекают» изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.
29
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).
Приведем пример HTML-кода, в котором используются изображения как элемент строки.
<HTML>
<TITLE>Выравнивание изображений</TITLE> <BODY>
Выравнивание<IМС SRC=eagle.gif ALIGN=top>no
верхнему краю
<Р>
Выравнивание no<IMG SRC=eagle.gif ALIGN =BASELINE>базовой линии
</BODY>
</HTML>
Приведем пример плавающего изображения. В примере изображение прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. Этот пример построен на следующем исходном коде:
<HTML>
< TITLE >Выравнивание изображений</ TITLE > <BODY>
<IMG SRC=spb.gif ALIGN=right> <P ALIGN=JUSTIFY>
Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы, на 42-х островах ее дельты. Географические координаты города: 59"57' северной широты и 30"19' восточной
30
долготы от Гринвича. Из крупнейших городов мира (с населением свыше одного миллиона человек) СанктПетербург является ближайшим к Северному полюсу, он находится на одной широте с северной частью Камчатки и южной оконечностью Аляски.
<Р ALIGN=JUSTIFY>
Высокоширотным положением города объясняется явление белых ночей. Они наступают 25-26 мая, когда солнце опускается за горизонт не более чем на 9', и вечерние сумерки практически сливаются с утренними. Наибольшая продолжительность дня приходится на 21-22 июня; заканчиваются белые ночи 16-17 июля, продолжаясь в общей сложности более 50 дней.
</BODY>
</HTML>
Базовая линия (BASELINE или BOTTOM) – это нижняя часть линии текста, которая проводится без учета нижней части (descender) некоторых символов, например, букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании значения ABSBOTTOM выравнивание выполняется по нижней части самого низкого элемента в строке, т. е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами ТОР и ТЕХТТОР.
Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква.
<HTML>
<TITLE>Различие параметров выравнивания</
TITLE > <BODY>
<IMG SRC=monkey.gif>
<IMG SRC=mouse.gif ALIGN=top width=160>
Выравнивание ALIGN=TOP
<IMG SRC=monkey.gif>
<IMG SRC=mouse.gif ALIGN=texttop width=160>
Выравнивание ALIGN=TEXTTOP
</BODY>
</HTML>
31
Если в документе используются плавающие изображения, выровненные со значением RIGHT или LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тега принудительного прерывания строки <BR> с параметром CLEAR .
В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так, для приведенного выше примера в нужном месте текста можно разместить строку:
<BR CLEAR=right>.
Текст, следующий далее, будет размещаться ниже изображения с новой строки.
Задание размеров выводимого изображения
Тег встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении, – WIDTH и HEIGHT. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра. Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению.
<HTML>
< TITLE >Задание размеров изображений</ TITLE > <BODY>
<IMG SRC=spb.gif WIDTH=300> <IMG SRC=spb.gif>
<IMG SRC=spb.gif WIDTH=75> </BODY>
</HTML>
Отделение изображения от текста
Для тега <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми соответственно по горизонтали и вертикали. Это га-
32
рантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия. В приведенном ниже HTML-коде со всех четырех сторон изображения задан отступ, равный 20 пикселам.
<HTML>
<TITLE>Использование параметров HSPACE и VSPACE</
TITLE>
<BODY>
<IMG SRC=spb.gif ALIGN=left HSPACE=20 VSPACE=20>
(Текст абзаца)
<p>
(Текст абзаца)
</BODY>
</HTML>
Рамки вокруг изображений
Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тега <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
<HTML>
<TITLE>Помещение изображения в рамку</ TITLE > <BODY>
<IMG SRC=map.gif>
<IMG SRC=map.gif BORDER=1>
<IMG SRC=map.gif BORDER=5>
<IMG SRC=map.gif BORDER=10> </BODY>
</HTML>
Альтернативный текст
Одним из параметров тега <IMG> является параметр ALT, определяющий альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, рабо-
33
тающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях.
При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений будет выполняться. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением.
Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.
<IMG SRC=spb.gif ALT=”Герб Санкт-Петербурга" WIDTH=150 HEIGHT=174>
<IMG SRC=moscow.gif АLТ="Герб Москвы">
Использование изображения в качестве ссылки
Графические изображения могут использоваться не только в качестве иллюстраций, но и выполнять роль указателей гипертекстовых связей. Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тега-контейнера <А>. Пример:
<А HREF=My_doc.html> <IMG SRC=map.gif> </A>
Любая часть такого изображения будет работать как указатель ссылки на документ My_doc.html. Существуют возможности задания изображений, отдельные фрагменты которых будут указывать на различные ресурсы.
Параметр LOWSRC
Еще одним параметром, который можно задать в теге <IMG>, является LOWSRC. Его значение определяет файл с альтернативным изображением, которое должно появляться при первом проходе выдачи на экран загружаемого документа. Смысл задания двух загружаемых на одно и то же место изображений заключается в
34
следующем. В качестве изображения, указываемого значением параметра LOWSRC, рекомендуется выбирать картинку того же содержания, но более низкого разрешения, возможно с меньшей глубиной цвета или даже монохромное. Изображения такого рода занимают значительно меньше места и, как следствие, быстро загружаются. Это позволяет уже на первом проходе формирования документа увидеть общие черты изображений и не ожидать их полной загрузки. Пример записи:
<IMG SRC=main.gif LOWSRC=low.gif>
Использованию параметра LOWSRC присущ ряд особенностей. Если была загружена картинка, адрес которой был задан параметром LOWSRC, то основная картинка будет иметь точно такие же размеры, что и предыдущая. Если изображения исходно имели различные размеры, то основное изображение будет приводиться к размерам первого. При этом могут быть нарушены пропорции основного изображения. Во избежание этого разумно указывать настоящие размеры основного изображения (параметрами WIDTH и HEIGHT тега <IMG>). Тогда на первом проходе изображение низкого разрешения будет приводиться к размерам настоящего изображения, а на втором проходе - будет заменено им.
Использование миниатюрных версий изображений
На Web-страницах часто используются миниатюрные версии изображений (thumbnail) в качестве графических указателей ссылок на полноразмерные изображения. Изображения такого рода представляют собой уменьшенные копии оригинальных изображений, имеющие иногда также меньшую глубину цвета или представленные в оттенках серого цвета. Файлы с такими изображениями занимают значительно меньше места по сравнению с полноразмерными и поэтому гораздо быстрее грузятся. С помощью миниатюрных версий можно быстро просмотреть набор изображений, доступных для загрузки, и выбрать понравившееся.
В Интернете можно найти целый ряд специализированных сайтов, содержащих разного рода изображения и обеспечивающих предпросмотр (preview) с помощью миниатюрных копий. Большое число сайтов не предназначено для детских глаз, но есть и ряд ин-
35
тересных серверов, предлагающих изображения различной темати-
ки. Можно отметить сайт http://www.snap-shot.com.
Ход работы
1.Подготовьте интернет-страницу с фотографиями и описаниями. Используйте различные способы обтекания текстом графических изображений. Задайте фоновый рисунок. Фотографии получить у преподавателя.
2.Подготовить интернет-страницу в которой, маленькие фотографии являются кнопками для гиперссылок на файлы с полноразмерными фотографиями. Предусмотреть отступы, рамки, альтернативный текст.
Лабораторная работа №4
Создание графического меню с использованием навигационных областей HTML
Краткие теоретические сведения
В последнее время многие Web-страницы для организации ссылок используют так называемые карты-изображения. Реализация этой возможности предусмотрена языком HTML и позволяет привязывать гипертекстовые ссылки к различным областям изображения. Такой подход нагляднее, чем применение обыкновенных текстовых связей, поскольку пользователь может не читать словесное описание связи, а сразу понять ее смысл по графическому образу.
Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений.
Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может
36
быть сохранен в отдельном файле или являться частью HTMLдокумента. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей. Активные области могут иметь форму прямоугольников, кругов и многоугольников.
Допускается любая комбинация этих фигур. Также может задаваться одно значение URL-адреса, определенное для случая, когда пользователь выполняет щелчок в пределах изображения, но вне любой из заданных активных областей. Конкретные правила записи конфигурации области зависят от выбранного варианта реализации.
Обычно используются карты-изображения серверные и клиентские. В данной лабораторной работе мы рассмотрим построение клиентских карт, поскольку серверная реализация данной возможности HTML выходит за рамки курса.
Для начала необходимо определить, какие именно области будут выделены. Зайдите в любой графический редактор и определите для каждой области свои координаты.
Создание карты рисунка начинается с описания
<map name="name">
Существуют три вида навигационных областей, для которых необходимо определить координаты их размещения на рисунке:
rect – прямоугольник, для него необходимо определить координаты левого верхнего и нижнего правого угла «X1, Y1, X2, Y2»;
poly – полигон, область, состоящая из большого количества разнообразных кривых, для этой области необходимо определить координату каждой точки, соединяющей кривые «X1, Y1, X2, Y2, ...,
Xn, Yn;
circle – окружность, определяется координата центра окружности и ее радиус «X, Y, R».
Каждая область описывается отдельным тегом area:
<area shape=”rect” COORDS=”0, 0, 10, 20” href=”http://google.com”>
Для того чтобы связать созданную карту с рисунком, необходимо в описании рисунка img вставить свойство usemap:
<img src="image" usemap="#name">
37
Обратите внимание, что к имени карты в начале добавляется символ "#".
Рассмотрим небольшой пример создания навигационных областей. Пример 1.
<map name=figure>
<area shape="circle" coords="104, 100, 42" href="http://www.google.com">
<area shape="poly" coords="153, 135, 186, 62, 228, 135" href="http://www.microsoft.com">
<area shape="rect" coords="241, 60, 320, 135" href="http://www.open.by">
</map>
<img src="geometry. jpg" usemap=#figure border=0>
Каждая фигура выделена в отдельную область (рис. 4.1).
Рисунок 1 – Пример использования геометрических фигур в качестве указателей гиперссылок
Ход работы
1. Скопировать рисунок 1 в графический редактор и сохранить в рабочем каталоге с именем geometry. jpg.
Создать текстовый файл и внести в него фрагмент кода Пример 1, дополнив его необходимыми тегами начала и завершения файла.
Проверить, как работает файл, и разобраться с описанием геометрических фигур.
38