1. Шари не таблиці
2. Висота шарів обмежена висотою контенту
3. блокова верстка
4. Розташування колонок

На жаль, таблична верстка наклала досить сильний відбиток на манеру верстки веб-сторінок. І тепер, коли верстка за допомогою шарів міцно входить в моду і завойовує безліч шанувальників, попередні стереотипи намагаються проявитися з новою силою. Так що розповідь про особливості верстки шарами доведеться починати не з шарів, а з таблиць і того багажу, що вони з собою принесли.

Що ж в результаті виходить? А то, що з конструктора, призначеного для створення танка, намагаються зробити літак. Думаєте, це неможливо? Немає нічого неможливого, коли під рукою є напилок і прірва часу. Але з іншого боку, може простіше взяти потрібний конструктор ...

Давайте для прикладу розглянемо типову і просту схему компонування сторінки (рис. 1).

Мал. 1. Сторінка, створена за допомогою таблиць

У самому верху розташовується «шапка» документа, де пишеться заголовок сайту. Далі йдуть дві колонки однакової висоти, колонки при цьому для наочності виділяються різним кольором. У самому низу розташовується «підвал» сторінки, куди поміщають контактну інформацію та інші службові дані. При цьому висота всього макета займає всю доступну висоту вікна браузера, тобто «Підвал» розташовується у нижнього краю веб-сторінки. Правда це відбувається тільки в тому випадку, якщо тексту в колонках не так багато. Коли обсяг тексту перевищує висоту веб-сторінки, вона відображається з вертикальною смугою прокрутки.

Незважаючи на зазначені умови, код, сформований за допомогою таблиць, відрізняється своєю компактністю (приклад 1). Для скорочення коду стилі не застосовувалися.

Приклад 1. Використання таблиць

Висота таблиці визначається атрибутом height тега <table>. Хоча цей атрибут відсутній в специфікації HTML, браузери при відсутності <! DOCTYPE> його розуміють, що і призводить до бажаного результату. Значення 100% говорить, що таблиця займає всю доступну висоту веб-сторінки.

Наведений двоколонний макет досить популярний серед розробників, тому у них виникає думка реалізувати його, але використовуючи виключно шари, без всяких таблиць. При цьому сформувалося два стилю роботи або, можна навіть сказати, мислення.

1. За основу береться таблична верстка і за допомогою шарів вона втілюється максимально близько до оригіналу.
2. Використовуються особливості шарів, сайт верстається з їх урахуванням.

Прихильники першого методу роботи забувають, що мають справу з абсолютно протилежними інструментами, в результаті народжуються оригінальні схеми обходу тих чи інших обмежень. Код в подібних випадках розбухає в рази, ускладнюється робота з ним, а браузери, як правило, по-різному відображають документ. Доводиться звертатися до Хакама або обманювати браузери іншими способами так, щоб сайт в підсумку працював коректно.

Тепер переходимо до особливостей шарів, щоб зрозуміти, в чому ж суть цього типу верстки.

Шари не таблиці

Незважаючи на банальність такого твердження, багато розробників своєю працею спростовують його знову і знову. Але варто тільки усвідомити, що це різні інструменти і елементи конструктора, як відразу стане легше і простіше. Дійсно, таблиці і методи верстки з їх допомогою краще застосовувати в одному випадку, а шари - в іншому. І чітко розділяти підходи і принципи верстки. Тоді нам не знадобиться заганяти творчу думку в прокрустове ложе антагоністичної технології. Треба просто піти іншим шляхом.

Висота шарів обмежена висотою контенту

У таблиці сусідні осередки взаємопов'язані, тому висота у них одна, незалежно від обсягу інформації. Це добре видно, якщо залити фон осередків різним кольором. Шари ж в якомусь сенсі є незалежними один від одного, тому висота шару визначається його вмістом. Вид документа при цьому буде відрізнятися від його табличного побратима (рис. 2)

Мал. 2. Сторінка, створена за допомогою шарів

Висота різних колонок на даному малюнку різниться, оскільки формується за рахунок їх вмісту.

Там, де необхідно, висоту шару можна встановити через стилі, використовуючи для цього різні одиниці - відсотки, пікселі, дюйми і т.д. Але якщо вміст шару перевищує його задану висоту, то браузери по-різному інтерпретують цей факт - одні розширюють висоту шару під новий контент, а інші браузери, залишаючи висоту вихідної, накладають контент поверх шару.

блокова верстка

Уже згадувалося, що шари в більшості випадків є незалежними один від одного, за рахунок чого вони як окремі блоки можуть додаватися або віддалятися в макеті веб-сторінки. За таку поведінку верстка за допомогою шарів отримала назву «блокова верстка». Шари допустимо вкладати один в інший для формування бажаного декоративного елемента. Тому під ім'ям «блок» мається на увазі не тільки окремий шар, скільки їх сукупність.

Розташування колонок

За умовчанням вміст контейнерів <div> на веб-сторінці розташовуються по вертикалі, спочатку йде один шар, нижче розташовується наступний і т.д. При створенні колонок потрібно розташовувати шари поряд по горизонталі, для чого застосовується кілька методів. Одним з поширених є використання стильової властивості float. Хоча він призначений для створення обтікання навколо елемента, з тим же успіхом float встановлює і колонки. Але тут слід врахувати одну особливість. При зменшенні вікна браузера до деякої критичної ширини, колонки перестають розташовуватися горизонтально і перебудовуються один під одним по вертикалі. З цим фактом або залишається змиритися, або використовувати інші методи формування колонок через шари.

Вид сторінок і їх поведінку в браузері відрізняється від того, яким способом зверстаний документ - за допомогою таблиць або шарів. Кожен з цих способів верстки має свої особливості, які впливають в підсумку на відображення веб-сторінки. Що властиво таблиць і документів, створених на їх основі, не є ознакою шарів, і навпаки. Якщо це розуміти і чітко розмежовувати сфери застосування таблиць і шарів і не намагатися втиснути одне в формат іншого, то верстка сайтів з шарами істотно спрощується і стає більш ефективною.

джерело