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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

 

Копирайтинг текстов для сайтаНеумение встать на точку зрения собеседника всегда было главной бедой любой коммуникации. И интернет тут не стал исключением. Раскрыть главный секрет подготовки текстов для их публикации на интернет-сайте (да и вообще, наверное, любых текстов) очень просто: достаточно задать себе вопросы «Кто именно будет читать этот текст?»

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

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

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

Создание флеш сайтовЭто так называемые Flash-презентации, перенесённые в интернет. В таких сайтах вся навигация, тексты, графика, в общем, всё содержание, заключается в анимированный flash-файл. Безусловное преимущество flash-проектов — «броскость» и эффектность таких сайтов. К недостаткам можно отнести относительную дороговизну.

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

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

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

Кто делает сайты? Словарик профессий.Какие люди причастны к созданию web-сайтов? Кто может мне понадобиться в моём интернет-проекте? Почему Вася не может того, что легко делал Коля, они же оба программисты? Чем они там вообще занимаются?

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

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

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