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

1770
8.6 из 10
Проголосовало: 3




  • Скачать с сервера
  • Скачать
  • Смотреть демо

Шаг 1. HTML-каркас карты

Первым этапом нашей работы будет создание основы карты. У карты будет три уровня. Первый - это тот уровень, где должны содержаться основные страницы вашего сайта, которые имеют продолжение. На втором уровне располагаются подпункты, в которых Вы должны изобразить то, на что делятся пункты первого уровня. И, наконец, пункты третьего уровня - это те страницы, которые не имеют продолжения или разветвления. Если Вы не поняли, то обьясню на примере демонстрации этого урока... Допустим у нас есть пункты "Уроки" и "Поиск". Т. к. "Уроки" делятся на рубрики, а "Поиск" уже ни на что не делится, значит "Уроки" будут относиться к первому уровню, а рубрики, относящиеся к урокам - ко второму. Соответственно, пункт "Поиск", не имеющий продолжения, будет вынесен, как отдельный пункт. Думаю, Вы поняли...=) Здесь простая логика.

Теперь разместим нижеприведенный код, в "тело" нашего документа:

Code
<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> следующим образом:

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


Заключение.

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

Источник: www.astuteo.com


Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 2

Belka
-1
Belka написал: Написано 19 Октября 2013 в 19:37
Комментарий №1
Вечер добрый. Как человек, только начинающий осваивать юкоз, плохо ориентируюсь. Вроде бы на одном сайте у меня все получилось по вашей инструкции, на втором ни в какую не идет.
Подскажите, плиз,
slickmap.css вставляется в Редакторе страниц
HTML-каркас карты на странице с картой?
а скачанный код в Таблицу стилей?

GrandZ
+1
GrandZ написал: Написано 25 Июля 2014 в 13:21
Комментарий №2
1. Содержимое архива залить на свой сайт (лучше по FTP но можно и так)
2. Index.html не заливай на сайт, а Содержимое index.html используй в редакторе страниц.
З.Ы. Советую убрать в стилях Первый блок - он твой дизайн ушатывает

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: