Добавить в избранное  ||  Колонки с разделителем  ||  Начало  ||  Создание буквицы

11. Создание подрисуночной подписи

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

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

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

Пример 11.1. Создание подрисуночной надписи с помощью таблицы

<table width="100" border="0" cellspacing="0" cellpadding="4"
bgcolor="#CC9900" align="center">
<tr>
<td><img src="figure.jpg" width="100" height="111"></td>
</tr>
<tr>
<td>Пример подрисуночной подписи</td>
</tr>
</table>

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

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

Пример 11.2. Создание отступов вложенными таблицами

<table width="100" border="0" cellspacing="0" cellpadding="6" align="left">
<tr>
<td><table width="100" border="0" cellspacing="0" cellpadding="4" bgcolor="#CC9900">
<tr>
<td><img src="figure.jpg" width="100" height="111"></td>
</tr>
<tr>
<td>Пример подрисуночной надписи</td>
</tr>
</table>
</td>
</tr>
</table>

Добавить в избранное  ||  Колонки с разделителем  ||  Начало  ||  Создание буквицы

top