Начнём с самого простого, стандартного типа шаблонов. Его особенности:
- 3 колонки
- Стандартные поля заголовков
- Простое меню
- Отсутствие таблиц
- Отсутствие графики
Думаю, что этот шаблон будет очень удобен при изучении вёрстки на "дивах" (div).
Итак, попробуем сделать его...
Основой веёрсти такого типа является CSS.
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/*
=============================================================
© 2008
Урок CSS вёрстки Простой шаблон сайта
style.css - Набор стилей для урока
=============================================================
*/
/* Задание стилей всего шаблона */
body {
font: 80% Arial;
text-align:center;
}
/* Задание стилей новой строки */
p {margin:0 10px 10px;}
/* Задание стилей ссылок */
a {
padding:5px;
text-decoration:none;
color:#0053a1;
}
/* Задание стилей ссылок при наведении */
a:hover {
text-decoration:underline;
color:#067a00;
}
/* Задание стилей блока заголовка */
div#header {
background-color:#005387;
color:#fff;
height:80px;
line-height:80px;
padding-left:20px;
}
/* Задание стилей всего шаблона */
div#all {
text-align:left;
width:750px;
margin:0 auto;
}
/* Задание стилей навигации */
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
}
/* Задание стилей списка */
div#navigation ul {
margin:15px 0;
padding:0;
list-style-type:none;
}
/* Задание стилей элемента списка */
div#navigation li{margin-bottom:5px;}
/* Задание стилей правого столбца */
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
}
/* Задание стилей "подвала" */
div#footer {
background-color:#013657;
color:#fff;
clear:left;
height:25px;
}
div#footer p {
margin:0;
padding:5px 10px;
}
/* Задание стилей всего шаблона */
div#templ {
float:left;
width:100%;
}
/* Задание стилей центрального столбца */
div#content {margin: 0 150px;}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html> <head> <title>Российская школа CSS. Учебный шаблон 1</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="all"> <div id="header"><h1>Учебный шаблон №1</h1></div> <div id="templ"> <div id="content"> <p><strong>Основное содержание</strong></p> <p>Какой-то текст</p> </div> </div> <div id="navigation"> <p><strong>Навигация</strong></p> <ul> <li>→ <a href="http://www.css-school.ru/">Школа CSS</a></li> <li>→ <a href="#">Ссылка 1</a></li> <li>→ <a href="#">Ссылка 2</a></li> <li>→ <a href="#">Ссылка 3</a></li> <li>→ <a href="#">Ссылка 4</a></li> <li>→ <a href="#">Ссылка 5</a></li> </ul> </div> <div id="extra"> <p><strong>Дополнительно</strong></p> <p>Различные полезные блоки, реклама и т.д.</p> </div> <div id="footer"> <p>© Copyright</p> </div> </div> </body> </html>
4) Сохраняем и смотрим, что получилось.
Итак, мы сделали простой шаблон для сайта.
| 
Главная