Использование графики в документах позволяет повысить...
advertisement
Тема: Вставка изображения в документ HTML
Цель:
1. Научить учащихся вставлять изображения в HTML - документ.
2. Развить навыки работы с HTML - документом.
3. Воспитать усидчивость, целеустремленность. Ход занятия:
1. Орг момент (проверка присутствующих)
2. Опрос домашнего задания
3. Изложение темы и цели занятия
4. Объяснение нового материала
5. Закрепление пройденного (лабораторная работа)
6. Выдача домашнего задания(выучить лекцию)
7. Выставление оценок
Использование графики в документах позволяет повысить привлекательность ваших Web-страниц, делает
изложенный материал более доступным для восприятия, а в некоторых случаях (искусство, реклама) без нее
просто не обойтись.
Web-броузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG
(некоторые форматы требуют установки дополнительных программных компонентов броузера).
Вставка изображений в документ
Для вставки изображения в документ используется одиночный тег <IMG>. Местоположение изображения на
странице и его выравнивание относительно текста задается следующими атрибутами:
•
•
•
•
•
•
•
•
•
•
SRC - URL изображения;
ALIGN - выравнивание текста относительно изображения {режимы с обтеканием текста: LEFT изображение слева, текст обтекает справа / RlGHT-изображение справа, текст обтекает слева;
режимы без обтекания текстом: ТОР - по верхнему краю изображения / MIDDLE - по центру
изображения / BOTTOM - по нижнему краю );
WIDTH - ширина изображения (пикселы);
HEIGHT - высота изображения (пикселы);
ALT - текстовое описание-альтернатива, для тех кто отключил загрузку изображений;
BORDER - ширина рамки (поумолчанию BORDER=l);
HSPACE - пустое поле от изображения по горизонтали;
VSPACE - пустое поле от изображения по вертикали;
ISMAP - признак карты-ссылок (обработка сервером)-,
USEM АР - признак карты-ссылок (обработка клиентом);
Примерытега <IMG>:
<IMG SRC-'picl.gif1 ALIGN=MIDDLE>
<IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 АЕТ="Здесьизображениеофисанашейкомпании">
<IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5>
Закрепим на примере использование графики в ваших документах:
Пример 4. Использование графики. Гпросмотр примера в окне]
<HTML> <HEAD>
<TITLE>Bce графическое: элемент-якорь, линия-разделитель, фон и содержимое</Т1ТЬЕ> </HEAD>
<BODY BACKGROUND="bgp.gif', BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED",
VLINK="NAVY">
<H1
ALIGN=CENTER>flBa
вида
обезьян</Н1>
<P
ALIGN=CENTER><IMG
SRC="bar.gif'
WIDTH="50%">
<P ALIGN=CENTER><IMG SRC="monkey.gif' ALT="GIF">&<IMG SRC="monkey.jpg" WIDTH=182 HEIGHT=122
•
ALT="JPG">
<H2
ALIGN=CENTER>GIF
обезьяна
&
JPEG
обезьяна</Н2>
<P
ALIGN=CENTER>
GIF
обезьяна
похуже
качеством,
но
зато
живая.<br>
JPG обезьяна красивая,
но глазами хлопать
не умеет.
<Р>
<Р
ALIGN=CENTER><IMG
SRC="bar.gif'
WIDTH="50%">
<Р
ALIGN=CENTER>&copy
2001
<А
HREF="mailto:myname@mail.ru">
<IMG
SRC="mbox.gif'
BORDER=0
ALT="[
почта
]"></А>Вебмастер.
</BODY>
</HTML>
Приведем несколько рекомендаций по использованию графики:
•
•
•
старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности
загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура
документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);
при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения
(BC)RDER=0), дабы не портить внешний вид документа;
при указании размеров изображения больших или меньших от оригинального размера броузер производит
их масштабирование, что может нарушить качество изображения некоторых форматов;
Использование изображений в качестве - карты ссылок
Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в
HTML-документах. Для этого необходимо поместить тег <IMG SCR=" файл изображения"> в контейнер
гиперссылки<А>...</А>.
Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок"
{imagemap). Типичным примером использования карт ссылок являются сервера крупных международных
корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей
вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и
обрабатываемые сервером.
Карты ссылок обрабатываемые сервером
Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGIпрограммированию, купите и читайте), но основные элементы этой технологии рассмотрим.
1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира).
2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи
непересекающихся областей изображения с ссылками на ресурсы Internet. Мар-файлы бывают двух форматов
CERN и NCSA, а их поддержка определяется используемым Web-сервером.
Файлы формата CERN представляют собой набор записей вида:
ТипОбласти
(xl,
ТипОбласти (xl, yl)... URL
yi)
URL
'Файлы формата NCSA представляют собой набор записей вида: ТипОбласти
URL xl,
yl,
ТипОбласти URL xl, yl, ...
Типы областей задаются относительно размера изображения (а не относительно окна броузера), используемого в
качестве карты ссылок, и бывают следующих типов:
Default
Область, связанная с которой ссылка,- активизируется при выборе пользователем
области изображения без описания. Не требует задания координат.
Rect
Прямоугольная область изображения. Задается двумя парами координат (левыйнижний, правый-верхний).
Poly
Многоугольник {до 100 вершин). Координаты первой и последней вершины должны
совпадать.
Point
Точка на изображении. Задается координатами точки.
Circle
Круг на изображении. Задается координатами центра круга и значения (NCSA-точка
на окружности/СЕШ-радиус)
3. Создаем CGI-сценарий (Common Gateway Interface). Это программа (См. раздел 5.1.) которая храниться на Webcepeepe и служит для преобразования координат щелчка мыши, переданного броузером, в URL ресурса, в
соответствии с файлом определения карты ссылок. (данный этап, как правило можно пропустить, т.к. у всех
провайдеров есть стандартный обработчик карт-ссылок, надо только узнать, где он лежит и какой MAP
формат понимает).
4. В HTML-документе указываем ссылку на тар-файл определения, а в качестве элемента-якоря задаем файл
изображения карты ссылок. Например:
<А HREF="http://www.mysite.ru/cgi-bin/mapdef.map"><IMG SRC="map.gif' ISMAP></A> Карты ссылок
обрабатываемые клиентом
Начиная с HTML 3.2, появилась возможность создавать карты ссылок, обрабатываемых клиентом т.е. броузером.
При этом файл описания хранится в документе и задается при помощи специальных тегов, следующего формата:
<МАР
NAME="HMH
карты
<AREA SHARE="THN области 1" COORDS="x,y..." HREF="URL"/NOHREF>
ссылок">
<AREA SHARE="TNN области N" COORDS="x,y..." HREF="URL"/NOHREF> </MAP>
<IMG SRC="map.gif' USEMAP=#HMH карты ссылок>
Типы областей изображения при этом аналогичны областям, приведенным в таблице выше. Пример определения
карты ссылок: <МАР
<AREA SHARE=RECT CC>ORDS="0,0, 50,100" <AREA
</MAP>
<IMG SRC="map.gif" USEMAP=#mapl>
SHARE=RECT
CC)ORDS="51,0,
NAME=mapl>
NOHREF><!~ мертвая зона ~> 100,100"
HREF-'page 1 ,htm">