Главная > Дизайн > CSS > Блочная верстка сайта (верстка с помощью DIV и CSS)

Блочная верстка сайта (верстка с помощью DIV и CSS)

26.02.2010. CSS, HTML, Дизайн

2

Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в Photoshop, GIMP или любом другом графическом редакторе и только после этого с макета дизайн переносят на html и css (иногда на flash, но у нас не тот случай). Вот этот перенос и называется версткой сайта, о которой я сегодня начну рассказывать.

Я расскажу, как верстать шаблон на примере простого макета:

Как видите, наш макет ужасно приметивен. Он состоит из двух сайдбаром, шапки, подвала и места под текст.

Теперь начнем его верстать.

Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"

В результате у вас должен быть примерно такой html-файл:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="main">
<div id="header">
Шапка
</div>
<div id="sidebar1">
Сайдбар 1
</div>
<div id="sidebar2">
Сайдбар 2
</div>
<div id="text">
Это будет центральный блок с текстом
</div>
 
<div class="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</div>
 
</body>
</html>

Сохраняем файл и открываем наш файл стилей (style.css)
В нем первым делом создаем пустые описания наших классов и id:

#main
{
 
}
 
#header
{
 
}
 
#text
{
 
}
 
#sidebar1
{
}
 
#sidebar2
{
 
}
 
#footer
{
 
}
 
.clear
{
 
}

Теперь начнем все это заполнять.
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}

У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:

#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}

Сохраняем CSS и открываем html-файл в каком-нибудь браузере. Все, что у нас написано, должно быть выравнено по центру.

Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:

#header

{

background:green;

height:300px;

width:100% //шапка занимает все 980px в ширину

}

Установим наш блок с текстом по центру:

#text

{

background:#999; //серый фон

position:relative; //опять выравниеваем по центру

margin:0 auto;

width:600px;

}

Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:

#sidebar1

{

width:190px;

background:yellow;

float:left;

}

#sidebar1

{

width:190px;

background:yellow;

float:right;

}

Теперь нам осталось настроить только подвал и класс clear, который нам нужен, чтобы "сообщить" браузеру о том, что у нас закончились блок с текстом и сайдбары

.clear

{

clear:both;

}

Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.

Теперь подвал:

#footer

{

background:red;

width:100%;

height:100px;

}

В результате должна получится вот такая css:

body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
#main
{
position:relative;
margin:0 auto;
width:980px;
 
}
 
#header
{
height:300px;
background:green;
}
 
#text
{
 
margin:0 auto;
background:#999;
width:600px;
 
}
 
#sidebar1
 
{
 
width:190px;
 
background:yellow;
float:left;
 
}
 
#sidebar2
 
{
 
width:190px;
 
background:yellow;
 
float:right;
 
}
 
#footer
{
background:red;
 
width:100%;
 
height:100px;
}
 
.clear
{
clear:both;
}

Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.




Похожие записи:


Метки:

Rambler's Top100 Блогун - монетизируем блоги