Без графики невозможно представить современный сайт. Начиная от фонового изображения и заканчивая пунктами графического меню - везде используются картинки. Голый текст, пусть даже мастерски отформатированный, не может так радовать посетителя, как хорошо подобранные изображения. Конечно, есть и минусы. Сайт, перегруженный графикой грузится очень долго, особенно при модемном соединении на старинных АТС. Надо просто соблюдать меру. Рассмотрим только статичные картинки и GIF-анимацию.
Самые распространенные форматы на просторах WWW - это GIF и JPG (JPEG), встречается также формат PNG и другие, но реже. Не стану вдаваться в поиск различий, плюсов и минусов различных форматов. Остановлюсь только на главных.
Первое, форматы GIF и PNG поддерживают прозрачный цвет, а JPG - нет.
Второе, в GIF 256 цветов, а в JPG глубина цвета 24 бит. А PNG бывают разные.
Третье, в GIF возможна анимация.
И последнее, маленькие файлы лучше хранить в GIF, а те, что побольше в JPG.
Задаётся в тэге <BODY> параметром BACKGROUND. Например: <BODY BACKGROUND="images/textura.gif" >
Фоновое изображение заполняет всё окно браузера, за исключением случаев, когда разработчик запрещает размножение фона на весь экран с помощью таблицы стилей. Изображение должно быть так подобрано, чтобы при размножении сливались границы отдельных картинок. Не лишним будет обратить внимание на читаемость текста на фоне подобранной подложки и размер файла.
Многие браузеры позволяют задать фоновое изображение не только для всего документа, но и для таблиц, отдельных ячеек таблиц, а с помощью таблиц стилей возможным становится задание фона для любого элемента страницы.
Для этого существует тэг <IMG>, не требующий закрытия. Обязательный параметр для него SRC, указывающий адрес файл с изображением.
Пример записи:
<IMG SRC="images/logo.jpg">
Существует ряд атрибутов не обязательных, но весьма полезных.
Управляет выравниванием изображения и, соответственно, обтеканием текста. Может принимать значения, приведённые в таблице.
| TOP | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
| TEXTTOP | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. |
| MIDDLE | Выравнивание середины изображения по базовой линии текущей строки. |
| ABSMIDDLE | Выравнивание середины изображения по середине текущей строки |
| BOTTOM или BASELINE | Выравнивание нижней границы изображения по базовой линии текущей строки. |
| ABSBOTTOM | Выравнивание нижней границы изображения по нижней границе текущей строки. |
| LEFT, RIGHT | Изображение прижимается к левому или правому краю окна браузера. Текст обтекает изображение соответственно справа или слева. |
В случае задания параметра ALIGN=left (right), текст и последующие элементы обтекают картинку, во всех остальных случаях изображение является частью строки. Поэкспериментируйте с различными значениями этого атрибута. Для прекращения обтекания текста используют тэг принудительного перевода строки с параметром CLEAR.
Пример записи:Для этого служат параметры WIDTH и HEIGHT. Значения указываются обычно в пикселях, хотя возможно указывать их в процентах от окна просмотра. Несоответствие реальных размеров изображения с заданными в тэге <IMG> приведёт к масштабированию рисунка. Желательно всегда указывать размеры изображений для того, чтобы браузер произвёл разметку документа до того, как изображения загрузятся. Если не указать их, то браузер оставит под картинку маленькую пиктограмму, а когда рисунок загрузится, придётся переформатировать весь документ. В случае отключения загрузки изображений юзером, форматирование документа нарушится.
Параметры управляют VSPACE, HSPACE вертикальным и горизонтальным отступом. Их использование необходимо для того, чтобы текст не сливался с границами изображения.
Параметр BORDER управляет рамкой вокруг изображения. Используется обычно для отмены рамки при использовании картинки в качестве содержимого ссылки. Значение указывается в пикселях. По умолчанию рамка не рисуется, если только это не ссылка.
Параметр ALT позволяет указать для изображения альтернативный текст, выводимый на месте картинки в случае неудачной загрузки файла, отключения загрузки изображений или в виде всплывающей подсказки.
Его значением является адрес файла с альтернативным изображением низкого качества, которое загрузится быстрее основного. После загрузки главной картинки произойдёт замена альтернативного рисунка.
Займёмся теперь созданием карты на основе обычного рисунка. Мы изучим только клиентский вариант. Для этого в тэге <IMG> есть параметр USEMAP, в котором указано имя карты. Изображение, на основе которого создаётся карта, называется опорным.
Пример записи: <IMG SRC="karta.gif" USEMAP="#karta_map" >
Теперь необходимо создать саму карту, т.е. описать активные области опорного изображения. Для этого есть специальный тэг-контейнер <MAP>- </MAP>, единственным и обязательным параметром которого является NAME. В нашем случае это будет <MAP NAME = "karta_map" >. Внутри этого контейнера располагаются тэги <AREA>, каждый из которых задаёт одну активную область. Активные области могут перекрывать друг друга. В этом случае будет реализована та ссылка, описание которой располагается первым в списке областей.
Параметрами тэга <AREA> являются SHAPE, COORDS, HREF, NOHREF, TARGET, ALT.
| Параметр | Описание | Допустимые значения |
|---|---|---|
| SHAPE | Определяет форму активной области, если параметр опущен, то принимается значение по умолчанию - прямоугольник. | rect-прямоугольник (по умолчанию), circle-круг, poly-многоугольник, default-определяет все точки. |
| COORDS |
Определяет координаты области. Координаты записываются в пикселях через запятую, сначала горизонтальная, а потом вертикальная. Верхний левый угол имеет координаты 0,0. Для прямоугольника записывают координаты левого верхнего и правого нижнего углов. Для круга - координаты центра и радиус. Для многоугольника- по порядку перечисляются координаты всех вершин. Если первая и последняя точки не совпадают, то браузер автоматически соединит первую и последнюю точки. Область типа default не требует координат. |
целые положительные числа |
| HREF, NOHREF | Это взаимоисключающие параметры. HREF определяет адрес ссылки. NOHREF - указывает на отсутствие ссылки в данной части изображения. |
URL - адрес. |
| TARGET | Указывает, куда следует загрузить документ. Используется в основном при работе с фреймами. Также можно указать новое окно. | _self - загрузка в текущее окно. _blank - загрузка в новое окно. frameName - загрузка во фрейм с именем "frameName". |
| ALT | Задаёт текст всплывающей подсказки. | Любой текст. |
Примером карты-изображения является объявление на главной странице.
Создать карту в ручном режиме можно, но это довольно сложно. Для этого существуют различные программы. Многие HTML- редакторы имеют встроенные утилиты для создания карт. Есть отдельные программы. Я, например, пользуюсь программой Adobe Image Ready 3.0, которая идёт в пакете с PhotoShop.