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

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

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

Як ви знаєте, верстка складається з створення блоків та їх позиціонування. Виходить, що позиціювання є останньою перепоною на шляху до повного усвідомлення 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, тобто загальнодоступність змісту сторінок .<). Прихильники доступності сайтів негайно обуряться і будуть стверджувати, що такий підхід негарний і докорінно невірний по відношенню до користувачів. Так, я згоден, але компактність коду для мене важливіше. Не треба кидати в мене помідори, самі вирішуйте, як верстати вам. Давайте займемося другим блоком. Його можна реалізувати за допомогою таблиці з п'ять стовпців. У першій клітинці буде меню, другі - просто для відбиття, в третій -- текст, четверта знову ж таки для відбиття, а в п'ятому - новини. Будемо заповнювати стовпці таблиці по порядку. Меню робиться дуже просто: треба заготовити чотири картинки з пунктами меню, поставити після кожної з них новий рядок і задати в комірці таблиці вирівнювання по правому краю. треба додати атрибут valign = "top". Залишається останній третій блок. Його можна зробити таблицею з двох осередків, як показано на рис. 9.3 Рис. 9.3 Дві комірки таблиці третього блоку В перший комірці буде фоновий малюнок, який буде утворювати плашку, і маленька картинка з чорною смужкою для закінчення плашка. Друга осередок буде містити фоновий малюнок, який утворює лінію, а також копірайт. Напис копірайту можна відбити від лівого краю розпіркою. Фон для плашки я називаю bg3.gif, чорну смужку для плашки block-right.gif, а фон для лінії bg4.gif. Створюємо таблицю: Зверніть увагу, ми у картинок прописували border = "0", тому що картинка буде посиланням. З порожніми стовпцями поки нічого робити не будемо. Потім вставляємо текст і новини. У четвертого розділу ми вже цим займалися, так що повторювати немає особливого сенсу. Набагато цікавіше підбирати ширини комірок. Методом наукового тику (а ще краще вимірюванням ширини в Photoshop) встановлюємо, що ширина першому осередку повинна бути 125 пікселів, ширини отбівок по 15 пікселів, ширина новин 233 пікселів, а все інше дістається центральній області. Крім того, при перегляді результату в браузері виявляється, що я забув прописати вирівнювання по верхньому краю вмісту осередків. Тобто в тег 2003 © PopStar Принцип її створення практично такою ж, як і для самого першого блоку. Я так само прописую фон. Є дві відмінності: треба в першу комірці вирівняти вміст по правому краю, щоб block-right.gif був праворуч, а не зліва. Використовується розпірка для позиціонування копірайту в необхідне положення. Власне, на цьому верстка практично закінчена. Хіба що залишилося обнулити поля елемента за допомогою атрибутів marginheight, marginwidth, topmargin і leftmargin. Якщо порівняти з тим, як був зроблений макет у четвертому розділі, то з'ясується, що вага самого HTML-документа навіть збільшився на 200 байт, але зате на 1,5 кілобайт зменшився вага картинок. Те є в підсумку загальна вага документа все-таки зменшився на 1,3 кілобайт. Звичайно, смішні цифри, а й документ аж надто простий. На прикладі такого макета добре видно основний принцип позиціювання за допомогою таблиць: для точного позиціювання елемента всередині таблиці використовуються точні значення ширини осередків та розпірки. Постійна розрахунок ширини осередків та підбір ширини або висоти розпірки: неминуче заняття верстальника. Наприклад, якщо треба відбити елемент на 9 пікселів від верхнього краю, то необхідно вставити таку розпірку: Якщо треба відбити елемент від лівого краю на 123 пікселі, то для цього підійде ось така розпірка: Якщо дизайн складний, то на сторінці може бути кілька десятків розпірок. Як ви розумієте, така велика кількість картинок ні до чого доброго не веде. В чому ж причина такого частого використання таблиць і картинок? Насправді за відповіддю далеко ходить не треба, достати?? але подивитися, для яких елементів в HTML можна встановлювати геометричні розміри. Виявляється, що для п'яти елементів, пов'язаних з таблицями ( , , ), картинок (крім того, і для елемента , ,