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

А

Здесь

Будет

Меню

,рормационного сайта можно выделить как

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

\т, область основного текста и «подвал»

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

страницы

!$*$? ‘»

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

оделяется качеством исполнения *|!

r^w

«¦¦^Ki^S’x

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

при различных размерах окна браузера

В этом примере статическое позиционирование применяется ко всем

элементам, за исключением навигационного блока (с «подложкой»), ширина

которого с учетом полей и рамки установлена равной 200 пикселам.

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

Ярад*» Вид &&&&&& Серей* Спроса

¦дмЩ? $1

Оет*на«*«> Обновить

Z: \examples\04\20\mdex. htmi

Правильный!

сайт

Здесь

Будет

L Меню

1 Навигации

1

1

к

\.,й

[gpw. ¦ А ГТ

¦¦¦•• р- *

||||

1

Организация

пространства

страницы

Успех будущего I

веб-проекта во I

многом определяется yjj

||§|®кадпй«>т&р ^

Рис. 4.24. При недостаточной ширине окна блок основного содержания в IE6

«съезжает» под область навигационного меню

Блок основного содержания освободился от «подложки» — теперь он

представляет собой обыкновенный элемент, всецело и полностью принадлежащий

нормальному потоку. Единственная его особенность — левый

горизонтальный отступ, определенный при помощи свойства margin-left и равный тем

самым 200 пикселам, которые отнимает навигационное меню. Если бы этого

отступа не было, содержимое элемента text обтекало бы навигационный

блок с двух сторон — справа и снизу. Мы же стремимся сохранить

вертикальный «водораздел».

Правда, бороться со «сползанием» области основного текста вниз, под блок

навигации, при малых величинах ширины окна в Internet Explorer (рис. 4.24)

мы уже никак не сможем.

(_ Примечание )

При уменьшении ширины окна браузера до «закритичных» значений поведение

страницы, сверстанной при помощи блочной модели CSS2, заметно отличается

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

от метаморфоз табличного шаблона. Блоки, позиционированные в абсолютных

координатах, могут «наезжать» друг на друга; контент иногда «вылезает» за

границы чрезмерно узких блоков (к слову, не забывайте о возможностях свойства

overflow!) и т. д.

Не вижу, однако, никакого смысла в обсуждении «экстремальных» случаев: мол,

а что будет, если сжать окно браузера до 200 пикселов в ширину? А если еще и

шрифт при этом увеличить до 100 пикселов? Все это не так уж и важно для

страницы, рассчитанной на минимальный комфортный размер окна, скажем,

800×600. Для маленьких же экранов мобильных устройств — карманных

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

представления контента.

Теперь — о шаблонах с фиксированной шириной. Предлагаю вниманию

читателей «гремучую смесь», вобравшую в себя все лучшее из листингов 4.18

и 4.20.

^Листинг 4.21. Фиксированная по ширине страница с вер

! ориентированным блоком навигации и использованием фоновых

j изображении ;¦

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

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

будет иметь вид, аналогичный демонстрируемому на рис. 4.25.

Ровным счетом ничего нового для внимательного читателя.