3.3. Графічні елементи оформлення веб-сторінок

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

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

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

Звичайно, можна багато чого досягти, використовуючи стильове оформлення сторінки (за допомогою каскадних таблиць стилів, описаних в наступному розділі). Проте є ще один спосіб “пожвавити” веб-сторінку. Він полягає у використанні невеликого числа дрібних графічних елементів як елементи оформлення. Звернете увагу на те, що ці елементи повинні бути дрібними. Це важливо по двох причинах: по-перше, вони не відволікають на себе увагу читача (а тільки надають веб-сторінці кращому зовнішньому вигляду), а по-друге, малі за розміром малюнки завантажуються з Мережі досить швидко, що зазвичай зіставно із швидкістю завантаження тексту.

Лінійки і буквиця

Які ж графічні елементи можливо застосовувати як таку “прикрасу”? Тут треба проявити фантазію. Якщо ви придумаєте що-небудь оригінальне, ваша веб-сторінка виглядатиме незвично, “не як інші”, і запам'ятається відвідувачеві. Проте перерахуємо декілька що стали вже традиційними варіантів такого застосування графіки. По-перше, це різні графічні роздільники, зазвичай горизонтальні, вживані замість горизонтальної межі (<HR>). Хоча тег <HR> і піддається настройці, графічний роздільник часто виглядає кращим.

Застосування графічних елементів оформлення - різні кнопки і маркери списків. Про них спеціально піде мова в наступному розділі.

Можна також застосувати графічний елемент як буквицю. Взагалі-то, незабаром підтримка буквиці передбачається і в HTML, але ця буквиця виконана об'ємною, з тінню і навіть як би з віддзеркаленням світла (хоча палітра цього GIF-файлу для зменшення розміру містить всього 16 квітів). Неважко здогадатися, яким чином вона вставлена в текст:

Для економії місця ми не приводимо текст сторіночки цілком, а тільки те місце де вставлена буквиця.) Установка атрибуту ALIGN="left" забезпечує обтікання текстом малюнка (буквиця). Про всяк випадок як альтернативний текст дається буква “Д”, щоб користувачеві з відключеною графікою не доводилося будувати здогадки щодо першої букви.

Для завершення оформлення можна ще створити градієнтний фон . Не забувайте тільки обов'язково указувати значення атрибуту ALT= у всіх тегах <IMG>.

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