Вёрстка. Каркас сайта

Здравствуйте уважаемые начинающие веб-мастера.

В этой части мы рассмотрим, как создаётся блочный каркас сайта, средствами html и СSS, а так же напишем несколько вариантов кода каркаса сайта.

Итак, начнём. Для обозначенной цели откроем редактор Notepad++ (или другой подобный), и создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.

Для тех, кто ещё не представляет где пишется код, и как просмотреть то, что отобразит браузер, сначала необходимо прочитать статью Как создать каркас страницы, и установить Notepad++.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
</head>
<body>
    <div id="wrapper"> <!--Оболочка-->
        <div id="header"></div> <!--Шапка-->
        <div id="sidebar"></div> <!--Сайдбар-->
        <div id="content"></div> <!--Контент-->
        <div id="footer"></div> <!--Подвал-->
    </div>
</body>
</html>

Давайте подробно рассмотрим эту запись, почему именно такие названия у блоков с идентификаторами.

1. <div id=”wrapper”> — wrapper (оболочка), в нём располагаются другие блоки.

2. <div id=”header”> – header (голова), так называется область в которой расположена шапка сайта.
3. <div id=”sidebar”> – sidebar (боковая панель), область в которой обычно распложено вертикальное меню и виджеты (календарь и т.д.)
4. <div id=”content”> – content (содержание), область в которой расположено содержание сайта.
5.<div id=”footer”> – footer (нижний колонтитул), или подвал, область в самом низу страницы.

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным способом, в тело тега head, при помощи тега style.

Оболочке wrapper прописываем ширину (высота по  мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.

Для шапки задаём высоту, фоновый цвет, и внешний отступ снизу, для того, чтоб следующие блоки не прижались к нему вплотную.

Для блоков sidebar, content, и footer — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.

<style>
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Выравнивание по центру экрана монитора */
}
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#sidebar{
    height: 80px; /* Высота, временная. Высота всем блокам задаётся только для предварительной отладки. В дальнейшем высота будет определяться автоматически в зависимости от содержания блока. */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#content{
    height: 80px; /* Высота, временная */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>

Теперь посмотрим на то, что у нас получилось

Заготовка для создания каркаса сайта

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и оболочка раздвинулась и заключает их в себе.

Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).

#sidebar{
    width: 200px; /* Ширина */
    height: 80px; /* Высота временная */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    margin-left: 700px; /* Отступ слева */
}

Смотрим результат.

Создание боковой колонки - сайдбара

Сайдбар занял своё место и готов к дальнейшим преобразованиям

И вот теперь пришло время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание или обтекание).

Прописываем его в селектор sidebar, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них.  В значении у float ставим  right(справа), так как сайдбар находится справа.

#sidebar{
    height80px; /* Высота, временная */
    width200px; /* Ширина */
    background#2ff553; /* Фоновый цвет */
    margin-bottom10px; /* Отступ снизу */
    margin-left700px; /* Отступ слева */
    float: right; /* Обтекание справа */
}

Результат

Результат применения к сайдбару свойства css - float

Теперь нам осталось укоротить блок content, Так как общая заданная длина у нас 900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.

#content{
    height: 80px; /* Высота временная */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}

Смотрим. Каркас сайта с одним сайдбаром справа

Каркас сайта с одним сайдбаром справа

Теперь полностью код.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка. Нужна при вёрстке для контроля границ блока */
    padding: 10px; /* Внутренний отступ границ блока от элементов расположенных внутри блока */
    margin: 0 auto; /* Выравнивание по центру экрана монитора */
}
/* Шапка сайта */
#header{
    height: 80px; /* Высота. Ширина по умолчанию занимает ширину оболочки */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар */
#sidebar{
    height: 80px; /* Временная высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    margin-left: 700px; /* Отступ слева */
    float: right; /* Обтекание справа */
}
/* Основной контент */
#content{
    height: 80px; /* Временная высота */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Подвал */
#footer{
    height: 80px; /* Высота. Ширина по умолчанию занимает ширину оболочки */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div id="wrapper">
<!--Шапка-->
        <div id="header"></div>
<!--Сайдбар-->
        <div id="sidebar"></div>
<!--Контент-->
        <div id="content"></div>
<!--Подвал-->
        <div id="footer"></div>
    </div>
</body>
</html>

Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде.

Каркас сайта с одной колонкой слева

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Выравнивание по центру */
}
/* Шапка */
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар */
#sidebar{
    height: 80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: left; /* Левое обтекание */
}
/* Сайдбар */
#content{
    height: 80px; /* Высота */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin: 0 0 10px 210px; /* Наружные отступы */
}
/* Подвал */
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div id="wrapper">
<!--Шапка-->
        <div id="header"></div>
<!--Сайдбар-->
        <div id="sidebar"></div>
<!--Контент-->
        <div id="content"></div>
<!--Подвал-->
        <div id="footer"></div>
    </div>
</body>
</html>

Каркас сайта с двумя колонками

Каркас сайта с двумя сайдбарами

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Наружние отступы */
}
/* Шапка */
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар слева */
#sidebar1{
    height: 80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: left; /* Левое обтекание */
}
/* Сайдбар справа */
#sidebar2{
    height:80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2FF553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: right; /* Правое обтекание */
}
/* Контент */
#content{
    height: 80px; /* Высота */
    width: 480px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin: 0 0 10px 210px; /* Наружные отступы */
}
/* Подвал */
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div id="wrapper">
<!--Шапка-->
        <div id="header"></div>
<!--Сайдбар 1-->
        <div id="sidebar1"></div>
<!--Сайдбар 2-->
        <div id="sidebar2"></div>
<!--Контент-->
        <div id="content"></div>
<!--Подвал-->
        <div id="footer"></div>
    </div>
</body>
</html>

И, до кучи, Каркас сайта с тремя сайдбарами разделёнными на блоки.

Каркас сайта с тремя сайдбарами разделёнными на блоки

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
  width: 900px; /* Ширина */
  outline: 1px solid #787274; /* Временная рамка */
  padding: 10px; /* Внутренний отступ */
  margin: 0 auto; /* Выравнивание по центру экрана монитора */
  position:relative; /* Относительное позиционирование для того, чтобы затем размещать блоки внутри оболочки, позиционируя их абсолютно, относительно границ оболочки */
}
/* Шапка */
#header{
  width:580px; /* Ширина */
  height: 80px; /* Высота */
  background: #25b33f; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар слева */
#sidebar1{
  height: 280px; /* Высота */
  width: 150px; /* Ширина */
  background: #2ff553; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
  float: left; /* Левое обтекание */
}
/* Оболочка сайдбара справа */
#blok{
  position:absolute; /* Позиционируем абсолютно */
/* Позиция */
  top:10px; /* Отступ сверху */
  left:590px; /* Отступ слева */
}
/* Сайдбар справа из двух колонок */
.sidebar2,.sidebar3{
  height:370px; /* Высота */
  width: 150px; /* Ширина */
  margin: 0px 0px 5px 10px; /* Наружные отступы */
  float: right; /* Правое обтекание */
}
/* Блоки сайдбара справа. Высота блоков задаётся только для предварительной отладки. В дальнейшем она будет определяться содержанием блока */
.dva{
  background: #2FF553; /* Фоновый цвет */
  height: 80px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri{
  background: #2FF553; /* Фоновый цвет */
  height: 80px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.dva1{
  background: #2FF553; /* Фоновый цвет */
  height: 120px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri1{
  background: #2FF553; /* Фоновый цвет */
  height: 50px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.dva2{
  background: #2FF553; /* Фоновый цвет */
  height: 150px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri2{
  background: #2FF553; /* Фоновый цвет */
  height: 220px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
#content{
  height: 280px; /* Высота */
  width: 420px; /* Ширина */
  background: #9ef7af; /* Фоновый цвет */
  margin: 0 0 10px 160px; /* Наружные отступы */
}
#footer{
  height: 80px; /* Высота */
  background: #41874e; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
<div id="wrapper">
<!--Шапка-->
    <div id="header"></div>
<!--Сайдбар слева-->
    <div id="sidebar1"></div>
<!--Оболочка сайдбара справа-->
        <div id="blok">
<!--Сайдбар справа первая колонка-->
            <div class="sidebar2">
<!--Блоки первой колонки-->
                <div class="dva"></div>
                <div class="dva1"></div>
                <div class="dva2"></div>
            </div>
<!--Сайдбар справа вторая колонка-->
            <div class="sidebar3">
<!--Блоки второй колонки-->
                <div class="tri"></div>
                <div class="tri1"></div>
                <div class="tri2"></div>
            </div>
<!--Контент-->
        </div>
    <div id="content"></div>
<!--Подвал-->
    <div id="footer"></div>
</div>
</body>
</html>

Сокращение кода

Как вы уже наверное заметили, многие селекторы css имеют одинаковые свойства с одинаковыми значениями.

В таких случаях, чтобы сократить код, есть смысл применить групповые селекторы.

Это значит, что все селекторы с одинаковыми свойствами и значениями можно собрать в один селектор и прописать в нём общее для всех свойство.

Селекторы в группе записываются через запятую.

Например:


#header,
#footer,
.dva,
.tri{
  margin-bottom: 10px; /* Отступ снизу */
}

Копируйте, вставляйте в редактор, и колдуйте с конструкцией, размерами и расцветками каркаса сайта. Можете задавать блокам свойства border или border-radius, добавляя тем самым рамочки и закругляя углы.

На следующей странице узнаем, что такое запрет наплывания, как делается подвал (footer), и начнём заполнять каркас сайта.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

— Мальчик, — нервничает учитель, — у тебя в голове опилки.
— Вот здорово! — улыбается ученик. — Мама говорила, что у меня там совсем ничего нет.

Как сделать изображение кнопки в Paint < < < В раздел > > > Каркас сайта (продолжение).
 

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же: