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

Прежде всего, по той

причине, что он дает нам возможность указать требуемую ширину лишь

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

шаблона.

Кроме того, вторая из перечисленных стратегий выгоднее первой в плане

обеспечения совместимости с устаревшими браузерами (например, Internet

Explorer 5.0), некорректно интерпретирующими CSS-свойства width и height.

Предлагаем вниманию читателей один из возможных вариантов

преобразования описанной выше «резиновой» страницы в шаблон с фиксированной

шириной 600 пикселов.

Добавив к общей картине пару штрихов в виде двух фоновых изображений

«на сумму» меньше килобайта, получим поистине шикарный результат:

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

«*ШШ

&

* file ///Z./examples/04/18/index html

3 Sn^bfoT

Правильный сайт

Здесь ¦ Будет ¦ Меню • Навигации

Организация пространства страницы

Успех будущего веб-проекта во многом определяется качеством

исполнения фундамента — шаблонов главной и внутренних страниц

сайта. Мы приняли за аксиому тот факт, что все сайты

информационного характера (в отличие от презентационных

проектов) в значительной мере похожи друг на друга. И общность эта

сильнее всего выражена в составе и взаимном расположении

элементов страниц.

В организации пространства страницы любого информационного

сайта можно выделить как минимум четыре функциональные области

со строго определенными ролями. Это «шапка» (в английской

терминологии — header), блок навигации, область основного текста и

«подвал» (footer).

№Ш

Рис. 4.21. Фиксированная по ширине страница, использующая фоновые изображения

для пустующего пространства окна и навигационных панелей

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

Страница, описанная в вышеприведенном листинге, в графических браузерах

отображается так, как показано на рис. 4.21.

В качестве «подложки» используется блок с идентификатором carrier.

Правило body {text-align: center} используется для того, чтобы отцентри-

ровать нашу страницу; но свойство text-align наследуется вложенными

элементами, поэтому мы применили «компенсирующее» правило #carrier

{text-align: left}. Кроме того, следует обратить внимание, что значения

левого и правого отступа для блока carrier должны быть установлены в auto,

иначе браузеры, четко следующие букве стандарта (например, Firefox) не

будут центрировать нашу подложку, ибо значение свойства margin для

элементов

по умолчанию равно 0.

Практический пример — веб-страница

с вертикально ориентированным

блоком навигации

Продолжаем изыскания различных вариантов верстки шаблонов веб-страниц.

Вертикальная ориентация блока навигации — а фактически, верстка

страницы в несколько колонок— заставляет перейти от пассивной статической

схемы позиционирования элементов к более сложным алгоритмам.

Чаще всего при этом, так или иначе, используются обтекаемые элементы.

Начнем, по традиции, с примера «резинового» шаблона, но теперь, пожалуй,

не станем рассматривать простейший вариант без «подвала», а сразу же

создадим полноценную страницу с четырьмя функциональными областями.

Г Листинг 419, Вариант «резиновой** страницы с вертикально ориентированным |

\ навигационным блоком

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