Оформление карты сайта
Карта сайта располагается на отдельной странице и содержит список всех его разделов. Ею можно воспользоваться в том случае, когда не по- лучается найти необходимую информацию с помощью навигационно- го меню. Кроме того, она представляет собой краткий обзор содержа- ния сайта и дает возможность перехода к заинтересовавшему разделу одним щелчком мыши.
Решение
Поскольку карта сайта является списком доступных разделов вашего сайта, ее лучше всего разметить как набор вложенных списков. Пун- ктами основного списка станут основные навигационные разделы; каждый из пунктов будет содержать подпункты – навигацию второго уровня. Такой метод подойдет и для сайтов с многоуровневой системой навигации; благодаря такой разметке новые пункты будет легко созда- вать с помощью системы управления контентом. На рис. 4.21 отобра- жается результат обработки следующего кода:
chapter04/sitemap.html (фрагмент)
<ul id=”sitemap”>
<li><a href=”/about”>About us</a>
<ul>
<li><a href=”/about/team”>The team</a></li>
<li><a href=”/about/history”>Our history</a></li>
</ul>
</li>
<li><a href=”/products”>Our products</a></li>
<li><a href=”/order”>Ordering information</a>
<ul>
<li><a href=”/order/shops”>Our shops</a></li>
<li><a href=”/order/stockists”>Other stockists</a></li>
<li><a href=”/order/onlinestockists”>Online stockists</a></li>
</ul>
</li>
<li><a href=”/contact”>Contact us</a></li>
</ul>
chapter04/sitemap.css (фрагмент)
ul#sitemap { margin: 0; padding: 0;
list-style: none;
}
ul#sitemap ul { padding-left: 1em; list-style: none;
}
ul#sitemap li {
border-bottom: 2px solid #FFFFFF;
}
ul#sitemap li a:link, ul#sitemap li a:visited{
background-color: #CCCCCC;
display: block;
padding: 0.4em;
text-decoration: none;
color: #057FAC;
}
ul#sitemap li a:hover { background-color: #999999; color: #FFFFFF;
}
ul#sitemap li li a:link, ul#sitemap li li a:visited{
background-color: #FFFFFF;
display: block;
padding: 0.4em;
}
ul#sitemap li li a:hover { background-color: #FFFFFF; color: #057FAC;
Рис. 4.21. Оформленная с помощью CSS карта сайта
Обсуждение
Вначале карта сайта представлена в виде списка основных элементов на- вигации и вложенных подменю, как и в рассмотренном ранее примере
создания навигации на основе списка. Отличие лишь в том, что на кар- те сайта все пункты списка, в том числе и подпункты, отображаются од- новременно. Если навигация включает большее количество уровней, их можно представить по тому же принципу – в виде вложенных списков.
Будьте внимательны при работе со вложенными списками. Вложенный список необходимо разместить перед закрывающим тегом </li> роди- тельского списка. Без применения таблицы стилей карта сайта будет выглядеть, как на рис. 4.22. Теперь создаем стили для родительского списка и вложенных списков. Для первого списка я убрала внутренние и внешние отступы, а для вложенных списков добавила отступ слева размером в 1em, чтобы сразу было видно, что они представляют собой следующий уровень навигации:
Рис. 4.22. Вид карты сайта без использования CSS
chapter04/sitemap.css (фрагмент)
ul#sitemap { margin: 0; padding: 0;
list-style: none;
}
ul#sitemap ul { padding-left: 1em; list-style: none;
}
Теперь следует создать отличительный стиль пунктов основного спи- ска, чтобы подчеркнуть, что они представляют основные разделы сай- та. Как и при оформлении навигации, я задаю стиль элементу, присво- ив значение block свойству display, чтобы пользователь для перехода по ссылке мог щелкнуть по всей занимаемой элементом области, а не толь- ко по самому тексту:
chapter04/sitemap.css (фрагмент)
ul#sitemap li {
border-bottom: 2px solid #FFFFFF;
}
ul#sitemap li a:link, ul#sitemap li a:visited{
background-color: #CCCCCC;
display: block;
padding: 0.4em;
text-decoration: none;
color: #057FAC;
}
ul#sitemap li a:hover { background-color: #999999; color: #FFFFFF;
}
Данные стили будут применены по отношению к элементам списка, по- этому необходимо также задать специальные стили для вложенных ссылок, поскольку у них не должно быть серого фона. Поэтому восполь- зуемся более конкретным селектором для выбора этих элементов:
chapter04/sitemap.css (фрагмент)
ul#sitemap li li a:link, ul#sitemap li li a:visited{
background-color: #FFFFFF;
display: block;
padding: 0.4em;
}
ul#sitemap li li a:hover { background-color: #FFFFFF; color: #057FAC;
}
Вот мы и написали таблицу стилей для оформления карты сайта. На основе представленных приемов вы вполне сможете создать свои соб- ственные стили.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Информирование поисковой системы Google о подборках страниц (0)
- Макет фиксированной ширины с двумя колонками по центру страницы (0)
- Создание колонки, занимающей все доступное пространство по высоте (0)
- Создание макета с тремя колонками средствами CSS (0)
- Создание макета страницы с помощью CSS-таблиц (0)
- Изменение стиля маркеров списка или удаление маркеров (0)
- Использование изображения вместо маркера списка (0)