Создание карты сайта с использованием CSS

Новые сообщения · Участники · Правила форума · Поиск · RSS

Страница 1 из 1 1
Модератор форума: Lum1xzOR

Empathy

Дата: Пятница, 10.08.2012, 19:23 | Сообщение # 1

Offline

Сообщений: 121

Группа:

Администраторы

Награды: 0

Репутация: 100

Создание карты сайта с использованием CSS

Привет всем! В этой статье я помогу Вам создать красивую карту сайта с использованием стилей CSS
Карта сайта не только повышает рейтинг сайта в поисковых системах при выдаче поисковых запросов, но и помогает пользователям легко ориентироваться на вашем сайте!
Думаю, что эта статья вызовет у многих интерес, поскольку прочитав её, Вы научитесь делать полноценную карту сайта, используя только CSS и HTML.
Ну, приступим!

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

Пример карты сайта

Первым этапом нашей работы будет создание основы карты. У карты будет три уровня.

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

Теперь нам нужно разместим нижеприведенный код, в "тело" нашего документа.
Или же вы можете открыть страницу index.html в архиве в самом низу страницы этот код содержится в файле index.html
Открываем программу текстовый редактор Notepad++ (описание программы Notepad++ вы можете посмотреть тут), или ему подобную, скачать программу Notepad++ можно в самом низу страницы, выбираем кодировку документа в UTF-8, вставляем приведенный ниже код в программу, сохраняем как HTML документ с именем "index.html".
Не забудьте отредактировать документ под параметры своего сайта (название разделов, адреса страниц и т. д.)

Code

<html>
<head><link id='innova' href='http://ssilki.at.ua/panel/editor/moz/default_edit.css' type='text/css' rel='stylesheet' />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
<title>Карта сайта -- Название вашего сайта ---</title>
</head>
<body>
<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>
</body>
</html>
В строке [code]<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />

укажите точный адрес к файлу slickmap.css

В принципе, если приглядеться, то здесь все предельно просто. Хочу, чтобы Вы заполнили, что, как к элементам первого уровня, так и к элементам второго, Вы можете добавлять еще несколько элементов списков для большего разветвления Вашей карты. Главное, чтобы это все правильно потом отображалось.

Шаг 2. Дизайн карты.

За правильное отображение и дизайн карты сайта будет отвечать файл slickmap.css, содержащий все используемые нами каскадные таблицы. Нам остается подключить его между тегами <head> и </head> следующим образом (в верхнем коде этот код уже прописан!!!):

Code

Заливаем созданную страницу index.html вместе с картинками и файлом slickmap.css из архива на свой сайт!
Вставляем код, приведенный ниже в то место, где хотите видеть карту сайта (например можно создать новый блок и вставить код туда, или вставить в верхнюю часть сайта, как сделал это я!)

Код:
Для текстовой ссылки:

Code

<a href="тут адрес файла index.html"Title="">Карта сайта</a>

Код:
Для ссылки изображения:

Code

Пример карты сайта можно увидеть на моём сайте, нажмите на картинку глобус!
В архиве ниже можно скачать все необходимые файлы. Распакуйте скачанные файлы и залейте к себе на сайт.
Вот и все. Наша карта для сайта полностью готова. Если будут какие-нибудь вопросы или сомнения по поводу создания карты, смело обращайтесь в комментариях! Или пишите в личку! Помогу всем!
P.S. Важно!!! Документ index.html обязательно должен быть сохранём в формате кодировки UTF-8, иначе вместо букв будут отображаться иерогпифы!
Скачать архив

Скачать программу текстовый редактор Notepad++

Создание карты сайта с использованием CSS

Страница 1 из 1
1