Подрисуночная подпись

Подрисуночная подпись — текст, являющийся комментарием к рисунку и его описывающий. Такая подпись важна, поскольку привлекает внимание читателя к рисунку и дает больше информации об изображении. У тега IMG существует, конечно, параметр alt, который задает текст подсказки, но чтобы ее получить приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и соответственно более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться и сбоку от рисунка, если это продиктовано соображениями верстки и дизайна.

Для размещения на веб-странице и рисунка и подписи к нему удобней всего воспользоваться таблицей. В этом случае можно задать цвет каемки вокруг рисунка, ее цвет, ширину, а также местоположение текста (рис. 1).

Пример подрисуночной подписи	Пример подрисуночной подписи
Рис. 1. Варианты размещения подрисуночной подписи

Ширина таблицы определяется исходя из размеров рисунка и желаний автора. В примере 1 ширина таблицы совпадает с шириной рисунка; ширина цветной рамки вокруг изображения задается с помощью параметра cellpadding или cellspacing. В данном случае абсолютно все равно, какой предпочесть, результат будет один. Цвет таблицы, указанный параметром bgcolor, определяет цвет подложки вокруг изображения и подписи к нему.

Пример подрисуночной подписи

Выше представлен простой вариант, когда рисунок с подписью размещен по центру страницы. Если же необходимо поместить нашу конструкцию в текст чтобы он ее обтекал, в этом случае можно воспользоваться свойством таблицы align=left | right. Это свойство выравнивает таблицу по левому или правому краю страницы. Все бы ничего, да вот отступы от края таблицы до текста, как в теге IMG, не предусмотрены. Получается очень некрасиво, когда текст словно наезжает на наш рисунок. Страдают принципы дизайна и простой здравый смысл подсказывает, что читать такой текст нелегко. Нам надо получить отступы вокруг таблицы, и для этого следует воспользоваться вложенными таблицами. Создаем таблицу, выровненную по левому или правому краю, той же ширины, что и рисунок, а параметр cellpadding будет определять расстояние от текста до таблицы (пример 2).

Применение вложенных таблиц сопряжено с определенными сложностями — это и большой объем конечного кода, и неудобство редактирования данных. Поэтому упростим себе задачу и воспользуемся стилями. Создание полей вокруг картинки происходит с помощью параметра padding, а отступы от текста задаются атрибутом margin. Выравнивание картинки по левому или правому краю задается свойством float (пример 3).

В примере показано создание подрисуночной подписи внизу картинки. Рисунок размещается по левому краю окна браузера, текст обтекает его справа. Отступ от текста установлен 10 пикселов по правому и нижнему краю через универсальный параметр margin.