Часто получаю вопросы от потенциальных клиентов о том, что такое блочная верстка (верстка слоями) и в чем ее принципиальное отличие от верстки табличной. Этот краткий конспект предназначен именно для того, чтобы оветить на такие вопросы один раз и не дублировать информацию в дальнейшем…
Думаю, начать нужно с ответа на вопрос что есть html-верстка вообще.
Не секрет, что создание сайта происходит в несколько этапов, на одном из которых дизайнер предоставляет заказчику растровый или векторный макет будущего сайта. Следующий шаг - один из важнейших, надо заметить - как раз и называется html-версткой макета. Да, дизайнерский макет отвечает всем требованиям и прихотям, он самый красивый, самый проработанный, самый блестящий… но, увы, этого мало =]. Чтобы браузеры посетителей могли полноценно работать с сайтом, переключаться между страницами и быстро загружать информацию такой макет нужно преобразовать в формат HTML. Именно процесс преобразования графического макета сайта в формат, используемый в сети и принято называть html-версткой. На сегодняшний день нет ни одной программы, позволяющей делать такую работу автоматически. Максимум - облегчать и ускорять работу верстальщика. Да и предпочтительным считается написание кода вручную, без изпользования программ визуализации.
Существует два способа верстки страниц - верстка с преимущественным использованием таблиц и верстка блоками или слоями (блочная, слойная, каскадная, дивная, css верстка). В случаях, когда поставленную задачу не получается решить только использованием одного из методов приминяются правила двух подходов, а такая верстка справедливо называется комбинированной или смешанной.
Изначально таблицы не были предназначены для построяния каркаса страницы, а служили для упорядоченного и привычного вывода табличных данных. Стандартные таблицы с текстовыми данными редко имеют более двух уровней вложенности, тогда как сайты, сверстанные с помощью таблиц просто изобилуют подобными решениями. Такой подход к построению страниц сильно затрудняет обработку браузером и рендеринг на экране монитора, усложняет и замусоривает код, замедляет загрузку сайта.
Блочная, верстка, напротив, была предназначена именно для формирования визуальной части сайта. При использовании блочной модели код сайта становится гораздо компактнее, за счет чего его отлично обрабатывают поисковые роботы. Такой код позволяет экономить трафик Вам и Вашим посетителям, снижает нагрузку на сервер, сокращает время на разработку, обновление и обслуживание визуальной части сайта, повышает совместимость и доступность с разных платформ и интернет-совместимых устройств. Еще одна интересная особенность - дизайн сайта можно моментально сменить, внеся изменения только в один файл, в котором описывается поведение элементов страницы. Можно иметь сразу несколько файлов и менять их в зависимости от поведения пользователя или времени суток =]. Пример таких изменений дизайна хорошо демонстрируют работы энтузиастов на сайте http://csszengarden.com/ Покликайте по заголовкам в правой колонке страницы. Просто великолепно, а ведь меняется только один файл, код сайта остается прежним. Огромное количество работ на этом сайте лишний раз свидетельствует о доступности и популярности блочной модели верстки.
В последнее время все большей и большей популяностью пользуется именно блочная верстка, хотя по прежнему велико количество сайтов с табличной и комбинированной версткой.