TML, CSS, СКРИПТЫ: практика создании сайтов

Та же самая

«подложка» с идентификатором carrier для всей страницы в целом

(см. листинг 4.18), те же самые обтекаемый блок навигации и сдвинутая на

ширину последнего вправо область основного текста (см. листинг 4.20).

Разве что теперь в IE никуда ничего не съезжает — ширина шаблона-то

жестко фиксированная. Кстати говоря, отпала необходимость дополнительного

определения абзаца в содержимом «подвала» — надо признать, что в

условиях жестких рамок Internet Explorer ощущает себя куда более уверенно.

Напоследок рассмотрим еще один вариант шаблона, демонстрирующий один

из способов создания иллюзии равенства навигационного блока и области

основного содержания по высоте. Код получается даже проще, чем в

предыдущем случае.

Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 225

Рис. 4.25. Отображение страницы, описанной в листинге 4.21

^ЛйотнгХЯ^ЦЯЯща фиксированной ширины с иллюзией равенства высот * \

| вертикального навигационного блока и области основного содержания

^ «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

Результат интерпретации вышеприведенного кода демонстрирует рис. 4.26.

Весь секрет— в фоновом изображении bg_menu.gif, назначенном общей для

всей страницы «подложке» carrier. Фон блока навигации теперь прозрачен,

как слеза; более того, никакой рамки у навигационного блока (во всяком слу-

228 Часть II. Применение веб-технологий стороны клиента для создания сайтов

чае, заданной при помощи свойств семейства border) отныне нет. Рамку

имитирует все та же фоновая картинка. Пользователю-то какая разница!

Рис. 4.26. Полная иллюзия таблицы в действии

Существуют и более изощренные способы «пускать пыль в глаза», даже без

использования графики. Полагаю, однако, что рассматривать их здесь

совершенно излишне — свою точку зрения по поводу контроля высоты блочных

элементов я высказал, надо полагать, вполне определенно и недвусмысленно.

Все примеры шаблонов страниц, рассмотренные в этой главе, были

протестированы в следующих браузерах (не говоря уже о проверке валидатором): IE5,

IE6, Opera 5, Opera 7, Opera 8, Firefox 1. Размеры, взаимное расположение и

внешний вид всех областей на страницах при адекватных габаритах окон в

полной мере соответствуют заявленным целям. Правда, IE5 отображает

Глава 4. Использование блочной модели Св82для верстки сложных веб-страниц 229

сплошную рамку вместо точечной— но на этом все сколько-либо

существенные различия заканчиваются.

Системы навигации сайтов

В идеале— об этом можно прочесть у Якоба Нильсена (Jakob Nielsen,

www.useit.com), одного из ведущих мировых специалистов в области

проектирования пользовательских интерфейсов — навигация сайта должна в

любой момент предоставлять посетителю четкие ответы на три вопроса: «Где я

нахожусь?», «Где я уже был?» и «Куда я могу отсюда пойти?»

Качество и удобство системы навигации любого сайта напрямую зависит от

того, насколько ясной и продуманной является его логическая структура,

принятая на одном из начальных этапов проектирования.