Guia do Usuário Cancelar

Aplicar comportamentos internos do JavaScript

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 este tópico para saber como aplicar comportamentos internos do JavaScript no Adobe Dreamweaver.

Usar comportamentos internos

Os comportamentos incluídos no Dreamweaver foram projetados para funcionar nos navegadores modernos. Os comportamentos não funcionam em navegadores mais antigos.

Observação:

As ações do Dreamweaver foram projetadas com cuidado para funcionar no máximo de navegadores possível. Se você remover o código de uma ação do Dreamweaver manualmente ou substituí-lo por seu próprio código, a compatibilidade com vários navegadores pode ser afetada.

Embora as ações do Dreamweaver tenham sido projetadas para maximizar a compatibilidade com vários navegadores, alguns navegadores não suportam JavaScript, e muitas pessoas que navegam na Internet mantêm o JavaScript desativado em seus navegadores. Para obter os melhores resultados em várias plataformas, forneça interfaces alternativas com a tag <noscript> no início e no final para que os usuários sem JavaScript possam usar seu site.

Aplicar o comportamento Chamar JavaScript

O comportamento Chamar JavaScript executa uma função ou linha personalizada do código JavaScript quando ocorre um evento. (Você pode gravar seu próprio script ou usar o código fornecido livremente pelas diversas bibliotecas JavaScript disponíveis na Web.)

  1. Selecione um objeto e escolha Chamar JavaScript no menu Adicionar comportamento do painel Comportamentos.
  2. Digite o JavaScript exato a ser executado ou digite o nome de uma função.

    Por exemplo, para criar um botão Voltar, você pode digitar if (history.length > 0){history.back()}. Se você tiver incluído o código em uma função, digite somente o nome da função (por exemplo, hGoBack()).

  3. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Alterar propriedade

Use o comportamento Alterar propriedade para alterar o valor de uma propriedade de um objeto (por exemplo, a cor de fundo de um div ou a ação de um formulário).

Observação:

Use esse comportamento somente se você estiver familiarizado com HTML e JavaScript.

  1. Selecione um objeto e escolha Alterar propriedade no menu Adicionar comportamento do painel Comportamentos.
  2. No menu Tipo de elemento, selecione um tipo de elemento para exibir todos os elementos identificados do tipo em questão.
  3. Selecione um elemento no menu ID do elemento.
  4. Selecione uma propriedade no menu Propriedade ou insira o nome da propriedade na caixa.
  5. Insira o novo valor da nova propriedade no campo Novo valor.
  6. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Verificar plug-in

Use o comportamento Verificar plug-in para enviar os visitantes para páginas diferentes, dependendo da instalação do plug-in especificado. Por exemplo, você pode direcionar os visitantes para uma página caso eles tenham o Shockwave e para outra página caso não tenham.

Observação:

Você não pode detectar plug-ins específicos no Internet Explorer usando o JavaScript. No entanto, selecione Flash ou Director para adicionar o código VBScript adequado à sua página a fim de detectar esses plug‑ins no Internet Explorer no Windows. A detecção de plug-ins não pode ser feita no Internet Explorer no Mac OS.

  1. Selecione um objeto e escolha Verificar plug-in no menu Adicionar comportamento do painel Comportamentos.
  2. Selecione um plug‑in no menu Plug-in ou clique em Inserir e digite o nome exato do plug-in na caixa adjacente.

    Você deve usar o nome exato do plug-in conforme especificado em negrito na página Sobre plug‑ins no Netscape Navigator. (No Windows, selecione o comando Ajuda > Sobre plug‑ins do Navigator; no Mac OS, selecione Sobre plug‑ins no menu Apple.)

  3. Na caixa Se localizado, vá para URL, especifique uma URL para os visitantes que têm o plug‑in.

    Se for um URL remoto, inclua o prefixo http:// no endereço. Se o campo ficar em branco, os visitantes permanecerão na mesma página.

  4. Na caixa Do contrário, vá para URL, especifique um URL alternativo para os visitantes que não têm o plug‑in. Se o campo ficar em branco, os visitantes permanecerão na mesma página.
  5. Especifique o que deve ser feito caso não seja possível fazer a detecção de plug-ins. Por padrão, quando a detecção não é permitida, o visitante é enviado para o URL listado na caixa Do contrário. Para enviar o visitante para o primeiro URL (Se localizado), selecione a opção Sempre ir para o primeiro URL se a detecção não for possível. Quando selecionada, essa opção “supõe que o visitante tem o plug‑in, a não ser que o navegador indique explicitamente que o plug-in não está presente”. Em geral, selecione essa opção se o conteúdo do plug-in fizer parte de sua página; caso contrário, deixe-a desmarcada.
    Observação:

    Essa opção aplica-se somente ao Internet Explorer; o Netscape Navigator sempre pode detectar plug‑ins.

  6. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Arrastar elemento AP

O comportamento Arrastar elemento AP permite que o visitante arraste um elemento absolutamente posicionado (AP). Use esse comportamento para criar quebra-cabeças, controles deslizantes e outros elementos de interface móveis.

Você pode especificar a direção em que o visitante pode arrastar o elemento AP (na horizontal, na vertical ou em qualquer direção), um destino para onde o visitante deve arrastar o elemento AP, se é necessário encaixar o elemento AP no destino caso esteja a um determinado número de pixels do destino, o que deve ser feito quando o elemento AP toca no destino e muito mais.

Como o comportamento Arrastar elemento AP deve ser chamado antes de o visitante poder arrastar o elemento AP, anexe esse comportamento ao objeto body (com o evento onLoad).

  1. Selecione Inserir > Objetos de layout > PA Div ou clique no botão Desenhar PA Div no painel Inserir e desenhe um PA Div na Visualização de design da janela Documento.
  2. Clique em <body> no seletor de tags no canto inferior esquerdo da janela Documento.
  3. Selecione Arrastar elemento PA no menu Adicionar comportamento do painel Comportamentos.

    Se a opção Arrastar elemento AP não estiver disponível, você provavelmente tem um elemento AP selecionado.

  4. No menu pop-up Elemento AP, selecione o elemento AP.
  5. Selecione Restrito ou Irrestrito no menu pop-up Movimento.

    O movimento irrestrito é apropriado para quebra-cabeças e outros jogos de arrastar e soltar. Para controles deslizantes e cenários móveis, como gavetas de arquivo, cortinas e minivenezianas, selecione o movimento restrito.

  6. Para o movimento restrito, insira os valores (em pixels) nas caixas Para cima, Para baixo, Para a esquerda e Para a direita.

    Os valores estão relacionados à posição inicial do elemento AP. Para restringir o movimento em uma região retangular, insira valores positivos nas quatro caixas. Para permitir somente o movimento vertical, insira valores positivos em Para cima e Para baixo e 0 em Para a esquerda e Para a direita. Para permitir somente o movimento horizontal, insira valores positivos em Para a esquerda e Para a direita e 0 em Para cima e Para baixo.

  7. Insira valores (em pixels) para o destino de liberação nas caixas Para a esquerda e Superior.

    O destino de liberação é o ponto para o qual o visitante deve arrastar o elemento AP. Um elemento AP atinge o destino de liberação quando suas coordenadas esquerda e superior correspondem aos valores inseridos nas caixas Para a esquerda e Superior. Os valores estão relacionados ao canto superior esquerdo da janela do navegador. Clique em Obter posição atual para preencher automaticamente as caixas de texto com a posição atual do elemento AP.

  8. Insira um valor (em pixels) na caixa Encaixar se estiver em para determinar a que distância o visitante deve estar do destino de liberação antes de encaixar o elemento AP no destino.

    Valores maiores facilitam a localização do destino de liberação.

  9. Para quebra-cabeças simples e manipulação de cenários, você pode parar aqui. Para definir a alça de arrastamento do elemento AP, acompanhe o movimento do elemento enquanto está sendo arrastado, acione uma ação quando o elemento AP for solto e clique na aba Avançado.
  10. Para especificar se o visitante deve clicar em uma área específica do elemento AP para arrastá-lo, selecione Área dentro do elemento no menu Alça de arrastamento; em seguida, insira as coordenadas esquerda e superior e a largura e a altura da alça de arrastamento.

    Essa opção é útil quando a imagem dentro do elemento AP contém um elemento que sugere o arrastamento, como uma barra de título ou o puxador de uma gaveta. Não defina essa opção se desejar que o visitante clique em qualquer lugar no elemento AP para arrastá-lo.

  11. Selecione todas as opções de Quando estiver arrastando que deseja usar:

    • Selecione Trazer elemento para frente se for necessário mover o elemento AP para frente da ordem de empilhamento enquanto estiver sendo arrastado. Se você selecionar essa opção, use o menu pop-up para determinar se o elemento AP deve ficar na frente ou ser restaurado para sua posição original na ordem de empilhamento.

    • Insira o código JavaScript ou o nome de uma função (por exemplo, monitorAPelement()) na caixa Chamar JavaScript para executar repetidas vezes o código ou a função enquanto o elemento AP estiver sendo arrastado. Por exemplo, você pode gravar uma função que monitora as coordenadas do elemento AP e exibe dicas como “está ficando quente” ou “está bem longe do destino de liberação” em uma caixa de texto.

  12. Insira o código JavaScript ou o nome de uma função (por exemplo, evaluateAPelementPos()) na segunda caixa Chamar JavaScript para executar o código ou a função quando o elemento AP for solto. Selecione Somente se encaixado caso seja necessário executar o JavaScript somente se o elemento AP tiver chegado ao destino de liberação.
  13. Clique em OK e verifique se o evento padrão está correto.

Coletar informações sobre o elemento AP arrastável

Quando você anexa o comportamento Arrastar elemento AP para um objeto, o Dreamweaver insere a função MM_dragLayer() na seção head do documento. (A função preserva a convenção de nomenclatura antiga dos elementos PA [isto é, “Camada”], de modo que as camadas criadas nas versões anteriores do Dreamweaver ainda poderão ser editadas.) Além de registrar o elemento AP como arrastável, essa função define três propriedades para cada elemento AP arrastável (MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED), que podem ser usadas em suas próprias funções JavaScript para determinar a posição horizontal relativa do elemento AP, a posição vertical relativa do elemento AP e se o elemento AP chegou ao destino de liberação.

Observação:

As informações fornecidas aqui destinam-se somente a programadores experientes de JavaScript.

Por exemplo, a seguinte função exibe o valor da propriedade MM_UPDOWN (a posição vertical atual do elemento AP) em um campo de formulário chamado curPosField. (Os campos de formulário são úteis para exibir informações atualizadas continuamente porque são dinâmicos, isto é, você pode alterar seu conteúdo depois do carregamento da página.)

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulário, você pode usar esses valores de diversas outras maneiras. Por exemplo, é possível gravar uma função que exibe uma mensagem no campo de formulário dependendo da proximidade do valor com relação à zona de liberação ou chamar outra função para mostrar ou ocultar um elemento AP dependendo do valor.

É especialmente útil para ler a propriedade MM_SNAPPED quando existem vários elementos PA na página e todos devem atingir seus destinos antes que o visitante possa passar para a próxima página ou tarefa. Por exemplo, você pode gravar uma função para contar quantos elementos PA têm um valor MM_SNAPPED igual a true e chamá-la sempre que um elemento PA for solto. Quando a contagem de encaixes atingir o número desejado, você pode direcionar o visitante para a próxima página ou exibir uma mensagem de êxito.

Aplicar o comportamento Ir para URL

O comportamento Ir para URL abre uma nova página na janela atual ou no quadro especificado. Esse comportamento é útil para alterar o conteúdo de dois ou mais quadros com um clique.

  1. Selecione um objeto e escolha Ir para URL no menu Adicionar comportamento do painel Comportamentos.
  2. Selecione um destino para o URL na lista Abrir em.

    A lista Abrir em relaciona automaticamente os nomes de todos os quadros do conjunto de molduras atual, bem como da janela principal. Se não houver nenhum quadro, a janela principal será a única opção.

    Observação:

    Esse comportamento pode produzir resultados inesperados se algum quadro for superior, estiver em branco, for gerado automaticamente ou pai. Às vezes, os navegadores trocam incorretamente esses nomes por nomes de destino reservados.

  3. Clique em Procurar para selecionar um documento a ser aberto ou insira o caminho e o nome de arquivo do documento na caixa URL.
  4. Repita as etapas 2 e 3 para abrir documentos adicionais em outros quadros.
  5. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Menu de salto

Quando você cria um menu de salto usando o comando Inserir > Formulário > Menu de salto, o Dreamweaver cria um objeto de menu e anexa o comportamento Menu de salto (ou Menu de salto Ir) a esse objeto. Normalmente, não é necessário anexar o comportamento Menu de salto a um objeto de forma manual.

Você pode editar um menu de salto existente de duas maneiras:

  • Você pode editar e reorganizar itens de menu, alterar os arquivos a serem ignorados e alterar a janela em que esses arquivos devem ser abertos clicando duas vezes em um comportamento Menu de salto existente no painel Comportamentos.

  • Você pode editar os itens no menu, assim como faria em qualquer outro menu, selecionando o menu e usando o botão Listar valores do Inspetor de propriedades.

  1. Crie um objeto de menu de salto se ainda não houver um no documento.
  2. Selecione o objeto e escolha Menu de salto no menu Adicionar comportamento do painel Comportamentos.
  3. Faça as alterações desejadas na caixa de diálogo Menu de salto e clique em OK.

Aplicar o comportamento Menu de salto Ir

O comportamento Menu de salto Ir tem uma relação próxima com o comportamento Menu de salto; nesse caso, um botão Ir é associado a um menu de salto. (Antes de usar esse comportamento, um menu de salto já deve existir no documento.) Clique no botão Ir para abrir o link que está selecionado no menu de salto. Um menu de salto normalmente não precisa de um botão Ir; a seleção de um item em um menu de salto, em geral, carrega um URL sem exigir mais nenhuma ação do usuário. No entanto, se o visitante selecionar o mesmo item que já está escolhido no menu de salto, o salto não ocorrerá. Em geral, isso não importa, mas se o menu de salto aparecer em um quadro e seus itens estiverem vinculados a páginas de outros quadros, um botão Ir será útil para permitir que os visitantes selecionem novamente um item que já está selecionado no menu de salto.

Observação:

Ao ser usado com um menu de salto, o botão Ir se transforma no único mecanismo que “salta” para levar o usuário ao URL associado à seleção do menu. A seleção de um item de menu no menu de salto não redireciona mais o usuário automaticamente para outra página ou quadro.

  1. Selecione um objeto a ser usado como botão Ir (geralmente, uma imagem de botão) e escolha Menu de salto Ir no menu Adicionar comportamento do painel Comportamentos.
  2. No menu Escolher menu de salto, selecione um menu para o botão Ir a ser ativado e clique em OK.

Aplicar o comportamento Abrir janela do navegador

Use o comportamento Abrir janela do navegador para abrir uma página em uma nova janela. Você pode especificar as propriedades da nova janela, incluindo o tamanho, seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.) e o nome. Por exemplo, você pode usar esse comportamento para abrir uma imagem maior em uma janela separada quando o visitante clicar em uma imagem em miniatura; com esse comportamento, a nova janela pode ficar com o tamanho exato da imagem.

Se nenhum atributo for especificado, a janela será aberta no tamanho e com os atributos da janela que acionou sua abertura. A especificação de qualquer atributo para a janela desativa automaticamente todos os outros atributos que não estão explicitamente ativados. Por exemplo, se você não definir nenhum atributo, a janela pode abrir na resolução de 1024 x 768 pixels e ter uma barra de navegação (mostrando os botões Voltar, Encaminhar, Início e Recarregar), a barra de ferramentas do local (mostrando o URL), a barra de status (mostrando mensagens de status na parte inferior) e a barra de menus (mostrando Arquivo, Editar, Exibir e outros menus). Se você definir explicitamente a largura como 640 e a altura como 480, e não definir nenhum outro atributo, a janela abrirá na resolução de 640 x 480 pixels, sem barras de ferramentas.

  1. Selecione um objeto e escolha Abrir janela do navegador no menu Adicionar comportamento do painel Comportamentos.
  2. Clique em Procurar para selecionar um arquivo ou insira o URL que deseja exibir.
  3. Defina as opções para a largura e a altura da janela (em pixels) e para a incorporação de várias barras de ferramentas, barras de rolagem, alças de redimensionamento e o aspecto. Nomeie a janela (não use nenhum espaço ou caractere especial) se desejar que ela seja o destino dos links ou se desejar controlá-la com JavaScript.
  4. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Mensagem pop-up

O comportamento Mensagem pop-up exibe um alerta JavaScript com a mensagem especificada. Como os alertas JavaScript têm somente um botão (OK), use esse comportamento para fornecer informações ao usuário em vez de apresentar opções de escolha.

Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

The URL for this page is {window.location}, and today is {new Date()}.
Observação:

O navegador controla a aparência do alerta. Se desejar ter mais controle sobre a aparência, avalie a possibilidade de usar o comportamento Abrir janela do navegador.

  1. Selecione um objeto e escolha Mensagem pop-up no menu Adicionar comportamento do painel Comportamentos.
  2. Insira sua mensagem na caixa Mensagem.
  3. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Pré-carregar imagens

O comportamento Pré-carregar imagens diminui o tempo de exibição armazenando em cache as imagens que não são mostradas quando a primeira página aparece (por exemplo, imagens que serão trocadas com comportamentos ou scripts).

Observação:

O comportamento Trocar imagem pré-carrega automaticamente todas as imagens realçadas quando você seleciona a opção Pré-carregar imagens na caixa de diálogo Trocar imagem; desse modo, não é necessário adicionar o comportamento Pré-carregar imagens manualmente ao usar a opção Trocar imagem.

  1. Selecione um objeto e escolha Pré-carregar imagens no menu Adicionar comportamento do painel Comportamentos.
  2. Clique em Procurar para selecionar um arquivo de imagem ou insira o caminho e o nome de arquivo de uma imagem na caixa Arquivo de origem de imagem.
  3. Clique no botão de adição (+), na parte superior da caixa de diálogo, para adicionar a imagem à lista Pré-carregar imagens.
  4. Repita as etapas 2 e 3 para todas as imagens restantes que deseja pré-carregar na página atual.
  5. Para remover uma imagem da lista Pré-carregar imagens, selecione-a e clique no botão de subtração (-).
  6. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Definir texto do quadro

O comportamento Definir texto do quadro permite definir dinamicamente o texto de um quadro, substituindo o conteúdo e a formatação de um quadro pelo conteúdo especificado. O conteúdo pode incluir qualquer código HTML válido. Use esse comportamento para exibir informações dinamicamente.

Embora o comportamento Definir texto do quadro substitua a formatação de um quadro, você pode selecionar Preservar cor de fundo para preservar os atributos de cor de fundo da página e do texto.

Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selecione um objeto e escolha Definir texto > Definir texto do quadro no menu Adicionar comportamento do painel Comportamentos.
  2. Na caixa de diálogo Definir texto do quadro, selecione o quadro de destino no menu Quadro.
  3. Clique no botão Obter HTML atual para copiar o conteúdo atual da seção body do quadro de destino.
  4. Insira uma mensagem na caixa Novo HTML.
  5. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Definir texto do recipiente

O comportamento Definir texto do recipiente substitui o conteúdo e a formatação de um recipiente existente (isto é, qualquer elemento que possa conter texto ou outros elementos) em uma página pelo conteúdo especificado. O conteúdo pode incluir qualquer código-fonte HTML válido.

Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selecione um objeto e, em seguida, Definir texto > Definir texto do contêiner no menu Adicionar comportamento do painel Comportamentos.
  2. Na caixa de diálogo Definir texto do recipiente, use o menu Recipiente para selecionar o elemento de destino.
  3. Insira o novo texto ou HTML na caixa Novo HTML.
  4. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Definir texto da barra de status

O comportamento Definir texto da barra de status mostra uma mensagem na barra de status no canto inferior esquerdo da janela do navegador. Por exemplo, você pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado. Os visitantes geralmente ignoram ou desconsideram as mensagens da barra de status (nem todos os navegadores dão suporte completo à definição do texto da barra de status); se sua mensagem for importante, avalie a possibilidade de exibi-la como uma mensagem pop-up ou como o texto de um elemento AP.

Observação:

Se você usar o comportamento Definir texto da barra de status no Dreamweaver, o texto da barra de status do navegador não será alterado necessariamente porque alguns navegadores precisam de ajustes especiais ao alterar o texto da barra de status. O Firefox, por exemplo, requer a alteração de uma opção avançada que permite ao JavaScript alterar o texto da barra de status. Para obter mais informações, consulte a documentação do navegador.

Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Selecione um objeto e escolha Definir texto > Definir texto da barra de status no menu Adicionar comportamento do painel Comportamentos.
  2. Na caixa de diálogo Definir texto da barra de status, digite sua mensagem na caixa Mensagem.

    Seja objetivo. O navegador trunca a mensagem se ela não cabe na barra de status.

  3. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Definir texto do campo de texto

O comportamento Definir texto do campo de texto substitui o conteúdo do campo de texto de um formulário pelo conteúdo especificado.

Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar uma expressão JavaScript, coloque-a entre chaves ({}). Para exibir uma chave, coloque uma barra antes (\{).

Exemplo:

The URL for this page is {window.location}, and today is {new Date()}.

Criar um campo de texto nomeado

  1. Selecione Inserir > Formulário > Campo de texto.

    Se o Dreamweaver solicitar a adição de uma tag de formulário, clique em Sim.

  2. No Inspetor de propriedades, digite um nome para o campo de texto. Verifique se o nome é exclusivo na página (não use o mesmo nome para vários elementos da mesma página, mesmo se estiverem em formulários diferentes).

Aplicar Definir texto do campo de texto

  1. Selecione um campo de texto e escolha Definir texto > Definir texto do campo no menu Adicionar comportamento do painel Comportamentos.
  2. Selecione o campo de texto de destino no menu Campo de texto e insira o novo texto.
  3. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Mostrar/ocultar elementos

O comportamento Mostrar/ocultar elementos mostra, oculta ou restaura a visibilidade padrão de um ou mais elementos de página. Esse comportamento é útil para exibir informações à medida que o usuário interage com a página. Por exemplo, conforme o usuário move o ponteiro pela imagem de uma planta, você pode mostrar um elemento de página fornecendo detalhes sobre a época de crescimento e a região da planta, a quantidade de sol necessária, quanto a planta crescerá e assim por diante. O comportamento mostra ou oculta somente o elemento relevante; na verdade, ele não remove o elemento do fluxo da página quando está oculto.

  1. Selecione um objeto e selecione Mostrar/ocultar elementos no menu Adicionar comportamento do painel Comportamentos.

    Se a opção Mostrar/ocultar elementos não estiver disponível, você provavelmente tem um elemento PA selecionado. Como os elementos PA não aceitam eventos nos navegadores 4.0, selecione um objeto diferente, como a tag <body> ou uma tag link (<a>).

  2. Na lista Elementos, selecione o elemento que deseja mostrar ou ocultar e clique em Mostrar, Ocultar ou Restaurar (para restaurar a visibilidade padrão).
  3. Repita a etapa 2 para todos os demais elementos cuja visibilidade deseja alterar. (Você pode alterar a visibilidade de vários elementos com um único comportamento.)
  4. Clique em OK e verifique se o evento padrão está correto.

Esse comportamento está obsoleto a partir do Dreamweaver CS5.

Aplicar o comportamento Trocar imagem

O comportamento Trocar imagem troca uma imagem por outra alterando o atributo src da tag <img>. Use esse comportamento para criar sobreposições de botão ou outros efeitos de imagem (incluindo a troca de mais de uma imagem ao mesmo tempo). A inserção de uma imagem de sobreposição adiciona automaticamente o comportamento Trocar imagem à sua página.

Observação:

Como somente o atributo src é afetado por esse comportamento, você deve trocar uma imagem que tenha as mesmas dimensões (altura e largura) da original. Caso contrário, a imagem trocada é reduzida ou ampliada para ficar com as dimensões da imagem original.

Existe também o comportamento Restaurar imagem trocada, que restaura o último conjunto de imagens trocadas para os arquivos de origem anteriores. Esse comportamento é adicionado automaticamente sempre que o comportamento Trocar imagem é anexado a um objeto; se a opção Restaurar ficar selecionada durante a adição de Trocar imagem, nunca selecione o comportamento Restaurar imagem trocada manualmente.

  1. Selecione Inserir > Imagem ou clique no botão Imagem, no painel Inserir, para inserir uma imagem.
  2. No Inspetor de propriedades, insira um nome para a imagem na caixa de texto à esquerda.

    Não é necessário nomear imagens; elas são nomeadas automaticamente quando você anexa o comportamento a um objeto. No entanto, é mais fácil diferenciar imagens na caixa de diálogo Trocar imagem nomeando todas as imagens com antecedência.

  3. Repita as etapas 1 e 2 para inserir imagens adicionais.
  4. Selecione um objeto (geralmente, a imagem que será trocada) e escolha Trocar imagem no menu Adicionar comportamento do painel Comportamentos.
  5. Na lista Imagens, selecione a imagem cuja origem deseja alterar.
  6. Clique em Procurar para selecionar o novo arquivo de imagem ou insira o caminho e o nome de arquivo da nova imagem na caixa Definir origem como.
  7. Repita as etapas 5 e 6 para qualquer imagem adicional que deseja alterar. Use a mesma ação Trocar imagem para todas as imagens que deseja alterar de uma vez; caso contrário, a ação Restaurar imagem trocada correspondente não restaurará todas as imagens.
  8. Selecione a opção Pré-carregar imagens para armazenar em cache as novas imagens quando a página for carregada.

    Isso evita atrasos de download quando as imagens precisarem aparecer.

  9. Clique em OK e verifique se o evento padrão está correto.

Aplicar o comportamento Validar formulário

O comportamento Validar formulário verifica o conteúdo dos campos de texto especificados para assegurar que o usuário inseriu o tipo de dados correto. Anexe esse comportamento a campos de texto individuais com o evento onBlur para validar os campos à medida que o usuário preenche o formulário ou anexe-o ao formulário com o evento onSubmit para avaliar vários campos de texto ao mesmo tempo quando o usuário clicar no botão Enviar. Anexar esse comportamento a um formulário impede o envio de formulários com dados inválidos.

  1. Selecione Inserir > Formulário ou clique no botão Formulário, no painel Inserir, para inserir um formulário.
  2. Selecione Inserir > Formulário > Campo de texto ou clique no botão Campo de texto no painel Inserir para inserir um campo de texto.

    Repita essa etapa para inserir campos de texto adicionais.

  3. Escolha um método de validação:

    • Para validar campos individuais à medida que o usuário preenche o formulário, selecione um campo de texto e selecione Janela > Comportamentos.

    • Para validar vários campos quando o usuário envia o formulário, clique na tag <form> no seletor de tags, no canto inferior esquerdo da janela Documento, e escolha Janela > Comportamentos.

  4. Selecione Validar formulário no menu Adicionar comportamento.
  5. Siga um destes procedimentos:

    • Se estiver validando campos individuais, selecione o mesmo campo selecionado na janela Documento na lista Campos.

    • Se estiver validando vários campos, selecione um campo de texto na lista Campos.

  6. Selecione a opção Obrigatório caso seja necessário inserir alguns dados no campo.
  7. Selecione uma das seguintes opções de Aceitar:

    Usar Tudo

    Verifica se um campo obrigatório contém dados; os dados podem ser de qualquer tipo. 

    Usar Endereço de e‑mail

    Verifica se o campo contém um símbolo @.

    Usar Número

    Verifica se o campo contém somente números.

    Usar Número de

    Verifica se o campo contém um número de um intervalo específico.

  8. Se você tiver optado por validar vários campos, repita as etapas 6 e 7 para todos os campos adicionais que desejar validar.
  9. Clique em OK.

    Se você estiver validando vários campos quando o usuário enviar o relatório, o evento onSubmit aparecerá automaticamente no menu Eventos.

  10. Se você estiver validando campos individuais, verifique se o evento padrão é onBlur ou onChange. Caso contrário, selecione um desses eventos.

    Os dois eventos acionam o comportamento Validar formulário quando o usuário sai do campo. A diferença é que onBlur ocorre independentemente de o usuário ter inserido algum dado no campo e onChange ocorre somente se o usuário tiver alterado o conteúdo do campo. O evento onBlur é recomendado para campos obrigatórios.

Artigos relacionados

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