Хотите быстрее научиться создавать сайты? Рекомендую эти видеокурсы!

х
Наверх

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

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

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

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <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-страница примет уже совсем другой вид.

С подключенным CSS файлом

Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

Полезные ссылки:

Смотрите также
Пройдите, пожалуйста, защиту от спама.
Комментарии 15
  • Alex 18 Июня 2017 в 15:29

    А как header (шапка сайта) и footer (низ сайта) отцентровать по высоте ?

    ответить
  • Evgeny 24 Ноября 2018 в 20:17

    Отступы
    margin
    Устанавливает величину отступа от каждого края элемента.

    margin-bottom
    Устанавливает величину отступа от нижнего края элемента.

    margin-left
    Устанавливает величину отступа от левого края элемента.

    margin-right
    Устанавливает величину отступа от правого края элемента.

    margin-top
    Устанавливает величину отступа от верхнего края элемента.

    ответить
  • Сергей 18 Августа 2017 в 12:22

    Я раньше думал, что блочная верстка, это когда контент страницы располагается в виде блоков, таких отдельных квадратов в которых находится текст (может быть с картинкой). И таких квадратов на странице много, когда по такому "блоку" кликаешь - переходишь на другую страницу для более подробного чтения. Интересно, а как такая верстка называется?

    ответить
  • крот 14 Сентября 2017 в 18:23

    Думаю так же блочная только вот волшебство CSS делает то о чем ты говоришь!!!

    ответить
  • Геннадий 15 Сентября 2018 в 08:21

    Спасибо! Коротко, ясно, и работает!

    ответить
  • Ярослав 10 Ноября 2018 в 23:16

    Попробовал. Всё прекрасно работает. Смысл ясен.

    ответить
  • Ромео 06 Декабря 2018 в 13:22

    Сначала не понял, зачем и float:left, и float: right, но теперь ясно: чтобы оба блока примыкали к краям родительского контейнера (без float: right; второй блок будет сразу справа от первого).

    ответить
  • Ирен 19 Марта 2019 в 16:01

    Спасибо! Очень полезно!

    ответить
  • Анонимно 28 Мая 2019 в 13:40

    я не понял а куда и как добавлять файл css?

    ответить
  • Анонимно 24 Ноября 2019 в 23:22

    как совместить два этих кода?

    ответить
  • Дмитрий 24 Июня 2020 в 22:00

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

    ответить
  • Булат Ахметшин 30 Ноября 2020 в 21:20

    Материал, к сожалению, уже устарел, сейчас адаптивность must have

    ответить
  • Дима 06 Ноября 2020 в 08:03

    Здравствуйте!Я недавно начал изучать программирование.Я не очень понял что значит тег <div-id>,в школе нам говорили что нужно использовать тег <div>правда конечно мы верстали сайт через блокнот,это правильный тег?

    ответить
  • юрий 28 Ноября 2020 в 10:17

    Супер !!!

    ответить
  • Мансур 21 Декабря 2020 в 18:32

    float это прошлый и нет здесь никакого волшебство.Почти все начинают учить с этого свойства,но самую важную не пишут где можно ставить блоки сколько хочещь и в каком месте.И ненадо морочить голову с css,в начале учить встроенными свойствами.

    ответить