Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

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

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

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

К основным эффектам в DHTML относят следующие:

  • перемещение элемента относительно страницы сайта
    • влет
    • вылет
    • спускать по словам
    • пластик
    • скачок
    • спирали
    • волна
    • стирание
    • масштаб
  • форматирование элементов страницы
    • изменение цвета строки или абзаца
    • изменение фона
    • изменение шрифта
    • изменение размера шрифта

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

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

Если размер каждого такого изображения будет достаточно мал, всего 3-4 кб, то их совокупный «вес» уже будет составлять 9-12 кб. Если количество анимированных таким образом кнопок велико, то общий «вес» страницы тоже существенно увеличивается и это замедляет загрузку всей страницы.

Если же для создания анимированной кнопки использовать возможности DHTML, то эффект анимации будет достигнут не за счет смены изображений, а за счет выполнения на стороне клиента программной функции. А значит и время загрузки страницы не будет сильно увеличено.

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

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