Создание карты сайта с использованием CSS
Привет всем! В этой статье я помогу Вам создать красивую карту сайта с использованием стилей CSS
Карта сайта не только повышает рейтинг сайта в поисковых системах при выдаче поисковых запросов, но и помогает пользователям легко ориентироваться на вашем сайте!
Думаю, что эта статья вызовет у многих интерес, поскольку прочитав её, Вы научитесь делать полноценную карту сайта, используя только CSS и HTML.
Ну, приступим!
Шаг 1. HTML-каркас карты
Пример карты сайта
Первым этапом нашей работы будет создание основы карты. У карты будет три уровня.
Первый - это тот уровень, где должны содержаться основные страницы вашего сайта, которые имеют продолжение.
На втором уровне располагаются подпункты, в которых Вы должны изобразить то, на что делятся пункты первого уровня.
И, наконец, пункты третьего уровня - это те страницы, которые не имеют продолжения или разветвления.
Если Вы не поняли, то объясню на примере демонстрации этого урока...
Допустим у нас есть пункты "Уроки" и "Поиск". Т. к. "Уроки" делятся на рубрики, а "Поиск" уже ни на что не делится, значит "Уроки" будут относиться к первому уровню, а рубрики, относящиеся к урокам - ко второму. Соответственно, пункт "Поиск", не имеющий продолжения, будет вынесен, как отдельный пункт.
Теперь нам нужно разместим нижеприведенный код, в "тело" нашего документа.
Или же вы можете открыть страницу index.html в архиве в самом низу страницы этот код содержится в файле index.html
Открываем программу текстовый редактор Notepad++ (описание программы Notepad++ вы можете посмотреть тут), или ему подобную, скачать программу Notepad++ можно в самом низу страницы, выбираем кодировку документа в UTF-8, вставляем приведенный ниже код в программу, сохраняем как HTML документ с именем "index.html".
Не забудьте отредактировать документ под параметры своего сайта (название разделов, адреса страниц и т. д.)
В строке укажите точный адрес к файлу slickmap.css
В принципе, если приглядеться, то здесь все предельно просто. Хочу, чтобы Вы заполнили, что, как к элементам первого уровня, так и к элементам второго, Вы можете добавлять еще несколько элементов списков для большего разветвления Вашей карты. Главное, чтобы это все правильно потом отображалось.
Шаг 2. Дизайн карты.
За правильное отображение и дизайн карты сайта будет отвечать файл slickmap.css, содержащий все используемые нами каскадные таблицы. Нам остается подключить его между тегами <head> и </head> следующим образом (в верхнем коде этот код уже прописан!!!):
Шаг 3. Скачиваем нужные файлы.
Заливаем созданную страницу index.html вместе с картинками и файлом slickmap.css из архива на свой сайт!
Вставляем код, приведенный ниже в то место, где хотите видеть карту сайта (например можно создать новый блок и вставить код туда, или вставить в верхнюю часть сайта, как сделал это я!)
Код:
Для текстовой ссылки:
Код:
Для ссылки изображения:
Пример карты сайта можно увидеть на моём сайте, нажмите на картинку глобус!
В архиве ниже можно скачать все необходимые файлы. Распакуйте скачанные файлы и залейте к себе на сайт.
Вот и все. Наша карта для сайта полностью готова. Если будут какие-нибудь вопросы или сомнения по поводу создания карты, смело обращайтесь в комментариях! Или пишите в личку! Помогу всем!
P.S. Важно!!! Документ index.html обязательно должен быть сохранём в формате кодировки UTF-8, иначе вместо букв будут отображаться иерогпифы!
Скачать архив
Скачать программу текстовый редактор Notepad++
Возможно Вас также заинтересует:
Как установить favicon.ico
|
Спасибо! Ваша статья мне очень помогла!!!! 
