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


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

1609
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: