Webразработка с Macromedia Studio MX
Создание эскиза иерархического меню
Создание эскиза иерархического меню
Редактор меню (Pop-Up Menu Editor) впервые появился в Dreamweaver 4. Его изначальной целью было предоставление пользователю необходимого инструментария для создания меню любой сложности. Эти меню привязаны к событиям, например к щелчку мыши или прокрутке страницы. Преимуществом созданного мастера является то, что он генерирует программы на JavaScript и HTML, когда меню экспортируется из Fireworks. Для того чтобы создать меню в Fireworks MX, выполните следующие действия.
1. Откройте документ Fireworks размером 200x25 пикселей. Установите прозрачность фона и разрешение 100 dpi (точек на дюйм).
2. Нарисуйте блок, используя инструмент Rectangle (Прямоугольник) в разделе Vector Tools (Инструменты для работы с векторной графикой) панели инструментов. Размеры этого блока определите как 50x25 пикселей. Если блок должен быть меньше или больше, установите ширину и высоту в единицах измерения, указанных в окне свойств. В том же окне установите для фона серый цвет и черную рамку вокруг блока толщиной 1 пиксель.
3. Выберите инструмент Text, щелкните один раз на блоке и введите слово Shoes. Уставите шрифт Helvetica размером 12 точек и начертание Bold.
4. Выделите слово и блок. Удерживая нажатой клавишу <Alt>, нажмите клавишу <Shift> и перетаскивайте копию выделения вправо до тех пор, пока она не коснется левой границей правой границы исходного объекта. Повторите это действие еще два раза.
5. Выберите инструмент Text, выделите текст второго блока и введите слово T-shirts. Повторите это действие для двух оставшихся блоков, заменяя их текст на Pants и Hats соответственно. В заключение выделите каждую пару "текст-блок" и сгруппируйте эти объекты.
Итак, меню уже готово стать иерархическим. Для этого все объекты меню должны быть преобразованы в совокупность (slice) для создания текста HTML и JavaScript, который будет обеспечивать функции меню.
1. Выделите панель Shoes. Выберите в меню пункт Edit=>Insert=>Slice или воспользуйтесь горячими клавишами <Alt+Shif+U>. Панель обретет зеленый цвет, обозначая, что она стала совокупностью (slice).. На панели Win появится новый слой Slice. Переименуйте этот уровень в Shoes. Объединение также можно выполнить с помощью инструмента Slice, вставляя совокупность над сгруппированными объектами, вместо того чтобы выбирать инструмент Slice и перемещать его, выделяя все кнопки, избегая каких-либо перекрытий. Однако это достаточно трудно, так как границы объектов обычно немного выступают за рамки соседнего объекта.
2. Щелкните на белой точке на панели Shoes, после чего выберите в открывшемся меню пункт Add Pop-Up Menu. Именно в этом месте открывается редактор меню. На первый взгляд, окно Content может обескуражить. Кнопки со знаками "плюс" и "минус" в заголовке окна соответственно добавляют и удаляют подменю. Кнопки, расположенные рядом с ними, показывают, имеет ли данное подменю отступ. Первый элемент списка является заголовком и не может иметь отступ.
3. Дважды щелкните на первой ячейке и введите слово Men's. Щелкните на следующей ячейке (ниже первой), введите слово Hangin и щелкните на кнопке увеличения отступа.
4. Щелкните на кнопке со знаком "плюс", введите текст Rad Red и щелкните на кнопке увеличения отступа. Повторите эти действия еще три раза, вводя в ячейки соответственно слова Cool White, Gnarly Green и Chillin' Blue. Отступ этих элементов должен совпадать с отступом строки Red Red. В результате вы должны увидеть такое же окно, как на Рисунок 7.21.
