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

Первым делом создаем шаблон гипертекстового документа:

В связи с тем, что мы будем создавать шаблон сайта с использованием каскадных таблиц стилей, нам необходимо создать внешний файл стилей. Для этого откройте блокнот, в котором мы и будем создавать стили, а затем сохраните файл с расширением .css. Если ваш блокнот не позволяет сохранить файл с этим расширением, сохраните его как .txt, а затем переименуйте его расширение на .css.

Для начала определим стили для тэга body, в котором укажем шрифты, их размер, цвет и фон для всей страницы.

Eсли код цвета имеет значение, например, #00FFCC, то допускается следующая запись: #0FC.

Определим стили для будущих ссылок.

Сохраните все то, что Вы наваяли. Теперь подключим созданный файл стилей к нашей страничке. Между тэгами <head> и </head> вставим следующую строку:

<LINK rel="stylesheet" type="text/css" href >

Начнем с одноколоночной странички. Стили для body и ссылок мы уже создали, теперь созданим контейнер для наполнения сайта. Определяется контейнер именным идентификатором #.

Одноименный идентификатор должен встречаться на страничке только ОДИН раз.

# container

Создадим блок шапки

# header

Теперь создадим идентификатор для контента сайта.

# content

Создадим стили для подвала.

# footer

Добавим стили для шрифтов.

h1 h2

Создадим стили для горизонтального меню.

.menu

Добавим стиль для Буквицы.

.st : first-letter

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

.log

Теперь напишем код html внутри тэгов body:

<html> <head> <title> Заголовок вашего сайта </title> <LINK rel="stylesheet" type="text/css" href > </head> <body> <!-- Начало блока контейнера --> <div > <!-- Начало блока шапки --> <div > <img src alt title > <!-- Логотип --> <h1> Название сайта </h1> <!-- Заголовок сайта --> <div ><a href > Ссылка 1 </a> | <a href > Ссылка 2 </a> | <a href > Ссылка 3 </a> | <a href > Ссылка 4 </a> | <a href > Ссылка 5 </a></div> <!-- Блок меню --> </div> <!-- Конец блока шапки --> <!-- Начало блока контента --> <div > <h2>Шаблон одноколоночного сайта</h2> <!-- Заголовки --> <h2>Технология создания сайта.</h2> <p >Буквица придает тексту определенный стиль.</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 >Минск 2011 г.</div> <!-- Конец блока подвала --> </div> <!-- Конец блока контейнера --> </body> </html>