Criando um Menu Interativo no Dreamweaver: -------------------------------------------------------------------------------Um menu interativo ou animado todo aquele que no esttico e permite ao usurio com

om um simples clique ou passar de mouse, escolher outras opes alm daquelas diretamente visveis. Normalmente, quando pensamos em um menu interativo, nos remetemos a dficeis cdigos em Jscript ou animaes em Flash. Mas, o Dreamweaver nos permite tambm a criao desses menus, usando as layers (camadas) e a paleta Comportamento. Iniciamos nosso Menu, inserindo uma layer na pgina, no caso, vou trabalhar com um menu vertical, situado na lateral direita da pgina. 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 clulas: Principal, Servios, Produtos e Fale Conosco. Formate a seu gosto.

Agora devemos criar uma layer ao lado do texto Servios, dentro dessa layer insira uma tabela, com 01 coluna e 04 linhas, Digite em cada uma das clulas, respectivamente: Aluguel, Compra, Venda e Leasing, (formate a seu gosto). Para que essa layer no atrapalhe nosso servio, selecione-a e no Inspetor Properties - opo Vis - clique em Hidden (voc estar deixando essa layer invisivel) e d-lhe o nome de servicos (sem mesmo, pois isso evita possveis no 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 clulas: Carros, Motos, Vans e Pick-up. (formate a seu gosto) Repita o procedimento para deixar essa layer tambm invisivel e dlhe 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 esto ocultas ou invisveis. Grave o nome das layers ocultas. Selecione o texto Servios e clique no sinal de mais (+) ao lado da paleta Behavior (se nada aparecer sinal de que o seu Dreamweaver no est configurado para comportamentos, por isso, clique em Show Events For e marque a verso compatvel com seu navegador). Selecione a opo Show-Hide Layer - essa opo responsvel pelo ver-no ver das camadas. (O que ns estamos comeando a fazer dar ao programa a informao de que ao passar / clicar com o mouse sobre determinado objeto da pgina, 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 opo Show-Hide Layer e uma janela de opes ser aberta, nela deveremos informar qual camada ser visualizada ao termos uma ao sobre o texto Servios.

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

O prximo passo definirmos qual a ao que desencadear esse comportamento. Continue com o texto Servios selecionado e na paleta Behavior, veja se embaixo de event est escrito OnMouseOver - se no estiver, clique na seta ao lado e procure por OnMouseOver. Faa o mesmo procedimento para o texto Produtos em relao 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 boto mais (+) da paleta behavior, selecione Show-Hide Layer. Na janela que aparecer, selecione a linha Layer Servicos e marque a opo Show. Em Event deixe em OnMouseOver. Clique novamente no mais (+) da paleta Behavior e selecione a opo Show-Hide layer. Clique sobre a linha Layer Servicos e dessa vez opte pelo boto Hide. Clique em OK. Na opo Event, deixe OnMouseOut. Repita o procedimento para a camada Produtos. Traduzindo: Quando o mouse passar sobre o texto Servios (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 relao ao texto Produtos e sua respectiva camada. Salve o seu trabalho e visualize no navegador. (F12)