Загрузка. Пожалуйста, подождите...
|
|
В этой статье я хочу рассказать о преимуществе блочной HTML или XHTML верстки над версткой таблицами и привести конкретные примеры блочной верстки самых распространенных моделей web-страниц. Недостатки табличной версткиУ табличной верстки есть много недостатков. Рассмотрим их по порядку:
Таким образом, мы выяснили, что табличная верстка это не только вчерашний день, но и много проблем для верстальщика и пользователя. Кроссбраузерность блочной версткиУ блочной верстки есть один единственный недостаток — отсутствие полноценной поддержки CSS 2.0 в некоторых браузерах. Но так ли все плохо? По глобальной статистике «Hotlog» на момент написания этой статьи (15.08.2005) ситуация следующая:
Теперь выясним, какие из приведенных в таблице браузеров не поддерживают CSS 2.0. Это: MSIE 4.0 (0,59 %); Netscape 3.0 (0,16 %); Netscape 4.7 (0,15 %). Итого: 0,9 %. Немного, не правда ли? Стоит ли думать о 0,9 % пользователей старых браузеров, которых с каждым днем становится все меньше, и создавать проблемы себе и нормальным пользователям? Надо также отметить, что не все из оставшихся 99,1 % браузеров имеют 100 % поддержку CSS 2.0, но с их недостатками можно весьма успешно бороться. Преимущества блочной верстки
Примеры резиновых блочных верстокПоскольку верстка жестких (не тянущихся) макетов блочной версткой не представляет какой-либо сложности, то мы будем рассматривать примеры только резиновой верстки. Сразу отмечу, что для соответствия стандартам и избежания проблем с браузерами семейства Internet Explorer, обязательно использовать правильный DOCTYPE (тег, объявляющий версию и тип языка разметки). Вот несколько примеров:
Вы можете использовать тот стандарт, который вам подходит. Это не повлияет на качество верстки, а я в своих примерах буду использовать XHTML 1.0. Буква «Г»Одна из стандартных схем расположения элементов на странице и самая простая в верстке.
Сразу договоримся, как должны вести себя блоки в этой верстке:
Подготовим XHTML код нашей страницы: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
</head>
<body>
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
</body>
</html>
Теперь напишем стили для блоков: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0
}
/* убираем отступ у тега body */
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
/* высота 150 px, минимальная ширина 600 px, цвет фона */
#menu{
width:250px;
float:left;
background:#FFC597
}
/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */
#info{
min-width:350px;
margin-left:250px
}
/* минимальная ширина 350 px, отступ слева 250 px */
</style>
</head>
<body>
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
</body>
</html>
Вот в принципе и все. Но мы столкнулись с несколькими проблемами. Будем решать их последовательно:
Описание глюковДля избежания появления нежелательных отступов между блоками MENU и INFO в браузерах семейства Internet Explorer не задавайте вертикальные размеры этим блокам. О прелестях CSSИзменив свойства «float:left» блока MENU на «float:right» и «margin-left:250px» блока INFO на «margin-right:250px» и добавив свойство «background-position:right» тегу body, получим вместо левого меню правое. КроссбраузерностьIE 5+; Opera 6+; Mozilla 1.3+; FF 1+. Буква «С»Такая же верстка, как и в предыдущем примере, только с footer (подвал).
Описание поведения блоков:
Возьмем код предыдущего примера и добавим в него блок footer: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0;
background:url(bg-menu.gif);
background-repeat:repeat-y
}
/* убираем отступ у тега body,
задаем фоновое изображение, размножающееся по вертикали */
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
/* высота 150 px, минимальная ширина 600 px, цвет фона */
#menu{
width:250px;
float:left;
background:#FFC597
}
/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */
#info{
min-width:350px;
margin-left:250px
}
/* минимальная ширина 350 px, отступ слева 250 px */
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</body>
</html>
Опишем стили для блока footer — «#footer{height:20px;min-width:600px;background:#B9CC8A;clear:both}». КроссбраузерностьIE 5+; Opera 6+; Mozilla 1.3+; FF 1+. Буква «О»Такая же верстка, как и в предыдущем примере, только с двумя меню (правым и левым).
Описание поведения блоков:
Возьмем код предыдущего примера и добавим в него три новых блока. Первый — для задания фона правому меню, и еще два — внутрь блока info. Первый внутренний блок будет правым меню, а второй будет заменять блок info. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0
}
/* убираем отступ у тега body */
#header{
height:150px;
min-width:800px;
background:#FFEF97
}
/* высота 150 px, минимальная ширина 800 px, цвет фона */
#menu{
width:250px;
float:left;
background:#FFC597
}
/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */
#info{
min-width:550px;
margin-left:250px
}
/* минимальная ширина 550 px, отступ слева 250 px */
#body{
background:url(bg-menu.gif);
background-repeat:repeat-y;
width: expression(((document.documentElement.clientWidth ||
document.body.clientWidth) < 800)? "800px" : "100%")}
/* задаем фоновое изображение, размножающееся по вертикали,
css хак для Internet Explorer, имитация свойства min-width */
#footer{
height:20px;
min-width:800px;
background:#B9CC8A;
clear:both
}
/* высота 20 px, минимальная ширина 800 px,
цвет фона, прекращение обтекания */
</style>
</head>
<body>
<div id="body">
<div id="body_2">
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">
<div id="right_menu">MENU (меню)</div>
<div id="info_int">INFO (информация)</div>
</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</div>
</body>
</html>
Теперь опишем стили для новых блоков и подкорректируем для старых. Блоку body_2 добавим фон и определим позицию фона справа, определим минимальную ширину — «background:url(bg-menu.gif); background-repeat:repeat-y; background-position:right; min-width:800px». Блок right_menu должен обтекать блок info_int справа — «float:right;width:250px;background:#FFC597». Поставим блоку info_int отступ справа, чтобы при переполнении он не налезал на блок right_menu — «margin-right:250px». КроссбраузерностьIE 5+; Opera 6+; Mozilla 1.3+; FF 1+. Выравнивание блоков по центруПереходя на блочную верстку, верстальщики сталкиваются с проблемой выравнивания блоков по центру. Тут все очень просто. Единственное условие: верстальщик должен точно знать размер блока в любых предусмотренных CSS единицах измерения. Для того, чтобы выровнять блок по центру экрана, надо определить для него следующие стили — «position:absolute;left:50%;margin-left:?половина ширины выравниваемого блока». Пример: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
#center{
width:200px;
height:200px;
background:#f00;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px
}
/*
ширина 200 px, высота 200 px, фон,
абсолютное позиционирование,
подвинуть блок вправо на 50 %,
подвинуть блок вниз на 50 %,
отступ слева -100 px, отступ сверху -100 px
*/
</style>
</head>
<body>
<div id="center">CENTER</div>
</body>
</html>
Для того, чтобы отцентрировать блок внутри контейнера, следует заменить CSS свойство «position:absolute» на «position:relative». КроссбраузерностьIE 5+; Opera 6+; Mozilla 1.3+; FF 1+. Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
В избранное
