Рассматриваются два подхода к вёрстке страниц на примере двухколоночного макета: блочный и табличный (каркасный).
Табличная вёрстка – это отличная штука! Но на самом деле ей в чистом виде очень мало кто пользуется, но если и пользуются, то, в основном, на западе. У них вполне нормальным считается не делать резиновую раскладку, предпочитая ей фиксированную. У нас же практически любой сайт должен «тянуться».
В последнее время завоёвывает популярность блочная вёрстка, но делать сайты с её помощью становится настоящей головной болью. Никакого удовольствия от работы, огромное количество нюансов; необходимость читать большое количество статей (причём на английском языке) и тому подобные вещи способны положить огромную ложку дёгтя в медовые просторы блочной вёрстки. Поэтому многие верстальщики не спешат бросаться в омут 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 года
Оценка материала:
Когда рука набита блочная верстка совсем не так страшна, как тут описано. А вот хотя бы тот факт, что пока только опера умеет рендерить таблицы до получения всего их содержимого уже является большим минусом для тех случаев, когда мы имеем дело с информационно насыщенными проектами.
Пока руку набьёшь, успеешь произнести немало проклятий. А ведущие проекты как верстали таблицами, так и верстают. Но уже в продаже появляются книги по CSS3. Осталось подождать лет так 5, когда браузеры будут его нормально поддерживать, и всё будет просто отлично.
Кстати, заставить браузеры отображать таблицы раньше, чем они загрузятся полностью, поможет тэг <colgroup>.
а max-width и min-width реализовывается просто.
max-width: 100px;
width: expression(this.width > 100 ? 100: true);
Использовать expression не рекомендуют по двум причинам:
- Почему-то дурной тон;
- Почему-то может тормозить.
Лучше сделать явную JS-функцию, а ещё лучше...[вырезано]
Ололо!
смею предположить, что Вы не умеете верстать блочно (судя по исходному коду примера номер 2)
Сверстали дизайн на таблицах за двадцать минут? Отлично! Немного меняется дизайн и Вы тратите на изменение верстки еще 20 минут! Потом еще и еще.
Мда... Таблицы вчерашний день. Все спецы уже давно верстают слоями (блочная верстка). У таблиц достаточно минусов, чтобы от них отказатся.
таблицы говнище старое
О том что смена дизайна при блочной вёрстке займёт намного меньше времени - миф. В крупных проектах используется шаблонизатор, и смена каркасного дизайна занимает ровно столько же, сколько задротствание с div'ами для разных браузеров. И самое смешное, что конечному пользователю вообще не важно, как там у вас страница свёрстана...
Bay, div'ная вёрстка говнище новое. Голословность предыдущих авторов прямопропорциональна пустоте их головы.
Владимир +1 ))
На самом деле истина посередине. Нужен компромисс, а не деление на лагеря табличников и блочников. Не использовать таблицы, только из принципа, что это, как выразился один из комментаторов "говнище старое", по меньшей мере глупо.
Таблицы плюс блоки - есть сила, товарищи!
Я тоже считаю что все нужно использовать в меру и таблицы и див.
Таблицы придуманы вообще-то не для каркаса, а для табличных данных.
А в вёрстке 2-го примера рациональностью и не пахнет. Смешно после этого высчитывать объём страниц, якобы всё по науке.
Из личного опыта: приходилось перевёрстывать таблицы в div-ы. Уменьшение объёма примерно в 5 раз.
старйкер +1
Есть разница. Сверстанный на дивах лучше читается поисковиками, а это уже не маловажный плюс.
Я сам начинал на таблицах и очень трудно прошла реформа на дивы. До сих пор мучаюсь. Но овчина стоит выделки.
Есть проекты в которых совмещение каркаса на таблах и впыжованных блоков упрощает задачу. Но, опять же. Это только упрощает сам процесс создания и не более.
Смена дизайна по времени абсолютно одинакова. Везде придется что-то подгонять. Не нужно предрассудков по этому поводу.
У автора своя правда, ему так проще. Для сайта визитки считаю приемлемо. Но мне совесть мешает по моему мнению - неполноценным торговать, делиться.
Валерий, правильно таблицы придуманы для вывода табличных данных.
Думаю потрібно змішати блочну верстку і табличну,або налагодити розробникам інтерпритаторів браузерів стандарти css.
Работал с Шаблонами в джумле (1,5-1.6). Лично мнение сложилось такое, что там с дивами нет ничего такого, что с таблицами нельзя бы было сделать проще (может из за того что начинал с таблиц). Хотя в блочной верстке ксть немало важных плюсов.
Лично мое замечание по таких шаблонах как в статье - впихивать дивы в каркасную (главную) таблицу (хотя это кому как)
P.S. Мне таблицы все же больше нравятся просто и ясно, а уже "навороты" больше по части блочной версти (хотя тоже сугубо индивидуальное мнение, что это уже выпендреж)
товарищи , вы обратите внимание , статья которую вы прочли и так красноречиво обсуждаете - опубликована на сайте , который целиком и полностью свёрстан блоками...
Делить на блочную и дивную вёрстку , приводя всего один пример , очень глупо. Ведь имеет значение , что вы верстаете. Может быть необходимо сверстать каркас "ноуимэйдж-фиксед" странички с 5 меню 3 колонками 2 шапками и 3 футерами или же страничку выводящую 20 страничный бухгалтерский отчёт...с кучей граф , пунктов и подразделов , так вот , тут всё проще будет сделать таблицами... и не морочьте голову "умные рукастые" ... всё нормально в них с выводом... max-width и min-width потрясающе работают и решают все проблемы. Для блога подошла бы дивная вёрстка , т.к. она мобильнее... Нельзя делить товарищи... необходимо всё... всё зависит от поставленной цели и также необходимо чётко знать чего хочешь , да и вообще уметь верстать и так и так , тогда всё вам станет ясно.