Блочная верстка с использованием тэга div
Шаблон одноколоночного сайта
Первым делом создаем шаблон гипертекстового документа:
<html>
<head>
<title>Заголовок вашего сайта</title>
</head>
<body>
</body>
</html>
В связи с тем, что мы будем создавать шаблон сайта с использованием каскадных таблиц стилей, нам необходимо создать внешний файл стилей. Для этого откройте блокнот, в котором мы и будем создавать стили, а затем сохраните файл с расширением .css. Если ваш блокнот не позволяет сохранить файл с этим расширением, сохраните его как .txt, а затем переименуйте его расширение на .css.
Для начала определим стили для тэга body, в котором укажем шрифты, их размер, цвет и фон для всей страницы.
body {
font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
background: url(image/bg_01400.jpg) #eee; /* Путь к фоновой картинке и
цвет фона, если пользователь
отключил показ картинок*/
color: #000; /* Цвет текста */
}
Примечание:
Eсли код цвета имеет значение, например, #00FFCC, то допускается следующая запись: #0FC.
Определим стили для будущих ссылок.
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;
}
Сохраните все то, что Вы наваяли. Теперь подключим созданный файл стилей к нашей страничке. Между тэгами <head> и </head> вставим следующую строку:
<LINK rel="stylesheet" type="text/css" href="Путь к вашему файлу стилей.css">
Начнем с одноколоночной странички. Стили для body и ссылок мы уже создали, теперь созданим контейнер для наполнения сайта. Определяется контейнер именным идентификатором #.
Примечание:
Одноименный идентификатор должен встречаться на страничке только ОДИН раз.
#container { /* Контейнер */
width: 800px; /* Ширина контейнера */
margin: 0 auto; /* Выравнивание контейнера по центру */
background: #EEE; /* Цвет фона всего макета */
}
Создадим блок шапки
#header { /* Шапка */
margin: 0; /* Отступ шапки */
padding: 3px; /* Отступы вокруг элементов */
}
Теперь создадим идентификатор для контента сайта.
#content { /* Контент */
background: #EEEEEE; /* Цвет фона колонки */
margin: 0; /* Отступ колонки */
padding: 15px; /* Отступы вокруг текста */
text-align: justify; /* Выравнивание по ширине */
}
Создадим стили для подвала.
#footer { /* Подвал */
clear: both; /* Отменяем действие float */
padding: 5px; /* Отступы вокруг текста */
background: #F5FFFA; /* Цвет фона подвала */
text-align: center; /* Выравнивание по центру */
}
Добавим стили для шрифтов.
h1 { /* Стили для шрифта h1 */
font-size: 40pt; /* Размер шрифта заголовка */
text-align: center; /* Выравнивание */
color: green; /* Цвет шрифта заголовка */
margin: 0 0 0 280px; /* Отступ заголовка */
padding: 7px; /* Отступы вокруг текста */
background: #F5FFFA; /* Фон заголовка */
}
h2 { /* Стили для шрифта h2 */
text-align: center; /* Выравнивание */
color: red; /* Цвет шрифта заголовка */
margin: 0; /* Отступы вокруг заголовка */
}
Создадим стили для горизонтального меню.
.menu { /* Стили для меню */
text-align: center; /* Выравнивание */
padding: 7px; /* Отступы вокруг заголовка */
background: #F5FFBA; /* Фон меню */
margin: 0 0 0 280px; /* Отступы меню */
}
Добавим стиль для Буквицы.
.st:first-letter { /* Стили для Буквицы */
font-family: Arial, serif; /* Шрифт */
color: red; /* Цвет шрифта */
font-size: 150%; /* Размер шрифта */
}
Создадим стили для логотипа.
.log { /* Аттрибуты картинки Логотип */
margin: 2px; /* Отступы картинки */
text-align: left; /* Выравнивание по левому краю */
width: 275px; /* Ширина картинки */
height: 100px; /* Высота картинки */
float: left; /* Обтекание текста справа */
}
Теперь напишем код html внутри тэгов 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 class=menu><a href="Путь">Ссылка 1</a> | <a href="Путь">Ссылка 2</a> | <a href="Путь">Ссылка 3</a> | <a href="Путь">Ссылка 4</a> | <a href="Путь">Ссылка 5</a></div> <!-- Блок меню -->
</div>
<!-- Конец блока шапки -->
<!-- Начало блока контента -->
<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="footer">Минск 2011 г.</div>
<!-- Конец блока подвала -->
</div>
<!-- Конец блока контейнера -->
</body>
</html>
Код таблицы стилей кажется объемным, но он сохраняется в текстовом файле и объем данного файла стилей составляет всего 2 КБ. Из-за этого код html получается тоже маленьким, что приводит к его быстрой загрузке браузером.
Ну, а у нас должно получится следующее:
Вот и все. Шаблон страницы готов. Правда, изящно? И без всяких таблиц.
Для того, чтобы предложение в новом абзаце начиналось с "красной" строки и выравнивалось по ширине, вставим в файл стилей следующую строку:
p { /* Абзац */
text-indent:20pt; /* Отступ первой строки абзаца */
text-align: justify; /* Выравнивание по ширине */
}
В связи с использованием стиля абзаца p, все абзацы будут начинаться с "красной" строки. А что делать, если нам не нужна "красная" строка и выравнивание должно быть выполнено по другому? Для этого добавим в файл стилей класс .p1, где укажем необходимые значения. Например так:
.p1 { /* Класс абзаца */
text-align: left; /* Выравнивание влево */
color: black; /* Цвет шрифта */
}
Способы верстки двух- и трехколоночных сайтов смотрите ниже:
Двухколоночный сайт с колонкой слева
Двухколоночный сайт с колонкой справа
Трехколоночный сайт
Шадуро Николай 