Компонування Web-сторінок Проста таблична верстка

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

На сторінці зазвичай використовується:

1. логотип і заголовок сайту;

2. лівий стовпчик, звичайно містить елементи навігації (правда, ця навігація може розташовуватися не тільки в стовпчик, але й у рядок);

3. правий стовпчик — як правило, саме в ній і розташовується основний текст сайту з картинками;

4. «підвал» — самий низ Web-сторінки, у ньому часто розміщають контактну інформацію, інформацію про авторські права і т.д.

5. тут часто розташовується додаткова інформація (локальні посилання, посилання на аналогічні сайти в Інтернет, смуга новин, різні голосування, рейтинги та інше). Цього стовпчика може і не бути.

ПРИКЛАД

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

Вибір дизайн верстки

Існує два типи дизайну. Один з них "гумовий", це той, що під розмір віконця браузера підбудовувався, другий — фіксований (зі смугами прокрутки). Є ще й комбінований.

Фіксований дизайн – табличний дизайн, у якому величина зовнішньої таблиці, або кожного осередку задана в пікселях. Вибір ширини зовнішньої таблиці залежить від орієнтації на визначений дозвіл монітора користувачів:

Дозвіл монітора	Ширина сторінки	Висота сторінки
640х480	600	300
800х600	760	420
1024х768	955	600

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

ПРИКЛАД

Каркасна таблиця вирівняна по лівому краї

Каркасна таблиця вирівняна по центрі сторінки

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

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

Проміжний підсумок:

Фіксований дизайн
+	-
Сторінка буде виглядати однаково незалежно від дозволу монітора. Це представляє величезний простір для створення складних і стильних дизайнів. Сторінки і стовпці з фіксованою шириною забезпечують краще керування довжинами рядків. Занадто довгі рядки незручні для читання. Розробляти і верстати фіксований дизайн набагато простіше	У фіксованого дизайну є тільки один оптимальний дозвіл екрана. якщо для розробки сторінки як оригінал був узятий монітор з дозволом 640х480, то вже на екрані 1024х768 полючи займають майже половину ширини сторінки – і чим далі, тим гірше; якщо при розробці акцент був зроблений на «середнє» дозвіл (800х600), то в користувачів маленьких моніторів з'являється горизонтальна смуга прокручування, і частина змісту їм стає не видна; якщо ж при розробці сторінки ви будете орієнтуватися на «свій великий монітор» то навіть у власників екранів 800х600 (а це майже 50% усіх користувачів!) сторінка виглядає погано – а для 640х480 звичайно нечитабельна.

Гумовий дизайн – табличний дизайн, у якому ширина однієї або декількох осередків задається у відсотках від ширини вікна.

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

ПРИКЛАД

Отже, що ми маємо?

Гумовий дизайн
+	-
Заповнено весь простір монітора, відсутнє небажане вільне місце. Сторінки будуть відображатися на моніторах з різним дозволом; гнучку сторінку можна настроїти для виводу на будь-якому дисплеї, хоч навіть на мобільному телефоні.	На великих моніторах довжина рядки може виявитися надмірної, що погіршує умови для читання. Результати гнучкого дизайну часто непередбачені. Завантаження «гумової» сторінки займає втроє більше часу від аналогічної «фіксованої». Деякі браузери (особливо Netscape) дуже важко переварюють осередку перемінної ширини.

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

Тепер, я сподіваюся, видно, що однозначно відповісти на запитання, який дизайн краще, а який гірше, повинні саме ви самі. (...як там? Порятунок потопаючих, справа рук самих потопаючих? От отут теж саме!)

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