Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Урок CSS вёрстки 4. Простой шаблон сайта 2
Не нравится(-) 29 Нравится(+)
Урок CSS вёрстки 4. Простой шаблон сайта 2

Уважаемые посетители, как я и обещал в нашем предыдущем уроке CSS верстки, мы продолжаем серию уроков по созданию простых шаблонов сайтов. Второй урок - несколько сложнее и интереснее первого. Наш шаблон будет выполнен без использования таблиц. Итак, приступим...

Особенность создаваемого шаблона, состоит в том, что он не имеет столбцов. Структуру шаблона создают блоки (div). Вот - примерный макет нашего будущего шаблона:
Урок CSS вёрстки 4. Простой шаблон сайта 2

По макету - прекрасно видно, что шаблон состоит из 11 блоков содержания и одного общего блока, стили которых нам и предстоит задать.
Первым делом - создадим файл CSS (можно сделать в блокноте) и html файл следующего вида:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Российская школа CSS. Учебный шаблон 2</title>
</head>
<body>
<div id="site">

Теперь нам надо задать стили для всего шаблона, его ссылок, линий и т.д. Запишем в CSS следующиё код:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №4. Простой шаблон сайта 2
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей страницы */
html, body {
    margin:5px;
    color:#333;  
    text-align:center;
    font-family:Arial;
    font-size:12px;
}

/* Задание стилей всего шаблона */
#site {     
    margin:0 auto;
    padding:10px;
    width:720px;
    text-align:left;
}

#site h2 {
    font-size:20px;
}

#site h3 {
    font-size:15px;
}

/* Задание стилей ссылок всего шаблона */
a {
    color:#e39601;
    font-weight:bold;
    text-decoration:none;
}

a:hover {
    color:#fff;
}

/* Задание стилей горизонтальных линий */
hr {
    margin:10px 0;
    border:0;
    width:90%;
    background-color:#bcd2ff;
    color:#bcd2ff;
    height:1px;
    clear:both;
    text-align:center;
}

Итак, мы задали стили всего шаблона (общего блока). Пора приступать к созданию блока верхнего меню.
Продолжим наш html следующим кодом:
    <div id="nav">
/ <a href="http://www.css-school.ru/">Российская школа CSS</a> / <a href="#">Ссылка 2</a> / <a href="#">Ссылка 3</a> / <a href="#">Ссылка 4</a> /
    </div>

А в CSS запишем такие стили:
/* Задание стилей блока навигации */
#nav {
    background:#006abb;
    padding:18px;
    color:#fff;
    font-weight:bold;
}

Итак, блок навигации готов. Продолжим наш шаблон блоком заголовка. Для этого - запишем в html следующий код:
        <div id="header">
    <h1>Название сайта</h1>
    </div>
<h2>Заголовок 1</h2>
<p>Текст под заголовком 1</p>
<hr />

Отлично. Теперь запишем в CSS файл:
/* Задание стилей блока заголовка */
#header {
    height:130px;
    padding:30px;
    background-color:#004982;
    border-top:1px solid #fff;
    color:#fff;
}

Пришло время для того, чтобы создать первые три блока содержания. Это довольно просто. Запишем в html такой код:
    <div id="set1">    
    <div id="cell_1">
Содержание блока 1/3
    </div>
    
    <div id="cell_2">
Содержание блока 2/3
    </div>
    
    <div id="cell_3">
Содержание блока 3/3
</div>
</div>
<hr />
<h3>Заголовок 2</h3>
<p>Текст под заголовком 2</p>

Готово. Пишем в CSS такие стили:
/* Задание стилей блоков столбцов */
#set1 {
   height:175px;
   color:#fff;
   text-align:center;
}

#set2 {
   height:130px;
   color:#fff;
   text-align:center;
}

/* Задание стилей блока 1 (3 столбца) */
#cell_1 {
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

#cell_2 {
    margin:0 14px;
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

#cell_3 {
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

Важно заметить, что мы задали сразу ширину обоих строк блоков (см. #set1 и #set2 соответственно).
Аналогично с первой строкой блоков- создадим вторую и закроем наш html:
<div id="set2">    
    <div id="box_1">
    Содержание блока 1/4
    </div>
    
    <div id="box_2">
Содержание блока 2/4
    </div>
    
    <div id="box_3">
Содержание блока 3/4
    </div>
    
    <div id="box_4">
Содержание блока 4/4
    </div></div>
    <hr />
</div>
</body>
</html>

/* Задание стилей блока 2 (4 столбца) */
#box_1 {
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_2 {
    margin-left:16px;
    margin-right:8px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_3 {
    margin-left:8px;
    margin-right:16px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_4 {
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}


Ну вот и всё. Урок, конечно получился длинным, но думаю, что шаблон заслуживает его, ведь такой приём вёрстки довольно популярен сегодня.
Считаю, что более подробные пояснения были полезны многим нашем пользователям и сделали урок более понятным.
Чтобы получит полные версии html и css (не собирать по кусочкам) - нажмите на ссылку: "Скачать урок".
Спасибо за внимание!


Шаблон корректно отображается в: Internet Explorer 6 - 7; Mozilla Firefox 2.x - 3.x; Oprea 8.xx - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 10 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 46938 раз(а) и написали 20 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!