|
Создание двухколоночного макета сайта на основе блочной верстки (Div верстки)
Давайте вернемся к нашему двухколоночному макету сайта на блочной верстке. В самой первой статье мы даже не начали рассматривать верстку двухколоночного макета на блочной верстке, т.к. много времени ушло на обсуждение базовых вопросов верстки. Это было необходимо сделать в особенности для тех читателей, которые только начинают погружаться в вебмастеринг.
По собственному опыту знаю, что труднее всего найти ответы на простые и очевидные для большинства вопросы, но пока еще не понятные для вас. На форумах такие вопросы игнорируют, а в статьях опускаются эти моменты, как само собой разумеющееся.
Поэтому, если для вас еще не все встало на свои места в вопросах верстки, то пробегите по диагонали первую статью этой серии, возможно, что найдете для себя что-то интересное — Как работают сайты, повышение безопасности сайта, структура HTML кода, создание простого двух-колоночного макета на дивах.
Во второй статье мы уже непосредственно приступили к блочной верстке двухколоночного макета сайта, хотя, в начале статьи, я опять сделал отступление на тему, что такое корневая папка сайта и как ее отыскать на своем хостинге и создать в ней каталог.
Уже непосредственно приступив к верстке макета на основе блочной верстки, мы прописали в нашем еще пустом файле Index.html базовые элементы HTML кода, а так же код для всех Div-контейнеров (блоков), которые будут формировать макет сайта. Затем мы прописали в наш еще пустой файл таблиц каскадных стилей Style.css первые CSS свойства, в том числе мы задали фиксированную ширину нашему макету и выровняли его по центру относительно краев экрана.
Мы так же учли возможность открытия создаваемого на основе Div верстки макета в старых версиях браузеров, например, в Internet Explorer 5. Затем мы раскрасили, для наглядности, в разные цвета все Div блоки, из которых состоит наш двухколоночный макет на основе блочной верстки, а так же мы ограничили ширину левой колонки (в ней, обычно, на сайтах располагается меню).
Ну, и в конце предыдущей статьи мы задали в файле CSS обтекание блока левой колонки другими блоками, расположенными ниже в HTML коде файла Index.html (в нашем случае это блоки «Содержимое страниц (контент)» и «Подвал (футер)»).
После всех этих действий, мы получили двухколоночный макет сайта на Div верстке, в таком виде:
При этом файл Index.html содержал следующий Html код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
|
А в файл Style.css были прописаны следующие CSS свойства:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}
|
Давайте сравним полученный результат макета на Div с тем, что должно было получиться:
Блочная верстка — доработка двухколоночного макета сайта на Div блоках
Вроде бы макеты похожи, но есть одна неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета, созданного нами на основе блочной Div верстки, и занимать всю его ширину. Это одна проблема. Но кроме этого существует и другая проблема. Если мы добавим текста в Div блок Content (содержимое статьи):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
|
То может возникнуть такая ситуация с макетом:
Т.е. содержимое Div контейнера Content занимает все свободное место под закончившимся блоком Left. Это происходит из-за того, что включено обтекание Div блока Left всеми другими блоками, расположенными ниже в HTML коде, но после того, как блок Left заканчивается, все последующие блоки начинают уже прижиматься к левому краю нашего макета на основе блочной верстки.
Нас такая ситуация с Div блоком Content (содержимое страницы) не устраивает, поэтому во избежании этого, мы зададим для Div-контейнера Content фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).
Таким образом, мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих Div блоков. Для этого нам нужно будет дописать для Div блока Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left):
|
1
2
3
4
|
#content{
background-color:#8080FF;
margin-left:202px;
}
|
Т.к. ширину левой колонки (блока Left) нашего макета на основе блочной верстки мы ранее задали 200px, то и отступ слева для Div блока Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние. Весь CSS код файла Style.css теперь будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}
|
А наш макет на Div верстке примет вид:
Теперь давайте смоделируем ситуацию с существенным увеличением высоты Div блока Left (левой колонки):
Из рисунка видно, что при увеличении высоты левой колонки, подвал (блок Footer) начинает ее обтекать, т.к. в CSS файле (Style.css ) для блока Left задано обтекание с помощью CSS свойства float:left;. В следствии этого, все Div блоки, расположенные в HTML коде ниже блока Left, начинают его обтекать и блок Footer не является исключением. А это нас совсем не устраивает, ибо футер должен всегда располагаться ниже всех других блоков нашего двухколоночного макета на блочной верстке. Надо это исправить в макете.
Для этого мы отменим обтекание Div блоком Footer блока Left. Как это сделать? Нужно дописать специальное CSS свойство для Div блока Footer в файл Style.css: clear:both. Это CSS свойство позволит расположить блок Footer ниже всех плавающих блоков, т.е. тех блоков, которым задано CSS свойство Float (обтекание справа или слева). Тем самым, мы опустим подвал в самый низ нашего макета на блочной верстке. CSS код файла Style.css теперь будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
|
А сам ы двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:
Если нужно будет расположить Div блок Left (колонку с меню) не с левой стороны макета на блочной верстке, а с правой, то сделать это можно будет внеся лишь несколько изменений в наш файл Style.css. Для Div блока Left в файле Style.css нужно будет заменить CSS свойство float:left; на float:right;, а для блока Div Content убрать отступ слева на ширину блока Left и добавить точно такой же отступ справа. Т.е. для блока Content нужно CSS свойство margin-left:202px; заменить на margin-right:202px;. В результате CSS код файла Style.css примет вид:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:right;
}
#content{
background-color:#8080FF;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
|
А наш двухколоночный макет на блочной верстке с колонкой меню, расположенной справа, будет выглядеть так:
Создаем трехколоночный макет сайта на блочной верстке (Div верстке)
Вернем наш двухколоночный макет на блочной верстке к виду, когда Div блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно будет лишь добавить один дополнительный Div-контейнер в код файла Index.html после Html кода, описывающего блок Left.
Назовем этот новый дополнительный блок незамысловато — Right. C учетом этого нового Div блока, код нашего, уже трехколоночного макета на блочной верстке, примет вид:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
|
В содержимое Div контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с блоками Left и Content размер по высоте. Теперь нужно будет написать отдельное CSS правило в файле каскадных таблиц стилей Style.css для четкого позиционирования нового Div блока Right, относительно других блоков нашего трехколоночного макета сайта на блочной верстке:
|
1
2
3
4
5
|
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
|
CSS свойством width:200px мы задает ширину Div блока Right равной 200 пикселей, а CSS свойством background-color:#FFFF00 подцвечиваем фон этого контейнера Right для большей наглядности. Ну, а CSS свойство float:right, позволяет прижать блок Right к правой стороне и при этом все следующие за ним в HTML коде Div блоки будут обтекать его слева (обтекать его будет только блок Content, т.к. блок Footer у нас настроен так, что он лежит ниже всех плавающий блоков). Такой блок, с прописанным CSS свойством Float, называют еще плавающим Div блоком.
Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div блока Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с блоком Right, мы зададим в CSS для Div блока Content не только отступ слева на ширину блока Left, но и отступ справа на ширину блока Right:
|
1
2
3
4
5
|
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
|
Окончательный вариант нашего файла Style.css для трехколоночного макета будет такой:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
|
А сам трехколоночный макет сайта, сверстанный на Div (блочная верстка), будет выглядеть так:
Создание резинового макета для сайта на основе блочной верстки (Div верстки)
Двухколоночный и трехколоночный макеты для сайта, которые мы научились создавать в этой серии статей, относятся к так называемым фиксированным макетам, т.к. их ширина не зависит от разрешения экрана пользователя, просматривающего сайт. Но существует и другой тип, который называется резиновый макет. В этом случае макет сайта на блочной верстке будет занимать всю ширину экрана пользователя, открывшего вебсайт.
Если разрешение экрана пользователя будет по ширине 800 пикселей, то и макет резинового сайта будет равен по ширине 800 пикселей, а если разрешение экрана пользователя будет 1920 пикселей, то и сайт растянется на всю ширину такого экрана.
В некоторых случаях использование резинового макета может быть оправдано и поэтому, стоит остановиться на том, как из обычного макета фиксированной ширины на основе блочной верстки сделать резиновый. Хотя, в принципе, тут все очень просто. Нужно лишь для Div контейнера, в котором заключен весь макет сайта (в нашем случае это Div-контейнер MAKET), задать в файле каскадных таблиц стилей Style.css не фиксированный размер макета с помощью свойства width:800px;, а относительный размер по ширине, с помощью CSS свойства width:100%;:
|
1
2
3
4
|
#maket {
width:100%;
margin:0 auto;
}
|
Резиновый макет сайта будет выглядеть примерно так:
Решение проблем, возникающих при создании резинового макета сайта на основе блочной верстки (Div верстки)
На первый взгляд в созданном нами резиновом макете сайта на основе блочной верстки все вроде бы хорошо, но если попробовать уменьшать окно браузера, то в определенный момент произойдет наезд одних Div блоков на другие и полный развал дизайна.
Но эту неприятность тоже довольно легко можно нейтрализовать. Достаточно лишь задать для Div контейнера, в котором находится резиновый макет сайта на основе блочной верстки (в нашем случае это Div-контейнер Maket), с помощью специального CSS свойства, минимально возможную ширину, до которой можно уменьшать размер макета. После достижения этой минимальной ширины макет как бы перестанет быть резиновым и не будет изменяться по ширине при дальнейшем уменьшении окна браузера.
Это свойство CSS выглядит так:
Цифра 600 пикселей в данном случае задает минимальную ширину резинового макета, после которой его размер перестанет изменяться. При уменьшении окна браузера ниже этой минимальной ширины, часть резинового макета сайта на блочной верстке просто перестанет быть видной:
Теперь ваш задача при создании резинового сайта будет сводиться к тому, что бы при ширине в 600 пикселей ваш сайт не перекосило, ну а при больших разрешениях этого уж точно не произойдет. Но опять же имеет одно «но» и опять это «но» связано с всеми нами любимым браузером Internet Explorer 6.
Еще достаточно много пользователей просматривают сайты через этот браузер, который, несмотря на предпринятые нами меры, все равно не будет замечать ограничения минимальной ширины резинового макета на блочной верстке и упрямо будет уменьшать ширину сайта, вплоть до полного перекоса дизайна.
Для того, чтобы побороть этот косяк резинового сайта на блочной верстке в Internet Explorer 6, существует целый ряд так называемых хаков, которые позволяют обойти это ограничение в Internet Explorer 6. Я приведу здесь один из самых стабильных хаков, который не вызывает подвисания браузеров и прочих неприятностей. Хак заключается в том, что CSS свойство width:100% для блока Maket мы заменим специальным кодом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 600
?
"600px"
:
"auto"
)
:
(
document.body.clientWidth < 600
?
"600px"
:
"auto"
)
);
|
В четырех местах этого кода прописана цифра 600, которая и задает минимальную ширину резинового макета сайта. Вы можете заменить эту цифру на ту, которую считаете оптимальной для вашего резинового макета. Окончательный вид файла Style.css для трехколоночного резинового макета сайта, с учетом особенностей старых браузеров, будет такой:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
body, html {
margin:0px;
padding:0px;
}
#maket {
min-width:600px;
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 600
?
"600px"
:
"auto"
)
:
(
document.body.clientWidth < 600
?
"600px"
:
"auto"
)
);
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
|
|
