Como Fazer um Menu com Efeito

A pedido do Conrado, eu, Nemon1, estarei passando-lhes um tutorial de como se fazer um menu com efeito. Primeiramente, o programa que iremos usar é o Dreamweaver (o que será apresentado nas imagens abaixo é o da versão CS4, mas você pode usar outras). Abra-o como um documento HTML:
OBS: link para download do DreamWaver no final da postagem.




Depois, entre na opção Design:


Agora, teremos a parte estrutural de nosso menu. Você deve criá-lo usando sua criatividade, e, claro, com os itens em que nele estarão apresentados. Eu aconselho, nesta parte de escrita, utilizar o Power Point 2007 (ou mesmo o Fireworks), mas isto depende de cada um, sendo que outros programas que tenham a mesma função poderão ser usado. Deveremos ter dois menus: um normal, e o outro com efeito, como na imagem abaixo:


Depois, recorte, dos dois jeitos (com e sem efeito) um dos itens:



Abra um novo arquivo no Paint, e cole o que recortou. Claro, que cada um dos itens (com e sem efeito) deverão ser salvos separadamente. Portanto, salve uma imagem em que esteja comente o botão normal, e outra em que esteja este mesmo botão, com efeito. Agora, vá no Tinypic.Com (ou qualquer outro site em que se hospede imagens), e hospede primeiro a imagem normal (copie o link dela):

(propagando do Tinypic retirada da imagem)

Agora, voltando ao Dreamweaver, iremos clicar em Inserir (Insert) >> Objetos de imagem (Image Objects) >> Imagem de sobreposição (Rollover Image):


A sua tela ficará assim:


Onde estiver escrito "Imagem Original" (Original image), você coloca o link copiado do botão hospedado no Tinypic. Depois, hospede o botão com efeito, e cole o link em "Imagem de sobreposição" (Rollover image) e clique em OK.
Se quiser colocar um link na imagem, clique nela, e coloque o link que ela deve redirecionar neste espaço:


E assim por diante, você vai montando o seu menu, colocando as imagens uma do lado da outra. E, por fim, entre em "Código" (Code) e copie o HTML inteiro. Vá em DesignLayout e adicione um gadget de HTML/JavaScript e cole o código, salve e arraste o gadget para baixo do cabeçalho na parte de Layout.
Espero que tenham gostado pessoal! Até a próxima!

~Nemon1

Nenhum comentário:

Postar um comentário