Для ссылок же «магистрального» навигационного
меню, полагаю, вполне достаточно указать всего два правила — для элементов,
СОПОСТавЛенНЫХ С селекторами 1) a: link, a: visited И 2) a:hover, a: active.
Воплощение этих тезисов на практике ждет читателя в финальном примере,
венчающем первые четыре главы нашего повествования.
236 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Практический пример — завершенный сайт
Чтобы обобщить все знания и умения, полученные в ходе прочтения первых
четырех глав книги, предлагаю воплотить в жизнь проект
полнофункционального информационного сайта. Что называется, с отделкой «под ключ».
Наш проект предполагает следующую логическую структуру (в скобках
приведены относительные URL соответствующих страниц):
? Сайт о сайтах (index.html; главная страница)
• Концепции (concept/index.html)
D Критерии качества сайтов (concept/quality.html)
D Технологическая цепочка создания сайтов (concept/stages.html)
• Технологии (tech/index.html)
D Расширяемый язык разметки гипертекста XHTML (tech/xhtml.html)
D Каскадные листы стилей CSS (tech/css.html)
• Нюансы (nuances/index.html)
D Организация пространства страницы (nuances/layout.html)
п Проектирование систем навигации (nuances/nav.html)
• О проекте (about/index.html)
• Карта сайта (map/index.html)
Элементы второго уровня этого списка отражают «магистральные» разделы
сайта, названия которых будут отражены в главном меню навигации.
За основу будущего сайта мы примем «резиновый» шаблон с фиксированным
по ширине вертикально ориентированным навигационным блоком,
описанный в листинге 4.20.
Но мы «скрестим» его с шаблоном, рассмотренным в листинге 4.21 — проще
говоря, будем использовать «подложку» белого цвета для содержательной
части страницы, а пустующую полоску окна браузера (возникающую в
случае, когда все содержимое страницы умещается в окне без вертикальной
прокрутки, и «подвал» не дотягивает до нижней границы окошка) заполним
простой фоновой текстурой.
Лист стилей готового сайта
Наш лист стилей будет аппаратно-зависимым. Помимо экранной версии для
настольных компьютеров и ноутбуков, мы реализуем варианты
представления контента для «наладонников» и для вывода на печать.
Глава 4. Использование блочной модели СБ82для верстки сложных веб-страниц 237
Файл листа стилей будет, разумеется, внешним. Примеры, рассмотренные
выше в этой главе, снабжались внутренними листами стилей в основном в
целях экономии бумаги. К тому же, для единственной страницы совершенно
все равно, внедренным или связанным является лист стилей. Совсем другое
дело — сайт, состоящий из множества страниц.
Для связи листа стилей с XHTML-документами мы будем использовать
директиву eimport. Хотя, как мы уже говорили, она является менее
универсальным средством, нежели тег , в нашем случае ее использование более
предпочтительно из тех соображений, что лист стилей «увидят» только те
браузеры, которые более-менее адекватно понимают CSS2. Остальные
пользовательские агенты будут интерпретировать страницу так, будто бы
никакого листа стилей и нет вовсе. И это не плохо, а наоборот хорошо — вместо
того, чтобы демонстрировать результаты интерпретации с горем пополам
обработанного CSS-кода, старые браузеры будут отображать нашу страницу с
«академическим» оформлением по умолчанию, словно в эпоху HTML 2.O.
Впрочем, процент подобных браузеров мал. Страницы сайта будут
показываться исправно, со всем сопутствующим оформлением, во всех сколько-
либо распространенных сегодня графических браузерах— в частности, IE5,
IE6, Opera 5—8, Firefox l.
Хочется верить, что к настоящему моменту читателю известно уже почти все
о каскадных листах стилей. Поэтому я не буду «растекаться мыслью по
древу», а сразу же приведу полный код нашего коронного листа стилей с
необходимыми комментариями прямо внутри.
| Листинг 4.23. Лист стилей для завершенного сайта с комментариями
/* Правила для экранной версии представления данных */
@media screen {
/* Общие установки для страницы */
html, body {
margin: Opx;
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #999 url(images/bg_page.gif) scroll;
font-family: Georgia, «Times New Roman», Times, serif;
}
/* «Подложка» для всей страницы */
#carrier {
238 Часть II.
|
5th Фев 2011
|
Теги:
|