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


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

1640
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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    228
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: