Приветствую Вас, Гость

Создание маркеров и списков с помощью таблиц и графики

 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>

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