Banner Flutuante. Dreamweaver

Transcrição

1 Banner Flutuante Dreamweaver

2 Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir e depois a opção Camada. Surge então um retângulo no arquivo HTML. Tudo que estiver nessa caixa aparecerá sobre o conteúdo da página.

3 O passo seguinte é inserir a imagem dentro da camada. Basta acionar o menu Inserir e a opção Imagem, escolhendo o arquivo desejado. Esse exemplo foi feito com um GIF animado, mas pode ser também uma imagem estática ou uma animação em Flash (nesse caso, acionamos o menu Inserir/Mídia). Não se esqueça de reservar um espaço para o botão Fechar.

4 Agora é hora de movimentar o banner. Clique na alça do canto superior esquerdo da camada (tenha cuidado para não selecionar apenas a imagem). Depois clique com o botão direito. Escolha a opção Gravar Caminho. Surgirá a janela Linhas de Tempo, que veremos adiante. Clique na alça da camada e a arraste pela tela, traçando o percurso desejado. O Dreamweaver exibe uma linha que acompanha seus movimentos. Quando completar o caminho, solte o botão do mouse.

5 Passamos agora para a janela Linhas de Tempo, que controla a velocidade e acompanha a posição da camada em cada instante da animação. É importante marcar a caixa Execução Automática, para que a animação seja ativada assim que a página for carregada. A caixa Loop faz com que a animação se repita indefinidamente, mas essa não é a intenção nesse exemplo. Tecle F12 para testar. Se tudo foi feito corretamente, seu banner já está dançando na página. Mas por enquanto não serve pra muita coisa, já que não tem nenhuma área clicável.

6 Para resolver o problema, precisamos criar duas áreas de clique na imagem: uma manda o usuário para o site desejado e a outra fecha o banner. Isso é feito com o recurso de mapeamento de imagem do Dreamweaver (quem usa uma animação Flash deve mapeá-la dentro do próprio aplicativo).

7 Selecione a imagem e, na janela de Propriedades, clique na seta do canto inferior direito para exibir todas as opções. Escolha uma das alternativas de mapeamento (reto, circular ou desenho livre) e marque a área do link na imagem. Nesse exemplo, definimos um retângulo em torno da cabeça do boneco que tem nas mãos o Guia da Foto Digital. Um sombreamento indica a área mapeada. Na caixa Link, insira o endereço do site (com Na área Destino, escolha a opção _blank para que o link seja aberto numa janela nova. Com isso, a primeira parte da imagem está mapeada.

8 Para demarcar a segunda parte, o procedimento é semelhante. Clicamos na opção de mapeamento desejada e contornamos a área do botão Fechar.

9 Nesse ponto, o procedimento é um pouco mais complicado. A segunda área mapeada não é um link para outro site, mas sim um comando para fechar o banner. Para que isso funcione, precisamos usar um evento JavaScript. Selecione a área mapeada em torno do botão Fechar, acione o menu Janela/Comportamento e clique na aba Comportamento. Essa janela possui duas colunas: Evento (quando acontecerá) e Ação (o que acontecerá). Clique no botão + para acrescentar uma ação à área selecionada. Escolha a opção Mostrar/Ocultar Camada. Na janela seguinte, clique em Ocultar e depois em OK. Dessa forma definimos a ação (fechar a janela), mas não o evento. O Dreamweaver, por padrão, incluirá o evento onmouseover

10 Assim, a imagem será fechada quando o mouse passar sobre a área do botão Fechar. Mas queremos que o banner desapareça apenas quando o usuário clicar no botão. Por isso, mudamos o evento para onclick, clicando na seta ao lado da palavra onmouseover.

11 Pronto, o banner flutuante agora está completo. Tecle F12 para testar a animação e os links. Para inserir o banner em qualquer página, basta copiar a camada e colar no arquivo HTML desejado. O único cuidado extra é checar se o arquivo já tem uma camada com o mesmo nome da que foi criada para o banner.

12 Janela pop - up

13 É possível especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela será redimensionável, possuirá uma barra de menus, etc.). Por exemplo: é possível utilizar este comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma imagem em miniatura; com este comportamento, é possível adequar o tamanho da nova janela ao da imagem.

14 Inicialmente vamos criar o link que abrirá a nossa nova janela quando o usuário clicar sobre ele. No painel "Inserir" ou "Insert" clique sobre o botão "Hiperlink".

15 Insira o texto do link e no campo URL coloque o símbolo "#". Veja:

16 Com o link selecionado, vá até o painel "Design" e clique na guia "Comportamentos" ou "Behaviors (versão em inglês)". Clique agora sobre o botão que tem um sinal de "+". No menu que surgir, clique em "Abrir a Janela do Navegador" ou "Open Child Window".

17 Na caixa de diálogo que se abrir defina as configurações da janela popup que se abrirá quando o link for clicado.

18 Com o link selecionado, observe no painel "Design" que o evento para o link tem o atributo "OnMouseOver". Isso significa que a janela será aberta imediatamente quando o usuário passar o mouse sobre ele.

19 Para que a janela se abra apenas quando o link for clicado, proceda da seguinte maneira: Primeiro clique sobre a seta que está ao lado do evento "onmouseover" no painel "Comportamentos". No menu que surgir, selecione "Mostrar eventos de" ou "Show Events for (inglês)" e clique em "4.0 ou ou mais avançada"

20

21 Repita a operação, clicando na seta ao lado do evento, e agora você terá mais opções de eventos. Clique então em "onclick". Agora seu link só abrirá a nova janela quando alguém clicar sobre ele.

22

23 Menu pop-up

24 No Dreamweaver, inserir uma imagem feita no fireworks Com a figura seleciona, vá em Design comportamentos Clique no sinal + Selecione a opção mostrar menu pop up

25 Outro jeito

26 No Fireworks abra um documento em branco com as dimensões 135 x 30 pixels em branco Insira um retângulo na cor que desejar Insira um texto com o nome do botão e selecione uma cor

27 Selecione a imagem com o botão direito e clique na opção inserir fatia Clique de novo com o botão direito do mouse e selecione a opção Adicionar menu pop up

28

29 Texto: Adicione o Nome desejado que apareça no menu pop-up Link: Adicione o link da página que deseja que abra quando clicado no menu pop-up Destino: Lugar onde deseja que a pagina seja aberta(janela principal,iframe e etc)

30

31 Adicione os links que quiser depois clique em próximo aparece o seguinte:

32 Faça os ajustes que quiser depois clique em próxima aparecerá o seguinte:

33 Faça os ajustes que quiser no próximo menu (Posição) faça os ajustes como se o menu abrirá em cima ou embaixo do retangulo e etc clique em concluído

34 Arquivo exportar

35 Clique em salvar e vamos ao Dreamweaver

36 Inserir no Dreamweaver Você tem que ter um lugar em sua página para inserir o menu

37

38 Vá em menu inserir Opção inserir imagem interativa Opção Html do Fireworks e siga as janelas

39

40

41

42

43 O resultado é o menu aplicado a sua página