Desenvolvimento Web Prof. Elisa Maria Pivetta Cantarelli. DICAS: Dreamweaver

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento Web Prof. Elisa Maria Pivetta Cantarelli. DICAS: Dreamweaver"

Vasco Figueira Canário
8 Há anos
Visualizações:

1 Ministério da Educação Universidade Federal de Santa Maria Coordenadoria de Ensino Médio e Tecnológico Colégio Agrícola de Frederico Westphalen Desenvolvimento Web Prof. Elisa Maria Pivetta Cantarelli DICAS: Dreamweaver Arrastar Camada 1- Modo visualização tabelas: padrão (Exibir Visualizar tabelas padrão) 2- Inserir camada inserir imagem na camada 3- Selecionar camada - Dar nome camada 4- Posicionar no <body> 5- Ir em comportamentos (menu janela: behavior) : arrastar camada 6- Salvar - Pronto tecle F12 para ver o resultado! BANNER Flutuante Vamos ver como criar um banner que se move pela tela! 1. no Dreamweaver, crie um novo htm (nova página); 2. Insira uma camada no seu arquivo Insert > Layer (inserir camada) 3.Clique dentro da camada e insira a figura que vai ser usada no banner insert> image (inserir imagem); 4.Insira também um botão fechar! 5. Após inserir a img, clique no canto superior esquerdo da camada, e clique em Record Patch (gravar caminho), certifique-se de estar selecionando realmente a camada e não a figura! 6. Arraste a camada pela tela, note que o Dreamweaver vai criando uma linha por onde a img passa; 7. Ao mesmo tempo aparece a barra de linha do tempo (timeline), marque nessa barra a opção AUTOPLAY (automático) para que o banner se mova quando a pg for carregada no browser! 8. Hora de criar o javascript para fechar o banner! Selecione a figura, e, na barra de propriedades (properties) e clique em Map; 9. Mapeie a área da img onde está o botão fechar; 10. Agora vamos criar o javascript. No lado direito da tela clique em behaviors (comportamentos) e escolha Show-Hide Layer (mostrar/ocultar camada); 11. Na janela seguinte clique em hide (ocultar) e depois em Ok. 12. Na guia comportamento clique na setinha para baixo e escolha (caso não seja) o evento on click ; Mostrar/ocultar camada - criar camada - inserir imagem - colocar propriedade camada em hidden - selecionar algum texto e colocar um comportamento (behavior): mostrar-ocultar camadas escolher: mostrar - ir no evento e selecionar o evento (ex: onclick)

camada - Dar nome camada 4- Posicionar no <body> 5- Ir em comportamentos (menu janela: behavior) : arrastar camada 6- Salvar - Pronto tecle F12 para ver o resultado!

2 OBS: Quando muitas Camadas: Menu modificar-organizar-evitar sobreposições Menu Pulldown Criação Menu Pulldown com apenas 3 Layers, a Ferramenta Timeline e um Comportamento nativo do Dreamweaver. Para começar, vamos criar nossa primeira Layer, a qual chamarei de botao. Nela você pode inserir uma imagem (como o exemplo) ou até mesmo um texto. Pelo painel Properties, insira nessa imagem ou texto, uma tralha #, dando a idéia de um LINK. [a href="#"][img src="botao.gif" alt="botao"][/a] Outro detalhe importante para essa "Layer botao" é o fato de que, obrigatoriamente, ela deve ter o z- index superior às outras duas Layers a serem criadas. Fazendo assim com que ela ("Layer botao") fique por cima delas. Vamos agora criar nossa segunda Layer: "Layer opcao". Nela também podemos inserir imagens ou texto. No exemplo inseri uma imagem. Essa Layer tem que ter a mesma largura da anteriormente criada (Layer botao). Posicione a "Layer opcao" exatamente abaixo da "Layer botao". Nossa terceira e última Layer se chamará "hide" e terá como função "esconder" a "Layer opcao". Para tal, ela deve ser criada acima e um pouco mais larga que a "Layer menu", sem espaço entre elas, e deve também ter a mesma cor do body da página. Seu valor z-index deve ser superior ao valor z-index atribuído a "Layer opcao". Bem, vamos conferir pelo Painel Layer os valores atribuídos aos z-index de nossas Layers:

Pelo painel Properties, insira nessa imagem ou texto, uma tralha #, dando a idéia de um LINK. [a href="#"][img src="botao.

3 janela -> outros -> camadas Já criamos nossas Layers, agora vamos cuidar do "movimento" das mesmas com o auxilio da Ferramenta "Timeline". Selecione a "Layer opcao" e movimente-a de modo que fique acima da "Layer botao". Essa será a posição inicial dessa Layer em nossa primeira "Timeline" Agora, pelo Painel Timeline, crie um objeto na keyframe 1. Novamente na "Layer opcao", movimente-a até que se localize abaixo da "Layer botao". Quando a "Layer opcao" estiver bem abaixo da "Layer botao" (figura acima), ela estará em seu ponto final. Pelo Painel Timeline, arraste o movimento até o quadro 35. Nomeie essa "Timeline" de descer. Criamos a "Timeline descer". Vamos agora criar a "Timeline subir". Ela será igual à "descer", invertendo o ponto inicial e final. Pelo Painel Timeline, crie uma nova Timeline (adicionar linha tempo na setinha sup. direita), dê o nome "subir". Com a "Layer opcao" bem abaixo da "Layer botao", insira um objeto na keyframe 1 e arraste a "Layer opcao" até que fique acima da "Layer botao". Arraste o movimento até a frame 35.

Essa será a posição inicial dessa Layer em nossa primeira "Timeline" Agora, pelo Painel Timeline, crie um objeto na keyframe 1.

4 Timeline subir: Agora temos que ativar as Timelines. Primeiro vamos ativar a "Timeline descer". Selecione a "Layer botao", pelo Painel Behavior e escolha: Timeline > Go to Timeline Frame. Em Timeline escolha a Timeline descer e em Go to Frame escolha a frame 1. Ainda no Painel Behavior, escolha: Timeline > Play Timeline, escolhendo novamente a "Timeline descer". Determine para ambas as ações o evento onclick. Para ativar a "Timeline subir", selecione a "Layer opcao", pelo Painel Behavior > Timeline > Go to Timeline Frame e escolha a "Timeline subir". Em Go to Frame, escolha a frame 1.

Em Timeline escolha a Timeline descer e em Go to Frame escolha a frame 1.

5 Ainda no Painel Timeline > Play Timeline, escolha novamente a "Timeline subir". Ambas as ações o evento onclick. Estamos quase terminando. Selecione pelo tag selector o body de sua página. E pelo Painel Timeline, repita o mesmo processo acima descrito (Timeline > Go to Timeline Frame e escolha a "Timeline subir". Em Go to Frame escolha a frame 1. Ainda no Painel Timeline > Play Timeline, escolhendo novamente a "Timeline subir"), só que o evento será onfocus para ambas as ações.

E pelo Painel Timeline, repita o mesmo processo acima descrito (Timeline > Go to Timeline Frame e escolha a "Timeline

Documentos relacionados

Banner Flutuante. Dreamweaver

Banner Flutuante. Dreamweaver Banner Flutuante Dreamweaver 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