Блочная вёрстка сайта

Сейчас мы будем делать блочную модель сайта состоящего из шапки{header},трёх колонок левая {Left},правая{Right}, центральная колонка{Content} и подвал{Footer}

<html>
<head>
<title>Блочная вёрска сайта </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="rasporka"></div>
</div>
<div id="footer">Подвал</div>
</body>
</html>

Создайте у себя на компьютере папку, назовите её любым именем на ваше усмотрение, у меня пусть это будет "test".

Создайте текстовый документ в блокноте,скопируйте выше приведённый код в ваш текстовый документ и сохраните в вашу папку как index.html

Кодировку поставьте UTF-8. Всегда смотрите кодировку страницы,Чтобы не получить на выходе нечитаемый текст.UTF-8 универсальная кодировка.

В общем то это относится к шаблонам,но лучше об этом не забывать.Итак мы сделали первую страничку и теперь давайте разберёмся,что к чему и зачем.

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Обязательные теги.Любой HTML-документ имеет в наличии эти теги

<body></body>

Тело документа.Между этими тегами находится всё содержимое вашего сайта.

<div id="maket">

Каркас сайта.В этом каркасе находятся все блоки сайта.Определяет размеры и расположение вашей страницы.

Если сейчас вы откроете в броузере эту страницу,то ничего интересного не увидите.Я специально сразу ввёл текст,вот он и отобразится в том порядке как в обычном документе.

Для правильного отображения страницы можно задать все параметры в HTML-документе,но тогда для каждой страницы нужно будет вводить эти значения.

Для того чтобы этого не делать существуют таблицы стилей CSS.

body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket{
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#CC3300;
}
#left{
background-color:#FFFFFF;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFFFF;
float:right;
}
#content{
background-color:#FFFFFF;
margin-left:202px;
margin-right:202px;
}

#rasporka {
height: 50px;
}
#footer{
background-color:#CC3300;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}

Скопируйте код и сохраните в вашей папке как style.css. <link href="style.css" rel="stylesheet" type="text/css"> Эта запись для прикрепления таблицы стилей к HTML-документу,прописывается между тегами<head></head>,у вас эта запись уже существует, вот в принципе и всё макет сайта готов,посмотреть что у нас получилось можно здесь,ну а мы пока разберёмся,со стилями.

body, html {
margin:0px;
padding:0px;
height: 100%;
}

Мы задали нулевые отступы и 100% высоту,то есть страница будет растягиваться на всю высоту вашего монитора.

#maket {
width:800px;
margin:0 auto;
min-height: 100%;

Ширина нашего макета 800px,вы можете поставить свою,ну и высота опять же 100%

#header{
background-color:#CC3300;

Задали цвет шапки сайта, можно сюда прописать картинку.

#left{
background-color:#FFFFFF;
width:200px;
float:left;

Ширина левого блока 200 пикселей и все остальные блоки обтекают его.

#right{
width:200px;
background-color:#FFFFFF;
float:right;

Ширина правого блока 200 пикселей и он прижат вправо.

#content{
background-color:#FFFFFF;
margin-left:202px;
margin-right:202px;

Задали отступы для контента

#rasporka {
height: 50px

Распорка для того чтобы контент не наезжал на футер.

#footer{
background-color:#CC3300;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;

задали размеры для футера.

 

следующая >>>

 

 

http://www.iglis.ru
Создать бесплатный сайт с uCoz