1
	
  

Widgets	
  e	
  Masters1	
  

	
  

	
  
Componentes	
  e	
  Objetos-­‐mestre	
  
	
  
	
  

	
  

	
  

Crie	
  u...
2
	
  
	
  

	
  
B.	
  Duplique	
  e	
  distribua	
  os	
  botões	
  
	
  

	
  
1.	
   Arraste	
   (Drag)	
   para	
  
c...
3
	
  
	
  
	
  
	
  

C.	
  Converta	
  os	
  botões	
  em	
  objeto-­‐mestre	
  
	
  
	
  

	
  
	
  
1.Selecione	
   os...
4
	
  

D.	
  Mude	
  o	
  objeto-­‐mestre	
  (Master)	
  para	
  fundo	
  da	
  página	
  (background)	
  
	
  

	
  
1.	...
5

	
  
E.	
  Adicione	
  o	
  objeto-­‐mestre	
  em	
  todas	
  as	
  páginas	
  
	
  

	
  
1.	
   Abra	
   a	
   página...
6
	
  

F.	
  Adicionar	
  links	
  para	
  os	
  botões	
  no	
  objeto-­‐mestre	
  (Master)	
  
	
  

	
  
1.	
   Seleci...
7
	
  
	
  
	
  

Gere	
  o	
  protótipo	
  

	
  
Gere	
   o	
   protótipo.	
   Passe	
   o	
   mouse	
   por	
   cima	
 ...
Próximos SlideShares
Carregando em…5
×

Axure widgets masters

721 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
721
No SlideShare
0
A partir de incorporações
0
Número de incorporações
104
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Axure widgets masters

  1. 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. 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. 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. 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. 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. 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. 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

×