Обтекание текстом изображения
Когда вы обдумываете первоначальный дизайн Web-страницы, вопросом первостепенной важности является компоновка документа. На Web-странице с удачным дизайном текст и графика расположены в организованном, легком для восприятия формате. Более того, организация содержимого страницы помогает глазам читателя плавно переходить от графических изображений к связанному с ними тексту и обратно.
Предположим, например, вы создаете Web-страницу, содержащую несколько изображений книг. Для каждого изображения необходим небольшой абзац информации, описывающий объект, и его розничная цена. Поместив графические изображения, текст описания и цены в таблицу, вы можете дать Web-браузеру указание отображать текстовую информацию где угодно возле изображения, как показано на рис. 2.18.
Рис. 2.18. Пример совместного представления рисунков товаров вместе с их кратким описанием и ценой
Следующие HTML-дескрипторы создают таблицу, в которой первый рисунок будет отображен в строке 1, столбце 1 с соответствующими ему описанием (рядом с рисунком) в строке 1, столбце 2 и ценой (под рисунком) в строке 2, столбце 1. (Строка 3, столбцы 1 и 2 были добавлены для создания дополнительного пространства между предметами, описаниями и ценами.)
<table border="4" cellpadding="0" cellspacing="2">
<tr><td width="72" align="center">
<img height="32" width="32" src="image 1.jpg"></td>
<td>Вставьте описание</td><tr>
<tr><td width="72" align="center">Вставьте цену</td>
<td></td></tr>
<tr><td width="72"</td>
<td></td></tr>
<tr><td width="72" align="center">
<img height="32" width="32" src="image 2.jpg"></td>
<td>Вставьте описание</td><tr>
<tr><td width="72" align="center">Вставьте цену</td>
<td></td></tr>
<tr><td width="72"</td>
<td></td></tr>
<tr><td width="72" align="center">
<img height="32" width="32" src="image 3.jpg"></td>
<td>Вставьте описание</td><tr>
<tr><td width="72" align="center">Вставьте цену</td>
<td></td></tr>
<tr><td width="72"</td>
<td></td></tr>
</table>
Использование таблицы для управления структурой текста и графики создает приятную взгляду Web-страницу. Кроме того, поскольку содержащие большое количество текста Web-страницы меньше, чем Web-страницы, изобилующие графическими изображениями, использование текста в ячейках описания и цены приводит к созданию документа меньшего, размера, нежели при преобразовании текста в графику, и, соответственно, Web-страница быстрее загружается.