Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.
Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.
Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
<!DOCTYPE html> <html> <head> <title>Блочная вёрстка</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h2>header (шапка сайта)</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>footer (низ сайта)</h2> </div> </div> </body> </html>
Разберём некоторые моменты.
<div id="container"> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id="clear">. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #navigation { background: #FE9798; width: 100%; height: 25px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #content { background: #DCDCDC; float: right; width: 80%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; }
С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.
#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
А как header (шапка сайта) и footer (низ сайта) отцентровать по высоте ?
Отступы
margin
Устанавливает величину отступа от каждого края элемента.
margin-bottom
Устанавливает величину отступа от нижнего края элемента.
margin-left
Устанавливает величину отступа от левого края элемента.
margin-right
Устанавливает величину отступа от правого края элемента.
margin-top
Устанавливает величину отступа от верхнего края элемента.
Я раньше думал, что блочная верстка, это когда контент страницы располагается в виде блоков, таких отдельных квадратов в которых находится текст (может быть с картинкой). И таких квадратов на странице много, когда по такому "блоку" кликаешь - переходишь на другую страницу для более подробного чтения. Интересно, а как такая верстка называется?
Думаю так же блочная только вот волшебство CSS делает то о чем ты говоришь!!!
Спасибо! Коротко, ясно, и работает!
Попробовал. Всё прекрасно работает. Смысл ясен.
Сначала не понял, зачем и float:left, и float: right, но теперь ясно: чтобы оба блока примыкали к краям родительского контейнера (без float: right; второй блок будет сразу справа от первого).
Спасибо! Очень полезно!
я не понял а куда и как добавлять файл css?
как совместить два этих кода?
Не понимаю зачем нужна эта блочная верстка, ведь ее не получится сделать адаптивной
Материал, к сожалению, уже устарел, сейчас адаптивность must have
Здравствуйте!Я недавно начал изучать программирование.Я не очень понял что значит тег <div-id>,в школе нам говорили что нужно использовать тег <div>правда конечно мы верстали сайт через блокнот,это правильный тег?
Супер !!!
float это прошлый и нет здесь никакого волшебство.Почти все начинают учить с этого свойства,но самую важную не пишут где можно ставить блоки сколько хочещь и в каком месте.И ненадо морочить голову с css,в начале учить встроенными свойствами.