Інформаційні технології та моделювання бізнес-процесів - Томашевський О.М. - 13.3. Основи Web-дизайну. Особливості технології

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

Для того, щоби текст на сторінці завжди відображався коректно (а не набором незрозумілих символів), розробники сайтів використовують наступні шрифти: Arial, Times та Courier з підтримкою стилів Bold, Italic, Underline.

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

Рис.13.3. Приклад графічного зображення, створеного на основі тексту

Для ілюстрації важливості використання стандартних шрифтів у дизайні сторінки, розглянемо випадок, коли текст автор оформив шрифтом ВіrсhСТТ. При розробці сторінки і в броузері на комп'ютері автора текст виглядав так:

Рис.13.4. Вигляд сторінки на ПК із шрифтом BirchCTT

При перегляді розглянутої сторінки на іншому комп' ютері, де не встановлено шрифт BirchCTT, Web-броузер відображає текст одним із шрифтів по замовченню, а саме Times New Roman:

Рис.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" при збереженні файлів зображень для прискорення завантаження.