Вёрстка div блоками. Печать E-mail
(17 голоса, среднее 4.41 из 5)
Создание статического сайта - Основы CSS
14.01.2011 11:56

Вёрстка сайта div блоками.

Сегодня существует много разработчиков, которые верстают сайты с помощью таблиц html. Иные же считают, что способ этот давно устарел, что таблицы не предназначены для вёрстки, что код становится, трудно читаем, страницы грузятся дольше и т.д. Такие веб разработчики верстают свои сайты с использованием блоков, реализуемых тегом <div>.

Лично я не являюсь закоренелым фанатом вёрстки на таблицах html, но и чистая вёрстка сайта div блоками мне не близка. Считаю, что в каждом конкретном случае следует работать с тем инструментом, который более всего подходит.

В этой статье мы разберёмся, что такое вёрстка div и, что такое div блоки. Поехали, от простого к сложному. Задача: построить макет классического вида, используя только вёрстку div.

 

Верхний div блок
Левый div блок div блок по центру
Нижний div блок

 

  1. Открываем Notepad++ и начинаем создавать наш html документ. Сохраним его сразу с именем, например, indexdiv.html в отдельную папку, пусть будет с именем div. Сразу же создадим и документ со стилями. Сохраняем его в ту же папку div под именем style.css.

  2. Вот теперь создаём html документ. Заносим все необходимые стандартные теги.
  3. Вёрстка сайта на div блоках

  4. В блок тегов <head> … </head> прописываем строчку
  5. <link rel="stylesheet" href="/style.css" type="text/css">

    для связи html документа с файлом стилей. Должно получиться:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ru">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Блочная вёрстка div</title>
    <link rel="stylesheet" href="/style.css" type="text/css">
    </head>
    <body>

    </body>
    </html>

  6. Создадим контейнер для наших будущих блоков div. Поместим между тегами <body> и </body> следующий код:

  7. <div id="container">

    </div>

  8. Внутри нами созданного контейнера разместим 4 блока div, которые будут отвечать за наши зоны:

  9. <div id="header"> Верхний div блок</div>
    <div id="left">Левый div блок</div>
    <div id="content">div блок по центру</div>
    <div id="footer">Нижний div блок</div>

    На этом этапе блочной вёрстки у нас должен получиться такой код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ru">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Блочная вёрстка div</title>
    <link rel="stylesheet" href="/style.css" type="text/css">
    </head>
    <body>
    <div id="container">
    <div id="header">Верхний div блок</div>
    <div id="left">Левый div блок</div>
    <div id="content">div блок по центру</div>
    <div id="footer">Нижний div блок</div>
    </div>
    </body>
    </html>

    Если при просмотре в браузере Вы видите такую картинку, значит, правильным путём идём.

    Блочная вёрстка

  10. Блочная вёрстка сайта продолжается и нам теперь необходимо выровнять контейнер по центру веб страницы и задать ему ширину, т.к. мы верстаем фиксированный макет. Переходим к style.css. В него запишем:
  11. #container{
    /*фиксированная ширина 810 пикселей*/
    width:810px;
    /*ровняем по центру, по горизонтали*/ 
    margin:0 auto;
    }

    Продолжая блочную вёрстку для наглядности зададим цвета div блокам. Пропишем в css-файле следующее:

    #header{
    /*Цвет фона - зелёный*/
    background-color:green;
    }
    #left{
    background-color:red;
    }
    #content{
    background-color:yellow;
    }
    #footer{
    background-color:blue;
    }

  12. Результат нашей работы контролируем через просмотр в браузере. В Opera 11.00 это будет выглядеть так:
  13. Вёрстка div в Opera 11.0

    А вот в Internet Explorer 8 выравнивания по центру не произошло, т.е. на нашу команду
    margin:0 auto; IE8 никак не прореагировал:

    Вёрстка div в Internet Explorer 8

  14. Учитывая, что часть пользователей использует этот браузер из фанатизма или просто по умолчанию, верстать блоками будем специально для них. Оторвём наши блоки от левого края и отцентруем по горизонтали. В самом верху файла стилей css введём следующий код:

  15. body, html {
    margin:0px;
    padding:0px;
    text-align:center;
    }

    Отцентровка div блоков в IE8

    Но как Вы, наверное, заметили, по центру выровнялся не только макет, но и текст в div блоках. А нам это надо? По-моему нет. Для этого в блоке #container файла стилей css прописываем text-align:left; отменяя тем самым tex-align:center; которое мы прописали в Body. Всё это проделываем с той целью, чтобы текст в контейнере выравнивался по левому краю, как это задумано по умолчанию. И что мы имеем в style.css? А имеем мы вот что:

    body, html {
    margin:0px;
    padding:0px;
    text-align:center;
    }
    #container{
    width:810px;
    margin:0 auto;
    text-align:left;
    }
    #header{
    background-color:green;
    }
    #left{
    background-color:red;
    }
    #content{
    background-color:yellow;
    }
    #footer{
    background-color:blue;
    }

    Проконтролируйте результат работы в браузере IE. Он должен быть таким.

    Отцентрованные блоки div в IE8

  16. Ну а теперь приступим к размещению div блоков по своим местам. Начнём с левого div блока и зададим ему ширину в 180 пикселей. Для этого в блоке #left пропишем width:180px; А для того чтобы включить обтекание у левого div блока и разместить div блок по центру правее оного ещё чуть ниже пропишем float:left;

    В коде имеем:

    #left{
    background-color:red;
    width:180px;
    float:left;
    }

  17. В браузере видим:

    Обтекание при блочной вёрстке

    Если мы будем продолжать заполнять контентом наш div блок по центру, то он начнёт обтекать левый div блок не только справа, но и снизу. А нам бы этого очень не хотелось.

    задание отступа при вёрстке сайта

  18. Чтобы ликвидировать эту незадачу, div блоку по центру зададим отступ, равный ширине левого div блока +1 пиксель, т.е. 181px. Для этого в секции #content допишем margin-left:181px. Для обнуления отступов сверху и снизу не помешает и такая директива margin:0px;
  19. В коде имеем:

    #content{
    background-color: yellow;
    margin:0px;
    margin-left:181px;
    }

    В браузере видим:

    Отступы в div блоках

    Следующий нюанс заключается в том, что если мы наполняем, левый div блок, то нижний div блок начинает его обтекать справа, а нам нужно, чтобы он находился всегда внизу.

    Отмена обтекания при блочной вёрстке

  20. Для решения этой проблемы, при блочной вёрстке, в файле indexdiv.html перед нижним блоком div прописывают ещё один тег вида <div id="clear"></div>, а в файле стилей style.css создадают ещё одну секцию, которая позволяет отменить обтекание. Вот мы и вставим её перед секцией #footer.

    #clear{
    clear:left;
    }

    В итоге файл indexdiv.html будет иметь вид:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ru">
    <head>
    <meta content="text/html; charset=windows-1251" http-equiv="content-type">
    <title>Блочная вёрстка div</title>
    <link rel="stylesheet" href="/style.css" type="text/css">
    </head>
    <body>
    <div id="container">
    <div id="header">Верхний div блок</div>
    <div id="left">Левый div блок</div>
    <div id="content">div блок по центру</div>
    <div id="clear"></div>
    <div id="footer">Нижний div блок</div>
    </div>
    </body>
    </html>

    style.css получился вот такой:

    body, html {
    margin:0px; /*обнуляем поля и отступы, чтобы браузеры вели себя адекватно*/
    padding:0px;
    text-align:center; /*центрируем специально для IE */
    }
    #container{
    width:810px; /* фиксированная ширина в 800 пикселей*/
    margin:0 auto; /* ровняем по центру - по горизонтали */
    text-align:left; /*контент по левому краю, анулируем tex-align:center; в Body*/
    }
    /*Стили для верхнего div блока*/
    #header{
    background-color:green;/*зелёный фон div блока*/
    }
    /*Стили для левого div блока*/
    #left{
    background-color:red;/*красный фон div блока*/
    width:180px; /*ширина левого div блока */
    float:left; /*располагаем по левому краю, с обтеканием справа*/
    }
    /*Стили для div блок по центру*/
    #content{
    background-color:yellow;/*желтый фон div блока*/
    margin:0px; /*необходимые обнуления*/
    margin-left:181px; /*отступ слева, ширина левого div блока + 1px*/
    }
    #clear{
    clear:left;/*отменяем обтекание, прижатого к левой стороне блока*/
    }
    /*Стили для нижнего div блока*/
    #footer{
    background-color:blue;/*голубой фон div блока*/
    }

    Результат нашей блочной div вёрстки в браузере.

    Результат блочной вёрстки

    Мы с Вами рассмотрели только азы блочной вёрстки. Но теперь Вы уже имеете элементарное представление о css и div, и если Вы научитесь использовать этот гибкий инструмент с другими не менее мощными средствами, например, теми, же таблицами html, то победа будет за Вами.

    Удачи!!! Продолжение следует...

Обновлено 07.02.2011 23:38
 
Rambler's Top100
Main page Contacts Search Contacts Search