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