Selecione um elemento na página, como uma imagem
ou um link.
Última atualização em
27 de abr de 2021
Use comportamentos JavaScript no Adobe Dreamweaver para inserir código JavaScript em documentos para que os visitantes possam alterar uma página da Web ou iniciar determinadas tarefas.
Os comportamentos do Adobe Dreamweaver colocam o código JavaScript nos documentos de modo que os visitantes possam alterar uma página da Web de várias maneiras ou iniciar algumas tarefas. Um comportamento é uma combinação de um evento e uma ação acionada por esse evento. No painel Comportamentos, adicione um comportamento a uma página especificando uma ação e, em seguida, especificando o evento que aciona essa ação.
Nota
O código de comportamento é código JavaScript do lado do cliente; ou seja, é executado em navegadores, não em servidores.
Eventos são, efetivamente, mensagens geradas por navegadores indicando que um visitante da página fez algo. Por exemplo, quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; o navegador verifica se deve chamar algum código JavaScript (especificado na página visualizada) em resposta. Diferentes eventos são definidos para diferentes elementos de página; por exemplo, na maioria dos navegadores onMouseOver e onClick são eventos associados a links, enquanto onLoad é um evento associado a imagens e à seção body do documento.
Uma ação é código JavaScript pré-definido para executar uma tarefa, como abrir uma janela do navegador, mostrar ou ocultar um elemento AP, tocar um som ou parar um filme do Adobe Shockwave.As ações fornecidas com o Dreamweaver oferecem máxima compatibilidade entre navegadores.
Depois de anexar um comportamento a um elemento de página, o comportamento chama a ação (código JavaScript) associada a um evento sempre que esse evento ocorre para esse elemento. (Os eventos que você pode usar para acionar uma determinada ação variam de navegador para navegador.) Por exemplo, se você anexar a ação Popup Message a um link e especificar que ela será acionada pelo evento onMouseOver, sua mensagem aparece sempre que alguém coloca o ponteiro sobre esse link.
Um único evento pode acionar várias ações diferentes, e você pode especificar a ordem em que essas ações ocorrem.
O Dreamweaver oferece cerca de duas dúzias de ações; ações adicionais podem ser encontradas no site do Exchange em www.adobe.com/go/dreamweaver_exchange, bem como em sites de desenvolvedores de terceiros.Você pode escrever suas próprias ações se for proficiente em JavaScript.
Nota
Os termos comportamento e ação são termos do Dreamweaver, não termos HTML. Do ponto de vista do navegador, uma ação é como qualquer outro pedaço de código JavaScript.
Visão geral do painel Comportamentos
Você usa o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos a elementos de página (mais especificamente a tags) e para modificar parâmetros de comportamentos anexados anteriormente.
Os comportamentos que já foram anexados ao elemento de página selecionado atualmente aparecem na lista de comportamentos (a área principal do painel), listados alfabeticamente por evento. Se várias ações estiverem listadas para o mesmo evento, elas serão executadas na ordem em que aparecem na lista.Se nenhum comportamento aparecer na lista de comportamentos, nenhum comportamento foi anexado ao elemento selecionado atualmente.
O painel Comportamentos tem as seguintes opções:
Mostrar eventos definidos
Exibe apenas os eventos que foram anexados ao documento atual. Os eventos são organizados em categorias do cliente e do servidor. Os eventos de cada categoria estão em uma lista que pode ser expandida. Mostrar eventos definidos é a visualização padrão.
Mostrar todos os eventos
Exibe uma lista em ordem alfabética de todos os eventos de uma determinada categoria.
Adicionar comportamento (+)
Exibe um menu de ações que podem ser anexadas ao elemento selecionado atualmente. Quando você seleciona uma ação nesta lista, uma caixa de diálogo aparece onde você pode especificar parâmetros para a ação. Se todas as ações estiverem desabilitadas, nenhum evento poderá ser gerado pelo elemento selecionado.
Remover evento (–)
Remove o evento e a ação selecionados da lista de comportamentos.
Botões de seta para cima e para baixo
Move a ação selecionada para cima ou para baixo na lista de comportamentos para um evento específico. Você pode alterar a ordem das ações apenas para um evento específico — por exemplo, você pode alterar a ordem em que várias ações ocorrem para o evento onLoad, mas todas as ações onLoad permanecem juntas na lista de comportamentos. Os botões de seta ficam desativados para ações que não podem ser movidas para cima ou para baixo na lista.
Eventos
Exibe um menu pop-up, exibido somente quando um evento é selecionado, de todos os eventos que podem acionar a ação (esse menu aparece quando você clica no botão de seta ao lado do nome do evento selecionado). Eventos diferentes podem aparecer dependendo do objeto selecionado. Se os eventos esperados não aparecerem, verifique se o elemento de página ou tag correto está selecionado. (Para selecionar uma tag específica, use o seletor de tags no canto inferior esquerdo da janela Documento.)
Nota
Os nomes de evento entre parênteses estão disponíveis somente para links; a seleção de um desses nomes de evento adiciona automaticamente um link nulo ao elemento de página selecionado e anexa o comportamento a esse link e não ao elemento propriamente dito. O link nulo é especificado como href="javascript:;" no código HTML.
Sobre eventos
Cada navegador fornece um conjunto de eventos que você pode associar às ações listadas no menu Ações (+) do painel Comportamentos. Quando um visitante da sua página da Web interage com a página — por exemplo, clicando em uma imagem — o navegador gera eventos; esses eventos podem ser usados para chamar funções JavaScript que executam uma ação. Dreamweaver fornece muitas ações comuns que você pode acionar com esses eventos.
Para nomes e descrições dos eventos fornecidos por cada navegador, consulte o Centro de Suporte do Dreamweaver em www.adobe.com/go/dreamweaver_support.
Diferentes eventos aparecem no menu Eventos dependendo do objeto selecionado. Para descobrir quais eventos um determinado navegador oferece para um determinado elemento da página, insira o elemento da página no documento e anexe um comportamento a ele, depois observe o menu Eventos no painel Comportamentos. (Por padrão, os eventos são retirados da lista de eventos HTML 4.01 e são compatíveis com a maioria dos navegadores modernos.) Os eventos podem ficar desativados (esmaecidos) se os objetos relevantes ainda não existirem na página ou se o objeto selecionado não puder receber eventos. Se os eventos esperados não aparecerem, verifique se o objeto correto está selecionado.
Se você estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecem entre parênteses. Esses eventos estão disponíveis apenas para links.Quando você seleciona um deles, o Dreamweaver coloca uma tag <a> ao redor da imagem para definir um link nulo. O link nulo é representado por javascript:; na caixa Link do Inspetor de propriedades. Você pode alterar o valor do link se quiser transformá-lo em um link real para outra página, mas se excluir o link JavaScript sem substituí-lo por outro link, você removerá o comportamento.
Para ver quais tags você pode usar com um determinado evento em um determinado navegador, pesquise pelo evento em um dos arquivos na pasta Dreamweaver/Configuration/Behaviors/Events.
Aplicar um comportamento
Você pode anexar comportamentos ao documento inteiro (ou seja, à tag <body>) ou a links, imagens, elementos de formulário e vários outros elementos HTML.
O navegador de destino que você seleciona determina quais eventos são compatíveis com um determinado elemento.
Você pode especificar mais de uma ação para cada evento. As ações ocorrem na ordem em que estão listadas na coluna Ações do painel Comportamentos, mas você pode alterar essa ordem.
Para anexar um comportamento à página inteira, clique na tag <body> no seletor de tags no canto inferior esquerdo da janela Documento.
Escolha Janela > Comportamentos.
Clique no botão Mais (+) e selecione uma ação no
menu Adicionar comportamento.
As ações que estão desativadas no menu não podem ser escolhidas. Eles podem estar esmaecidos porque um objeto obrigatório não existe no documento atual. Por exemplo, a ação Controlar Shockwave ou SWF fica esmaecida se o documento não contém arquivos Shockwave ou SWF.
Quando você seleciona uma ação, uma caixa de diálogo aparece, exibindo parâmetros e instruções para a ação.
Insira os parâmetros da ação e clique em OK.
Todas as ações disponíveis no Dreamweaver funcionam em navegadores modernos. Algumas ações não funcionam em navegadores mais antigos, mas não provocarão erros.
Nota
Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar imagem em uma imagem, será necessário fornecer uma ID. Se você não especificar uma ID para o elemento, o Dreamweaver especificará uma automaticamente.
O evento padrão para acionar a ação aparece na
coluna Eventos.Se este não for o evento acionador que você deseja, selecione
outro evento no menu pop-up Eventos.(Para abrir o menu Eventos,
selecione um evento ou ação no painel Comportamentos e clique na
seta preta apontando para baixo que aparece entre o nome do evento
e o nome da ação.)
Alterar ou excluir comportamentos
Após anexar um comportamento, você pode alterar o evento que aciona a ação, adicionar ou remover ações e alterar parâmetros para ações.
Selecione um objeto com um comportamento anexado.
Escolha Janela > Comportamentos.
Faça as alterações:
Para editar os parâmetros de uma ação, clique duas vezes no nome ou selecione-a e pressione Enter (Windows) ou Return (Macintosh); em seguida, altere os parâmetros na caixa de diálogo e clique em OK.
Para alterar a ordem das ações para um determinado evento, selecione uma ação e clique na seta para cima ou na seta para baixo.Como alternativa, você pode selecionar a ação e recortá-la e colá-la no local desejado entre as outras ações.
Para excluir um comportamento, selecione-o e clique no botão menos (-) ou pressione Delete.
Atualizar um comportamento
Selecione um elemento que tenha o comportamento
anexado a ele.
Escolha Janela > Comportamentos e clique duas vezes no comportamento.
Faça as alterações e clique em OK na caixa de diálogo do comportamento.
Todas as ocorrências desse comportamento na página serão atualizadas. Se outras páginas do seu site têm esse comportamento, você deve atualizá-las página por página.
Baixar e instalar comportamentos de terceiros
Muitas extensões estão disponíveis no site Exchange para Dreamweaver (www.adobe.com/go/dreamweaver_exchange).
Escolha Janela > Comportamentos e
selecione Obter Mais Comportamentos no menu Adicionar Comportamento.
O navegador primário se abre e o site do Exchange é exibido.
Procure os pacotes.
Baixe e instale o pacote de extensão desejado.
Para mais informações, consulte Adicionar e gerenciar extensões no Dreamweaver.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
