Лабораторная работа № 3. Графика в интернет-документах

Тестовые упражнения для закрепления пройденного материала

1. Создайте файл на диске С: \, в котором сделайте нумерованный и маркированный списки студентов группы.

2. Обозначьте 2-3 фамилии студентов как гиперссылки, которые открывают файлы с информацией о студентах. В файлах предусмот­рите кнопку возврата к первоначальному файлу.

Краткие теоретические сведения

Разработчики Web-страниц могут управлять цветом фона доку­мента, а также указывать изображения, используемые в качестве фо­нового. Для задания цвета фона употребляется параметр BGCOLOR тега < BODY>, а фоновое изображение включается в документ при помощи параметра BACKGROUND. В качестве значения параметра BGCOLOR указывается название цвета или его составляющие в шест­надцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG. Приведем пример записи тега < BODY> с указанием фонового цвета и фоново­го изображения:

< BODY BACKGROUND=texture.gif BGCOLOR=gray>

Для встраивания изображений в HTML-документ следует ис­пользовать тег < IMG>, имеющий единственный обязательный па­раметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:

< IMG SRC=picture.gif>

Данный тег может иметь ряд параметров.

Выравнивание изображений

При включении графического изображения в документ можно указывать его расположение относительно текста или других эле­ментов страницы. Способ выравнивания изображения задается зна­чением параметра ALIGN тега < IMG>.

Возможные значения этого параметра приведены в табл. 3.1.

Таблица 3.1 Значения параметра ALIGN

Значение	Действие
ТОР	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
ТЕХТТОР	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения посере­дине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

 

Поясним действие параметров выравнивания, приведенных в таб­лице. Сразу же оговоримся, что все значения параметров выравнива­ния изображений можно условно разделить на две группы по принци­пу их действия. К одной группе относятся два значения параметра - LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмот­ра браузера, а последующий текст (или другие элементы) «обтекают» изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.

К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображе­ния относительно строки текста. Таким образом, в отличие от пла­вающих изображений, здесь изображение является обычным эле­ментом строки. Это легко понять, если представить, что изображе­ние является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).

Приведем пример 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' восточной долготы от Гринвича. Из крупнейших городов мира (с населением свыше одного миллиона человек) Санкт- Петербург является ближайшим к Северному полюсу, он находится на одной широте с северной частью Камчатки и южной оконечностью Аляски.

< Р 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>

Если в документе используются плавающие изображения, вы­ровненные со значением 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>

Отделение изображения от текста

Для тега < IMG> можно задавать параметры HSPACE и V SPACE, значения которых определяют отступы от изображения, оставляе­мые пустыми соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется простран­ство, необходимое для нормального восприятия. В приведенном ниже 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, опре­деляющий альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить не­которую текстовую информацию о встроенных изображениях.

При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загруз­ка изображений будет выполняться. Поскольку загрузка изображе­ний выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения по­явится альтернативный текст, который по мере загрузки будет сме­няться изображением.

Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.

< IMG SRC=ua.gif ALT=”Герб Украины" WIDTH=150 HEIGHT=174>

< IMG SRC=kharkiv.gif ALТ=" Герб Харькова" >

Использование изображения в качестве ссылки

Графические изображения могут использоваться не только в ка­честве иллюстраций, но и выполнять роль указателей гипертексто­вых связей. Для обеспечения работы изображения в качестве ссыл­ки на другие ресурсы достаточно включить изображение внутрь тега-контейнера < А>. Пример:

< А HREF=My_doc.html> < IMG SRC=map.gif> < /A>

Любая часть такого изображения будет работать как указатель ссылки на документ My_doc.html. Существуют возможности зада­ния изображений, отдельные фрагменты которых будут указывать на различные ресурсы.

Параметр LOWSRC

Еще одним параметром, который можно задать в теге < IMG>, является LOWSRC. Его значение определяет файл с альтернатив­ным изображением, которое должно появляться при первом прохо­де выдачи на экран загружаемого документа. Смысл задания двух загружаемых на одно и то же место изображений заключается в следующем. В качестве изображения, указываемого значением па­раметра LOWSRC, рекомендуется выбирать картинку того же со­держания, но более низкого разрешения, возможно с меньшей глу­биной цвета или даже монохромное. Изображения такого рода за­нимают значительно меньше места и, как следствие, быстро загружаются. Это позволяет уже на первом проходе формирования документа увидеть общие черты изображений и не ожидать их пол­ной загрузки. Пример записи:

< IMG SRC=main.gif LOWSRC=low.gif>

Использованию параметра LOWSRC присущ ряд особенностей. Если была загружена картинка, адрес которой был задан парамет­ром LOWSRC, то основная картинка будет иметь точно такие же размеры, что и предыдущая. Если изображения исходно имели раз­личные размеры, то основное изображение будет приводиться к размерам первого. При этом могут быть нарушены пропорции ос­новного изображения. Во избежание этого разумно указывать настоящие размеры основного изображения (параметрами WIDTH и HEIGHT тега < IMG> ). Тогда на первом проходе изображение низ­кого разрешения будет приводиться к размерам настоящего изоб­ражения, а на втором проходе - будет заменено им.

Использование миниатюрных версий изображений

На Web-страницах часто используются миниатюрные версии изображений (thumbnail) в качестве графических указателей ссылок на полноразмерные изображения. Изображения такого рода пред­ставляют собой уменьшенные копии оригинальных изображений, имеющие иногда также меньшую глубину цвета или представлен­ные в оттенках серого цвета. Файлы с такими изображениями зани­мают значительно меньше места по сравнению с полноразмерными и поэтому гораздо быстрее грузятся. С помощью миниатюрных вер­сий можно быстро просмотреть набор изображений, доступных для загрузки, и выбрать понравившееся.

В Интернете можно найти целый ряд специализированных сай­тов, содержащих разного рода изображения и обеспечивающих предпросмотр (preview) с помощью миниатюрных копий. Большое число сайтов не предназначено для детских глаз, но есть и ряд ин­тересных серверов, предлагающих изображения различной темати­ки. Можно отметить сайт http: //www.snap-shot.com.

Ход работы

1. Подготовьте интернет-страницу с фотографиями и описания­ми. Используйте различные способы обтекания текстом графиче­ских изображений. Задайте фоновый рисунок. Фотографии полу­чить у преподавателя.

2. Подготовить интернет-страницу в которой, маленькие фото­графии являются кнопками для гиперссылок на файлы с полнораз­мерными фотографиями. Предусмотреть отступы, рамки, альтерна­тивный текст.

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: