На этом шаге мы рассмотрим еще один вад маркеров - графические маркеры списка.
Стандартный набор маркеров для создания списков не позволяет использовать другие графические изображения. С другой стороны на различных Web-страницах мы можем наблюдать использование разнообразных изображений в качестве маркеров списка. В этом разделе мы разберем алгоритм применения графического изображения в качестве маркера списка. Но для этого нам нужно разобраться в назначении тэга <UL>.
Замечание. Этот тэг только указывает браузеру, что вся информация, располагаемая после него, отображается со сдвигом вправо. Тэги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.
Если требуется построить список с маркером в виде графического изображения, то нужно отказаться от использования тэга <LI>! Достаточно вставить перед каждым элементом желательное графическое изображение. Однако раз мы отказались от использования тэга <LI>, то нужно позаботиться о том, чтобы каждый элемент списка располагался со следующей строки. Для этого в конце каждой строки можно разместить тэг абзаца <P> или принудительного перевода строки <BR>. Таким образом, структура каждого элемента списка будет следующей:
Рис.1. Структура элемента списка
Изменим предыдущий пример, взяв в качестве маркера графическое изображение:
<HTML>
<HEAD>
<TITLE> Пример маркированного списка. </TITLE>
</HEAD>
<BODY>
<UL> <!-- Начало списка. -->
<B> Знаки зодиака: </B><BR>
<IMG SRC =Плитка.bmp> Овен <!-- Элементы списка.--><BR>
<IMG SRC =Плитка.bmp> Телец <BR>
<IMG SRC =Плитка.bmp> Близнецы <BR>
<IMG SRC =Плитка.bmp> Рак <BR>
<IMG SRC =Плитка.bmp> Лев <BR>
<IMG SRC =Плитка.bmp> Дева <BR>
<IMG SRC =Плитка.bmp> Весы <BR>
<IMG SRC =Плитка.bmp> Скорпион <BR>
<IMG SRC =Плитка.bmp> Стрелец <BR>
<IMG SRC =Плитка.bmp> Козерог <BR>
<IMG SRC =Плитка.bmp> Водолей <BR>
<IMG SRC =Плитка.bmp> Рыбы <BR>
</UL> <!-- Конец списка. -->
</BODY>
</HTML>
В браузере это будет выглядеть следующим образом:
Рис.2. Пример использования графического маркера
Замечание. Обратите внимание на тот факт, что если мы используем тэг <IMG>, то нам доступны все его параметры, влияющие на изображение!
На следуещем шаге рассмотрим нумерованный список.
