Позиціонування: всьому своє місце

Михайло Дубаков

Позиціонування за допомогою таблиць.

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

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

специфікація таблиць в стандарті HTML 4 вдала

популярні браузери відмінно підтримують реалізацію таблиць

підтримка таблиць ідентична у всіх популярних браузерах

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

Напевно, не від хорошого життя, як ви думаєте? От і я думаю, що у таблиць є певні недоліки. Недоліки наступні:

нелогічність використання таблиць для створення структури документа, що не дивно, адже таблиці спочатку для цього і не призначалися

багато зайвого і непотрібного коду, що веде до збільшення ваги документа

відносна складність модифікації коду

погане сприйняття коду документа. Це самий противний недолік. Він особливо яскраво проявляється, коли доводиться вносити зміни в сайт, який був зверстаний рік тому.

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

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

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

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

По-третє, документи стануть легше, вони будуть швидше завантажуватися і відображатися браузерами. Який власник сайту не хоче, щоб сторінки завантажувалися не за 6 секунд, а за 4 секунди?

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

Помріяти і досить, давайте спустимося з небес на землю. Якщо використовувати CSS по максимуму, то про економію часу можна забути. Вам доведеться писати крос-браузерності код і проводити багато часу, вирішуючи проблеми сумісності. Іноді поведінка браузера настільки дивне, що просто дивуєшся. Складність HTML-коду, звичайно, значно зменшитися, але зате CSS-код буде дуже навіть непростим. Єдине, на що можна сподіватися, - це зменшення ваги сторінок.

Звичайно, в багатьох випадках можна відносно легко написати крос-браузерну таблицю стилів. Але не завжди. В усякому разі, буває складно відразу знайти правильний підхід до макету. Іноді здається, що найкраще верстати таблицями, а виявляється, що і CSS-блоками було б чудово. Оцінка макету і вибір правильного підходу приходять з досвідом. Ми з вами ще будемо говорити про те, як дивитися на макет і як вибирати спосіб верстки.

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

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

Рис. 9.1 Макет сайту компанії PopStar

Я поки не буду приводити код макета, який був зроблений макет в четвертій чолі, а відразу почну верстати правильно. Все ж таки ми з вами вже досить серйозно просунулися вперед, і верстати неправильно не хочемо. Заодно освоїмо основні принципи табличної верстки.

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

ПРИНЦИП 1

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

Переваги такі:

Браузер буде демонструвати таблиці по мірі завантаження. Якщо все помістити в одну таблицю, то браузер покаже сторінці тільки після завершення завантаження всього коду. Візуально буде здаватися, що сторінка завантажується швидше.

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

Якщо подивитися на рис. 9.1, то одразу впадають в око три великі блоки, які можна укласти в окремі таблиці:

Перший блок містить логотип і заголовок «Новости»

Другий блок містить центральну частину (меню, текст і самі новини)

Третій блок містить копірайт

Ось ми і визначили загальну структуру документа. Зараз саме час зайнятися кожен блоком окремо і подумати, як його краще зверстати. При цьому добре б мати на увазі другий принцип табличної верстки:

ПРИНЦИП 2

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

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

Рис. 9.2 Перший блок, розбитий на стовпці

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

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

ПРИНЦИП 3

Необхідно використовувати мінімум зображень як можна меншого розміру.

В нашому випадку менше зображень використовувати практично неможливо.

Після того, як перший блок розкладено по поличках, можливі два варіанти розвитку подій:

Продовжувати в тому ж дусі з іншими блоками, поки все не стане цілком ясно

зверстати перший блок, а потім зайнятися іншими.

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

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

Логотип: logo.gif

Перший фоновий малюнок: bg1.gif

Тоненький малюнок початку плашки, що над словом «новини» (його не можна зробити фоном, так що доводиться вставляти малюнком): block-left.gif

Другий шпалери для плашки: bg2.gif

Слово «Новини» теж треба робити малюнком, так задумав дизайнер: news.gif

Всі необхідні картинки готові, можна приступати. Пам'ятаємо, що потрібна таблиця всього з двох осередків. У табличній верстці завжди спочатку створюється таблиця з заданими параметрами. У нашому випадку сумарна ширина таблиці 750 пікселів. Визначаємо, що ширина першого осередку повинна бути 517 пікселів, значить ширина друге - 233 пікселя. Відстані між осередками та відступи треба обнулити. Створюємо таку таблицю:

Починаємо вставляти зображення. Фоном для першого осередку служить bg1.gif. Відразу ж вставляємо і логотип.

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

Перейдемо до другої комірці. Поставимо там фон, і вставимо два малюнки. Зауважте, що «Новини» розташовуються відразу під плашки, так що між малюнками варто переклад рядки:

Подивившись на результат і помічаємо, що малюнок block-left.gif не стикується з фоновим. Трохи подумавши, згадуємо, що він повинен бути прибитий до верхнього краю комірки, але на насправді цього немає. Просто в ряду таблиці треба прописати valign = "top. У результаті маємо код:

Поки виходить досить компактно і просто, як ви вважаєте? Зверніть увагу на деякі деталі. Я скрізь вказував розміри картинок. При табличній верстці вказувати розміри необхідно, тому що браузер буде швидше обробляти таблиці. Крім того, я не вказав атрибут alt для картинки lock-left.gif. Звичайно, такий код суперечить стандарту HTML, але в даному випадку картинка не несе ніякого смислового навантаження. За специфікації в подібних випадках треба ставити порожній атрибут, тобто alt = "", тому що голосові браузери в цьому випадку не будуть говорити "невідоме зображення», а тактовно промовчать. З огляду на той факт, що таких браузерів в російськомовному Інтернеті катастрофічно мало, можна їх проігнорувати (Я визнаю, що моя позиція не зовсім коректна. На заході зараз активно розвивається такий рух, як accessibility, тобто загальнодоступність змісту сторінок.