Como criar um menu pop-up no Dreamweaver Introdução: Seguindo o crescimento do conteúdo em sites de Internet, a necessidade por uma fácil navegação nas páginas cresce igualmente. Um menu pop-up pode ser a melhor solução para esse problema. São fáceis de usar já que os usuários já estão acostumados com eles através dos menus pop-up do Windows (menus como Arquivo, Editar, Exibir, etc. são menus pop-up). E como grande bônus, os visitantes da sua página irão adorar o visual utilizado. No passado, para criar um menu pop-up você levaria horas e horas de puro sofrimento escrevendo pilhas e pilhas de códigos HTML para conseguir criar um menu bem simples. Agora, com programas como o Dreamweaver tudo se tornou muito mais fácil e não é necessário escrever nem uma linha de código sequer. Tudo ficou muito mais fácil. O que é preciso: Simples assim, você precisa de uma versão do Dreamweaver (4 ou superior, mas este tutorial foi escrito para o pacote MX), um browser Internet Explorer, versão 5 ou superior e... claro... um computador. Você não precisa ser nenhum super expert em Dreamweaver, mas claro, o mínimo de conhecimento sempre ajuda em muito. Mãos a obra: Durante este tutorial nós estaremos criando um simples menu de uma linha só, com apenas um menu pop-up, claro que seguindo os mesmos princípios você pode criar quantos menus desejar. A regra é a mesma. No nosso menu nós teremos vários links e um desses links abrirá um submenu. Se você quiser pode adicionar mais menus ou até mesmo colocar imagens de fundo nos menus, fica ao seu gosto. Na figura abaixo vemos como vai ficar nosso trabalho final (simples não é?!): fig. 01 Ótimo, agora que você já sabe como vai sair nosso trabalhar final, vamos começar a meter a mão na massa! Passo 01: 1
Abra o Dreamweaver! Passo 02: Verifique se você está usando o modo de visualização de projeto! Como eu disse antes, não vamos escrever sequer uma linha em código HTML. fig. 02 Passo 03: Crie um titulo para sua página (fig. 3), eu chamei nosso exemplo de Um menu pop-up, mas você pode dar o nome que quiser ou até mesmo deixar sem nome, por enquanto. Agora salve seu arquivo em alguma pasta (lembre-se de memorizar onde, afinal, você não quer ter tanto trabalho para não achar sua página depois). Passo 04: fig. 03 Na barra de ferramentas do menu Inserir (pressione CTRL+F2 no teclado ou menu Janela, opção Inserir caso não esteja aparecendo), selecione a ferramenta Desenhar Camada (fig. 04), clique e arraste para criar uma caixa com a camada, o tamanho não importa, afinal, vamos mudar ele logo a frente. Passo 05: fig. 04 Agora clique na lateral da cama para exibir no inspetor de propriedades as propriedades da cama atual. Mude as seguintes opções: nome, alinhamento a esquerda (E), alinhamento superior (A), largura (L) e altura (U) como na fig. 05. Passo 06: fig. 05 2
Desenhe mais três outras camadas adicionando a mesma configuração da primeira, mudando apenas: Nome da camada: menu2, menu3 e menu4 Alinhamento a esquerda (E): 25%, 50% e 75% Passo 07: Nesse exato momento você terá 4 camadas na cor cinza na parte superior da página uma ao lado da outra. Agora iremos adicionar um texto para facilitar a visualização. Clique dentro da cama menu1 e escreva o texto Menu 1, centralize o texto. Repita o mesmo processo para cada camada, na camada menu2 Menu 2, em menu3 Menu 3 e em menu4 Menu 4. Lembre-se de centralizar o texto em cada uma das 4 camadas. Passo 08: fig. 06 Desenhe três novas camadas e adicione as configurações como se seguem abaixo: fig. 07 Passo 09: Escreva dentro das camadas as palavras: Sub menu 1, Sub menu 2 e Sub menu 3. Não esqueça de centralizar as palavras, para isso repita o mesmo que fez no Passo 07. Passo 10: Novamente desenhe mais duas camadas (São as ultimas, eu prometo) usando a mesma técnica que nós usamos no passo 04. Coloque as configurações nessas camadas como visto na imagem abaixo e coloque dentro das camadas as palavras: Sub sub menu 1 e Sub sub menu 2. 3
fig. 08 Passo 11: Agora vamos trabalhar com os Comportamentos, para isso Pressione SHIFT + F3 ou clique no Inspetor de Design, guia de Comportamentos. Passo 12: Clique na camada que contem o texto Menu 3, no inspetor de comportamentos clique no botão + para começar a adicionar um novo comportamento. Caso não apareça nenhuma opção disponível (tudo cinza), clique na opção Mostrar os eventos de e em seguida IE 6.0 ou IE 5.5. fig. 09 Feito isso, com a camada Menu 3 Selecionada escolha o efeito de Mostrar/Ocultar camada, como visto na imagem abaixo. 4
fig. 10 Na lista de itens que vai aparecer, desça a barra de rolagem até aparecer a palavra Menu3Sub1, clique neste item e clique no botão Mostrar, faça o mesmo com as camadas Menu3Sub2, Menu3Sub3, e nas camadas Menu3subsub1 e Menu3subsub2, clique no botão ocultar. A seguir clique em OK. No inspetor de Comportamentos vai aparecer escrito OnClick como na figura abaixo. Mude o efeito de OnClick para OnMouseOver, assim quando posicionar o mouse sobre a camada Menu 3 irá aparecer as outras camadas Menu3sub1, Menu3sub2 e Menu3sub3. fig. 11 Agora iremos clicar novamente no símbolo +, para criar um evento para ocultar as sub camadas do menu quando retirar o mouse da camada 3. Execute o mesmo passo acima, porém nas camadas Menu3sub1, Menu3sub2 e Menu3sub3 ao invés de clicar no botão Mostrar, dessa vez, clique no botão Ocultar. E Escolha no Evento: OnMouseOut, após clique em OK e ficará como visto a seguir: 5
fig. 12 Passo 13: Repita o passo 12 com as outras três camadas, exceto com a camada Menu3sub3. Eles devem ter os eventos onmouseout e onmouseover. Passo 14: Para o Menu3sub3 iremos adicionar os efeitos para controlar seus sub sub menus. Para isso clique no Menu3sub3 e adicione no botão + um novo comportamento, dessa vez clique em mostrar nas camadas Menu3subsub1 e Menu3subsub2. Chame este evento de onmouseover, repita o processo mas agora clique em Ocultar nas camadas Menu3subsub1 e Menu3subsub2. Chame este evento de onmouseout. Passo 15: Perfeito, tudo QUASE pronto. Agora clique na camada Menu3sub1 e mude a visibilidade (VIS) para HIDDEN (oculto). Repita o passo para Menu3sub2, Menu3sub3, Menu3subsub1 e Menu3subsub2. Assim elas ficaram inicialmente ocultas até que o mouse passe sobre a camada Menu 3. Não se preocupe com a visualização, se quiser alterar alguma coisa nas camadas basta clicar sobre o Marcador correspondente na parte superior esquerda da pagina. fig. 13 fig. 14 Salve seu arquivo e pronto, hora de ver como ficou. Viu só, bem fácil criar menu pop-up. Contudo, isso é só a ponta do Iceberg, você pode melhorar o visual adicionando imagens de fundo, criando cores variadas, menus verticais, e como for. Tudo só depende agora da sua criatividade. 6