Издательская система QuarkXPress 6



Создание ролловеров

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

Подготовка ролловера

Несмотря на то, что ролловеры создавать несложно, прежде следует выполнить небольшую предварительную работу. Ролловер состоит из двух накладываемых друг на друга рисунков, как в мультфильме. Для такого небольшого мультфильма необходимо создать два изображения одинакового размера. Их можно сохранить в графическом редакторе (например, Fireworks или Photoshop). В данном случае мы использовали Photoshop. Оба изображения представлены на рис. 18.17.

Рис. 18.17. Два изображения, которые будут использованы при создании ролловера

Создание простого ролловера

После создания двух изображений можно вернуться обратно в QuarkXPress и приступить к созданию ролловера. Далее мы представим последовательность необходимых действий.

1. Сначала поместите изображение, загружаемое в Web-документе по умолчанию, т.е. рисунок, который обычно появляется на экране.
2. Выберите команду Item^Rollover^Create Rollover (Элемент^Ролловер^ Создать ролловер).
На экране будет отображено диалоговое окно Rollover (Ролловер). (Путь к файлу изображения, которое отображается по умолчанию, уже задан в поле Default Picture (Изображение по умолчанию) диалогового окна Rollover (Ролловер). Это значит, что программа выполнила часть работы самостоятельно.)
3. Щелкните на кнопке Browse (Обзор) рядом с полем Rollover Image (Изображение ролловера) и найдите второй рисунок (второе состояние роллове-ра). Выберите его и щелкните на кнопке ОК.
4. В поле Hyperlinks (Гиперссылки) укажите адрес URL, с которым следует связать ролловер.
Ролловер — это обычная гиперссылка. При щелчке на ней вы переходите в указанную область. В нашем примере ролловер связан с начальной страницей нашего Web-узла Westbrook Origami Society.
5. Щелкните на кнопке ОК.
Вот и все. Теперь можно открыть полученную страницу с помощью броузера и посмотреть на полученные результаты. Ролловеры широко используются при подготовке многих Web-узлов. Полученные нами результаты представлены на рис 18.18.

Рис. 18.18. Пример использования ролловера: при наведении указателя мыши одно изображение заменяется другим

Создание двупозиционного ролловера

Возможность создания двупозиционных ролловеров впервые представлена в QuarkXPress 6.
Двупозиционные ролловеры существенно отличаются от обычных. Обычный ролловер приводит к замене одного изображения другим, если на него наведен указатель мыши. Двупозиционный ролловер дает практически тот же результат, только изображение, которое изменяется, — это не то же самое изображение, на которое пользователь наводит указатель мыши.
Для создания двупозиционных ролловеров используется инструмент Rollover Linking (Связать ролловеры).

1. Создайте два графических блока с помощью инструмента Picture Box (Графический блок).

  • Первый блок будет целевым. Именно он и будет изменяться.
  • Второй блок будет являться триггером, который и позволяет вносить изменения в первый блок.

Для связывания двух графических блоков используется инструмент Rollover Linking (Связать ролловеры).

2. Выберите инструмент Item (Элемент).
3. Выделите целевой графический блок.
4. Выберите команду Edit^Get Picture (Правка'ФПолучить рисунок) или нажмите комбинацию клавиш <Ctrl+E> (<3§+Е>).
5. Выберите изображение, которое будет задано по умолчанию для целевого блока.
Это изображение будет отображаться до наведения указателя мыши на блок-триггер.
6. Щелкните на кнопке ОК.
7. Выберите команду Item<=^2-Position Rollovers^Create a 2-Position Target (Элементс>2-позиционные ролловеры^Создать 2-позиционную цель).
8. Выберите инструмент Content (Содержимое) из палитры Tools (Инструменты).
С выполнения этого шага начинается импорт второго изображения, отображаемого в целевом блоке при наведении указателя мыши на блок-триггер.
9. Щелкните на целевом графическом блоке.
10. Выберите команду EditoGet Picture (Правка^Получить рисунок) или нажмите комбинацию клавиш <Ctr!+E> (<+Е>).
11. Выберите второе изображение для целевого графического блока.
12. Щелкните на кнопке ОК.
13. Выберите инструмент Rollover Linking (Связать ролловеры) из палитры Tools (Инструменты).
С выполнения этого шага начинается установление связи между двумя блоками.
14. Щелкните на втором графическом блоке (триггере), затем щелкните на первом блоке (целевом блоке, созданном при выполнении п. 7).
Изображение или текст исчезнут, а в верхнем правом углу блока появится значок цели. Добавьте изображение для блока-триггера.
15. Выберите инструмент Content (Содержимое) из палитры Tools (Инструменты).
16. Щелкните на графическом блоке-триггере.
17. Выберите команду Edit^Get Picture (Правка^Получить рисунок) или нажмите комбинацию клавиш <Ctrl+E> (<+Е>).
18. Выберите изображение для блока-триггера.
Вот и все! Выберите команду Page1^ Preview НТМ1_<=>[название броузера] (Страница1^ Просмотр HTML <=> [название броузера]), чтобы протестировать полученный ролловер (рис. 18.19).

Рис. 18.19. Наведение указателя мыши на заголовок (снизу приводит к изменению внешнего вида изображения (сверху)

Назад Начало Вперед



Книжный магазин