Guia do Usuário Cancelar

Usar comportamentos JavaScript (instruções gerais)

Pesquisar
Dreamweaver

Dreamweaver

Abrir aplicativo
  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

Use comportamentos JavaScript no Adobe Dreamweaver para colocar código JavaScript em documentos, de modo 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.

Observação:

O código Comportamento é um código JavaScript do cliente, isto é, um código executado nos navegadores, não nos servidores.

Eventos são mensagens geradas com eficiência pelos navegadores que indicam que um visitante da página realizou alguma ação. Por exemplo, quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; em seguida, o navegador verifica se é necessário chamar algum código JavaScript (especificado na página que está sendo visualizada) em resposta. Eventos diferentes são definidos para diferentes elementos de página; por exemplo, na maioria dos navegadores, os eventos onMouseOver e onClick são associados a links, enquanto onLoad é um evento associado a imagens e à seção body do documento.

Uma ação é um código JavaScript gravado anteriormente para executar uma tarefa, como abrir a janela de um navegador, mostrar ou ocultar um elemento da API, reproduzir um som ou parar um filme do Adobe Shockwave. As ações disponíveis no Dreamweaver são compatíveis com vários navegadores.

Depois de ser anexado a um elemento da página, o comportamento chama a ação (código JavaScript) associada a um evento sempre que esse evento ocorre para o elemento em questão. (Os eventos que podem ser usados para acionar uma determinada ação variam de acordo com o navegador.) Por exemplo, se você anexar a ação Mensagem pop-up a um link e especificar que essa ação será acionada pelo evento onMouseOver, sua mensagem aparecerá sempre que algum usuário colocar um ponteiro nesse link.

Um único evento pode acionar diversas ações diferentes e você pode especificar a ordem de ocorrência dessas ações.

O Dreamweaver fornece aproximadamente 24 ações; ações adicionais podem ser encontradas no site do Exchange em www.adobe.com/go/dreamweaver_exchange_br bem como em sites de desenvolvedores de terceiros. Você pode gravar suas próprias ações se tiver experiência em JavaScript.

Observação:

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 outra parte do código JavaScript.

Visão geral do painel Comportamentos

Você pode usar o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos aos elementos da página (mais especificamente às tags) e para modificar parâmetros de comportamentos anexados anteriormente.

Os comportamentos que já foram anexados ao elemento da página selecionado atualmente aparecem na lista de comportamentos (área principal do painel), relacionados em ordem alfabética por evento. Se diversas 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, isso indica que nenhum comportamento foi anexado ao elemento selecionado atualmente.

O painel Comportamentos tem as seguintes opções:

Mostrar eventos definidos

Exibe somente 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 uma ação é selecionada nessa lista, uma caixa de diálogo aparece na qual é possível especificar parâmetros para a ação. Se todas as ações estiverem esmaecidas, 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

Mova 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 somente para um evento específico; por exemplo, é possível alterar a ordem em que várias ações ocorrem para o evento onLoad, mas todas as ações de onLoad permanecem juntas na lista de comportamentos. Os botões de seta estão 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.)

Observação:

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 podem ser associados às ações listadas no menu Ações (+) do painel Comportamento. Quando um visitante de 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. O Dreamweaver fornece muitas ações comuns que podem ser acionadas por esses eventos.

Para obter os nomes e as descrições dos eventos fornecidos por cada navegador, acesse o Centro de suporte do Dreamweaver em www.adobe.com/go/dreamweaver_support_br.

Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos são suportados por um determinado navegador para um determinado elemento de página, insira o elemento de página no seu documento e anexe um comportamento a ele; em seguida, observe o menu Eventos no painel Comportamentos. (Por padrão, os eventos são da lista de eventos do HTML 4.01 e são suportados pela maioria dos navegadores modernos.) Os eventos podem ser desativados 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, você deverá verificar se o objeto correto está selecionado.

Se você estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecerão entre parênteses. Esses eventos estão disponíveis somente para links. Quando um deles é selecionado, o Dreamweaver coloca uma tag <a> antes e depois 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 desejar transformá-lo em um link real para outra página, mas se o link do JavaScript for excluído sem ser substituído por outro link, o comportamento será removido.

Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento em um dos arquivos da pasta Dreamweaver/Configuração/Comportamentos/Eventos.

Aplicar um comportamento

Você pode anexar comportamentos ao documento inteiro (isto é, à tag <body>) ou a links, imagens, elementos de formulário e diversos outros elementos HTML.

O navegador de destino selecionado determina quais eventos são suportados para um determinado elemento.

É possível 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 essa ordem pode ser alterada.

  1. Selecione um elemento na página, como uma imagem ou um link.

    Para anexar um comportamento à página inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo da janela Documento.

  2. Escolha Janela > Comportamentos.
  3. Clique no botão de adição (+) e selecione uma ação no menu Adicionar comportamento.

    As ações que estão desativadas no menu não podem ser escolhidas. Elas podem estar desativadas porque um objeto necessário não existe no documento atual. Por exemplo, a ação Controlar Shockwave ou SWF estará desativada se o documento não contiver nenhum arquivo SWF ou Shockwave.

    Quando uma ação é selecionada, uma caixa de diálogo aparece exibindo parâmetros e instruções para a ação.

  4. 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.

    Observação:

    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.

  5. O evento padrão que acionará a ação aparece na coluna Eventos. Se não for o evento desejado, selecione outro no menu pop-up Eventos. (Para abrir o menu Eventos, selecione um evento ou uma ação no painel Comportamentos e clique na seta para baixo preta que aparece entre o nome do evento e o nome da ação.)

Alterar ou excluir comportamentos

Depois de anexar um comportamento, você pode alterar o evento que aciona a ação, adicionar ou remover ações e alterar parâmetros de ações.

  1. Selecione um objeto com um comportamento anexado.
  2. Escolha Janela > Comportamentos.
  3. Faça as alterações:

    • Para editar os parâmetros de uma ação, clique duas vezes no nome da ação 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 de um determinado evento, selecione uma ação e clique na seta para cima ou para baixo. Se preferir, selecione a ação e corte e cole-a no local desejado entre as outras ações.

    • Para excluir um comportamento, selecione-o e clique no botão de subtração (–) ou pressione Excluir.

Atualizar um comportamento

  1. Selecione um elemento que apresenta o comportamento anexado a ele.
  2. Escolha Janela > Comportamentos e clique duas vezes no comportamento.
  3. 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 site tiverem esse comportamento, atualize-as uma por uma.

Baixar e instalar comportamentos de terceiros

Muitas extensões estão disponíveis no Exchange para o site do Dreamweaver (www.adobe.com/go/dreamweaver_exchange_br).

  1. Escolha Janela > Comportamentos e selecione Obter mais comportamentos no menu Adicionar comportamento.

    O navegador primário se abre e o site do Exchange é exibido.

  2. Procure os pacotes.
  3. Baixe e instale o pacote de extensão desejado.

Para obter mais informações, consulte Adicionar e gerenciar extensões no Dreamweaver.

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais    |    Política de privacidade online