Лабораторная работа №6 <графика> (стр. 3 )

GIF-анимация

Визуальные данные запоминаются гораздо лучше, чем та же информация, приставленная в текстовом виде или прочитанная вслух. Анимация - это движение некоторых объектов (в роли таких объектов могут выступать слова). Анимационные последовательности создаются средствами GIF, Flash, а также с помощью сценариев Dynamic HTML и других подобных технологий. Решение об использовании анимации принимается исходя из рассмотрения особенностей сайта. Анимационные последовательности могут отображаться разными способами. Для реализации движения в реальном времени файл полностью копируется на клиентскую машину, а затем воспроизводится со скоростью 24-30 кадров в секунду. В отличие от движения в реальном времени, потоковая среда позволяет воспроизводить содержимое файла в процессе его копирования. Включение анимации в состав Web-узла увеличивает время загрузки Web-страниц. Поэтому, прежде чем принимать решение об использовании анимационных последовательностей, необходимо ответить на следующие вопросы.

• Будет ли анимация способствовать лучшему восприятию информации?

• Будет ли при работе пользователя обеспечиваться быстрое копирование и воспроизведение анимационных данных?

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

Анимационный GIF. Одним из наиболее популярных способов привлечения внимания пользователей к содержимому Web-страницы является включение анимационных GIF-изображении. Анимационный формат GIF позволяет объединять несколько изображений в одном файле и отображать их последовательно одно за другим. Таким образом на одном небольшом участке Web-страницы можно разместить много разнообразных данных.

Для создания анимационной GIF-последовательности надо построить набор отдельных кадров. Кадры, из которых состоит анимационная последовательность, также называются фреймами (frames). Редактор GIF-изображений, например ImageReady, входящий в состав Adobe Photoshop, позволяет размещать все кадры в нужном порядке и устанавливать временные задержки. После завершения работы над анимационной последовательностью вы можете просмотреть и оценить ее качество. В настоящее время трудно найти сайт, на котором не использовалось бы хотя бы одно анимационное GIF-изображение. Однако, для того, чтобы включать в состав Web-страницы несколько анимационных GIF-изображений, надо иметь веские основания. Несмотря на то что разные изображения легко настроить так, чтобы они служили достижению конкретной цели, две или более анимационных GIF-последовательности в составе одной страницы перегружают ее визуальной информацией.

Изображения-карты

Иногда на Web-страницах встречаются так называемые изображения - карты (Image Map). Дело в том, что имеется возможность одному изображению сопоставить несколько гиперссылок, привязав каждую из них к некоторой области графического изображения. Такие области называют горячими. Горячие области изображения-карты могут быть различной формы: прямоугольной, многоугольной или в виде окружности.

Работа с графической информацией в Dreamweaver MX.

·  Вставка изображения на Web-страницу.

·  Настройка свойств изображения с помощью палитры свойств.

·  Установка внешнего графического редактора.

·  Фоновая графика.

Работа с графической информацией в Dreamweaver MX

Dreamweaver MX имеет возможность отображать графические файлы следующих форматов:

·  jpeg (формат характерен для фотографий и рисунков с плавно изменяющимися тонами);

·  gif (формат больше подходит для графических файлов, в которых нет плавных переходов и присутствуют целые области одинакового цвета);

·  png (усовершенствованный вариант gif, разработанный Macromedia Fireworks).

Для вставки изображения используется следующая конструкция: <IMG SRC="ris. gif">

Тэг <IMG> не имеет закрывающегося тэга и вставляет изображение, указанное в атрибуте SRC. В атрибуте SRC кроме имени файла должен быть указан путь к файлу в структуре папки сайта. Например, <IMG SRC="images/ris.gif"> В данном случае на Web-страницу будет вставлено изображение, находящееся в подпапке Images и имеющее имя файла ris. gif. Все остальные атрибуты тэга <IMG> удобно настраивать с помощью палитры Properties в программе Dreamweaver.

Основными приемами работы с изображениями в Dreamweaver:

1. Вставка изображения на Web-страницу.

Внимание: прежде чем вставлять рисунок, проверьте выполнение следующих условий:

ü  Графический файл должен иметь один из указанных выше форматов (GIF, JPEG, PNG).

ü  Необходимый графический файл должен находиться в рабочей папке или в любой из ее подпапок, иначе путь к изображению будет прописан неправильно (в виде file://../image. gif).

Для вставки рисунка в документ можно использовать следующий метод.

1. Поставьте курсор в нужное место документа.

2. Выберите пункт Image в меню Insert (Вставка) или нажмите кнопку с изображением картинки (Image) на Панели объектов на вкладке Common.

3. В появившемся диалоговом окне поставьте флажок у Preview Images (чтобы в правой части диалогового окна видеть миниатюрное изображение рисунка выбранного файла), укажите месторасположение необходимого файла и его имя, нажмите кнопку Select.

4. Если Вы забыли скопировать файл в рабочую папку, Dreamweaver предложит сразу скопировать ее туда – нажмите Yes, чтобы выполнить эту операцию. В появившемся диалоговом окне укажите, где именно разместить файл (необходимо выбрать рабочую папку или любую из ее подпапок) и под каким именем. Нажмите Сохранить.

2. Настройка свойств изображения с помощью палитры свойств (Properties)

После вставки изображение автоматически оказывается выделенным, при этом меняется содержимое палитры Properties. Чтобы в дальнейшем изменить какие-то свойства, достаточно выделить нужное изображение и обратиться к этой палитре.

Опишем параметры, доступные для просмотра и изменения в палитре Properties (для отображения всех свойств рисунка, нажмите на треугольник, расположенный в правом нижнем углу палитры).

1)  В верхнем углу инспектора отображается миниатюрная копия изображения, чтобы вы были уверены, что работаете именно с тем изображением, с которым собирались.

2)  Справа от него расположено поле Name, в которое можно вписать название рисунка, используемое поисковыми системами и броузером.

3)  Поля W и H – ширина и высота рисунка.

4)  Параметр Src (Источник) отображает имя файла и путь к нему.

5)  Link (Связь) позволяет сделать из рисунка гиперссылку.

6)  Поле Border позволяет вставлять или удалять рамку вокруг рисунка, являющегося ссылкой. Если вы хотите, чтобы рисунок был обведен рамкой определенной толщины (в пикселях), независимо от того, является он ссылкой или нет, следует установить соответствующее числовое значение параметра border.

7)  Параметр Align (Выравнивание) позволяет выбрать взаимное положение рисунка относительно текста.

8)  В поле Alt (Альтернативный текст) можно ввести текст, который будет отображаться текстовым броузером или броузером, в котором отключен режим просмотра графики.

9)  Параметры H Space и V Space задают поля над, под и по бокам рисунка.

10)  Список Target позволяет задать окна или фрейм, в которые должна быть загружена связанная с рисунком страница (для рисунка, не являющегося гиперссылкой, список недоступен).

11)  Кнопки настройки выравнивания изображения (Align Center, Align Left, Align Right) позволяют выравнивать изображения по центру, по левому и правому краю.

12)  Кнопка Reset Size (Очистить) позволяет вернуть исходные значения ширины и высоты рисунка.

13)  Edit вызывает внешний графический редактор, который задан в категории File Types / Editors диалогового окна Preferences (часто используется Fireworks – графический редактор, иногда поставляющийся вместе с Dreamweaver).

3. Установка внешнего графического редактора

Вы можете открыть выделенное изображение во внешнем графическом редакторе непосредственно из Dreamweaver. Когда вы возвращаетесь в Dreamweaver, сохранив отредактированный файл изображения, то любые сделанные вами изменения отображаются в окне документа. В качестве внешнего редактора изображения вы можете применять, например, Macromedia Fireworks. Вы можете настраивать параметры внешнего графического редактора так, чтобы Dreamweaver автоматически запускал различные приложения для редактирования всевозможных типов изображений. Например, вы можете указать, чтобы Dreamweaver запускал Fireworks, когда вы хотите редактировать файлы формата GIF.

Для установки нового внешнего графического редактора:

1)  Откройте диалоговое окно Preferences командой Edit > Preferences.

2)  Выберите категорию File Types / Editors.

3)  В поле Extensions выберите формат редактируемых файлов.

4)  Если в поле Editors отсутствует необходимый графический редактор, нажмите кнопку со знаком плюс «+».

5)  В открывшемся диалоговом окне укажите месторасположение графического приложения.