Criando uma POP-UP no Dreamweaver

Nesse tutorial você irá aprender a criar pop-up’s no seu Dreamweaver.

Quem é que gosta dos chamadas Janelinhas Pop-up? Os Pop-ups tem se tornado um dos campeões de chateações do mundo da Internet e para driblar essas chateações nada melhor do que criarmos um pop-up bem mais interessante do que uma simples janelinha flutuante. Uma das alternativas bem atraentes é utilizar janelinhas pop-up transparentes. O uso de um Comportamento do DW (behaviors) pode ser adicionado em camadas que as deixam transparente. Poderemos adicionar um botão que ao clicar em fechar , após um tempo determinado ela “vai desaparecendo” (Efeito Fade) para o usuário. Ou podemos fazer com que a camada já apareça transparente. Esse recurso só funcionará se você tiver no seu DW o comportamento “Opacity Suite”. Caso não possua esse comportamento baixe-o

OBS: É recomendável um conhecimento sobre camadas e comportamentos do DW. Veja a matéria que falo sobre esses recursos super úteis do DW.
Bom então mãos a obra.

Crie uma imagem no Fireworks ou em um programa gráfico de sua preferência e exporte-a com o formato “gif” ou “jpeg”.

Inserimos na página aonde queremos que apareça a popup, uma camada “Menu Inserir Camada”. Selecione a camada e altere as propriedades de modo que a opção “Imagem de fundo” fique com o URL do nosso arquivo “gif” ou “jpeg” criado anteriormente bem como uma ID para essa camada aqui no caso eu dei o nome de “popup” e a figura feita no Fireworks eu exportei como como “pai.gif”.

Com o Comportamento já instalada em seu DW , vá no menu “Janela Comportamentos> Opacity > Fade Opacity

em “Object ID:” insira o mesmo nome anteriormente dado a ID da camada. Aqui no meu caso seria “popup” que foi o nome que eu dei para a minha camada, em “Start Opacity” insira 100 (visualização total) , em “Final Opacity” insira 0 (zero – visualização nula) e em “Speed” insira a velocidade do efeito (no exemplo este valor é 20). Clique em “OK”. Não se esqueça de configurar o evento para esse Comportamento sendo “onClick”.

Com esse comportamento você pode também optar por: Set Opacity (com um evento , coloca sua camada com a opacidade determinada por você) ou Stop Fade Opacity (com um evento você para de aplicar o efeito de opacidade).

Obs: Você também poderia inserir um botão na sua página pop-up e neste botão inserir o comportamento “opacity” para que o evento ocorra quando o botão for acionado.