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!