O Dreamweaver (doravante denominado DW) fornece um mecanismo chamado "Comportamento" para ajudá-lo a criar comportamentos interativos na página. Comportamento é uma série de ações realizadas em uma página web, por meio das quais o usuário interage com a página. Usando o comportamento do DW, você pode obter efeitos de página dinâmicos ricos e interação entre o usuário e a página sem escrever uma única linha de código.
Um comportamento é composto de eventos e ações. Um evento é o resultado de uma ação sendo acionada, e uma ação é um código JavaScript pré-escrito usado para concluir uma tarefa específica, como abrir uma janela do navegador, reproduzir um som, etc.
Ao usar comportamentos em um elemento de página, você especifica ações e eventos a serem acionados. O DW forneceu algumas ações que você pode aplicar aos elementos da página.
1. Alguns comportamentos básicos integrados
1. Chamar JavaScript (Call JavaScript)
Este comportamento permite configurar o script JavaScript correspondente a ser chamado quando determinados eventos são acionados para implementar a ação correspondente. Ao definir esse comportamento, você pode inserir scripts ou funções JavaScript diretamente.
2. Alterar propriedade (Alterar propriedade)
Este comportamento permite alterar dinamicamente as propriedades do objeto, como o tamanho da imagem, a cor de fundo da camada, etc. Observe que a configuração desse comportamento depende do suporte do navegador.
3. Verifique o navegador
Existem certas diferenças nos recursos de suporte de diferentes navegadores. Usando esse comportamento, podemos verificar a versão do navegador para acessar páginas diferentes.
4. Verifique o plug-in
Às vezes, as páginas que criamos requerem o suporte de determinados plug-ins, como páginas da web feitas em Flash, por isso é necessário verificar o plug-in do navegador do usuário para ver se ele possui o plug-in especificado instalado. Esse comportamento faz exatamente isso.
5. Controlar Shockwave ou Flash (Control Shockwave ou Flash)
Shockwave e Flash são objetos frequentemente inseridos na produção atual de páginas da web. Esse comportamento é usado para controlar esses objetos. Você pode usá-lo para controlar a reprodução, parada e retorno da animação, e também pode controlar o quadro para o qual saltar diretamente.
6. Mover camada (arrastar camada)
O comportamento "Mover camada" pode realizar o movimento das camadas na página e até mesmo o movimento do conteúdo em camadas.
7. Ir para URL (Ir para URL)
Você pode especificar a janela atual do navegador ou o quadro de janela especificado para carregar a página especificada.
8. Menu de salto
O comportamento "Menu de salto" é usado principalmente para editar formulários de salto.
9. Caixa de diálogo de mensagem pop-up (Mensagem pop-up)
Se desejar exibir uma caixa de diálogo de informações na página ou fornecer ao usuário uma mensagem de prompt, você pode usar este comportamento.
2. Exemplo Simples
Abaixo tiraremos fotos dinâmicas como exemplo para introduzir o uso de comportamentos. Primeiro você precisa fazer duas fotos 1 e 2 do mesmo tamanho. Aqui estão as etapas específicas.
1. Abra o DW para criar uma página e insira a Figura 1 nesta página.
2. Selecione Figura 1 na janela de edição do DW.
3. Selecione “Comportamentos” no menu “janelas” ou pressione F8 para abrir o painel Comportamento. Observe que no menu pop-up Eventos para, "Navegadores 3.0 e posteriores" deve ser selecionado.
4. Pressione o botão "+" para adicionar um novo comportamento - "Trocar imagem", e a caixa de diálogo "Trocar imagem" aparecerá. Na lista de imagens, você verá uma lista de todas as imagens da página. Selecione a imagem 1 que deseja transformar. Esta é a imagem original. Quando o ponteiro do mouse passar sobre ela, ela será substituída por uma imagem destacada 2. substituir.
5. Clique no botão Procurar e selecione aquela que deseja substituir. Através do evento “onMouseOver”, a imagem selecionada 2 substitui a imagem original 1.
6. Selecione as configurações padrão para pré-chamada e armazenamento de imagens.
A opção “Pré-carregar imagens” significa que quando a página inteira é baixada, as imagens transformadas são colocadas no cache do navegador. Quando o visualizador passa o ponteiro do mouse sobre a imagem Nossa História pela primeira vez, ele dificilmente consegue sentir a imagem destacada. Não há atraso no aparecimento de . A opção "Restore Images onMouseOut" significa que quando ocorrer o evento "onMouseOut" (mouse out), a imagem será automaticamente restaurada ao seu estado original.
7. Após a conclusão das configurações, clique no botão "OK" para fechar a caixa de diálogo "Trocar imagem" e aplicar as configurações anteriores.
Neste momento, o painel Comportamento contém os eventos e ações que você acabou de definir para a imagem. Há uma marca de ação "Trocar imagem" próxima ao evento "OnMouseOver" e acima dela há o evento "onMouseOut" e a ação "Restaurar imagem de troca" correspondente (este comportamento ocorre quando você aceita o padrão na caixa de diálogo Trocar imagem opções de caixa definidas).
8. Feche o painel Comportamento. Pressione F12 para visualizar a página. Ao mover o ponteiro do mouse para a figura 1, você descobrirá que ela foi substituída pela figura 2.
O exemplo acima é apenas um exemplo simples de aplicação do comportamento do DW. Existem muitos outros usos, então não vou explicá-los um por um aqui. Além disso, o DW também permite que os usuários utilizem comportamentos estendidos, que podem ser baixados da página inicial da Macromedia.