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

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

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

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

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

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

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

Итак, данный макет можно увидеть, посмотрев пример №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 родительскому элементу).

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

Реализация данного макета методом блочной вёрстки потребует от нас включения строгого режима отображения документов, так называемого «режима совместимости стандартам». Это можно сделать, задав в начале документа директиву
<!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 пикселей в один цвет, а остальные в другой. Задав документу фон

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

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

И действительно, два блока стали идеально сжиматься, но вот 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.

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