Бесплатные курсы по it-профессиям на FreeTutorials.ru.

х
Наверх

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

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

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

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

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

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


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Смотрите также
Оставить свой комментарий
Комментарии 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,в начале учить встроенными свойствами.

    ответить