MENU SUPERIOR DO SITE

 

Vamos nessa galera aprender mais um recurso visual bastante interessante e utilizado por muitos profissionais da área.

 

Nosso objetivo é criar um menu de acesso às páginas secundárias do site que está criando.

 

Siga os passos descritos a seguir e veja o quão simples é fazer um menu com design arrojado.

 

Então, mãos a obra!

 

1) Abra o aplicativo Macromedia Fireworks.

 

 

2) Abra o arquivo criado nos artigos passados (Criação de topo para o site – partes I, II e III).

 

 

Observação: neste artigo vamos utilizar os conceitos utilizados no artigo passado (Botões estilo XP) para criação do menu.

 

3) Crie um novo documento de 779 x 800 pixels. Mas por quê esta medida Fábio Almeida? A resposta é simples: utilizamos a medida 779 pixels na largura por ser o padrão utilizado na construção de websites na internet. Já a altura pode ser o quanto precisar, não influenciando. Esta é uma dica de ouro.

 

 

 

4) Copie o topo criado e cole neste novo documento. Alinhe-o da maneira que julgar melhor. Em alguns casos é interessante deixar bordas em seu site por questões de estética. Esta ação é recomendada quando se deseja criar um site mais clean. Veja como deve estar seu arquivo após colar o topo criado:

 

 

5) Reparem que pelo simples fato de ter criado uma borda na página o site tomou um ar diferente. Parte de cada um notar e ter sentidos mais apurados para estar observando as diferenças que às vezes será a marca para seu site. Vale aqui a ressalva de que estes sentidos podem (e devem) serem treinados.

 

Para criar a borda, basta selecionar a ferramenta retângulo e preencher a cor como transparente e a cor do contorno como preto. Veja as propriedades a serem modificadas:

 

     

 

6) Crie um retângulo, utilizando a mesma ferramenta mostrada acima, medindo 718 x 75 pixels e posicione-o logo abaixo do topo.

 

7) Defina o efeito Linear para este retângulo.

 

 

8) Escolha, no balde de tinta ao lado, a primeira cor como azul bem clarinho e a segunda cor como azul escuro. Veja:

 

 

9) Mude a orientação do degrade de horizontal para vertical. Veja como deve ficar:

 

 

10) Agora chegou o momento de inserir os botões de acesso na barra que acabamos de criar. Os botões a serem inseridos são do estilo XP, que aprendemos a criar no artigo passado. Podemos modificá-los de acordo com nossas necessidades, mudando a altura, largura e etc. Ao final teremos um menu muito show!

 

Confiram abaixo como ficou o meu exemplo, onde modifiquei um pouco a estrutura dos botões:

 

 

Dicas: quando inserir o primeiro botão, basta duplicar este para criar os demais. Para duplicar um botão no Fireworks você tem duas maneiras. A primeira é o famoso Ctrl+C e Ctrl+V e a segunda maneira é pelo atalho Ctrl+Alt+D. Após a duplicação basta modificar o texto dos botões. “Nos mais simples detalhes encontramos as maiores maravilhas”.

 

Muito bem galera, espero que todos tenham gostado deste artigo no qual ensinei a criar um menu superior bem legal e que poderá servir de inspiração para muitos outros estilos de menus.

 

Um grande abraço a todos,

Fábio Almeida