Búfalo Informática - Criando um Menu Interativo no DreamWeaver

Criando um Menu Interativo no Dreamweaver:

Um menu interativo ou animado é todo aquele que não é estático e permite ao usuário com um simples clique ou passar de mouse, escolher outras opções além daquelas diretamente visíveis.

Normalmente, quando pensamos em um menu interativo, nos remetemos a díficeis códigos em Jscript ou animações em Flash. Mas, o Dreamweaver nos permite também a criação desses menus, usando as layers (camadas) e a paleta Comportamento.

Iniciamos nosso Menu, inserindo uma layer na página, no caso, vou trabalhar com um menu vertical, situado na lateral direita da página.

Dentro dessa layer, com a finalidade de melhor organizar meus ítens, insiro uma tabela, com 01 coluna e quatro linhas. Digite, respectivamente, em cada uma das células: Principal, Serviços, Produtos e Fale Conosco. Formate a seu gosto.

Agora devemos criar uma layer ao lado do texto Serviços, dentro dessa layer insira uma tabela, com 01 coluna e 04 linhas, Digite em cada uma das células, respectivamente: Aluguel, Compra, Venda e Leasing, (formate a seu gosto).

Para que essa layer não atrapalhe nosso serviço, selecione-a e no Inspetor Properties - opção Vis - clique em Hidden (você estará deixando essa layer invisivel) e dê-lhe o nome de servicos (sem ç mesmo, pois isso evita possíveis não reconhecimento de caracteres, o ideal é nunca utilizar acentos ou caracteres especiais ao renomear layers).

Para nomear uma camada (layers), Debaixo de Layer ID apague o nome que aparece e digite o novo.

Insira outra Layer ao lado da palavra Produtos, dentro dessa layer insira uma tabela, com 01 coluna e 04 linhas. Digite, respectivamente, em cada uma das células: Carros, Motos, Vans e Pick-up. (formate a seu gosto)

Repita o procedimento para deixar essa layer também invisivel e dê-lhe o nome de Produtos.

Devemos abrir a paleta Comportamento (Behavior) e a paleta Layers,
Window - Behavior / Window - Layers.

Observe que na paleta Layers, duas delas aparecem com o ícone de um olho fechado. Isso acontece, por que elas estão ocultas ou invisíveis. Grave o nome das layers ocultas.

Selecione o texto Serviços e clique no sinal de mais (+) ao lado da paleta Behavior -
(se nada aparecer é sinal de que o seu Dreamweaver não está configurado para comportamentos, por isso, clique em Show Events For e marque a versão compatível com seu navegador).

Selecione a opção Show-Hide Layer - essa opção é responsável pelo ver-não ver das camadas.

(O que nós estamos começando a fazer é dar ao programa a informação de que ao passar / clicar com o mouse sobre determinado objeto da página, a camada X que está invisivel, ficará visivel e quando o mouse sai de cima desse objeto, a camada X desaparece.)

Entendendo isso, marque a opção Show-Hide Layer e uma janela de opções será aberta, nela deveremos informar qual camada será visualizada ao termos uma ação sobre o texto Serviços.

Selecionaremos portanto a linha Layer Servicos e clicaremos no botão Show, depois clicamos em OK.

O próximo passo é definirmos qual é a ação que desencadeará esse comportamento.

Continue com o texto Serviços selecionado e na paleta Behavior, veja se embaixo de event está escrito OnMouseOver - se não estiver, clique na seta ao lado e procure por OnMouseOver.

Faça o mesmo procedimento para o texto Produtos em relação a camada Produtos.

Meio caminho já foi percorrido, agora é a hora de instituirmos comportamentos às camadas.

Selecione a camada Servicos - para que você possa visualizá-la, clique sobre o nome dela na paleta Layer. - clique no botão mais (+) da paleta behavior, selecione Show-Hide Layer.

Na janela que aparecerá, selecione a linha Layer Servicos e marque a opção Show. Em Event deixe em OnMouseOver.

Clique novamente no mais (+) da paleta Behavior e selecione a opção Show-Hide layer.

Clique sobre a linha Layer Servicos e dessa vez opte pelo botão Hide. Clique em OK.
Na opção Event, deixe OnMouseOut.

Repita o procedimento para a camada Produtos.

Traduzindo:

Quando o mouse passar sobre o texto Serviços (OnMouseOver), aparecerá a layer Servicos (Show). Que ficará visivel até retirarmos o mouse de cima dela (OnMouseOut), quando será oculta (Hide)

O mesmo acontecerá em relação ao texto Produtos e sua respectiva camada.

Salve o seu trabalho e visualize no navegador.
Para ver como funciona ou para pegar o exemplo, clique aqui.

Patricia Daltro