Первое. Разработка ролловеров в Fireworks

Благодаря развитию возможностей Web-дизайнерских программ, ролловеры уже превратились в стандартные элементы Web-страниц. Великолепные инструменты Fireworks в сочетании с автоматическим написанием скриптов делают эту программу одной из самых эффективных…

1. Загрузите в Fireworks 2 файл с расширением .png. Откройте Frames Inspector и дважды продублируйте первый фрейм. В открывающемся при этом диалоговом окне можно проверить, что дубликаты действительно появились. Начнем с состояния Up (ненажатая кнопка): соответствующую картинку поместим в первый фрейм. Соответственно, состояния Over и Down (курсор над кнопкой и кнопка нажата) следует поместить во второй и третий фреймы.

2. Перейдем ко второму фрейму и внесем в изображение коррективы, соответствующие состоянию кнопки Over. Лично мы применили ко всем кнопкам эффект более низкой боковой фаски. Любой эффект можно применить сразу ко всем трем фреймам, если выделить их при помощи клавиши Shift, а затем внести необходимые коррективы через Effects Inspector.

3. Аналогичным образом отредактируйте третий фрейм, представляющий состояние кнопки Down. Затем снова вернитесь в первый фрейм и при помощи инструмента Slice нарисуйте прямоугольники вокруг каждой кнопки. После того как вы впервые воспользуетесь этим инструментом, Fireworks автоматически разместит для остальных кнопок вспомогательные направляющие.

4. Щелчком мыши выделите первый фрагмент и откройте Object Inspector. Затем отключите режим Auto-Name Slices (Автоматическое именование) и задайте своей кнопке такое имя, которое вам легче будет запомнить. Введите в поле Link или отыщите с помощью браузера URL-ссылку, на которую должна ссылаться данная кнопка. Повторите этот процесс для остальных фрагментов изображения.

5. Чтобы создать ролловер, снова выделите первый фрагмент и выберите команду Windows > Behaviours. На экране появится Behaviours Inspector. Нажмите кнопку Add Action и выберите из появившегося меню пункт Simple Rollover. В открывшемся диалоговом окне включите режим Include Down State и нажмите кнопку OK. Повторите этот процесс для остальных фрагментов.

6. В заключение выберите команду File > Export и установите такие параметры экспорта, которые дадут наилучшее соотношение между качеством изображения и размером файла. Нажмите кнопку Next и в открывшемся диалоговом окне Save выберите команду Slice Objects, создайте slice-области, которые вы запланировали, и выберите HTML-стиль. Программа экспортирует стандартный HTML-код, который легко вставить в существующий исходный текст страницы.