Каркасный подход

или что лучше – блочная или табличная верстка?

Рассматриваются два подхода к вёрстке страниц на примере двухколоночного макета: блочный и табличный (каркасный).

Табличная вёрстка – это отличная штука! Но на самом деле ей в чистом виде очень мало кто пользуется, но если и пользуются, то, в основном, на западе. У них вполне нормальным считается не делать резиновую раскладку, предпочитая ей фиксированную. У нас же практически любой сайт должен «тянуться».

В последнее время завоёвывает популярность блочная вёрстка, но делать сайты с её помощью становится настоящей головной болью. Никакого удовольствия от работы, огромное количество нюансов; необходимость читать большое количество статей (причём на английском языке) и тому подобные вещи способны положить огромную ложку дёгтя в медовые просторы блочной вёрстки. Поэтому многие верстальщики не спешат бросаться в омут CSS 2.1 и благоразумно ждут пришествия CSS 3.0, и его приемлемую поддержку всеми браузерами. Большинство верстальщиков используют CSS по мере необходимости, а мне бы хотелось сосредоточить внимание на каркасном подходе, когда основной каркас сайта создаётся с помощью одной таблицы, а далее в ход идут средства блочной вёрстки и CSS.

Итак, давайте сосредоточим внимание на простейшём, но достаточно широко используемом макете вёрстки, представленном на следующем рисунке:

Пример вёрстки в две колонки


Пример вёрстки в две колонки

Для наглядности, границы между блоками выделены красным цветом. Итак, у нас есть макет с четырьмя основными элементами: заголовком Header, меню навигации Navigation, областью основного содержимого (так называемого контента) Content и нижней частью Footer.

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

  • При увеличении содержимого в части Content автоматически расширяются части Header и Footer;

  • Проблема расположения Footer в самом низу страницы решается практически «автоматом»;

  • Не существует проблемы раскраски столбцов в двух- или трёхколоночной вёрстке, так как длина этих столбцов автоматически подгоняется до одинаковой величины (коллеги, использующие блочную вёрстку, вынождены использовать различные хитромудрые методы, например, Faux columns);

  • Vertical-align – ещё один плюс к табличной вёрстке;

Итак, данный макет можно увидеть, посмотрев пример №1. Данный макет настолько прост и эффективен, что на него можно потратить максимум, 20 минут. Теперь подробнее обсудим особенности каркасного подхода по сравнению с блочным.

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

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

Третье. Говорите, в случае изменений в дизайне, в случае блочной вёрстки нужно изменить только один CSS-файл? Во многих случаях, и в случае Каркасного подхода достаточно сделать то же самое. Ну, или изменить главный шаблон. А если у нас CMS – они все используют табличную вёрстку, это уже вы сами знаете.

А про время и совместимость с браузерами я вообще молчу. Здесь преимущества Каркасного подхода налицо. Этот пример работает даже в IE4, Opera 6 и в NN4.8, причём без особых усилий. А тем, кто собрался при редизайне «всего лишь» заменить CSS-файл, придётся сильно постараться, чтобы в различных браузерах всё отображалось одинаково. Думаете, изменение HTML-кода в случае каркасного подхода займёт больше времени? Я так не думаю.

И не забудем про всеми любимый IE6, в котором не так-то просто реализовать свойство min-width, а также сделать так, чтобы блоки, к которым применено свойство float не «прыгали» при изменении ширины страницы в меньшую сторону.

Возможно, мне возразят поклонники блочной вёрстки: «мол, есть же замечательное свойство» display, которое может принимать не менее замечательное значение table. Ну, во-первых, найдите 10 различий между словом table около свойства display и словом table в тэге <table>; во-вторых, известный браузер Mozilla (а также Firefox, Flock, SeaMonkey и иже с ними) имеет преотвратное свойство время от времени смещать дочерние блоки со свойством float один под другой, какую бы вы им ширину ни задали (такой эффект наблюдается при задании display: table родительскому элементу).

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

  • Должен быть «резиновым», однако в случае уменьшения размера окна браузера, столбцы должны уменьшаться, а не «прыгать» один под другой;

  • Footer документа должен располагаться в самом низу страницы, вне зависимости от количества информации в частях Navigation или Content;

  • Меню навигации должно быть окрашено в заданный цвет.

Реализация данного макета методом блочной вёрстки потребует от нас включения строгого режима отображения документов, так называемого «режима совместимости стандартам». Это можно сделать, задав в начале документа директиву
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
.

Мы можем гордиться – ведь теперь у нас есть «галочка» соответствия стандартам.

Для успешного создания макета нам понадобятся несколько блоков. Помимо основных, которые уже упоминались выше (header, footer и др.), понадобится блок основного документа, назовём его root; далее, будет необходим блок wrapper для «удержания» блока footer в самом низу страницы; и, наконец, целых четыре блока для задания отступов в основных элементах нашего макета.

В принципе, объяснять принципы работы подобной вёрстки не столь необходимо, однако всё же пару слов скажем.

Во-первых, мы используем блоки, с заданным свойством float (смещение блоков относительно основного потока страницы влево либо вправо).

Во-вторых, чтобы расположить footer там, где он должен быть всегда (то есть footer должен быть внизу страницы), мы растягиваем элемент root по всей странице. Элементу footer, задаём отрицательное свойство margin-top, равное его ширине, таким образом мы устанавливаем ему нужное нам поведение. Однако с целью избегания «закрытия» им основного содержимого, в элемент root вставляется элемент wrapper, который имеет ширину блока footer.

И в-третьих, чтобы окрасить блок с меню навигации, нам придётся использовать в качестве фона всей страницы особый рисунок. Этот метод называется Faux columns («ложные колонки») и заключается в следующем: создаётся рисунок, окрашенный в два или более цветов в заданной пропорции. В нашем случае, меню навигации должно занимать 30% от всего документа, значит, рисунок будет окрашен на 30% в один цвет (слева) и на 70% в другой. Желательно делать рисунок подлиннее. Мы взяли 3000 пикселей, и окрасили 900 пикселей в один цвет, а остальные в другой. Задав документу фон

BODY
{
background: url('bg.gif') 30% 0 repeat-y
}

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

Да, и для задания необходимых отступов для текста и меню, пришлось в html-коде задать дополнительные блоки (их классы начинаются с приставки pad), потому как если задать padding у основных блоков, это увеличит их ширину, и макет «расползётся». В случае табличной вёрстки, кстати, этого делать не нужно.

Блочная вёрстка даже такого простого макета заняла у меня продолжительное время. Это время у меня отнял наш_самый_любимый_браузер. А дело в том, что, во-первых, чтобы блоки content и navigation пропорционально сжимались и не «прыгали» один под другой, был использован «метод отрицательных смещений» (т.е. свойства margin). Исходный код был взят мной с сайта Лебедева.

#nav {margin-right: -100%}

#content {margin-left: 30%; display: inline}

И действительно, два блока стали идеально сжиматься, но вот footer загадочно стал залезать на эти блоки, не смотря ни на какой wrapper. Пришлось задать блокам navigation и content дополнительный padding и проблема исчезла.

Вот так, мы в конечном итоге, получили резиновый макет, свёрстанный блочной вёрсткой. Взгляните на это произведение искусства (пример №2).

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

В результате мы сверстали один и тот же макет, который выглядит вот так:

Макет двухколоночной вёрстки

Однако довольно лишних слов и давайте подведём итог: простейшая вёрстка каркасным методом заняла у нас 20 минут времени и 1.7Kb кода (784 байт html-код и 953 байт CSS-файл). На блочную вёрстку мы потратили втрое или даже вчетверо больше времени, и занимает она 2.24Kb кода (116 байт фоновый рисунок, 992 + 144 байт CSS и 1.02 килобайта html). Первый вариант приемлемо работает, начиная с IE4, второй – с IE5. Мы не использовали никаких так называемых «хаков», а особый_браузер усмиряли с помощью условных комментариев (во втором случае). Кроме того, HTML-код получился у нас верным рекомендациям W3C. В примерах ради удобства, стилевое описание включено в html.

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

19-26 июня 2007 года


Оценка материала:

 
На данный момент нет голосовавших

Число просмотров: 0
anton, zanzibar-inform[::::]mail.ru, 07.12.2007, 19:04

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

admin, chilimers[::::]mail.ru, 07.12.2007, 21:58

Пока руку набьёшь, успеешь произнести немало проклятий. А ведущие проекты как верстали таблицами, так и верстают. Но уже в продаже появляются книги по CSS3. Осталось подождать лет так 5, когда браузеры будут его нормально поддерживать, и всё будет просто отлично.

admin, chilimers[::::]mail.ru, 14.02.2008, 23:32

Кстати, заставить браузеры отображать таблицы раньше, чем они загрузятся полностью, поможет тэг <colgroup>.

Kuroki Kaze, 30.05.2008, 15:46

а max-width и min-width реализовывается просто.

max-width: 100px;

width: expression(this.width > 100 ? 100: true);

admin, 30.05.2008, 17:04

Использовать expression не рекомендуют по двум причинам:

- Почему-то дурной тон;

- Почему-то может тормозить.

Лучше сделать явную JS-функцию, а ещё лучше...[вырезано]

старйкер, 07.09.2009, 06:29

Ололо!

смею предположить, что Вы не умеете верстать блочно (судя по исходному коду примера номер 2)

Сверстали дизайн на таблицах за двадцать минут? Отлично! Немного меняется дизайн и Вы тратите на изменение верстки еще 20 минут! Потом еще и еще.

Миха, 26.10.2009, 20:15

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

Вау, jidsf[::::]asd.tu, 27.11.2009, 12:42

таблицы говнище старое

Владимир, 07.01.2010, 00:18

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

Bay, div'ная вёрстка говнище новое. Голословность предыдущих авторов прямопропорциональна пустоте их головы.

Баск, 16.03.2010, 22:49

Владимир +1 ))

Ахмед, 30.03.2010, 01:05

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

Таблицы плюс блоки - есть сила, товарищи!

Кирилл, admin[::::]seostream.ru, 23.06.2010, 22:56

Я тоже считаю что все нужно использовать в меру и таблицы и див.

Валерий, 18.03.2011, 21:17

Таблицы придуманы вообще-то не для каркаса, а для табличных данных.

А в вёрстке 2-го примера рациональностью и не пахнет. Смешно после этого высчитывать объём страниц, якобы всё по науке.

Из личного опыта: приходилось перевёрстывать таблицы в div-ы. Уменьшение объёма примерно в 5 раз.

старйкер +1

Артём, admin[::::]bobr.me, 17.06.2011, 17:27

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

Я сам начинал на таблицах и очень трудно прошла реформа на дивы. До сих пор мучаюсь. Но овчина стоит выделки.

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

Смена дизайна по времени абсолютно одинакова. Везде придется что-то подгонять. Не нужно предрассудков по этому поводу.

У автора своя правда, ему так проще. Для сайта визитки считаю приемлемо. Но мне совесть мешает по моему мнению - неполноценным торговать, делиться.

Валерий, правильно таблицы придуманы для вывода табличных данных.

Валентин, 18.07.2011, 13:05

Думаю потрібно змішати блочну верстку і табличну,або налагодити розробникам інтерпритаторів браузерів стандарти css.

Андрей, kyvour[::::]gmail.com, 03.08.2011, 02:50

Работал с Шаблонами в джумле (1,5-1.6). Лично мнение сложилось такое, что там с дивами нет ничего такого, что с таблицами нельзя бы было сделать проще (может из за того что начинал с таблиц). Хотя в блочной верстке ксть немало важных плюсов.

Лично мое замечание по таких шаблонах как в статье - впихивать дивы в каркасную (главную) таблицу (хотя это кому как)

Андрей, kyvour[::::]gmail.com, 03.08.2011, 02:53

P.S. Мне таблицы все же больше нравятся просто и ясно, а уже "навороты" больше по части блочной версти (хотя тоже сугубо индивидуальное мнение, что это уже выпендреж)

Максим, maxkhalmurzaev[::::]gmail.com, 26.01.2012, 08:16

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

Максим, maxkhalmurzaev[::::]gmail.com, 26.01.2012, 08:22

Делить на блочную и дивную вёрстку , приводя всего один пример , очень глупо. Ведь имеет значение , что вы верстаете. Может быть необходимо сверстать каркас "ноуимэйдж-фиксед" странички с 5 меню 3 колонками 2 шапками и 3 футерами или же страничку выводящую 20 страничный бухгалтерский отчёт...с кучей граф , пунктов и подразделов , так вот , тут всё проще будет сделать таблицами... и не морочьте голову "умные рукастые" ... всё нормально в них с выводом... max-width и min-width потрясающе работают и решают все проблемы. Для блога подошла бы дивная вёрстка , т.к. она мобильнее... Нельзя делить товарищи... необходимо всё... всё зависит от поставленной цели и также необходимо чётко знать чего хочешь , да и вообще уметь верстать и так и так , тогда всё вам станет ясно.

Имя *

Цифровой ящик

Комментарии *