» ПРИНЦИП 3
Строительно отделочные материалы, магазин стройматериалов. Магазин стройматериалы недорого.Необхідно використати мінімум зображень як можна меншого розміру.
У нашому випадку менше зображень використати практично неможливо.
Після того, як перший блок розкладений по поличках, можливі два варіанти розвитку подій:
Продовжувати в тім же дусі з іншими блоками, поки все не стане зовсім ясно
Зверстати перший блок, а потім зайнятися іншими.
Мені ближче другий підхід. Напевно тому, що мені подобається якомога раніше бачити результат. Крім того, я точно не встигну забути, що встиг придумати для першого блоку.
Раз вуж мені подобається другий підхід, його й буде застосовувати. Почнемо верстати перший блок, щоб на практиці закріпити теоретичні вишукування. Для початку як звичайно треба заготовити картинки:
Логотип: logo.gif
Перший фоновий малюнок: bg1.gif
Тоненький малюнок початку плашки, що над словом «новини» (його не можна зробити тлом, так що доводиться вставляти малюнком): block-left.gif
Другий фоновий малюнок для плашки: bg2.gif
Слово «новини» теж треба робити малюнком, так задумав дизайнер: news.gif
Всі необхідні картинки готові, можна приступати. Пам’ятаємо, що потрібна таблиця всього із двох осередків. У табличній верстці завжди спочатку створюється таблиця із заданими параметрами. У нашому випадку сумарна ширина таблиці 750 пикселей. Визначаємо, що ширина першого осередку повинна бути 517 пикселей, значить ширина другий - 233 пикселя. Відстані між осередками й відступи треба обнулить. Створюємо таку таблицю:
<table cellspacing=”0″ cellpadding=”0″ width=”750″>
<tr>
<td width=”517″></td>
<td width=”233″></td>
</tr>
</table>
Починаємо вставляти зображення. Тлом для першого осередку служить bg1.gif. Відразу ж вставляємо й логотип.
<td background=”i/bg1.gif” width=”517″>
<img src=”i/logo.gif” width=”272″ height=”74″ border=”0″ alt=”PopStar”>
</td>
Дивимося на результат і бачимо, що тло з картинкою відмінно зістикувалися, але картинка прибита до лівого краю. Помнете, я говорив, що її можна відбити за допомогою розпірки? У цьому випадку є спосіб і получше. У тегу <img> є атрибут hspace, що задає поля картинки по горизонталі. Справа в тому, що поля задаються й праворуч, і ліворуч, але саме зараз це ролі не грає. Так що можна відбити логотип от так:
<img src=”i/logo.gif” width=”272″ height=”74″ border=”0″ alt=”PopStar” hspace=”30″>
Перейдемо до другого осередку. Задамо там тло, і вставимо два малюнки. Помітьте, що «новини» розташовуються відразу під плашкою, так що між малюнками коштує переклад рядка:
<td background=”i/bg2.gif” width=”233″>
<img src=”i/block-left.gif” width=”1″ height=”68″>
<br><img src=”i/news.gif” width=”59″ height=”9″ alt=”новини”>
</td>
Подивившись на результат і зауважуємо, що малюнок block-left.gif не стикується з фоновим. Небагато подумавши, згадуємо, що він повинен бути прибитий до верхнього краю осередку, але насправді цього немає. Просто в ряду таблиці треба прописати valign=”top”. У результаті маємо код:
<table cellspacing=”0″ cellpadding=”0″ width=”750″>
<tr valign=”top”>
<td background=”i/bg1.gif” width=”517″>
<img src=”i/logo.gif” width=”272″ height=”74″ border=”0″ alt=”PopStar” hspace=”30″>
</td>
<td background=”i/bg2.gif” width=”233″>
<img src=”i/block-left.gif” width=”1″ height=”68″>
<br><img src=”i/news.gif” width=”59″ height=”9″ alt=”новини”>
</td>
</tr>
</table>
Поки виходить досить компактно й просто, як ви вважаєте? Зверніть увагу на деякі деталі. Я скрізь указував розміри картинок. При табличній верстці вказувати розміри необхідно, тому що браузер буде швидше обробляти таблиці. Крім того, я не вказав атрибут alt для картинки lock-left.gif. Звичайно, такий код суперечить стандарту HTML, але в цьому випадку картинка не несе ніякого значеннєвого навантаження. По специфікації в подібних випадках треба задавати порожній атрибут, тобто alt=”", тому що голосові браузери в цьому випадку не будуть говорити «невідоме зображення», а тактовно промовчать. З огляду на той факт, що таких браузерів у російськомовному інтернеті катастрофічно мало, можна їх проігнорувати (Я визнаю, що моя позиція незовсім коректна. На заході зараз активно розвивається такий рух, як accessibility, тобто загальнодоступність змісту сторінок).
Прихильники доступності сайтів негайно обуряться й будуть затверджувати, що такий підхід некрасивий й у корені невірний стосовно користувачів. Так, я згодний, але компактність коду для мене важливіше. Не треба кидати в мене помідори, самі вирішуйте, як верстати вам.
Давайте займемося другим блоком. Його можна реалізувати за допомогою таблиці з п’ять стовпців. У першому осередку буде меню, друга - просто для відбиття, у третьої - текст, четверта знову ж для відбиття, а в п’ятої - новини. Будемо заповнювати стовпці таблиці один по одному.
Меню робиться дуже просто: треба заготовити чотири картинки з пунктами меню, поставити після кожної з них переклад рядка й задати в осередку таблиці вирівнювання по правому краї.
<table cellspacing=”0″ cellpadding=”0″ width=”750″>
<tr>
<td align=”right”>
<a href=”about.html”><img src=”i/about.gif” width=”122″ height=”20″ border=”0″ alt=”Про компанії”></a><br>
<a href=”stars.html”><img src=”i/stars.gif” width=”122″ height=”17″ border=”0″ alt=”Наші зірочки”></a><br>
<a href=”services.html”><img src=”i/services.gif” width=”122″ height=”20″ border=”0″ alt=”Послуги”></a><br>
<a href=”contact.html”><img src=”i/contact.gif” width=”122″ height=”15″ border=”0″ alt=”Контакти”></a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Зверніть увагу, ми в картинок прописували border=”0″, тому що картинка буде посиланням.
З порожніми стовпцями поки нічого робити не будемо. Потім вставляємо текст і новини. У четвертого розділу ми вже цим займалися, так що повторювати немає особливого змісту. Набагато цікавіше підбирати ширини осередків. Методом наукового тыка (а ще краще виміром ширини в Photoshop) установлюємо, що ширина першого осередку повинна бути 125 пикселей, ширини відбиттів по 15 пикселей, ширина новин 233 пикселя, а все інше дістається центральної області.
Крім того, при перегляді результату в браузері виявляється, що я забув прописати вирівнювання по верхньому краї вмісту осередків. Тобто в тег <tr> треба додати атрибут valign=”top”.
У першому осередку буде фоновий малюнок, що буде утворювати плашку, і маленька картинка із чорною смужкою для закінчення плашка. Другий осередок буде містити фоновий малюнок, що утворить лінію, а також копирайт. Напис копирайта можна відбити від лівого краю розпіркою.
Тло для плашки я називаю bg3.gif, чорну смужку для плашки block-right.gif, а тло для лінії bg4.gif. Створюємо таблицю:
<table cellspacing=”0″ cellpadding=”0″ width=”750″ border=”0″>
<tr valign=”top”>
<td background=”i/bg3.gif” width=”208″ align=”right”>
<img src=”i/block-right.gif” width=”1″ height=”18″>
</td>
<td background=”i/bg4.gif” width=”542″>
<img src=”i/0.gif” width=”309″ height=”1″>
<font face=”Verdana” size=”1″>2003 © PopStar
</td>
</tr>
</table>
Принцип її створення практично такий же, як і для найпершого блоку. Я так само прописую тло. Є дві відмінності: треба в першому осередку вирівняти вміст по правому краї, щоб block-right.gif був праворуч, а не ліворуч. Використається розпірка для позиціювання копирайта в необхідне положення.
Властиво, на цьому верстка практично закінчена. Хіба що залишилося обнулить поля елемента <body> за допомогою атрибутів marginheight, marginwidth, topmargin й leftmargin.
Якщо зрівняти з тим, як був зверстаний макет у четвертому розділі, то з’ясується, що вага самого HTML-документа навіть збільшилася на 200 байт, але зате на 1,5 кілобайта зменшилася вага картинок. Тобто в підсумку загальна вага документа все-таки зменшився на 1,3 кілобайти. Звичайно, цифри смішні, але й документ вуж боляче простій.
На прикладі такого макета добре видний основний принцип позиціювання за допомогою таблиць: для точного позиціювання елемента усередині таблиці використаються точні значення ширини осередків і розпірки. Постійний розрахунок ширини осередків і підбор ширини або висоти розпірки: неминуче заняття верстальщика. Наприклад, якщо треба відбити елемент на 9 пикселей від верхнього краю, то необхідно вставити таку розпірку:
<img src=”i/0.gif” width=”1″ height=”9″><br>
Якщо треба відбити елемент від лівого краю на 123 пикселя, то для цього підійде от така розпірка:
<img src=”i/0.gif” width=”123″ height=”1″>
Якщо дизайн складний, то на сторінці може бути кілька десятків розпірок. Як ви розумієте, такий достаток картинок ні до чого гарному не веде.
У чому ж причина такого частого використання таблиць і картинок? Насправді за відповіддю далеко ходить не треба, досить подивитися, для яких елементів в HTML можна встановлювати геометричні розміри. Виявляється, що для п’яти елементів, пов’язаних з таблицями (<table>, <th>, <td>, <col>, <colgroup>), картинок (крім того, і для елемента <object>), а також <hr>, <iframe> й <pre>.
Внутрішні фрейми й <pre> використати для точного позиціювання не представляється можливим. Як розпірка можна спробувати використати <hr>, правда його не можна зробити прозорим, і в деяким випадках таке поводження буде заважати. Так що розпірка невидимою картинкою більше універсальна. Адекватної заміни таблицям немає в принципі. От і виходить панування таблиць і картинок. Що поробити, таке життя верстальщика.
Як я говорив спочатку, ми будемо порівнювати види позиціювання. Для того, щоб порівнювати, треба розібратися, які вони взагалі бувають. Позиціювання за допомогою таблиць загалом освоєно, а в наступній частині ми розглянемо “CSS-позиціювання”.
гадание на кофейной гуще