Розділ «13. Гіпертекстові технології»

Рис.13.5. Вигляд сторінки на ПК без шрифту BirchCTT

Аналогічним чином броузер може замінити передбачений автором колір на колір по замовченню. При всій різноманітності кольорів, що представлені системою керування кольором RGB (абревіатура від Red/ червоний/, Green/зелений/ та Blue/синій/) існує лише 219 "безпечних" кольорів. Вони зарезервовані броузерами для безпосереднього доступу на платформах Windows та Macintosh. Якщо палітра сторінки (включно із кольором шрифту) складається виключно з цих безпечних кольорів, то сторінка на будь-якому комп'ютері буде виглядати однаково. Зазвичай, безпечна web-палітра входить у набір стандартних палітр будь-якого графічного редактора.

Підготовка графіки для мережі Інтернет. Окрім текстової інформації на сайті можуть бути різноманітні графічні елементи - малюнки, фотографії, стрілки, кнопки, кольорові чи текстурні лінії, анімаційні зображення, тощо. І, звісно, фон ("background" чи просто "back") також може містити картинку. Все це надає сайту індивідуальності і підкреслює його зміст. Процес створення та розміщення на сайті мультимедіа - звуку і відео (і Flash-анімація) в даній праці розглядатись не буде, оскільки докладне вивчення цих питань може скласти окремий навчальний курс. Тому обмежимось вивченням найпоширеніших Інтернет-форматів зображень: *.GIF та *.JPEG. Про їх специфіку ми поговоримо нижче.

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

Розглянемо випадок, коли автор бажає розмістити в якості фону картинку чи фотографію. Оскільки файл зображення у весь екран буде великого розміру і час завантаження його буде істотним, розробники сайтів рекомендують розрізати зображення на частини (slices).

Рис.13.6. Розрізання зображення засобом редактора Adobe Photoshop

Найпростішим способом розрізання на частини можна реалізувати, розбивши зображення потрібним чином за допомогою ліній розмітки (Guidelines), перетягнувши їх мишкою з лінійки, що розташована вгорі та з лівого боку зображення. Лінійка вмикається командами меню на панелі інструментів Adobe Photoshop: View - Rulers.

Розбивши зображення на частини, активізуємо інструмент "Slice" на панелі інструментів Adobe Photoshop (рис.13.6). Клікаємо мишкою на кнопці "Slices From Guides" панелі Options.

Отриманий результат записуємо у вікні File - Save For Web як готову Web-сторінку з фоном, що складається з окремих файлів. Програма автоматично розміщує їх в папці "images".

Оскільки фонове зображення буде завантажуватись окремими частинками невеликого розміру (причому у вікні "Save For Web" їх розмір в Kb можна ще зменшити шляхом оптимізації кольорів), це істотно зменшить час завантаження сторінки загалом.

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

Формати графіки для Web

GIF-формат (Graphics Interchange Format) базується на векторній графіці (наприклад, логотип), де всі лінії визначаються за допомогою математичних формул. Цей формат дозволяє стискати однотонні зображення без втрати якості та чіткості. Проте, при наявності тонких відтінків стиск об'єднає їх в один базовий колір, оскільки палітра цього формату використовує лише 256 кольорів.

GIF-файли мають невеликий розмір, що є оптимальним для швидкого завантаження сторінки. Також GIF-зображення можна помістити на прозорому тлі, що дозволить гармонійно вписати його у тло сторінки, що проілюстровано на прикладі стрілки (рис.13.7, а)).

Рис.13.7. Властивості прозорого зображення на тлі

Прозорий фон GIF-зображення реалізується у Photoshop встановленням прапорця "Transparency"у вікні "SaveFor Web" (рис.13.8).

Використовуючи вкладку "Color Table" вікна "Save For Web" можна оптимізувати отримане зображення, видаливши близькі за відтінком кольори - це не буде візуально помітно. Розмір зображення відображається в нижньому лівому куті вікна (рис.13.8) разом із часом завантаження при використанні dial-up доступу із швидкодією, притаманною середньостатистичному з'єднанню.

З декількох GIF-зображень за допомогою спеціальних програм (наприклад, Adobe ImageReady чи Ulead GIF Animator) можна створити анімацію, що буде відображатись усіма броузерами і не потребуватиме завантаження програм для її перегляду.

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

На відміну від GIF-формату, JPEG не підтримує прозорість, тому при комбінуванні растрових зображень з тлом сторінки, необхідно звертати особливу увагу на гармонійне поєднання фону та зображення. В противному випадку можна отримати небажаний результат (рис.13.7, б)).