Видеокурс по созданию сайтов | Как создать анимированную катинку? | Как вставить анимированную картинку на веб-страницу? | Как в

Видеокурс

Доступность и привлекательность текста

Комментарии к видеоурокам

Урок #5.6. Создание и вставка анимированных картинок.
28 минут

Наверняка, вам приходилось видеть рекламные ролики на сайтах в виде изображений или текстовых сообщений, которые сменяли друг друга через определенное время. Это реализуется посредством картинок в формате gif (animated GIF). Рекламодатели используют технологию gif по двум причинам:

1. такие изображения привлекают больше внимания, чем обычные статические картинки;

2. за счет чередования картинок на определенном участке можно поместить в несколько раз больше информации (два кадра — два объема информации, три кадра — три).

Эффект анимации возможен благодаря формату GIF, который позволяет в одном графическом файле разместить несколько изображений. Единственное требование — все картинки должны иметь gif-формат.

Вес анимированной картинки равняется сумме всех картинок. То есть при использовании красочных изображений такая картинка может весить достаточно много.

«Собрать» один файл из нескольких можно в специальных программах. На видеоуроке использована программа UnFREEz 2.1.

О программе UnFREEz 2.1.

Инструмент, который обрабатывает любое количество различных GIF-изображений и создает из них отдельное анимированное GIF-изображение. От пользователя требуется только перетащить файлы из Проводника Windows и задать время задержки. Дополнительные особенности: автоматическое чередование и обнаружение прозрачности.

Программа распространяется бесплатно и есть на диске.

Как вставить анимированную картинку на веб-страницу?

Так же, как и любое изображение:
<img src="../img_md/reclame_disk.gif" alt="Пример анимированной картинки" />.

Для анимированных картинок можно использовать основное (базовое) статическое изображение, которое будет являться фоном для анимированной части. Анимированная часть может состоять из текстовых сообщений. Таким образом, мы получаем нужный эффект при минимальном весе анимированной части.

Опция включения анимации в браузерах

Нужно иметь в виду, что не все посетители смогут просмотреть анимированную картинку, а только та доля посетителей, в браузерах которых включена опция анимации.

Как включить/отключить опцию анимации в Internet Explorer 6.0?

Инструменты > Настройки > Дополнительно > Воспроизводить анимацию на веб-страницах (поставить/снять галочку).

Как включить/отключить опцию анимации в Опере?

Инструменты > Быстрые настройки > Включить GIF/SVG анимацию.

Урок #5.7. Создание иконки для избранного.
24 минуты

Конвертация файла в формат ico в программе i.Mage.
Размещение изображения favicon.ico в корне сайта.
Необходимый код для Internet Explorer.
Использование специальных шрифтов при создании
иконки.

Статьи