Создание маркеров и списков с помощью таблиц и графики
Web-дизайнеры всегда имели возможность создавать списки с квадратным или круглым маркером перед каждым элементом списка. К сожалению, при создании стандартного маркированного (или, пользуясь принятым в языке HTML термином, неупорядоченного) списка дизайнер может обозначать его элементы только маркерами из ограниченного количества символов. Например, следующий код сгенерирует маркированный список, приведенный на рис. 2.21.
<ul>
<li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li>
</ul>
Начальный и конечный дескрипторы неупорядоченного списка (<ul></ul>)идентифицируют начало и конец маркированного списка, а дескриптор <li> определяет элемент списка (см. рис. 2.21).
Рис. 2.21. Упорядоченный список
С другой стороны, таблицы позволяют создавать свои собственные маркеры за счет вставки графического изображения-маркера в ячейку таблицы. Обычно таблица, используемая для создания маркированного списка, содержит два столбца. Первый столбец содержит в себе графическое изображение, используемое в качестве маркера, а второй столбец — текст, описывающий элемент списка.Стандартная таблица с двумя столбцами создает список с броскими изображениями в качестве символов маркеров, как, например, показано на рис. 2.22.
Рис. 2.22. Неупорядоченный список со специальными маркерами
ПРАКТИКУМ
Предположим, например, что вы создаете список, содержащий три элемента, и хотите использовать изображение стрелки в качестве маркера для каждого из элементов списка. Для создания показанного выше маркированного списка служит следующий код:
<table border="4" cellpadding="0" cellspacing="2" width="137"><tr><td><img height="32" width="32" src="arrow.gif"></td><td>Элемент списка 1</td></tr><tr><td><img height="32" width="32" src="arrow.gif"></td><td>Элемент списка 2</td></tr><tr><td><img height="32" width="32" src="arrow.gif"></td><td>Элемент списка 3</td></tr></table>
Поскольку ячейки таблицы могут содержать любую графику, поэкспериментируйте, заменяя обычные изображения, используемые для маркеров, чем-нибудь неординарным. Например, если вы создаете маркированный список действий, необходимых для выращивания роз, замените стандартный символ маркера на графическое изображение красной розы.