 Шаг 1. HTML-каркас карты
Первым этапом нашей работы будет создание основы карты. У карты будет
три уровня. Первый - это тот уровень, где должны содержаться основные
страницы вашего сайта, которые имеют продолжение. На втором уровне
располагаются подпункты, в которых Вы должны изобразить то, на что
делятся пункты первого уровня. И, наконец, пункты третьего уровня - это
те страницы, которые не имеют продолжения или разветвления. Если Вы не
поняли, то объясню на примере демонстрации этого урока... Допустим у нас
есть пункты "Уроки" и "Поиск". Т. к. "Уроки" делятся на рубрики, а
"Поиск" уже ни на что не делится, значит "Уроки" будут относиться к
первому уровню, а рубрики, относящиеся к урокам - ко второму.
Соответственно, пункт "Поиск", не имеющий продолжения, будет вынесен,
как отдельный пункт. Думаю, Вы поняли...=) Здесь простая логика.
Теперь разместим нижеприведенный код, в "тело" нашего документа: Код: <div class="sitemap">
<h1>Адрес_сайта</h1>
<h2>Карта сайта адрес_сайта</h2>
<ul id="utilityNav">
<li><a href="#">Регистрация</a></li>
<li><a href="#">Личный кабинет</a></li>
<li><a href="#">Облако меток</a></li>
<li><a href="#">Поиск</a></li>
</ul>
<ul id="primaryNav" class="col4">
<li id="home"><a href="http://vk-farmer.ucoz.ru/">Главная</a></li>
<li><a href="http://vk-farmer.ucoz.ru/">Об авторе/Контакты</a>
<ul>
<li><a href="http://vk-farmer.ucoz.ru/">Об авторе</a></li>
<li><a href="http://vk-farmer.ucoz.ru/">Контакты</a></li>
</ul>
</li>
<li><a href="http://vk-farmer.ucoz.ru/">Статьи</a>
<ul>
<li><a href="#">Рубрика_1</a></li>
<li><a href="#">Рубрика_2</a></li>
<li><a href="#">Рубрика_3</a></li>
<li><a href="#">Рубрика_4</a></li>
<li><a href="#">Рубрика_5</a></li>
</ul>
</li>
<li><a href="http://vk-farmer.ucoz.ru/">Файлы</a>
<ul>
<li><a href="#">Группа_1</a></li>
<li><a href="#">Группа_1</a></li>
<li><a href="#">Группа_1</a></li>
<li><a href="#">Группа_1</a></li>
<li><a href="#">Группа_1</a></li>
</ul>
</li>
</ul>
</div>
В принципе, если приглядеться, то здесь все предельно просто. Хочу,
чтобы Вы заполнили, что, как к элементам первого уровня, так и к
элементам второго, Вы можете добавлять еще несколько элементов списков
для большего разветвления Вашей карты. Главное, чтобы это все правильно
потом отображалось. Шаг 2. Дизайн карты.
За
правильное отображение и дизайн карты сайта будет отвечать файл
slickmap.css, содержащий все используемые нами каскадные таблицы. Нам
остается подключить его между тегами и следующим образом: Код: <link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
http://doz.ucoz.net/load_file/mapcss.zip
Понравилась статья-Жми +1
Нравится
[
Получить прямую ссылку на новость
][
Скрыть ссылки ]
|
Это может быть интересно:
|
| 
