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.

 

 

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11