Блочная верстка с использованием тэга div

Шаблон двухколоночного сайта с колонкой слева

Продолжим верстку сайтов с использованием блочного тэга div. Теперь мы будем создавать двухколоночный сайт с колонкой слева. Создаем внешний файл каскадных таблиц стилей. Как создать внешний файл стилей - смотри статью о создании одноколоночного сайта.

Вначале зададим стили для тэга body.

body {
    font: 0.8em Arial, Helvetica, sans-serif;     /* Шрифт на веб-странице */
    background: url(image/bg_01400.jpg) #eee;      /* Путь к фоновой картинке и цвет фона, если пользователь отключил показ картинок*/
    color: #000;      /* Цвет текста */
     }

Определимся с будущими ссылками

a:link { /* Цвет ссылки */
    color: #00F; text-decoration:none; font-family: Arial, Verdana;
     }
a:visited { /* Цвет посещенной ссылки */
    color: #00008B; text-decoration:none; font-family: Verdana, Arial;
     }
a:active { /* Цвет активной ссылки */
    color: #f00; text-decoration:none; font-family: Verdana, Arial;
     }
a:hover { /* Цвет ссылки при наведении курсора*/
    color: #f00; text-decoration:underline; font-family: Verdana, Arial;
     }

Создаем контейнер

#container {     /* Контейнер */
    width: 900px;     /* Ширина контейнера */
    margin: 0 auto;     /* Выравнивание контейнера по центру */
    background: #EEE;     /* Цвет фона всего макета */
    }

Создаем шапку сайта

#header {    /* Шапка */
    margin: 0;     /* Отступ шапки */
    padding: 1px;     /* Отступы вокруг элементов */
    }

Создаем общий блок контента

#cont {    /*Общий блок контента*/
    margin-top: 0;     /*Отступ блока контента от верха*/
    width: 900px;     /*Ширина блока контента*/
    background: #CCE;     /*Цвет фона колонки контента*/
    }

Создаем блок контента

#content {     /* Контент */
    margin-top: 0px;      /* Отступ сверху */
    width: 675px;      /* Ширина блока контента */
    background: #ECE;      /* Цвет фона колонки */
    margin-left: 190px;      /* Отступ колонки */
    padding: 15px;      /* Отступ вокруг текста */
    text-align: left;      /* Выравнивание */
    border-left: red solid thin;      /* Рамка слева-цвет,линия,тип */
    float: left;      /* Обтекание слева */
    }

Создаем левую колонку

#lef {     /* Левая колонка */
    margin: 0 0 0 -895px;      /* Отступ левой колонки */
    width: 168px;      /* Ширина колонки */
    padding: 10px;      /* Отступы вокруг текста */
    background: #DEEEEE;      /* Фон левой колонки */
    float: left;      /* Обтекание слева */
    }

Создадим заголовочек для меню

#lef h3 {     /*Аттрибуты заголовка меню*/
    margin: 0;      /* Отступ заголовка левой колонки */
    font-size: 1.5em;      /*Размер шрифта заголовка*/
    color: #fff;      /*Цвет шрифта заголовка*/
    padding: 1px;      /*Обтекание текста заголовка*/
    background: #808080;      /*Фон заголовка*/
    text-align: center;      /* Выравнивание заголовка по центру */
    }

Создаем подвальчик

#footer {      /* Подвал */
    clear: both;      /* Отменяем действие float */
    padding: 5px;      /* Отступы вокруг текста */
    background: #F5FFFA;      /* Цвет фона подвала */
    text-align: center;      /* Выравнивание по центру */
    }

Теперь создадим заголовок для нашего сайта

h1 {      /* Заголовок сайта */
    font-size: 40pt;      /* Размер шрифта заголовка */
    text-align: center;      /* Выравнивание */
    color: green;      /* Цвет шрифта заголовка */
    margin: 0;      /* Отступ заголовка */
    padding: 7px;      /* Обтекание текста заголовка */
    }

Создаем заголовок для контента

h2 {      /* Заголовок для контента */
    text-align: center;      /* Выравнивание по центру */
    color: red;      /* Цвет заголовка */
    margin: 0;      /* Отступ заголовка */
    }

Создаем стили для логотипа

.log {     /* Аттрибуты картинки Логотип */
    margin: 2px;      /*Отступы картинки*/
    text-align: left;      /*Выравнивание по левому краю*/
    width: 275px;      /*Ширина картинки*/
    height: 100px;      /*Высота картинки*/
    float: left;      /* Обтекание слева */
    }

Создаем стили для Буквицы. Чтоб красивше было.

.st:first-letter {     /* Стили для Буквицы */
    font-family: Arial, serif;      /* Шрифт */
    color: red;      /* Цвет буквицы */
    font-size: 150%;      /* Размер буквицы */
    }

Теперь расставим блоки div внутри тэгов body:

<html>
<head>
<title>Заголовок вашего сайта</title>
<LINK rel="stylesheet" type="text/css" href="Путь к вашему файлу стилей.css">
</head>
<body>
     
<div id="container">
     
<div id="header">
<img class="log" src="путь" alt="Логотип" title="Логотип">      
<h1>Название сайта</h1>      
</div>
     
     
<div id="cont">
<div id="content">
<h2>Шаблон одноколоночного сайта</h2>      
<h2>Технология создания сайта.</h2>
<p class="st">Буквица придает тексту определенный стиль.</p>      
1.Выбрать тему.
2.На сайте wordstat.yandex.ru проверить, что ищут в сети по выбранной теме.
3.Определить ключевые слова, по которым запросов более 1000 в месяц.
4.Составить список ключевых слов.
5.Посмотреть другие сайты по схожей тематике.
6.Определиться с главной страницей (количество колонок).
7.Составить план сайта.
8.Разработать логотип сайта.
9.Придумать оригинальное, легко запоминающееся название сайту.
10.Разработать меню навигации по сайту.
11.Составить карту ссылок сайта.
12.Сделать файл robots.txt
13.Сделать иконку сайту (favicon).
14.Наполнить сайт контентом, используя ключевые слова.
15.Придумать доменное имя сайту.
16.Разместить сайт на хостинге. </div>
     
     
<div id="lef">
<h3>Меню</h3>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<a href="#">Ссылка 4</a>
<a href="#">Ссылка 5</a>
</div>
     
     
</div id="footer">Минск 2011 г.</div>
     
</div>
     
</body>
</html>

После всех мучений у нас должно получиться следующее:

Другие статьи по этой теме:

Одноколоночный сайт
Двухколоночный сайт с колонкой справа
Трехколоночный сайт

Блочная верстка с использованием тэга div

Шаблон двухколоночного сайта с колонкой слева

Реклама