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

От автора: блочная верстка сайта сегодня по-прежнему остается самым популярным способом верстки шаблона. Почему она так популярна и как она делается?

Блочная революция

Не так далеки те времена, когда основным способом верстки оставались таблицы. Весь сайт представлял собой большую таблицу, а различные его элементы – ряды и ячейки.

Знаете что, посмотрел я тут недавно на верстку макета с помощью таблиц. Это был невероятно громоздкий код. Причем сам макет был предельно простым. Естественно, веб-разработчиков тоже это не устраивало. Поэтому позже появился способ, позволяющий верстать с помощью независимых блоков.

div и span — это пустые контейнеры, в которые можно поместить что угодно. Первый является блоком, а второй – строкой. Каждому элементу можно было задавать ширину, высоту, границу, внешние и внутренние отступы и много чего другого. И кому теперь нужны были таблицы, когда сетку сайта можно было построить, написав в 3-5 раз меньше кода?

Потом пришел HTML5

Но на этом мы не будем останавливаться. Верстка сайта блоками надолго стала стандартом веб-разработчиков, но ее нужно было улучшать. Все потому, что эти самые div-ы были пустыми. Нет, ему можно было задать класс, идентификатор, заполнить информацией, вставить дочерние элементы и их тоже наполнить, но по смыслу в языке html div – это просто пустой контейнер.

Так вот и получилось, что с точки зрения смысла, сайт верстается как набор контейнеров. Веб-разработчики решили добавить больше смысла. Так появился HTML5. Язык, в котором была масса новых тегов. Например, header, article, footer и т.д. Тут уже даже человек с ограниченными знаниями английского понимает, что header – это шапка сайта или статьи, а article – сама статья.

В связи с этим блочная верстка стала сложнее. По новым стандартам уже недостаточно пихать всю информацию в пустые контейнеры, а использовать для этого новые, семантические элементы. Хотя div-ы по-прежнему используются для различных декоративных эффектов.

Рис. 1. Разметка на HTML5 сильно отличается из-за обилия новых тегов.

Вернемся к началу

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

Создаются четыре контейнера (оставим пока в покое теги HTML5, потому что там много нюансов). Разметка выглядит примерно так:

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

Примерно так будет выглядеть структура вашей шапки. Дальше основная работа будет в CSS. Вам нужно будет правильно расставить все три блока, прописать путь до картинки с логотипом, поставить отступы и т.д. Естественно, в первую очередь нужно прописывать свойства для родительского блока с id =»header».

Таким образом верстаются и все остальные структурные части сайта. Естественно, в контенте будет больше каких-то элементов. Если все это прописывать на HTML5, то меняются только названия тегов. Например, не <div id = «header»>, а <header id = «header»>. Идентификатор, как правило, оставляют, потому что на странице могут быть и другие шапки (например, шапка статьи). Подробнее со всеми html5-элементами можно ознакомиться в любом нормальном справочнике.

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

Как видите, особенных проблем с разметкой на блоках возникнуть не должно. Она предельно проста. А если вы придерживайтесь хорошего форматирования кода, то тем более не запутаетесь. Основная работа происходит именно в таблице стилей. Если блоков много, то придется для всех них прописывать свои размеры, отступы и прочие правила.

Это единственный минус блочной модели. Если элементов на странице очень много, то вам придется повозиться со стилями. Собственно, если вам нужно вывести на экран таблицу, то именно ее не стоит верстать блоками. Поэтому табличная верстка надолго останется с нами хотя бы для того, чтобы верстать непосредственно таблицы.

Рис. 2. Таблица – единственное, что не очень удобно верстать блоками.

Преимущества блоков

В целом, верстка сайта div-блоками является достаточно простым делом. Код не загромождается, особых проблем с поведением и стилизацией нет, тег div поддерживается даже очень старыми браузерами. Если верстать с использованием HTML5 тегов, то да, проблемы могут возникнуть в старых браузерах. Но они, опять же, легко исправляются различными файлами, написанными другими разработчиками.

Блочную сетку очень легко адаптировать. Можно ли утверждать, что блочная верстка сайта проживет еще достаточно долго? Думаю, можно. Это удобный и достаточно простой способ верстки, так чего же от него отказываться?

Долгая жизнь блоков обусловлена хотя бы тем, что этот стандарт постоянно развивается. Например, из обычного блока теперь можно сделать флексбокс, который обладает рядом преимуществ. Блочный элемент можно отцентрировать только по горизонтали. С флексбоксом это можно сделать даже по вертикали.

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

Заключение

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

Комментарии Вконтакте:

Комментарии (1)