Usando os comportamentos do Dreamweaver para criar um menu Pop-up

 

Neste tutorial iremos aprender um recurso que é muito usado em sites de grande conteúdo, os menus pop-up, usaremos a paleta Bahaviors que ajuda o usuário do Dreamweaver criando complexos algorítimos em linguagem Javascript, a paleta Bahaviors tem outras opção muito úteis que serão comentadas em alguns dos próximos tutoriais.

 

O site que criaremos terá a aparência abaixo:

 

 

Aparência normal

 

 

Com o menu “Frutas” exposto

 

 

Com o menu “Verduras” exposto

 

Início do trabalho

 

1. Em seu Dreamweaver, crie um novo arquivo.

 

2. Vamos modificar o tamanho das margens superior e esquerda (topmargin e leftmargin) para 0. Para fazê-lo, clique com o botão direito do mouse em qualquer ponto do seu arquivo em branco e escolha a opção “Page Properties”.

 

 

3. Insira uma tabela com as configurações abaixo:

 

 

4. Depois de inserida a tabela, selecione sua primeira linha e mescle as células.

 

 

5. Modifique a altura desta linha para 80.

 

 

6. Selecione a segunda linha da tabela e modifique sua altura para 340.

 

7. Dê um clique na primeira célula da segunda linha e modifique sua largura para 160.

 

 

8. Modifique a largura da segunda célula da segunda linha para 600.

 

9. Pinte o fundo desta célula com uma cor escura como a do exemplo no topo deste tutorial.

 

10. Dê um clique na primeira linha da tabela e escreva um título qualquer como “Lorem Ipsum”. Formate com fonte Verdana num tamanho grande, com uma cor clara por causa do fundo escuro que acabamos de escolhes para a célula.

 

11. Abra o seu Photoshop para criarmos as imagens dos dois botões.

 

12. No Photoshop, crie um novo arquivo com 160 pixels de largura e 15 pixels de altura.

 

13. Altere a cor de primeiro plano para a cor que você quer para o fundo do botão e pressione ALT+BAKCSPACE para aplicá-la ao fundo.

 

14. Use a ferramenta Texto do Photoshop para escrever a palavra “Verduras”, alinhada à esquerda do botão.

 

15. Use o comando File/Save for Web para exportar a imagem com o nome verduras1.jpg.

 

16. Use a ferramenta Texto do Photoshop para apagar a palavra “Verduras” e escrever no seu lugar a palavra “Frutas”, alinhada à esquerda do botão.

 

17. Use o comando File/Save for Web para exportar a imagem com o nome frutas1.jpg.

 

18. Feche o Photoshop e retorne ao Dreamweaver.

 

19. Clique na primeira célula da segunda linha da tabela.

 

20. Altere o alinhamento vertical desta célula para “Top”.

 

 

21. Clique no menu Insert/Image e insira a imagem “verduras1.jpg” na célula mencionada no item 19.

 

22. Para inserir a outra imagem, clique na imagem “verduras1.jpg” e aperte uma vez a seta de direção do seu teclado para a direita.

 

23. Com o cursor piscando do lado direita a imagem “verduras1.jpg”, insira a segunda imagem (frutas1.jpg). A segunda imagem não se posiciona ao Aldo da primeira, por causa da definição da largura da célula da tabela que pusemos em prática no item 7 deste tutorial.

 

Precisamos das páginas internas que serão abertas quando clicarmos cada um dos seis itens dos nossos dois botões, por isso agora, vamos fazer rapidamente 6 arquivos que aparecerão quando seu item for clicado no menu.

 

» Crie um novo arquivo no Dreamweaver.

» Escreva neste novo arquivo: “Este é o arquivo frutas 1”

» Salve o arquivo como frutas1.htm.

» Apague o número 1 e escreva o numero 2.

» Salve o arquivo como frutas2.htm.

» Apague o número 2 e escreva o numero 3.

» Salve o arquivo como frutas3.htm.

» Apague o texto “Frutas 3” e escreva  “Verduras 1”.

» Salve o arquivo como verduras1.htm.

» Apague o número 1 e escreva o numero 2.

» Salve o arquivo como verduras2.htm.

» Apague o número 2 e escreva o numero 3.

» Salve o arquivo como frutas3.htm.

 

Pronto, rapidamente criamos os arquivos que aparecerão quando o item correspondente do menu for acionado. Continuemos o trabalho.

 

24. Vamos usar o método IFRAME para que as páginas internas apareçam na área de conteúdo do site.

 

25. Clique na segunda célula da segunda linha da tabela e acesse a visualização do código do Dreamweaver.

 

 

26. O cursor estará dentro da célula que você selecionou no item 25, piscando na frente de uma TAG de espaço ( ) apague esta TAG de espaço.

 

 

27. TAG IFRAME:

 

<iframe name=conteúdo src=futas1.htm width=600 height=340 border=0 frameborder=no></iframe>

 

28. Retorne ao modo Design.

 

 

29. Montando o menu:

 

30. Mostre a paleta Behaviors, clicando em Window/Behaviors.

 

31. Dê um clique no botão “Verduras 1”.

 

32. Clique no sinal “+” da paleta Behaviors.

 

 

33. Selecione a opção “Show Pop Up Menu”.

 

 

34. Aparecerá a caixa de diálogo abaixo:

 

 

35. As guias Appearance e Advanced, tratam da formatação da aparência do menu, use-as como quiser, depois de formatar clique na guia Position para definir em que posição aparecerá o menu em relação ao botão que o ativa.

 

 

36. Clique em OK e selecione o outro botão.

 

37. Repita para este botão os itens, 32, 33, 34 e 35.

 

38. O último passo é alterar o target que está _blank para conteudo que é o nome do nosso IFRAME, para fazê-lo rapidamente, acesse a vizualização de código do Dreamweaver e clique no menu Edit/Find and Replace.

 

39. Mande localizar _blank e substitua por conteudo.