На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » HTML/DHTML

Основы языка разметки гипертекста - HTML (Ч.3.2. Графика в документах )

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>

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

Dmitriy Krasyuk
Основы HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100