Embed Size (px)
DESCRIPTION
AXURE. Axure Core Training #3: Widgets & Masters. Disponível em < http://www.axure.com/learn/core/widgets-masters>. Acesso em Abr 2014.
Citation preview
1
1
Widgets e Masters no Axure 7.01
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 na área de desenho.
2. Abra a caixa de diálogo “Interaction Style” (Estilo Interativo). Selecione “MouseOver” (Mouse em Cima) na aba “Properties” (Propriedade).
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: [email protected]. Abr 2014. 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. Escolha o comportamento (Behavior). Selecione o botão rádio (radio) para bloquear a localização do objeto mestre (“Lock to Master Location”). 5. Clique “Continue” (continuar). Clique no botão “Continue” para criar o objeto-‐mestre.
4
4
D. Coloque o objeto-‐mestre (Master) em cada página
1. Abra a página 1 (“Page 1”). Duplo clique no “Page1” no painel “Site Map” (Mapa do site) para abrí-‐lo na área de desenho.
2. Arraste o objeto mestre para a página. Arraste o objeto mestre e solte-‐o na área de desenho da página 1 (“Page 1”).
3. Repita. Abra a “Page 2” e a “Page 3” e arraste e depois solte o objeto mestre dentro de cada uma delas.
5
5
E. Adicione links nos botões no objeto mestre
1. Dê duplo clique para abrir o objeto mestre. Abra o “Navigation Header” clicando duas vezes nele.
2. Selecione o botão “Home”. Selecione o botão “Home” do objeto mestre.
3. Clique em “Create Link” (Criar Link). Clique em “Create Link” na aba “Interactions” (Interações).
4. Selecione a página Home. Selecione a página “Home” na lista suspensa. 5. Repita. Repetir os passos 2-‐4 para cada botão para liga-‐los em suas páginas correspondentes.
6
6
Gere o protótipo
Visualize o protótipo (“Preview”). Passe o mouse por cima dos botões para ver o efeito “MouseOver” 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 Core Training #3: Widgets & Masters. Disponível em < http://www.axure.com/learn/core/widgets-‐masters>. Acesso em Abr 2014.
