Особливості верстки шарами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блочна верстка

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

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

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

Резюме

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