Шаг 27.
Графические маркеры списка

    На этом шаге мы рассмотрим еще один вад маркеров - графические маркеры списка.

    Стандартный набор маркеров для создания списков не позволяет использовать другие графические изображения. С другой стороны на различных 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>, то нам доступны все его параметры, влияющие на изображение!

    На следуещем шаге рассмотрим нумерованный список.

Предыдущий шаг Содержание Следующий шаг