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

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

Теперь мы создадим страничку с колонкой справа.

Для этого создадим новую таблицу стилей и напишем следующее:

body {
    font: 0.8em Helvetica, Arial, sans-serif;     /* Шрифт на веб-странице */
    background: url(bg_01400.jpg) #DCDCDC;     /*Цвет фона всей страницы*/
    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;     /* Ширина контейнера */
    background: #BEE;     /*Фон контейнера*/
    margin: 0 auto;     /*Выравнивание контейнера по центру*/
    border: black solid thin;     /*Обрамление контейнера*/
    }
#header {     /*Шапка*/
    padding: 1px;     /*Отступы вокруг текста*/
    background: #DEE;     /*Цвет фона шапки*/
    }
#content {     /*Общий блок контента*/
    margin-top: 0;     /*Отступ блока контента от верха*/
    width: 900px;     /*Ширина блока контента*/
    background: #BEE;     /*Цвет фона колонки контента*/
    }
#two {     /*Блок контента*/
    margin: 0px;     /*Отступ блока контента от верха*/
    width: 720px;     /*Ширина блока контента*/
    background: #EEE;     /*Цвет фона колонки контента*/
    padding: 13px;     /*Отступ вокруг текста*/
    text-align: justify;     /*Выравнивание текста по краям*/
    border: black solid thin;     /*Обрамление колонки контента*/
    border-left: 0;     /*Отключение обрамления колонки слева*/
    float: left;     /*Обтекание элементов справа*/
    }
#rig {     /*Аттрибуты для правой колонки*/
    margin-top: 0px;     /*Отступ сверху*/
    width: 150px;     /* Ширина правой колонки */
    margin-left: 747px;     /*Отступ слева*/
    padding-left: 1px;     /*Отступ текста слева*/
    }
#rig h5 {     /*Аттрибуты заголовков для правой колонки*/
    font-size: 1.5em;     /* Размер шрифта заголовка */
    color: #fff;     /* Цвет шрифта заголовка */
    padding: 0;     /* Обтекание текста заголовка */
    background: #808080;     /* Фон заголовка */
    margin-top: 0px;     /*Отступ заголовка*/
    text-align: center;     /*Выравнивание по центру*/
    }
#rig p {     /*Аттрибуты параграфа для правой колонки*/
    margin-top: -20px;     /*Отступ параграфа сверху*/
    padding-left: 5px;     /*Отступ текста слева*/
    text-align: justify;     /*Выравнивание текста по ширине*/
    }
#footer {     /* Подвал */
    clear: both;     /* Отменяем действие float */
    padding: 5px;     /* Отступы вокруг текста */
    background: #F5FFFA;     /* Цвет фона подвала */
    text-align: center;     /* Выравнивание по центру */
    }
h1 {     /* Заголовок сайта */
    font-size: 40pt;     /* Размер шрифта заголовка */
    text-align: center;     /* Выравнивание */
    color: green;     /* Цвет шрифта заголовка */
    margin-top: 0px;     /* Отступ заголовка */
    padding: 7px;     /* Обтекание текста заголовка */
    }
h2 {     /* Заголовок контента*/
    text-align: center;     /* Выравнивание по центру */
    color: red;     /* Цвет заголовка */
    margin: 0;     /* Отступ заголовка */
    }
.log {     /*Аттрибуты картинки Логотип*/
    margin: 0;     /*Отступы картинки*/
    text-align: left;     /*Выравнивание по левому краю*/
    width: 275px;     /*Ширина картинки*/
    height: 100px;     /*Высота картинки*/
    float: left;     /* Обтекание слева */
    }
.st:first-letter {     /* Буквица */
    font-family: Arial, serif;     /* Шрифт */
    color: red;     /* Цвет буквицы */
    font-size: 150%;     /* Размер буквицы */
    }

Теперь расставим блоки div в коде html.

<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="content">
<div id="two">
<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="rig">
<h5>Меню</h5>
<p>Здесь может располагаться Ваше меню.</p>
<hr>    
<h5>Реклама</h5>
<p>Здесь может располагаться Ваша реклама.</p>
<hr>
<h5>Новости</h5>
<p>Здесь могут располагаться Ваши новости.</p>
<hr>
</div>
    
    
<div id="footer">Минск 2011 г.</div>
    
</div>
</div>
    
</body>
</html>

Вот и все. Заметили, какой небольшой html код? А получиться у Вас должно, примерно, так.

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

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