04. Дизайн картинок

Прямоугольную рамку вокруг картинки можно задать при помощи атрибута border=n в теге <IMG>:

В коде картинки, приведённой выше, записано border=1. С толщиной рамки главное не переборщить, а то она будет навевать грустные мысли. Ниже приводится та же картинка, но для неё записано border=10. Выглядит мрачновато:

Возникает вопрос о цвете рамки. В спецификациях HTML от W3C про цвет рамки ничего не сказано, значит, этот вопрос решается производителями браузеров. Как правило, рамка выводится чёрным цветом, независимо от цвета текста.

Для построения рамок удобнее использовать стилевое свойство border, который имеет существенно больше возможностей по сравнению с одноимённым атрибутом, в том числе, позволяет управлять цветом рамки, не полагаясь на производителей браузеров:

Хорошую рамку можно построить, если вместо значения solid (сплошная) использовать значение ridge (рамка со складкой):

Сопроводительный текст

Несмотря на то, что элемент IMG имеет атрибуты alt и title , которые соответственно задают замещающий текст и комментарий, явное описание рисунка в виде сопроводительного текста (под или около рисунка) весьма привлекательно для пользователя.

Рассмотрим несколько приёмов, позволяющих снабдить иллюстрацию кратким текстовым описанием.

Первый вариант: рисунок выводится по центру страницы, сопровождающая надпись под рисунком:

Вывод изображения с подписью обеспечивается следующим кодом:

Ниже показан ещё один вариант оформления подрисуночной подписи, имитирующий текст на паспарту. Справа показана та же фотография без всякого оформления (типичная “заплатка”).

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

Обтекание

Обтекание картинки другими элементами можно задавать при помощи атрибута align со значениями:

Обтекание прекращает элемент BR с атрибутом clear:

Обтекание можно задать и при помощи стилевого свойства float (плавающий элемент):

Обтекание прекращает элемент, для которого задано стилевое свойство clear:

Конструирование

При подготовки иллюстрации для Web-страницы её часто разрезают на несколько частей. Такой приём обусловлен причинами, описанными ниже.

Посмотрим, как из отдельных частей собрать единое изображение.

Запустим двух козочек попастись, поместив их в абзац:

Свойство white-space со значением nowrap заставляет браузер выводить элементы в одну строку. При конструировании картинки из фрагментов это необходимо, иначе в узких окнах изображение “развалится”.

Как удалить промежуток между картинками? Запишем так:

Мы убрали пробел между картинками, сомкнув границы тегов, ведь конец строки для браузера равнозначен пробелу.

Добавим еще две козы, расположив их в новом ряду:

Вот коды для этого монолитного абзаца, который не подвержен изменениям размера окна браузера:

Козочки с успехом продемонстрировали приём конструирования сложных рисунков с плотным примыканием отдельных частей. Свойство white-space:nowrap (аналог элемента NOBR) гарантирует нерушимость конструкции. Как бы мы ни уменьшали окно, браузер включит протяжку, но не развалит рисунок на части. Элемент BR переводит строку, когда нужно начать новый ряд.

На основе полученного опыта построим заголовочную часть сайта из следующей картинки:

Эту картинку удобно разрезать на три части: логотип, заголовок и декоративную иллюстрацию:

Оптимизация частей привела к следующему результату:

Исходная картинка после оптимизации имела размер 23 КБ. Экономия составила почти 9 КБ (38%).

Первый фрагмент (логотип) оформлен как ссылка на главную страницу. Результат приводится ниже (ссылка заглушена):

Разрезать картинку на части можно практически в любом графическом редакторе. Очень удобно делать это в приложении Adobe ImageReady (в последних версиях Photoshop это приложение вызывается из меню File).

Приложение Adobe ImageReady не только позволяет разрезать иллюстрацию на части (предусмотрен специальный инструментарий Slice Tool и Slice Select Tool), но и провести оптимизацию частей, и даже получить автоматический HTML-код для показа целого изображения, собранного из отдельных частей.

Для показа сложно-разрезанных картинок используют таблицы (см. следующий урок).

Гипертекстовая карта

Гипертекстовая карта — это неразрезанное изображение, на котором отдельные области оформлены как гипертекстовые ссылки.

Построение гипертекстовой карты рассмотрим на примере.

Команда Роботландского сетевого университета подготовила фото своих участников (в центре руководитель команды):

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

А вот код, который обеспечивает работу этой карты:

Разметка задается следующим образом. В теге <IMG> записывается атрибут usemap со значением-ссылкой на описание “чувствительных” областей картинки:

Значение атрибута usemap представляет собой конструкцию #имя.

Описание “чувствительных” областей размещается в любом месте внутри BODY и записывается в виде контейнера <MAP>…</MAP>:

В открывающем теге MAP указывается атрибут name со значением, совпадающим со значением атрибута usemap в теге IMG (но без символа #).

Контейнер MAP содержит элементы AREA с описанием “чувствительных” областей.

Атрибуты элемента AREA

shape

Этот атрибут задает вид “чувствительной” области. Он может принимать следующие значения:

Атрибут	Что означает
`shape=rect`	прямоугольник
`shape=circle`	окружность
`shape=poly`	многоугольник
`shape=default`	оставшаяся область

coords

Этот атрибут задает координаты области в пикселах. За начало отсчета принимается верхний левый угол картинки. Координаты задаются через запятые.

Для прямоугольника (shape=rect) задаются две пары чисел — координаты верхнего левого и правого нижнего угла (пример: coords="0,0,100,200").

Для окружности (shape=circle) задаются три числа — координаты центра и радиус (пример: coords="50,50,50").

Для многоугольника (shape=poly) задаются пары точек, соответствующие координатам вершин в порядке их построения. Последняя точка автоматически замыкается на первую (пример: coords="0,0,99,49,49,49").

Для shape=default атрибут coords не используется.

href

Этот атрибут задает ссылку для гипертекстового перехода.

nohref

Этот атрибут (он используется одиночно без значений) говорит, что при щелчке по данной области перехода не происходит (область не является гиперссылкой). Атрибут полезен, если необходимо в “чувствительной” области вырезать “нечувствительную” дырку. Атрибут иногда используют в сочетании с атрибутом shape=default, закрывая (на всякий случай!) “чувствительность” оставшихся после разметки участков картинки.

alt

Атрибут задает альтернативный текст для области, но если картинка отсутствует, альтернативный текст не записывается на экран (что, конечно, жаль).

Браузер IE демонстрирует альтернативный текст, как всплывающую надпись при зависании над областью курсора. Браузеры Firefox и Opera игнорируют этот атрибут.

title

Задает всплывающий комментарий для области.

Именно так этот атрибут интерпретируют браузеры Firefox и Opera. Браузер IE атрибут игнорирует.

Рекомендация: используйте одновременно атрибуты alt и title . Это обеспечит показ всплывающей надписи во всех браузерах.

Изготовление карты

Разметку гипертекстовой карты можно выполнять вручную, на глазок. Для прямоугольников это просто. Если на гипертекстовой области нажать мышиную кнопку, то в браузере IE появится контур “чувствительного” прямоугольника. Если теперь, не отпуская кнопку, увести курсор с картинки, то прямоугольник останется.

Немного проб и ошибок с числами, задающими координаты, и разметка выполнена. Старайтесь делать область с небольшим запасом, не рассчитывая на пользователя-снайпера.

А если нужно размечать круглые области или многоугольные? Да, мороки много. И вот здесь помогут специальные средства. Существуют огромное количество программ (загляните в Интернет по поиску), которые позволяют выполнить такую разметку. В таких программах нужные области просто рисуются на картинке, а визуальный редактор услужливо записывает в файл теги AREA с нужным набором координат.

Хороший инструментарий для изготовления графических карт предлагает программа Adobe ImageReady (в последних версиях Photoshop это приложение вызывается из меню File).

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

Самое лучшее применение для гипертекстовой карты — задание чувствительных областей на географической карте. В виде гипертекстовой ссылки можно оформить географический район очень сложной конфигурации, задав его контуры при помощи многоугольника с большим числом вершин.

Часто бывает предпочтительнее вместо гипертекстовых карт просто порезать исходную картинку на несколько частей, сделав каждую из них отдельной ссылкой. При этом можно добиться существенного уменьшения общего “веса” картинки, так как маленькие графические кусочки лучше оптимизируются.

Фрагмент	Формат	Размер
Логотип	JPEG	8619 КБ
Заголовок	GIF	1838 КБ
Декорация	JPEG	3858 КБ
Итого		14315 КБ