Каркас сайта

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

В этой части мы рассмотрим, как создаётся блочный каркас сайта, средствами 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-color: #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{
    height: 80px;
    background-color: #2ff553;
    margin-bottom: 10px;
    width: 200px;
    margin-left: 700px;
}

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

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

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

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

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

#sidebar{
    height80px;
    background-color#2ff553;
    margin-bottom10px;
    width200px;
    margin-left700px;
    float: right;
}

Давайте посмотрим.

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

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

#content{
    height: 80px;
    background: #9ef7af;
    margin-bottom: 10px;
    width: 690px;
}

Смотрим.

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

Теперь полностью код каркаса сайта, один сайдбар справа

<!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;
    background-color: #2ff553;
    margin-bottom: 10px;
    width: 200px;
    margin-left: 700px;
    float: right;
}
#content{
    height: 80px;
    background: #9ef7af;
    margin-bottom: 10px;
    width: 690px;
}
#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;
    background-color: #2ff553;
    margin-bottom: 10px;
    width: 200px;
    float: left;
}
#content{
    height: 80px;
    background: #9ef7af;
    margin: 0 0 10px 210px;
    width: 690px;
}
#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;
    background-color: #2ff553;
    margin-bottom: 10px;
    width: 200px;
    float: left;
}
#sidebar2{
    height:80px;
    background-color: #2FF553;
    margin-bottom: 10px;
    width: 200px;
    float: right;
}
#content{
    height: 80px;
    background: #9ef7af;
    margin: 0 0 10px 210px;
    width: 480px;
}
#footer{
    height: 80px;
    background: #41874e;
    margin-bottom: 10px;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="sidebar1"></div>
        <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;
  background-color: #2ff553;
  margin-bottom: 10px;
  width: 150px;
  float: left;
}
#blok{
  position:absolute;
  top:10px;
  left:590px;
  display:inline;
}
.sidebar2,.sidebar3{
  height:370px;
  background-color: #;
  margin: 0px 0px 5px 10px;
  width: 150px;
  float: right;
}
.dva{
  background-color: #2FF553;
  height: 80px;
  margin-bottom: 10px;
}
.tri{
  background-color: #2FF553;
  height: 80px;
  margin-bottom: 10px;
}
.dva1{
  background-color: #2FF553;
  height: 120px;
  margin-bottom: 10px;
}
.tri1{
  background-color: #2FF553;
  height: 50px;
  margin-bottom: 10px;
}
.dva2{
  background-color: #2FF553;
  height: 150px;
  margin-bottom: 10px;
}
.tri2{
  background-color: #2FF553;
  height: 220px;
  margin-bottom: 10px;
}
#content{
  height: 280px;
  background: #9ef7af;
  margin: 0 0 10px 160px;
  width: 420px;
}
#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>

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

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

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

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

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

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

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