Блочная верстка заключается в использовании <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;
}
В результате в браузере мы увидим следующее:
