Efeitos DHTML com Spry e Dreamweaver CS3
2007-10-24 00:29:36
Categoria: Spry
Com o novo Dreamweaver CS3 você é capaz de criar efeitos DHTML em poucos cliques. É possível criar diversos efeitos configuráveis com bastante liberdade. Aprenda com esse tutorial como utilizar todos os efeitos disponíveis.
Os efeitos podem ser chamados por qualquer evento, por exemplo: onclick, onmouseouver. Porém nem todos os objetos podem receber efeitos, você deve observar se a tag suporta a animação aplicada. Veja a baixo onde encontrar o painel de Effects do Dreamweaver CS3:
Atalho: Shift+F4
Agora é só escolher em que objeto você quer aplicar o evento para chamar o respectivo efeito, depois você poderá configurar o efeito e definir em que elemento ele será executado. Normalmente se aplica efeitos a tags <div> que possuem um id único. Veja nosso exemplo.
No exemplo criei links onde os eventos são onclick, quando são clicados, e são aplicados ao corpo da página. Para isso basta você selecionar o link desejado, ir à opção Tag > Behaviors > + > Effects > Appear/Fade, em seguida aparecerá uma tela de configuração, veja abaixo:
Target Element: Define onde será executado o efeito.
Effect duration: Duração em milissegundos.
Effect: Define o efeito usado, nesse caso pode ser Appear ou Fade.
Fade from: Transparência inicial.
Fade to: Transparência final.
Toggle effect: Marcando essa opção você permite que o efeito seja revertido caso o evento seja chamado outra vez.
Depois de configurar as variáveis do Spry Effects clique em OK. Por padrão o evento criado é onclick, mas você pode modificá-lo facilmente no painel Behaviors e até criar novos eventos no mesmo elemento, veja na figura abaixo:
Com isso você já é capaz de aplicar qualquer efeito em suas página HTML em poucos cliques. Este tutorial termina por aqui, confira nosso exemplo com todos os efeitos disponíveis no Dreamweaver CS3.
Comentários
- Roberto 2007-12-13 22:01:11
- É possível fazer uma inserção no XML??
- Thiago Prazeres 2007-12-17 16:39:42
- Possível é, você pode usar o DOOM pra fazer isso. Porém esse prática não é comum, normalmente se tem um banco de dados comum, e o arquivo XML é gerado dinamicamente. Com isso a inserção seria no banco de dados e não diretamente no XML.
- Cezar Amorim 2008-06-21 14:41:35
- Parabéns pelo exemplo. Estou com uma dificuldade em implementar um segundo select menu com as cidades quando selecionado o estado, você teria somo me ajudae. Grato
- Marcus Paulo 2008-07-08 08:43:36
- Amigo dois erros! primeiro que este arquivo que vc colocar ai como exemplo não tem opção de baixar! e sim copiar! Segundo talvez seja por isso que estar retornarno erro! quando no dreamCS3 estar dando erro de não gerar o schuema! "TypeUTFDataFormarException..."
- Marcus Paulo 2008-07-08 11:43:42
- Amigos, muito boa a ferrramenta pra quem quer rapidez!Porém aqui vai uma dica: A pessoa um pouco leiga sentirá dificuldades no XML de exemplo pois, estar com um padrão não aceitavel! Modifiquem a primeira linha para os padrões de xml aceitavel,que dará certo!
- rafael 2008-12-12 11:00:23
- Parabéns parceiro.. Há muito poucos tutoriais que falam de xml em comparação com outras tecnologias, esse tutorial falou do uso de xml com o dreamweaver cs3, espero ver outro em breve.
- Carlos 2009-11-29 08:06:16
- Mas dessa forma não seria um form obstrutivo, uma vez que o cliente pode estar com o javascript desabilitado? Uso Cs2 não sei muita coisa do Spry...
- Igor 2011-06-13 10:56:48
- é possível usar este tipo de sistema, para eu selecionar, um estado, daí abre as cidades, e selecionando a cidade abre o bairro? eu gostaria de saber qual o modo mais prático de se fazer isto, isso será para um formulário, poré, os campos serão, bairro, quadra, lote, se puderem me conseguir um código de exemplo ficaria muito feliz, isso tudo no dream cs3, obrigado.