Создание раскрывающихся меню в Fireworks MX

Раскрывающиеся меню — это удобный элемент интерфейса. Стоит щелкнуть на элементе меню, и пользователю предоставляется последовательность подменю. Эта техника была реализована в Fireworks 4 и усовершенствована в Fireworks MX. Раскрывающиеся меню предоставляют возможность перемещаться по сложным структурам.
В этом разделе мы рассмотрим, как создать такие меню, но важно то, что рисунки для них мы создадим в Fireworks и во FreeHand MX.
Мы создадим меню, которое будет использоваться не только для перемещения по страницам Web-узла JCT, но и для осуществления контактов с сотрудниками компании JCT по электронной почте.

В категории продуктов меню разработано следующим образом. Когда пользователь наводит указатель на категорию рубашек, перед ним раскрывается подменю мужских и женских рубашек. При наведении указателя на эти подменю раскрываются дополнительные подпункты, в которых можно выбрать размер и цвет рубашки.
Важно помнить, что меню — это элемент, управляемый программой. Когда вы разрабатываете меню, очень полезно создать серию слайсов, в каждом из которых содержится категория меню.
Для того чтобы создать раскрывающееся меню в Fireworks MX, сделайте следующее.
1. Откроите файл menu.png, который вы найдете в папке FWMertu, вложенной в папку с упражнениями к главе 17. В этом файле содержится последовательность слайсов.
2. Откройте панель Layers, затем слои Web и Layer 1. Элементы обоих слоев имеют идентичные имена. Группе разработчиков будет намного проще и удобнее сотрудничать, если они возьмут за правило давать элементам слоя Web и слоям с рисунками одинаковые имена.
3. Выделите Shirts в слое Web. Щелкните правой кнопкой мыши на фигуре в центре оверлея. Выберите Add Pop-Up Menu из контекстного меню. Откроется диалоговое окно редактора. В четырех вкладках, расположенных вверху окна, можно выбрать вид меню и его расположение в окне броузера.
4. Щелкните на вкладке Command, в которой содержаться четыре категории.

Text — текст кнопки;
Link — ссылка, связанная с кнопкой;
Target — назначение URL

5. Дважды щелкните на ячейке Text и введите слово Men's. Дважды щелкните на ячейке Link и введите shirts.htm. Это приведет к тому, что при щелчке на кнопке Men's будет открываться страница Shirts Web-узла JCT.
6. В меню Men's предусмотрены два подменю— Color и Size. Для их создания придется немного поработать. В области Content редактора меню отображается иерархия меню в классическом виде. Введите слово Colors под словом Men's, и в меню добавится новый пункт. Это значит, что если пользователь наведет указатель на пункт Shirts, то отобразятся пункты Men's и Colors.
7. Щелкните на кнопке Add Menu и дважды щелкните в области Text. Когда появится текстовый курсор, введите слово Colors. Щелкните на кнопке Indent Menu и установите отступ для введенного слова.
8. Добавьте подпункт Sizes в меню Men's. Щелкните на кнопке Add Menu, дважды щелкните в области Text и введите слово Women's. Добавьте пункты Colors и Sizes в меню Women's. Ваш редактор меню должен выглядеть так же, как на рис. 17.17.

Замечание
Если вам нужно создать подпункт меню Colors, щелкните два раза на кнопке Indent Menu.

Рис. 17.17. Введите слова в область Text, чтобы создать меню и подменю

9. Щелкните на вкладке Appearance. .Эта область редактора отвечает за ориентацию, стиль текста, его цвет и вид самой кнопки. Щелкните на кнопке HTML и выберите в списке Orientation пункт Horizontal menu. Выбор кнопки HTML позволяет управлять видом меню программно, что приводит к уменьшению размера файла. После выбора пункта Horizontal пункты меню располагаются один возле другого, а не друг под другом.
10. Выберите шрифт, размер и цвет текста. Если ваше окно редактора выглядит так, как на рис. 17.18, щелкните на кнопке Next или вкладке Advanced.

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

11. На вкладке Advanced редактора меню можно управлять размером ячеек меню, расстоянием между ячейками, отступами текста, установить, сколько времени должно пройти до исчезновения меню, и т.д. Для вашего меню мы рекомендуем такие установки:
Cell Width - 65;
Cell Height - 18;
Cell Padding - 0;
Text Indent - 5;
Cell Spacing - 2;
Menu Delay - 1,000 ms;
Pop-Up Border - Selected;
Border Width - 1;
Shadow — #666666;
Border Color - FFFFFF;
Highlight - FFFFFF.

Рис. 17.18. Вкладка Appearance редактора меню

Результаты вашего выбора отобразятся в окне вкладки Advanced. Щелкните на кнопке Next.
12. На вкладке Position вы можете задать положение главного меню и его подменю. Варианты здесь простые. Щелкните на Set Menu Position to the bottom of Slice в области Menu Position. При этом значение координаты X будет равно 0, а координаты Y — 26. .13. Вручную установите положение подменю, введя для координаты X значение — -67, а для координаты Y— 21. Щелкните на кнопке Done и нажмите клавишу <F12>, чтобы проверить меню в броузере.
14. Меню Contact создается точно так же. Но только в текстовом поле вы должны ввести свое имя и почтовый адрес.
15. Проверьте работу меню в броузере. Если все в порядке, экспортируйте слайсы меню в виде серии рисунков .рng. Сохраните меню тоже в виде рисунка .рng на случай, если понадобится внести изменения. Выйдите из Fireworks и откройте Dreamweaver MX.
16. Откройте страницу Menu.htm, которую вы только что создали, и проверьте ее работу в броузере. Можете открыть страницу Shirts.htm и вставить в нее ссылку на страницу меню.

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