Главная / Технологии сайтостроения / КАК ДЕЛАЮТ САЙТЫ / Разработка WEB-интерфейса / Блочная верстка сайта

САЙТЫ, которые ПРОДАЮТ!
(965) 368 - 44 - 43
info@imho-design.ru

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

рис. Табличная разметка сайта
(границы ячеек на реальном сайте невидимы)

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

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

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

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

 

рис. Блочная разметка сайта
(границы блоков на реальном макете невидимы)

Независимость элементов в блочной вёрстке сайта

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

Недостатки блочной вёрстки сайта

Несмотря на всю свою универсальность, блочная вёрстка сайта решает далеко не все известные задачи, и существуют известные проблемы, с которыми табличная вёрстка справляется гораздо лучше (выравнивание двух колонок по высоте, вертикальное позиционирование по центру ячейки, выравнивание блоков по одной вертикальной линии и другие сугубо табличные задачи). Для решения подобных задач можно либо использовать старые добрые таблицы, либо применять специальные типы блочных элементов (table, table-row, table-cell и т.п.), позволяющие «заставить» блочные элементы вести себя так, как будто это элементы таблицы. Это позволяет создать полностью блочный сайт, имеющий все достоинства табличной вёрстки.

Читайте подробнее материалы по теме:

Фиксированная вёрстка сайта

Резиновая вёрстка сайта

Адаптивный дизайн сайта
(чем подход к дизайну адаптивного сайта отличается от обычного дизайна)

Адаптивная вёрстка сайта
(какие бывают типы адаптивной вёрстки, живые примеры)

Устройства и разрешения для адаптивной вёрстки
(для каких устройств и разрешений мы разрабатываем адаптивные сайты)

Адаптивное меню для сайта
(как может изменяться меню для адаптивного сайта, примеры)

Заказать вёрстку сайта

 

 

Другие материалы:

 

Устройства и разрешения для адаптивной вёрсткиЛюбой адаптивный дизайн начинается с определения состава устройств, под которые он разрабатывается. Рассмотрим самые популярные размеры экранов мониторов. ноутбуков, планшетов и смартфонов.

подробнее>>>

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

подробнее>>>

Услуги студии IMHO DESIGNГлавный товар, который предлагает IMHO своим клиентам: осмысленность в каждом действии и детали сайта, направленную на достижение поставленной перед будущим ресурсом цели. Мы придумываем ваш сайт вместе с вами, опираясь на ваши цели и задачи и наш огромный опыт интернет-маргетинга.

подробнее>>>

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

подробнее>>>

ПортфолиоИзбранные проекты web-студии IMHO-design, предпросмотр и дизайны сайтов.

подробнее>>>

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

подробнее>>>