Лучшие
Вторник, 19.03.2024, 06:56
Приветствую Вас Гость | Регистрация | Вход


ссылки
Карта сайта
Главная | Каталог статей

Меню сайта
Главная страница Каталог статей Каталог файлов Форум Чат Онлайн игры Обмен баннерами Гостевая книга
Категории раздела
Новые материалы
Вебмастеру
  • Скрипты для Ucoz
  • Проверка тиц
  • Фотошоп
  • Баннер
    Лучшие ссылки в интернете!

    Бесплатно скачать
    Клипы
    Музыка
    Главная » Статьи » Мои статьи

    Создание карты сайта с использованием CSS
    Создание карты сайта с использованием 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


    Категория: Мои статьи | Добавил: bandjuk (23.09.2011) W
    Просмотров: 3381 | Комментарии: 2 | Теги: Создание карты сайта с использовани | Рейтинг: 0.0/0
    Всего комментариев: 2
    +1  
    1 Alex66s   (02.04.2012 16:41) [Материал]
    Спасибо! Ваша статья мне очень помогла!!!! smile

    +1  
    2 bandjuk   (02.04.2012 18:06) [Материал]
    Рад помочь!

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Поиск
    Форма входа

    Друзья сайта
    Cкачать обои с девушками, эротические обои, обои с авто, 3d обои
    У тебя ещё нет сайта? Закажи его у нас!
    Веб-студия "Фобос"
    Праздники
    Праздники сегодня
    Статистика
    Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

    Посетившие за день
    [ Полный Список ]
    Яндекс.Метрика
    Copyright Глюк Рекордс © 2024

    Создать бесплатный сайт с uCoz