| Главная » Файлы » Скрипты uCoz |
Создаем карту сайта, используя CSS
| 21.12.2009, 19:49 | |
 Всем привет! Сегодня речь пойдет об оформлении карты для сайта. На многих из сайтов эти карты используются исключительно для SEO-оптимизации и выглядят как обычный, уродливый таки-список. Думаю, что этот урок вызовет у Вас большой интерес, поскольку просмотрев его и хорошенько изучив, Вы научитесь делать полноценную карту сайта, используя только CSS и HTML. Шаг 1. HTML-каркас карты Первым этапом нашей работы будет создание основы карты. У карты будет три уровня. Первый - это тот уровень, где должны содержаться основные страницы вашего сайта, которые имеют продолжение. На втором уровне располагаются подпункты, в которых Вы должны изобразить то, на что делятся пункты первого уровня. И, наконец, пункты третьего уровня - это те страницы, которые не имеют продолжения или разветвления. Если Вы не поняли, то объясню на примере демонстрации этого урока... Допустим у нас есть пункты "TV Online" и "Все для Вебмастера". Т. к. "Все для Веб мастера делятся на рубрики, а "TV Online" уже ни на что не делится, значит "Все для Веб мастера" будут относиться к первому уровню, а рубрики, относящиеся к "Все для Веб мастера" - ко второму. Соответственно, пункт "TV Online", не имеющий продолжения, будет вынесен, как отдельный пункт. Думаю, Вы поняли...=) Здесь простая логика. Теперь разместим нижеприведенный код, в "тело" нашего документа:
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, содержащий все используемые нами каскадные таблицы. Нам остается подключить его между тегами и следующим образом:
Code <link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" /> Заключение. | |
| Просмотров: 897 | Загрузок: 2 | Рейтинг: 0.0/0 | |
| Всего комментариев: 0 | |