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

Наш третий урок CSS вёрстки открывает новую серию уроков, в которых будет рассказано о различных способах создания шаблонов сайтов. Начнём с самого простого, стандартного типа шаблонов. Его особенности:
- 3 колонки
- Стандартные поля заголовков
- Простое меню
- Отсутствие таблиц
- Отсутствие графики

Думаю, что этот шаблон будет очень удобен при изучении вёрстки на "дивах" (div).
Итак, попробуем сделать его...

Основой веёрсти такого типа является CSS.
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №3 Простой шаблон сайта
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>&#8594; <a href="http://www.css-school.ru/">Школа CSS</a></li>
      <li>&#8594; <a href="#">Ссылка 1</a></li>
      <li>&#8594; <a href="#">Ссылка 2</a></li>
      <li>&#8594; <a href="#">Ссылка 3</a></li>
      <li>&#8594; <a href="#">Ссылка 4</a></li>
      <li>&#8594; <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) Сохраняем и смотрим, что получилось.

Итак, мы сделали простой шаблон для сайта. В следующем уроки, я расскажу Вам о способе вёрстки более сложного шаблона сайта.

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


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



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

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

Публикацию посмотрели 36575 раз(а) и написали 14 комментариев.
Подписаться на канал 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
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!