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

На этой странице:

• Рамка
• Сопроводительный текст
• Обтекание
• Конструирование
• Гипертекстовая карта

Рамка

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

<IMG src="./pic/1289.gif" border=1 width=140 height=101 alt="Задумчивый портрет">

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

<IMG src="./pic/1289.gif" border=5 width=140 height=101 alt="Траурный портрет">

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

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

<IMG src="./pic/1289.gif" style="border:2px solid olive" width=140 height=101 alt="Задумчивый портрет">

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

<IMG src="./pic/1289.gif" style="border:5px ridge #ccbbaa" width=140 height=101 alt="Задумчивый портрет">

Именно такую рамку сконструировали ребята из команды Санкт-Петербурга, обучаясь на курсах Роботландского университета. Посмотрите, как хорошо в этой рамке командному фото (2006/2007 учебный год, руководитель команды Тузова Ольга Алексеевна):

Зелёная рамка со “складкой” хорошо подходит для оформления пейзажа:

<IMG src="./pic/1290.jpg" style="border:5px ridge lime" width=200 height=143 alt="Озеро Плещеево">

Разновидностью рамки является паспарту — картонная рамка. Паспарту можно смоделировать при помощи стилевых свойств:

.frame { padding-top: 20px; padding-bottom: 20px; width:240px; background:#e5e5e5; border:1px solid black; text-align:center; } <DIV class=frame> <IMG src="./pic/1291.jpg" width=200 height=300 style="border:2px solid white" alt="Портрет скульптора"> </DIV>

Самые интересные рамки — рисованные. Здесь ничто не сдерживает творчество конструктора, а внешний вид рамки не будет зависеть от особенностей графического браузера. Кроме того, на фото можно записать название и имя автора снимка:

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

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

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

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

Рис. 1. Схема сайта с табличной структурой

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

P.center
{
  text-align:center
}
.sign
{
  display:block;
  font-family:sans-serif;
  font-size:70%;
}

<P class=center>
  <IMG src="./pic/1137.gif" border=0
       width=430 height=245
       alt="Схема сайта с табличной структурой">
  <SPAN class=sign>Рис.&nbsp;1.&nbsp;Схема 
        сайта с табличной структурой</SPAN>     
</P>

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

Dreaming Работа американской фотохудожницы Ким Андерсон

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

.frame
{
  padding-top: 30px;
  padding-bottom: 10px;
  background:#4d4d4d; 
  border:5px ridge #ff9900;
  text-align:center;
}
.sign
{
  font-family:sans-serif;
  font-size:70%;
  color:white;
  padding-left:10px;
  padding-right:10px;
}
.border
{
  border:1px solid white
}

<DIV class=frame style="width:260px">
  <IMG class=border src="./pic/1293.jpg"
       width=200 height=234 alt="Dreaming">
  <DIV class=sign>
    Dreaming<BR><BR>Работа американской 
    фотохудожницы Ким Андерсон
  </DIV> 
</DIV>

Обтекание

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

• left — картинка выравнивается по левому краю, остальные элементы обтекают справа;
• right — картинка выравнивается по правому краю, остальные элементы обтекают слева.

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

• <BR clear=left> — прекращение обтекания, заданного как align=left;
• <BR clear=right> — прекращение обтекания, заданного как align=right;
• <BR clear=all> — прекращение любого обтекания.

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

• float:left — элемент выравнивается по левому краю, остальные элементы обтекают справа;
• float:right — элемент выравнивается по правому краю, остальные элементы обтекают слева.

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

• clear:left — прекращение обтекания, заданного как float:left;
• clear:right — прекращение обтекания, заданного как float:right;
• clear:both — прекращение любого обтекания.

Обтекание справа:

Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.

float:left или align=left

Обтекание слева:

Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.

float:right или align=right

Обтекание слева и справа:

Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.

Код последнего примера показан ниже:

.left
{
  float:left;
  margin-right:10px;
  margin-bottom:5px;
}
.right
{
  float:right; 
  margin-left:10px;
  margin-bottom:5px;
}

<IMG src="./pic/1294.jpg" class=left
     width=79 height=104 alt="Светлана"> 
<IMG src="./pic/1295.jpg" class=right
     width=79 height=104 alt="Светлана"> 
<P align=justify>               
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
Текст. Текст. Текст.

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

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

• Уменьшение килобайтного объёма иллюстрации. Небольшие фрагменты легче оптимизировать. Однотонные участки, участки с чёткими границами, текстовые надписи можно сохранять в формате GIF (или PNG-8), минимизируя число цветов в палитре отдельно для каждого фрагмента. При сохранении фрагментов в формате JPEG можно управлять параметром качество/объём отдельно для каждой части. В итоге килобайтный объём оптимизированных кусочков оказывается меньше объема полной оптимизированной картинки.
• Возможность создания карты ссылок. Отдельные фрагменты общей иллюстрации можно оформить как гипертекстовые ссылки, что особенно полезно, если изображение используется как навигационное меню.
• Кажущаяся быстрота загрузки. Иллюстрация появляется на экране по мере поступления её частей по сети, и пользователю есть чем занять себя, в ожидании полной загрузки страницы.

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

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

Вот код этого абзаца:

<P style="white-space:nowrap">
  <IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top>
  <IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top>
</P>

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

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

<P style="white-space:nowrap">
  <IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top
  ><IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top>
</P>

Получилось:

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

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

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

<P style="white-space:nowrap;
          width:160px;
          border:5px ridge #ccbbaa">
  <IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top
  ><IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top><BR>
  <IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top
  ><IMG src="./pic/12100.jpg" width=80 height=70
       hspace=0 vspace=0
       alt="Коза" border=0 align=top>
</P>

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

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

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

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

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

Вывод картинки на экран обеспечивает код:

<P style="white-space:nowrap">
  <A href="index.htm"><IMG src="./pic/1297.jpg" 
       width=209 height=181 border=0 
       hspace=0 vspace=0 alt="Логотип"
       title="Переход на главную"
  ></A><IMG src="./pic/1298.gif" width=176 height=181 
       border=0 hspace=0 vspace=0 alt="Цифровое фото"
  ><IMG src="./pic/1299.jpg" width=116 height=181 
       border=0 hspace=0 vspace=0 alt="">
</P>

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

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

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

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

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

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

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

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

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

Проверьте, как это работает:

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

<IMG src="./pic/12101.png" 
     width=394 height=264 border=0
     usemap="#map4299"
     alt="Команда 4299" title="Команда 4299">

<MAP name="map4299">
  <AREA shape="rect" alt="Вова" title="Вова"
        coords="35,129,109,197" href="120401.htm">
  <AREA shape="rect" alt="Иван" title="Иван" 
        coords="48,33,116,110" href="120402.htm">
  <AREA shape="rect" alt="Любаша" title="Любаша" 
        coords="263,42,326,109" href="120403.htm">
  <AREA shape="rect" alt="Славик" title="Славик" 
        coords="240,129,305,196" href="120404.htm">
  <AREA shape="circle" alt="Ирина Ивановна" 
        title="Ирина Ивановна" 
        coords="180,103,61" href="120405.htm">
</MAP>

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

<IMG src="./pic/12101.png" 
     width=394 height=264 border=0
     usemap="#map4299"
     alt="Команда 4299" title="Команда 4299">

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

#имя

В нашем случае имя задано как “map4299”.

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

<MAP name="map4299">
  <AREA shape="rect" alt="Вова" title="Вова"
        coords="35,129,109,197" href="1.html">
  <AREA shape="rect" alt="Иван" title="Иван" 
        coords="48,33,116,110" href="2.htm">
  <AREA shape="rect" alt="Любаша" title="Любаша" 
        coords="263,42,326,109" href="3.htm">
  <AREA shape="rect" alt="Славик" title="Славик" 
        coords="240,129,305,196" href="4.htm">
  <AREA shape="circle" alt="Ирина Ивановна" 
        title="Ирина Ивановна" 
        coords="180,103,61" href="5.htm">
</MAP>

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

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

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

shape

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

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).

И последние рекомендации.

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

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

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