Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> HTML / DHTML -> Основы языка разметки гипертекста - HTML


3. Основы форматирования

3.2. Использование графики

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

Web-броузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG (некоторые форматы требуют установки дополнительных программных компонентов броузера).

Совет А что вы знаете о графических форматах ?

Доминирующими графическими форматами в Internet являются GIF и JPEG. Оба формата обладают специфическими особенностями, что и определяет область их применения.
Формат GIF (поддержка 256 цветов, сжатие без потери качества, чересстрочный формат, анимация, "прозрачность"), широко применяется для создания различных элементов Web-страниц: органов управления (кнопки, иконки, баннеры), анимированных изображений и других быстро загружаемых изображений с низкой цветопередачей.
Формат JPEG (поддержка 16,7 миллиона цветов, потери качества при сжатии, высокая контрастность) применяется для публикации высококонтрастных изображений, фотографического качества. Больший размер файлов и следовательно более медленная загрузка.

Вставка изображений в документ

Для вставки изображения в документ используется одиночный тег <IMG>. Местоположение изображения на странице и его выравнивание относительно текста задается следующими атрибутами:

  • SRC - URL изображения;

  • ALIGN - выравнивание текста относительно изображения (режимы с обтеканием текста: LEFT - изображение слева, текст обтекает справа / RIGHT-изображение справа, текст обтекает слева; режимы без обтекания текстом: TOP - по верхнему краю изображения / MIDDLE - по центру изображения / BOTTOM - по нижнему краю );

  • WIDTH - ширина изображения (пикселы);

  • HEIGHT - высота изображения (пикселы);

  • ALT - текстовое описание-альтернатива, для тех кто отключил загрузку изображений;

  • BORDER - ширина рамки (по умолчанию BORDER=1);

  • HSPACE - пустое поле от изображения по горизонтали;

  • VSPACE - пустое поле от изображения по вертикали;

  • ISMAP - признак карты-ссылок (обработка сервером);

  • USEMAP - признак карты-ссылок (обработка клиентом);

Примеры тега <IMG>:

<IMG SRC="pic1.gif" ALIGN=MIDDLE>

<IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 ALT="Здесь изображение офиса нашей компании">

<IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5>

Закрепим на примере использование графики в ваших документах:

Пример 4. Использование графики. [просмотр примера в окне]

<HTML>
<HEAD>
<TITLE>Все графическое: элемент-якорь, линия-разделитель, фон и содержимое</TITLE>
</HEAD>
<BODY BACKGROUND="bgp.gif", BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>Два вида обезьян</H1>
<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 обезьяна</H2>
<P ALIGN=CENTER>
GIF обезьяна похуже качеством, но зато живая.<br>
JPG обезьяна красивая, но глазами хлопать не умеет. <P>
<P ALIGN=CENTER><IMG SRC="bar.gif" WIDTH="50%">
<P ALIGN=CENTER>&copy 2001 <A HREF="mailto:myname@mail.ru">
<IMG SRC="mbox.gif" BORDER=0 ALT="[ почта ]"></A> Вебмастер.
</BODY>
</HTML>

Приведем несколько рекомендаций по использованию графики:

  • старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);

  • при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BORDER=0), дабы не портить внешний вид документа;

  • при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;

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

Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в HTML-документах. Для этого необходимо поместить тег <IMG SCR="файл изображения"> в контейнер гиперссылки<A>...</A>.

Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" (imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.

Карты ссылок обрабатываемые сервером

Не будем подробно рассматривать карты ссылок обрабатываемых сервером (тут вам не учебник по CGI-программированию, купите и читайте), но основные элементы этой технологии рассмотрим.

1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира).

2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Internet. Map-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым Web-сервером.

Файлы формата CERN представляют собой набор записей вида:

ТипОбласти (x1, y1) ... URL
...
ТипОбласти (x1, y1) ... URL

Файлы формата NCSA представляют собой набор записей вида:

ТипОбласти URL x1, y1, ...
...
ТипОбласти URL x1, y1, ...

Типы областей задаются относительно размера изображения (а не относительно окна броузера), используемого в качестве карты ссылок, и бывают следующих типов:

Default Область, связанная с которой ссылка, активизируется при выборе пользователем области изображения без описания. Не требует задания координат.
Rect Прямоугольная область изображения. Задается двумя парами координат (левый-нижний, правый-верхний).
Poly Многоугольник (до 100 вершин). Координаты первой и последней вершины должны совпадать.
Point Точка на изображении. Задается координатами точки.
Circle Круг на изображении. Задается координатами центра круга и значения (NCSA-точка на окружности/CERN-радиус)

3. Создаем CGI-сценарий (Common Gateway Interface). Это программа (См. раздел 5.1.) которая храниться на Web-сервере и служит для преобразования координат щелчка мыши, переданного броузером, в URL ресурса, в соответствии с файлом определения карты ссылок. (данный этап, как правило можно пропустить, т.к. у всех провайдеров есть стандартный обработчик карт-ссылок, надо только узнать, где он лежит и какой MAP формат понимает).

4. В HTML-документе указываем ссылку на map-файл определения, а в качестве элемента-якоря задаем файл изображения карты ссылок. Например:

<A HREF="httр://www.mysite.ru/cgi-bin/mapdef.map"><IMG SRC="map.gif" ISMAP></A>

Карты ссылок обрабатываемые клиентом

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

<MAP NAME="имя карты ссылок">
<AREA SHARE="тип области 1" COORDS="x,y..." HREF="URL"/NOHREF>
...
<AREA SHARE="тип области N" COORDS="x,y..." HREF="URL"/NOHREF>
</MAP>
<IMG SRC="map.gif" USEMAP=#имя карты ссылок>

Типы областей изображения при этом аналогичны областям, приведенным в таблице выше.

Пример определения карты ссылок:

<MAP NAME=map1>
<AREA SHARE=RECT COORDS="0,0, 50,100" NOHREF> <!-- мертвая зона -->
<AREA SHARE=RECT COORDS="51,0, 100,100" HREF="page1.htm">
</MAP>
<IMG SRC="map.gif" USEMAP=#map1>

Ну хватит, наверное про карты ссылок, тем более, что не каждый броузер их понимает.

[ Содержание ] [ Вперед ]


 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100