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


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

1631
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 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    226
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    Топ пользователей: