1. 1
Widgets
e
Masters1
Componentes
e
Objetos-­‐mestre
Crie
um
novo
arquivo
A.
Adicione
um
botão
(Button
Shape)
e
aplique
o
estilo
rollover
(quando
o
mouse
passa
por
cima)
1.
Clique
e
arraste
o
botão
(Button
Shape)
do
painel
Widgets
(componentes)
para
a
página
no
painel
Wireframe.
2.
Abra
a
janela
de
estilo
do
rollover.
Clique
com
o
botão
direito
próximo
ao
botão
e
selecione
[Edit
Button
Shape
>
Edit
Rollover
Style].
3.
Marque
Bold
(negrito)
e
Fill
Color
(cor
de
preenchimento).
Marque
as
caixas
para
Bold
e
Fill
Color.
Depois,
selecione
a
cor
cinza
na
paleta
de
cores
e
clique
em
OK.
1
Traduzido
pela
Profa.
Daniela
Carvalho
Monteiro
Ferreira,
para
a
disciplina
de
Web
Design,
nos
cursos
de
Publicidade
e
Relações
Públicas
E-­‐mail:
daniela.carvalho@esamc.br.
Nov
2013.
Blog:
http://colecaoaprender.blogspot.com.br
1

2. 2
B.
Duplique
e
distribua
os
botões
1.
Arraste
(Drag)
para
copiar.
Pressione
a
tecla
[Ctrl]
e
arraste
o
componente
(widget)
de
botão.
Se
você
estiver
usando
um
Mac,
pressione
a
tecla
[Option].
Faça
a
mesma
ação
3
vezes
para
ter,
ao
final,
4
botões.
2.
Selecione
os
botões
(widgets).
Selecione
todos
os
botões
clicando
com
o
botão
esquerdo
do
mouse
enquanto
arrasta
a
área
de
seleção
para
todos
os
botões.
3.
Alinhe
e
distribua.
Com
todos
os
botões
selecionados,
clique
nos
botões
Alinhar
centralizado
(Align
Middle)
e
depois
Distribuir
horizontalmente
(Distribute
Horizontally),
na
barra
de
ferramentas
(Toolbar).
4.
Edite
o
texto
dos
botões.
Selecione
e
depois
nomeie
cada
botão
conforme
mostrado
na
imagem.
Eles
devem
ter
o
mesmo
nome
correspondente
às
páginas
no
painel
Sitemap:
Home;
Page
1;
Page
2
e
Page
3.
2

3. 3
C.
Converta
os
botões
em
objeto-­‐mestre
1.Selecione
os
botões.
2.
Converta-­‐os
para
objeto-­‐
Clique
e
arraste
para
mestre
(Master).
Clique
selecionar
os
quatro
com
o
botão
direito
e
botões.
depois
selecione
[Convert
>
Convert
to
Master].
3.
Nomeie
o
objeto-­‐
mestre.
Nomeie
o
objeto-­‐
mestre
para
“NavigationHeader”.
4.
Clique
“Continue”
(continuar).
Clique
no
botão
“Continue”
para
criar
o
objeto-­‐mestre.
3

4. 4
D.
Mude
o
objeto-­‐mestre
(Master)
para
fundo
da
página
(background)
1.
Abra
o
objeto-­‐mestre.
Duplo
clique
no
“NavigationHeader”
para
abrir
o
painel
Wireframe.
2.
Selecione
os
botões.
Clique
e
arraste
para
selecionar
todos
os
quatro
botões.
3.
Mude
a
posição
dos
objetos
manualmente.
Coloque
25
para
o
valor
de
x
e
25
para
o
valor
de
y.
4.
Configure
o
“Behavior”
(comportamento).
Clique
com
o
botão
direito
do
mouse
no
objeto-­‐mestre
(Master)
no
painel
Masters
e
selecione
[Behavior
>
Place
in
Background].
4

5. 5
E.
Adicione
o
objeto-­‐mestre
em
todas
as
páginas
1.
Abra
a
página
Home.
Duplo
clique
na
página
“Home”
no
painel
SiteMap
para
abrí-­‐la
no
painel
Wireframe
2.
Aplique
o
comportamento
no
objeto-­‐
mestre.
Clique
com
o
botão
direito
no
objeto-­‐mestre
e
selecione
[Master
>
Place
in
Background].
3.
Abra
a
página
Page
1.
Duplo
clique
na
página
“Page
1”
no
painel
SiteMap
para
abri-­‐la
no
painel
Wireframe.
4.
Arraste
o
objeto-­‐mestre
para
a
página.
Arraste
o
objeto-­‐mestre
do
painel
Masters
e
solte-­‐o
no
painel
Wireframe
para
a
página
“Page
1”
5.
Repetir.
Abra
a
página
Page
2
e
Page
3.
Arraste
e
solte
o
objeto-­‐mestre
para
dentro
de
cada
uma
delas.
5

6. 6
F.
Adicionar
links
para
os
botões
no
objeto-­‐mestre
(Master)
1.
Selecione
o
botão
“Home”.
Abra
o
objeto-­‐
mestre
“NavigationHeader”
e
selecione
o
botão
“Home”.
2.
Clique
em
Quick
Link
3.
Selecione
a
página
(link
rápido).
Clique
no
Home.
Selecione
a
página
Quick
Link
no
painel
Widget
“Home”.
Properties.
4.
Clique
Ok.
Clique
no
botão
OK
para
adicionar
o
link.
5.
Repetir.
Repita
os
passos
1-­‐4
para
cada
botão
para
ligá-­‐los
às
suas
respectivas
páginas.
6

7. 7
Gere
o
protótipo
Gere
o
protótipo.
Passe
o
mouse
por
cima
dos
botões
para
ver
o
efeito
“rollover”
e
clique
neles
para
navegar
entre
as
páginas.
Note
que
os
links
foram
adicionados
uma
vez
no
objeto-­‐mestre
e
foi
aplicado
para
todas
as
páginas.
Referência:
AXURE.
Axure
RP
Training.
Disponível
em
<http://www.axure.com/learn>.
Acesso
em
Out
2013.
AXURE.
Axure
Core
Training.
Disponível
em
<http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>.
Acesso
em
Out
2013.
7