Что такое блочная верстка и как использовать ее создавая сайт на HTML и CSS. + примеры

Блочная верстка на HTML и CSS с примерами

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

Основные компоненты любой блочной верстки
Основные компоненты любой блочной верстки

Что такое верстка и в чем особенность блочной модели?

Как многие знают, верстка - особый процесс, связанный с непосредственной разработкой самой структуры электронного документа в HTML. В результате этого получается готовая web-страница, структура которой определяется конкретными тегами, представляющими собой прямоугольные блоки-контейнеры. С их помощью браузер получает информацию о типе контента и особенностях его вывода на экран монитора при загрузке web-страницы.

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

Если при табличной верстке содержимое web-страницы находится прямо внутри самого тега table, то при блочном варианте уже используются универсальные варианты тегов div, внутри которых размещается контент. Важно также добавить, что верстка блочного типа намного лучше индексируется поисковыми роботами, поскольку ее код не является слишком уж сложным, причем сами теги div имеют “display: block” по умолчанию, что является дополнительным преимуществом.

Основные принципы верстки в блоке

Суть любой блочной модели CSS заключается в том, что в графическом редакторе создается обычный макет сайта, где разработчик размечает основные области: блок с главным контентом, боковую панель, низ («подвал»), шапка и так далее. При этом он определяет размеры и форму, соотнося блоки в наиболее удобном для визуального восприятия виде. Чтобы в итоге получился отличный результат, принимают во внимание следующие принципы блочной верстки веб сайта:

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

2. Принцип использование тега div. Как уже отмечалось выше, данный тег является не только универсальным, но и базовым элементом любой блочной структуры. Благодаря хорошему ранжированию поисковыми системами, такая страничка намного быстрее выводится в ТОП поисковых запросов. Однако не забывайте, что таблички, списки и другие специфичные элементы все равно лучше верстать с использованием специально-предназначенных тегов (table, ul).

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

Отличительные черты блочной верстки

Для лучшего понимания блочной верстки, важно узнать ее основные отличия от табличного типа верстки сайта. Здесь следует учитывать факт того, что браузеры могут вести себя по-разному в зависимости от того, превышает ли содержимое слоя его установленную высоту. Рассмотрим 2 случая реализации блочной верстки:

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

2. Адаптированная верстка. Здесь подразумевается не адаптирование под разные экраны, а растяжение блоков в зависимости от ширины экрана. Данные тип верстки обычно используется для отдельных элементов, а не для страницы в целом. Эффект достигается за счет выставления css свойств в относительных величинах (проценты, vw, vh)

Компоненты блочной модели

Нужно понимать, что каждая система HTML элементов имеет блок, который непосредственно его окружает. При этом он всегда состоит из разных компонентов, управлять которыми можно независимо друг от друга за счет CSS, что очень удобно. Благодаря этому web-дизайнер имеет уникальную возможность свободно размещать элементы так, как это будет наиболее удобно для него. Все слои состоят из следующих компонентов:

Для лучшего понимания CSS блочного типа, стоит взглянуть на изображение, расположенное ниже:

Пример основных атрибутов блочной структуры сайта
Пример основных атрибутов блочной структуры сайта

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

Главные свойства блочной модели

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

Content

Это первый слой, который представляет собой содержимое с текстовым и/или графическим контентом, размещенным внутри web-страницы. Для начала следует прописать код внутри тега body:

<div class='box-1'>Box 1</div>

Не забудьте очистить стили браузера, по скольку не каждый браузер выставляет в 0 отступы для тегов body, html и ваша страничка может выглядеть по-разному:


    * {
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
    }
    

Padding

Это второй слой CSS структуры, который представляет собой фактическое заполнение электронной страницы, то есть определенное «обертывание» контента по примеру ниже.

Обычно такие отступы используются для того, чтобы оставить пространство между контентом (внутренним текстовым/графическим содержимым) и наружным пространством. На примере выше отступы сделаны в следующих значениях:

Для реализации такой структуры нужно прописать следующий код:


    .box-1 {
        padding: 100px;
    }
    

Чтобы добавить отступ к одной стороне контента (с правой стороны), прописывают следующее:


    .box-1 {
        padding: 0 100px 0 0;
    }

    // Or

    .box-1 {
        padding-right: 100px;
    }
    

Border

Третий компонент часто называют пограничным, поскольку он не только «захватывает» контент, но также определенным образом формирует отступы от границы.

Обычно его применяют, как следует из названия, для отделения одного компонента от другого. С его помощью создается пространство, которое добавляется поверх отступа и контента. При формировании важно помнить о 3-х важных параметрах:

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


    .box-1 {
        width: 30px;
        font-size: 50px;
        padding: 50px;
        border: 10px dashed black;
    }
    

Margin

Заключительный слой блочной структуры HTML CSS, который часто называют также слоем «полей». С его помощью обеспечивается контент, структура и границы по примеру ниже:

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

До
До
После
После

Выделяют следующие свойства:

Для реализации структуры достаточно прописать простой код:


    .box-1 {
        margin: 50px;
    }
    

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

Box-Sizing

При помощи данного свойства определяют способ расчета границ, полей и уступов. В блочной верстке сайта 3 главных типа их реализации: (border-box, padding-box, content-box).

Что касается типа padding-box, то данный тип вычисления поддерживается исключительным браузером Firefox, а поэтому на практике используется достаточно редко. Принципы функционирования content-box и border-box являются схожими, о чем могут свидетельствовать примеры ниже:

Разница лишь в том, что входит в ширину блока. В одном случае padding и border входят и поэтому ширина ровно 300px. В другом случае нет, а значит ширина блока это 300px + border + padding.

Заключение

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

An error has occurred. This application may no longer respond until reloaded. Reload 🗙