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

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

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

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

Ширина документа

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

Фіксований макет

У цьому випадку діємо навпаки і встановлюємо загальну ширину макету жорстко заданою і дорівнює певній величині. Якщо взяти деяку узагальнену статистику відвідувачів сайтів і подивитися, яку роздільну здатність монітора вони переважно використовують, то дізнаємося, що це 1024х768 пікселів. Візьмемо за орієнтир 1000 пікселів, тоді загальна ширина макету за відніманням вертикальної полоси прокрутки і рамки браузера виявиться 800x990 пікселів. На цей розмір орієнтуємося й встановимо ширину макету, наприклад, 900 пікселів.

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

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

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

"Резиновий" макет

Цей вид макета ґрунтується на тому, що в якості одиниці вимірювання виступають відсотки. Загальна робоча ширина вікна браузера - 100%, і колонки макету в сумі не повинні її перевищувати, тому для зручності, як правило, всюди використовується відсотковий запис. При зміні розмірів вікна відбувається переформатування даних сторінки, щоб вони вписувалися в нову ширину (рис. 3).

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

• Хоча веб-сторінка і підлаштовується під ширину вікна браузера, при досягненні певного розміру читати текст стає незручно - рядки занадто довгі і очі втомлюються по них бігати. Проте, браузер можна скоротити в вікно, підібравши його комфортний розмір.
• Верстати "резиновий" макет складніше, ніж аналогічний, але фіксованої ширини. Це пов'язано з тим, що доводиться враховувати багато додаткових факторів і знати деякі прийоми верстки. Крім того, популярні браузери неоднозначно трактують деякі параметри, і в них "резиновий" макет може відображатися по-різному. Проще кажучи, знати про правила верстки треба більше.
• Будь-який макет має певну мінімальну ширину, при досягненні якої веб-сторінка "розсипається" або з'являється горизонтальна полоса прокрутки. Наприклад, якщо в документ вставлено малюнок шириною 600 пікселів, то при зменшенні вікна до цієї величини браузер почне відображати полосу прокрутки.
• "Резиновий" дизайн характеризується активним використанням фонових зображень, які по горизонталі збираються без швів встик. Дійсно, змінити без втрати якості ширину зображень не вийде, а от "підкласти" під них фон - завжди будь ласка.

Висота документа

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

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

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

Об'єкти веб-сторінки прямокутні

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