Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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)