Создаем карту сайта, используя CSS

Аватара пользователя
SLITE
Сообщения: 203
Зарегистрирован: 01 янв 2010
Всем привет =) Думаю, что этот урок вызовет у Вас большой интерес, поскольку просмотрев его и хорошенько изучив, Вы научитесь делать полноценную карту сайта, используя только CSS и HTML.
Для начала просмотрите демо получившейся у меня карты на примере данного сайта и скачайте исходные файлы урока:
mapcss.zip    9.74 КБ • 80 скачиваний


Шаг 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="#">Главная</a></li>
  <li><a href="#">Об авторе/Контакты</a>
  <ul>
  <li><a href="#">Об авторе</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </li>
  <li><a href="#">Статьи</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="#">Файлы</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, содержащий все используемые нами каскадные таблицы. Нам остается подключить его между тегами <head> и </head> следующим образом:


Код: Выделить всё

<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />


Заключение.

Вот и все. Наша карта для сайта полностью готова. Если будут какие-нибудь вопросы или сомнения по поводу создания карты, смело обращайтесь в комментариях! ;-) До новых встреч!


Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: http://www.astuteo.com

Вернуться в «Уроки и статьи по верстке»