Menu de Navegação

Nesse tutorial eu vou ensinar como fazer um menu como esse abaixo no Dreamweaver.

1. Abra o Photoshop, Fireworks, Paint ou qualquer que seja o editor de imagens que você usa e crie um novo arquivo - eu vou usar o Photoshop. Nesse arquivo, faça o menu como ele vai ser no estado normal.

Para fazer o meu menu, eu usei a Gradient Tool (Ferramenta Gradiente) que fica no balde de tinta (clique e segura que aparece), escrevi o texto do menu e fiz umas linhas com 70% de opacidade para separar os botões.


2. Agora, recorte os botões e salve cada um deles em um arquivo.


3. Repita o 1º passo, mas agora, faça os botões do jeito que vc quer que eles fiquem quando passem o mouse em cima deles.

Quando você tiver acabado, salve cada botão em um arquivo diferente.
Importante!
Se você não quer seu menu dançando, salve as imagens do menu do mesmo tipo (links e links com o moue em cima, por exemplo) com o mesmo tamanho. Também é uma boa não mudar o texto de lugar, a não ser que essa seja a sua intenção ;)


4. Bom, agora acabou a parte com as imagens. Abra o Dreamweaver e abra o arquivo onde você quer por o seu menu. Procure por essa barra:

Ela fica na parte de cima da janela, se ela não estiver aparecendo, vá em Window - Insert / Janela - Inserir (?). Se você tiver uma barra em cima, mas não com esses desenhos, olhe abaixo de File e Edit (Arquivo e Editar), se não estiver escrito Common (Comum (?)), clique na seta e selecione essa opção.
Agora que você está com sua linda e meiga barra, clique na seta ao lado da árvore (não na árvore, na seta) e selecione Navigation Bar.


5. Wee apareceu uma janela estranha :D! É bem simples:

a) Nav bar elements / Elementos da barra de navegação vai mostar os itens da sua barra. Para adicionar um novo, clique no +, e paratirar um, clique no -. Você tambem pode mudar a ordem deles clicando nas setinhas.

b) Element name / Nome do elemento é um nome pro botão, como perfil, blog, links, goodies, home, etc

c) Up Image / Imagem estado normal (?) é a primeira imagem do menu que você fez, o primeiro estado do link.

d) Over Image / Imagem quando o mouse passa em cima (?) é a imagem quando você passa o mouse em cima (juuura?)

e) Down Image e Over while down image / imagem qnd vc clica e imagem enquanto vc está clicando, só outras imagens que você pode por no seu menu, mas não são muito úteis porque aparecem por muito pouco tempo.

f) Alternativer text / Texto alternativo é para ajudar as pessoas com deficiência visual, o texto que aparece quando vc passa o mouse em cima da imagem.

g) When clicked, go to URL / Quando clicado, ir para a URL é o link pra pagina que você quer que abra quando a pessoa clicar no menu.

h) Options / Opções Eu costumo deixar só a 1ª opção selecionada.

i) Insert / Inserir é pra falar se você quer que o seu menu seja horizontal (Horizontally - Perfil | Blog | Links) ou vertical (Vertically -
Perfil
Blog
Links)

j) Use tables / usar tabelas é para dizer se você quer que o seu menu fique dentro de uma tabela ou não.

Para os itens do seu menu, você só precisa preencher os campos b, b e g. Lembre-se que quando você os tiver preenchido e quiser inserir um novo item, precisa clicar no sinal de + do Nav bar elements.

Depois, é só clicar em OK e o seu menu vai estar pronto!

Importante!
O Dreamweaver vai criar um arquivo .js (javascript) que precisa ser mandado para o seu servidor pelo FTP junto com o arquivo onde o menu aparece, senão ele nãovai funcionar!


Se esse tutorial te ajudar, não esqueça de linkar (:
Tutorial por Vevis - Winter-Dream.com . Não copie sem autorização Dúvidas?