Использование блочной модели С$82для верстки сложных веб-страниц 207
#text {
margin: 20px;
padding: 20рх;
border: solid lpx #ccc;
}
#text h2 {
color: #369;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
#footer {
font-size: 70%;
color: #fff;
background: #369;
padding: lOpx 20px;
}
—>
npaBnnbHbM сайтп1>
Вполне самодостаточная страница (рис. 4.20), не находите?
208 Часть II. Применение веб-технологий стороны клиента для создания сайтов
О * ф ^ 0 Ш^Ш ) С f.le:///Z:/exampleS/04/17/,ndex.html 3 © *****«
ф&^аЫ Й ^1(Ш**&Ш«-*
Здесь • Будет • Меню ¦ Навигации
Организация пространства страницы
Успех будущего веб-проекта во многом определяется качеством исполнения фундамента —
шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все
сайты информационного характера (в отличие от презентационных проектов) в значительной
мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном
расположении элементов страниц.
В организации пространства страницы любого информационного сайта можно выделить как
минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в
английской терминологии — header), блок навигации, область основного текста и «подвал»
(footer).
Здесь ¦ Будет • Меню • Навигации
Рис. 4.20. Полноценная "резиновая" страница, включающая в себя "шапку",
две горизонтально ориентированные панели навигации, область основного содержания
и "подвал"
Правда, имеет смысл немного сократить лист стилей, ведь набор правил
#header {
font-size: 250%;
color: #fff;
background: #369;
margin: Opx;
padding: lOpx 20px;
}
#footer {
font-size: 70%;
color: #fff;
background: #369;
padding: lOpx 20px;
}
Глава 4. Использование блочной модели С882для верстки сложных веб-страниц 209
вполне можно заменить более лаконичной конструкцией:
#header, #footer {
color: #fff;
background: #369;
padding: lOpx 20px;
}
#header {
font-size: 250%;
margin: Opx;
}
#footer {
font-size: 70%;
}
Подобного рода группировки мало того, что позволяют сократить объем
листа стилей, так еще и облегчают труд по поддержке сайта. Если мы захотим
поменять темно-синий цвет фона "шапки" и "подвала", скажем, на темно-
зеленый, в первом фрагменте нам нужно будет найти и заменить два
значения, а во втором — только одно.
В целях обеспечения еще лучшей удобочитаемости CSS-кода рекомендуется
придерживаться некоторого естественного порядка следования правил. Я,
например, обычно в самом начале листа стиля определяю правила для
контейнеров .. . и
.. ., т. е., фактически, общие для всейстраницы в целом; затем задаю правила, общие для нескольких элементов
(СМ., например, конструкцию #header, .menu, #text h2, #footer {...})
в листинге 4.17; после чего перечисляю индивидуальные правила для
функциональных областей страницы, причем желательно в той
последовательности, в которой соответствующие элементы определяются в HTML-разметке.
( Примечание ^
Выполнять все эти рекомендации относительно стиля кодирования, конечно,
совершенно необязательно, но, как мне кажется, аккуратность должна
проявляться во всем. Страницы, красивые только внешне, "снаружи", но при этом
нечитабельные "изнутри", ассоциируются лично у меня с каким-то лицемерием, с
заметанием соринок под ковер...
Так или иначе, в аккуратном коде практически невозможно "заблудиться". Для
работы в команде единый стиль кодирования — это не блажь, а насущная
необходимость.
Продолжим, однако, обсуждение нюансов верстки. Для того чтобы создать
шаблон страницы с фиксированной шириной, можно использовать две
стратегии:
210 Часть II. Применение веб-технологий стороны клиента для создания сайтов
П указание ширины индивидуально для каждой функциональной области
страницы;
? применение блока-"подложки" необходимой ширины.
Второй путь представляется более состоятельным.
|
5th Фев 2011
|
Теги:
|