Axure. Урок 1: создаем глобальное меню сайта на закладках

В этом уроке я покажу как создать динамическое меню в Axure. Вот, что у вас должно получится в результате (открыть в браузере):

SlideShare | View | Upload your own

Шаг №1: Создаем структуру сайта
На первом шаге мы создаем структуру сайта. В качестве примера я взял структуру сайта нашей компании:

screen1.jpg

Шаг №2: Создаем мастер (шаблон шапки)
На втором шаге мы создаем мастер для шапки:

screen2_small.jpg

Шаг №3: Популируем шаблон шапки во все страницы сайта
Теперь мы встраиваем наш шаблон во все страницы сайта:

screen3_small.jpg

Шаг №4: Создаем меню на основе динамической панели
Теперь пришла пора создать само меню. Для этого мы открываем мастер шапки и вставляем в него динамическую панель. При этом мы изменяем размер панели так, чтобы наше меню поместилось в эту панель:

screen3_small.jpg

У нашей динамической панели будет 6 состояний – по количеству пунктов в глобальном меню. Поэтому дважды кликаем по панели и создаем 6 состояний:
screen7.jpg

Теперь создаем первое состояние, для этого дважды кликаем по состоянию “Home” и при помощи виджетов Text Panel, Button Shape, Horizontal Line и Vertical Line рисуем наше меню для активного пункта “Главная”:

screen3_small.jpg

Далее расставляем ссылки на страницы:
screen14.jpg

Теперь копируем все содержимое первого состояния, нажимамая Ctrl-A и вставляем его во второе состояние:

screen3_small.jpg

Повторяем процедуру для оставшихся четырех состояний.

Меню готово. Можно кушать.

Шаг №5: Активизируем пункты меню на страницах сайта
Теперь, когда меню готово, нам нужно сделать его динамическим: при переходе по страницам сайта тот или иной пункт меню будет становиться активным. В нашем случае активизация пункта меню – это переключение динамической панели в определенное состояние, соответствующее этому пункту меню. Так, если пользователь переходит на страницу “Услуги”, мы должны изменить состояние панели на “Services”.

Когда производить переключение состояния панели? При загрузке страницы.

У каждой страницы есть событие OnPageLoad, которое генерируется при загрузке страницы движком Axure. Это как раз то, что нам нужно.

Открываем страницу Home, дважды кликаем по названию события OnPageLoad, выбираем действие Set Panel state(s) to State(s), выбираем нашу панель (вы не забыли дать панели имя Global Menu?) и, наконец, выбираем состояние Home:

screen3_small.jpg

Повторяем процедуру для всех страниц сайта: Services, About usability, Porfolio, About company, Contacts.

В итоге мы получаем динамическое меню на закладках.

Вы можете посмотреть на меню в действии прямо здесь и сейчас.

Ссылки по теме:

  • bobrdobr
  • memori
  • del.icio.us
  • Digg
 Понравилась заметка? Подписывайся на обновления блога!

О статье

Автор статьи:
Александр Сергеев.


Статья была опубликована
6.4.2008
в рубрике:
Инструменты.
Cтатью открыли
11,747 раз.

Юзабилити - актуально. Поэтому
Рейтинг блогов

Блог Guicci регулярно читают:

Вы тоже можете подписаться.


Самые популярные статьи
[?]



Реклама



Стоит также почитать



Контактная информация

  • ICQ: 368-980-583
  • E-mail:
  • Форма обратной связи


Заказ

Warning: include(/h/guicciru/htdocs/tsbmailer/show_form.php): failed to open stream: No such file or directory in /home/sites/guicci.ru/htdocs/wp-content/themes/hemingway-reloaded-10/single.php on line 192 Warning: include(): Failed opening '/h/guicciru/htdocs/tsbmailer/show_form.php' for inclusion (include_path='.:/usr/share/php:/usr/share/pear') in /home/sites/guicci.ru/htdocs/wp-content/themes/hemingway-reloaded-10/single.php on line 192