Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Дизайн сайтів. Візуальні ефекти в DHTML

Швидкість завантаження сторінок із сервера – важливий фактор юзабіліті сайту. Щоб забезпечити гарну швидкість завантаження, веб-дизайнери намагаються максимально зменшити використання «важкої» графіки в дизайні сайтів. Для цього графічні файли заміняють застосуванням спеціальних ефектів в DHTML. DHTML (Dynamic HTML) - дороблена динамічна версія HTML, що дозволяє створювати візуальні ефекти.

Які ж візуальні ефекти для дизайну сайтів доступні в DHTML?

До основних ефектів в DHTML відносять наступні:

  • переміщення елемента щодо сторінки сайту
    • вліт
    • виліт
    • спускати за словами
    • пластик
    • стрибок
    • спіралі
    • хвиля
    • стирання
    • масштаб
  • форматування елементів сторінки
    • зміна кольору рядка або абзацу
    • зміна фону
    • зміна шрифту
    • зміна розміру шрифту

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

  • зображення вихідної кнопки
  • зображення кнопки при наведенні на неї курсору миші
  • зображення кнопки в натиснутому стані

Якщо розмір кожного такого зображення буде досить малий, усього 3-4 кб, то їх сукупна «вага» уже буде становити 9-12 кб. Якщо кількість анімованих у такий спосіб кнопок велика, то загальна «вага» сторінки теж істотно збільшується й це сповільнює завантаження всієї сторінки.

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

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

Дизайн сайтів. Візуальні ефекти в DHTML
Теги:
дизайн сайту, дизайн сайтів, юзабіліті, dhtml, візуальні ефекти