Блочная верстка с использованием тэга 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; /*Цвет фона колонки контента*/
}
#cont { /*Блок контента*/
margin-top: 0px; /*Отступ блока контента от верха*/
width: 545px; /*Ширина блока контента*/
background: #EEE; /*Цвет фона колонки контента*/
margin-left: 172px; /*Отступ блока контента от верха*/
padding: 13px; /*Отступ вокруг текста*/
text-align: justify; /*Выравнивание текста по краям*/
border: black solid thin; /*Обрамление колонки контента*/
border-bottom: 0; /*Отключение обрамления колонки снизу*/
float: left; /*Обтекание элементов справа*/
}
#lef { /*Левая колонка*/
margin: 0 0 0 -745px; /*Отступ левой колонки слева*/
width: 13.2em; /*Ширина левой колонки*/
padding: 0 0 1px 0; /*Отступы левой колонки*/
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; /*Шрифты левой колонки*/
background-color: #DEE; /*Фон левой колонки*/
color: #333; /*Цвет шрифта левой колонки*/
float: left; /*Обтекание элементов справа*/
}
#lef a { /*Ссылки левой колонки*/
padding-left: 15px; /*Отступ ссылок слева*/
}
#rig { /*Аттрибуты для правой колонки*/
margin-top: 0px; /*Отступ сверху*/
width: 150px; /* Ширина правой колонки */
margin-left: 747px; /*Отступ слева*/
padding-left: 1px; /*Отступ текста слева*/
}
#rig a { /*Ссылки правой колонки*/
padding-left: 5px; /*Отступ ссылок правой колонки слева*/
}
#footer { /* Подвал */
clear: both; /* Отменяем действие float */
padding: 5px; /* Отступы вокруг текста */
background: #F5FFFA; /* Цвет фона подвала */
text-align: center; /* Выравнивание по центру */
border-top: black solid thin; /* Обрамление подвала */
}
h1, h2, h3 { /* Общие аттрибуты для заголовков имени сайта */
font-size: 40pt; /* Размер шрифта заголовка */
text-align: center; /* Выравнивание */
color: green; /* Цвет шрифта заголовка */
margin: 0; /* Отступ заголовков */
padding:7px; /* Отступ текста */
}
h2 { /* Заголовок для контента */
color: red; /* Цвет заголовка */
font-size: 20pt; /* Размер заголовка */
}
h3 { /* Заголовок для меню */
font-size: 1.5em; /* Размер шрифта заголовка */
color: #fff; /* Цвет шрифта заголовка */
padding: 0; /* Обтекание текста заголовка */
background: #808080; /* Фон заголовка */
}
.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="cont">
<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="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>
Получиться у Вас должно, примерно, так.
Мы рассмотрели особенности построения разных шаблонов сайтов. Теперь Вы можете конструировать свои странички под разнообразную информацию, используя div-ную методику строительства сайтов. Дерзайте и у Вас все получится.
Другие статьи по этой теме:
Одноколоночный сайт
Двухколоночный сайт с колонкой слева
Двухколоночный сайт с колонкой справа
Шадуро Николай 