Post on 08-Jul-2015
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
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.
3
3
C. Converta os botões em objeto-‐mestre
1.Selecione os botões. Clique e arraste para selecionar os quatro botões.
2. Converta-‐os para objeto-‐mestre (Master). Clique com o botão direito e 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.
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].
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.
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 (link rápido). Clique no Quick Link no painel Widget Properties.
3. Selecione a página Home. Selecione a página “Home”.
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.
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.