Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Урок CSS вёрстки 4. Простой шаблон сайта 2
Не нравится(-) 30 Нравится(+)
Урок 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"scriptcode">/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://css-school.ru
Урок CSS вёрстки №4. Простой шаблон сайта 2
style.css"scriptcode">    <div id="nav">
/ <a href="http://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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



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

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

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

«    Июль 2019    »
ПнВтСрЧтПтСбВс
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!