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

Автор: | 25.11.2018

макет страницы, верстка сайта блоками
Блочная верстка заключается в использовании <div> блоков при составлении страниц сайта. Иногда применяют термин верстка слоями. В наше время активно применяется блочная верстка, сайт состоит из блоков, к примеру : шапка - баннер, раздел меню, основной контент, боковая колонка, подвал. Сами эти блоки тоже могут состоять из элементов блоков. Тег <div> может быть вложенным, к ним применяются разные классы, и этим классам даются определенные стили , оформления. Ранее сайты составляли часто табличной версткой, то есть применяли тег <table> и различные элементы сайта были ячейками таблицы, но со временем блочная верстка стала более популярной и удобной для создания сайтов среди веб программистов.

Блочная верстка подразумевает следующие принципы

Отделение структуры сайта, контента от оформления блоков, элементов страницы

Файл кода HTML состоит только из тегов разметки , тегов логического форматирования и контента, а представление стилей блоков и элементов содержится в файле со стилями (css) . Такой метод дает возможность независимо работать над видом элементов страницы и её структурой и содержимым. За счет этого созданием сайта могут заниматься несколько человек, при этом каждый из них делает свою часть работы независимо от других. Дизайнер, верстальщик , программист выполняют свою задачу при создании сайта.

Активное использование тега <div> при верстке

При блочной вёрстке сайта часто применяется тег <div>, который выполняет множество функций. Практически это основной элемент , к которому применяются различные стили. Это не значит, что используется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст, и ссылки делать, и списки применять. Но при блочной вёрстке тег <div> является базовым фундаментом верстки, кирпичиком создания сайта.

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

Таблицы используются только для вывода табличных данных

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

Пример создания макета сайта при блочной верстке

Создадим при помощи блоков простой макет страницы сайта, состоящий из следующих блоков: шапки, блока меню, основного контента, боковой колонки и подвала.
Сначала создадим пустую папку block-verst , затем в этой папке создадим два файла index.html и style.css с помощью приложения блокнот notepad++ . Код файла index.html будет таким:

 <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Блочная верстка html</title> 
<link rel="stylesheet" type="text/css" href="style.css" > 
</head> 
<body> 

    <div id="header"> 
    <h2>Шапка сайта</h2> 
    </div> 
         
    <div id="navigation"> 
    <h2> Навигация по сайту Меню сайта</h2> 
    </div>
         
  <div id="sidebar"> 
    <h2>Боковая колонка</h2> 
     
      </div> 
    <div id="content"> 
    <h2>Основной контент</h2> 
     
      </div> 
         
    <div id="clear"> </div> 
                               
    <div id="footer"> 
    <h2> Подвал сайта</h2> 
    </div> 
         
</body> 
</html> 

Код файла style.css будет таким:

body {
            background: #f5f5f5;
            color: #000000;
            font-family: Arial, Times New Roman;
            font-size: 16px;
            width:1000px;
}
 
 
#header {
            background: green;
            height: 100px;
            width: 1000px;
}
 
#navigation {
            background: white;
            width: 1000px;
}
 

#sidebar {
            background: #d3d3d3;
            float: left;
 
            width: 290px;
            height: 400px;
} 
#content {
            background: #d3d3d3;
            float: right;
 
            width: 680px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: blue;
            height: 80px;
            width: 1000px;
}

В результате в браузере мы увидим следующее:
макет страницы сайта, блочная верстка


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *