Создание интерактивных компонентов Web-страниц
При создании Web-страниц с помощью программ Adobe Photoshop или Adobe ImageReady следует принимать во внимание конкретные возможности каждого из этих приложений:
- Photoshop обеспечивает подготовку статических изображений для Web с возможностью их деления на отдельные области, связанные гиперссылками с целевыми объектами;
- ImageReady кроме всех возможностей, предоставляемых Photoshop, включает также инструменты для создания динамических элементов, таких как анимации и интерактивные кнопки.
С помощью ImageReady можно создать целую анимированную Web-страницу, использующую комбинацию текстов, рисунков и графических объектов. При этом предварительно следует продумать очередность их появления и перемещения в пределах страницы, которая должна иметь стандартный размер, чтобы полностью отображаться в окне обозревателя. Однако чаще всего ImageReady используют для создания таких интерактивных компонентов Web-страницы, как графические карты либо анимированные кнопки.
С этой целью в ImageReady добавлены специальные палитры для Web-дизайна: Rollover, Image Map и Slice, объединенные в одном окне с палитрой Animation (Анимация). Вывести их на передний план можно щелчком на соответствующей вкладке окна Animation (Анимация), либо выполнив одну из команд меню Window (Окно): Show Rollover, Show Slice, Show Image Map.
Под интерактивным эффектом (rollover) понимают такой эффект, при котором изображение принимает различный вид в зависимости от действий пользователя (например, наведение мыши или щелчок на определенной области Web-страницы). Каждое состояние определяется набором параметров палитры Layers (Слои), включая расположение слоев, их стили и параметры форматирования. В качестве состояния может быть использована анимация, либо можно создать такое изображение, при наведении мыши на один из участков которого изменяется вид другой части изображения (secondary rollovers).
Сохраняя изображение для использования в качестве элемента Web-страницы, можно одновременно сгенерировать HTML-файл, который будет содержать информацию для обозревателя о том, как воспроизводить элементы страницы при загрузке. Этот файл включает ссылки на изображения (в формате GIF, PNG или JPEG), HTML-текст, гиперссылки и код JavaScript для создания интерактивных эффектов (rollover effects). Хотя для большинства эффектов можно выполнить предварительный просмотр непосредственно в программах Photoshop или ImageReady, но зависимость демонстрируемых Web-страниц от операционной системы, типа обозревателя и системы отображения цвета требует выполнения просмотра в каждом конкретном обозревателе.
ImageReady поддерживает создание интерактивных объектов (rollovers), добавляя код JavaScript в результирующий HTML-файл, обеспечивающий смену состояния объекта при наведении на него указателя мыши. Для создания интерактивных объектов служит палитра Rollover, совмещенная с палитрой Animation (Анимация). На ней отображаются возможные состояния объекта, каждому из которых может соответствовать свое изображение или даже целая анимация. При сохранении такого объекта, как элемента Web-страницы каждое состояние сохраняется в отдельном файле, в название которого добавлен тип состояния.
Первое из состояний, отображенное на палитре Rollover, всегда состояние Normal (Обычное).
Остальные состояния определяют, каким действием пользователя будет вызываться соответствующий вид интерактивного объекта. Чтобы создать новое состояние, следует выбрать команду New State (Новое состояние) из меню палитры Rollover либо щелкнуть на одноименной кнопке этой палитры. Появившееся новое изображение соответствует следующему по порядку состоянию, но по виду идентично исходному и подлежит редактированию с помощью палитры Layers (Слои). Изменить тип состояния можно с помощью раскрывающегося меню у имени состояния, содержащего следующие значения:
- Over (Наведение) – появление на интерактивном объекте указателя мыши при ненажатой левой кнопке;
- Down (Нажатие) – нажатие левой кнопки мыши при наведенном ее указателе на интерактивный объект (сохраняется, пока кнопка нажата);
- Click (Щелчок) – щелчок левой кнопки мыши на интерактивном объекте состояние сохраняется до следующего действия пользователя на объекте);
- Out (Наружу) – определяет состояние, когда указатель мыши сходит с области карты изображения (обычно для этой цели используется состояние Normal);
- Up (Отпускание) – определяет состояние, когда пользователь отпускает нажатую клавишу мыши на интерактивном объекте (обычно для этой цели используется состояние Over);
- Custom (Пользовательский) – определяет новое состояние, для которого нужно создать код JavaScript и добавить его к HTML-файлу Web-страницы, чтобы это действие могло быть реализовано;
- None (Нет) – используется, чтобы заданное изображение могло быть в дальнейшем использовано как одно из состояний интерактивного объекта (это состояние не отображается на Web-странице).
Раскрывающееся меню Rollover states (Интерактивные состояния) включает только те состояния, которые еще не применялись для данного объекта (исключения составляют состояния None и Custom, которые могут быть использованы неоднократно).
При работе со слоями изменение порядка слоев в состоянии Normal вызывает их перемещение во всех остальных состояниях. Однако перемещение отдельного слоя в других состояниях rollover сохраняет его первоначальное положение во всех остальных состояниях.