Применение веб-технологий стороны клиента для создания сайтов
padding: Opx;
border: Opx;
}
body {
color: #000;
background: #fff;
font-family: Georgia, «Times New Roman», Times, serif;
}
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#header, #footer p {
color: #fff;
background: #369;
padding: lOpx 2 Opx;
margin: Opx;
}
#header {
font-size: 250%;
}
#menucarrier
{
width: 25%;
margin-bottom: 2Opx;
float: left;
}
#menu {
font-size: 120%;
background: #fff0cc;
text-align: center;
padding: 2Opx;
border-style: none dotted dotted none;
border-width: Opx 2px 2px Opx;
border-color: #c00;
}
#textcarrier {
width: 75%;
float: right;
clear: right;
}
#text {
padding: 20px;
}
Глава 4. Использование блочной модели CSS2riw верстки сложных веб-страниц 215
#text h2 {
color: #369;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: Opx;
}
#footer {
width: 100%;
clear: both;
font-size: 70%;
}
—>
npaBHnbHbEi сайтп1>
Внешний вид документа из вышеприведенного листинга проиллюстрирован
на рис. 4.22.
216 Часть II. Применение веб-технологий стороны клиента для создания сайтов
UJJBfcigJtel-BJ
SjP 85 I L-« Me:///Z:/examples/04/19/index.html
Штш*&^ ......
3 ©ftp-л» jiGL
*i
Правильный сайт
Здесь
Будет
Меню
Навигации
Организация пространства
страницы
Успех будущего веб-проекта во многом определяется
качеством исполнения фундамента — шаблонов главной и
внутренних страниц сайта. Мы приняли за аксиому тот факт,
что все сайты информационного характера (в отличие от
презентационных проектов) в значительной мере похожи друг
на друга. И общность эта сильнее всего выражена в составе и
взаимном расположении элементов страниц.
В организации пространства страницы любого
информационного сайта можно выделить как минимум четыре
функциональные области со строго определенными ролями.
Это «шапка» (в английской терминологии — header), блок
навигации, область основного текста и «подвал» (footer).
j*ft?m»0
Рис. 4.22. Страница "резиновой" ширины
с вертикально ориентированным навигационным блоком
Чем этот шаблон принципиально отличается от рассмотренных выше?
Алгоритм позиционирования "шапки" остался прежним, а дальше начинаются
нюансы.
Мы заключили навигационное меню (блок с идентификатором menu) и
область ОСНОВНОГО текста (text) соответственно В КОНТеЙнеры menucarrier И
textcarrier, служащие "подложками" для названных блоков.
Это позволяет точно определить, какую часть ширины окна браузера займет
блок навигации, а какую — область основного текста. В нашем примере эти
параметры равны 25 и 75% соответственно (установлены при использовании
свойства width для блоков-"подложек".
Применить свойство width (которое, напомню, задает ширину содержимого
блока без учета рамок, полей и отступов) с указанием значений в процентах
непосредственно к элементам с идентификаторами menu и text не
представляется возможным, поскольку они снабжены полями и рамками, ширины
которых определены в пикселах.
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 217
К тому же, как вы помните, свойство width неверно интерпретируется
устаревшими на настоящий момент версиями браузера Internet Explorer.
Применение свойства width для элементов, имеющих ненулевые ширину полей и
толщину рамки, будет неизбежно создавать лишние проблемы
пользователям IE5.
Блоки menu и text позиционируются внутри своих "подложек" согласно схеме
static, занимая всю доступную ширину. Так, блок menu с учетом
принадлежащих ему полей и рамки будет занимать в точности 25% ширины окна
браузера, а блок text с учетом своих полей (рамки у этого элемента нет) —
строго 75% от ширины окошка.
Сами же "подложки", т. е.
|
5th Фев 2011
|
Теги:
|