Guia do Usuário Cancelar

Editar código na Visualização de design

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 usar o Inspetor de propriedades para editar código na Visualização de design no Adobe Dreamweaver.

O Dreamweaver permite criar e editar visualmente páginas da Web sem que você precise se preocupar com o código-fonte subjacente. No entanto, haverá momentos em que provavelmente será necessário editar o código para ter maior controle ou para solucionar problemas da página da Web. O Dreamweaver permite que você edite alguns códigos enquanto trabalha na Visualização de design.

Esta seção foi projetada para pessoas que preferem trabalhar na Visualização de design, mas que também desejam acessar rapidamente o código.

Selecionar tags-filha na Visualização de design

Se você selecionar um objeto na Visualização de design que contém tags-filha, por exemplo, uma tabela HTML, poderá selecionar rapidamente a primeira tag-filha desse objeto clicando em Editar > Selecionar filho.

Observação:

Esse comando só estará ativado na Visualização de design.

Por exemplo, a tag <table> normalmente tem tags-filha <tr>. Se você selecionar uma tag <table> no seletor de tags, poderá selecionar a primeira linha na tabela clicando em Editar > Selecionar filho. O Dreamweaver selecionará a primeira tag <tr> no seletor de tags. Como a tag <tr> possui tags-filha, chamadas tags <td>, se você clicar novamente em Editar > Selecionar filho, a primeira célula da tabela será selecionada.

Edição do código com o Inspetor de propriedades

Você pode usar o Inspetor de propriedades para inspecionar e editar os atributos de texto ou de objetos na página. As propriedades mostradas no Inspetor de propriedades geralmente correspondem aos atributos das tags. A alteração de uma propriedade no Inspetor de propriedades normalmente tem o mesmo efeito que alterar o atributo correspondente na Visualização de código.

Observação:

O Inspetor de tags e o Inspetor de propriedades permitem que você exiba e edite os atributos de uma tag. O Inspetor de tags permite que você exiba e edite cada atributo associado a uma tag específica. O Inspetor de propriedades mostra somente os atributos mais comuns, mas fornece um conjunto mais sofisticado de controles para alterar os valores desses atributos, e permite editar determinados objetos (como colunas de tabela) que não correspondem a tags específicas.

  1. Clique no texto ou selecione um objeto na página.

    O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades não estiver visível, selecione Janela > Propriedades.

  2. Faça as alterações nos atributos no Inspetor de propriedades.

Edição do CFML com o Inspetor de propriedades

Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualização de design.

  1. No Inspetor de propriedades, clique no botão Atributos para editar os atributos da tag ou adicionar novos.
  2. Se a tag tiver conteúdo entre suas tags de abertura e finalização, clique no botão Conteúdo para editar o conteúdo.

    O botão Conteúdo aparecerá somente se a tag selecionada não for uma tag vazia (ou seja, se ela contiver uma tag de abertura e uma tag de finalização).

  3. Se a tag contiver uma expressão condicional, faça as alterações nela na caixa Expressão.

Visão geral do Quick Tag Editor

Use o Quick Tag Editor para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualização de design.

Se você digitar um HTML inválido no Quick Tag Editor, o Dreamweaver tentará corrigi-lo para você inserindo aspas de fechamento e colchetes angulares de fechamento quando necessário.

Para definir as opções do Quick Tag Editor, abra o editor pressionando Control-T (Windows) ou Command-T (Macintosh).

O Quick Tag Editor possui três modos:

  • O modo Inserir HTML é usado para inserir um novo código HTML.
  • O modo Editar tag é usado para editar uma tag existente.

  • O modo Inserir HTML é usado para inserir um novo código HTML.

  • O modo Editar tag é usado para editar uma tag existente.

  • O modo Colocar tag ao redor é usado para colocar uma nova tag ao redor de uma seleção atual.

Observação:

O modo em que o Quick Tag Editor é aberto depende da seleção atual na Visualização de design.

Nos três modos, o procedimento básico para uso do Quick Tag Editor é o mesmo: abra o editor, digite ou edite tags e atributos, e feche o editor.

Você pode percorrer os três modos pressionando Control+T (Windows) ou Command+T (Macintosh) enquanto o Quick Tag Editor está ativo.  

Edição de código com o Quick Tag Editor

Use o Quick Tag Editor (Editar > Quick Tag Editor) para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualização de design.

Inserção de uma tag HTML

  1. Na Visualização de design, clique na página para colocar o ponto de inserção no local em que você deseja inserir o código.
  2. Pressione Control+T (Windows) ou Command+T (Macintosh).

    O Quick Tag Editor é aberto no modo Inserir HTML.

    Quick Tag Editor no modo Inserir HTML
    Quick Tag Editor no modo Inserir HTML

  3. Digite a tag HTML e pressione Enter.

    A tag é inserida no código, juntamente com uma tag de finalização correspondente, se aplicável.

  4. Pressione Escape para sair sem fazer alterações.

Edição de uma tag HTML

  1. Selecione um objeto na Visualização de design.

    Você também pode selecionar a tag que deseja editar no seletor de tags na parte inferior da janela Documento. Para obter mais informações, consulte Edição de código com o seletor de tags.

  2. Pressione Control+T (Windows) ou Command+T (Macintosh).

    O Quick Tag Editor é aberto no modo Editar tag.

  3. Digite novos atributos, edite atributos existentes ou edite o nome da tag.
  4. Pressione Tab para mover-se de um atributo para o seguinte; pressione Shift+Tab para retornar.
    Observação:

    Por padrão, as alterações são aplicadas ao documento quando você pressiona Tab ou Shift+Tab.

  5. Para fechar o Quick Tag Editor e aplicar todas as alterações, pressione Enter.
  6. Para sair sem fazer nenhuma outra alteração, pressione Escape.

Delimitação da seleção atual com tags HTML

  1. Selecione o texto sem formatação ou um objeto na Visualização de design.
    Observação:

    Se você selecionar texto ou um objeto que inclua uma tag HTML de abertura ou finalização, o Quick Tag Editor será aberto no modo Editar tag, e não no modo Colocar tag ao redor.

  2. Pressione Control+T (Windows) ou Command+T (Macintosh), ou clique no botão do Quick Tag Editor no Inspetor de propriedades.

    O Quick Tag Editor é aberto no modo Colocar tag ao redor.

  3. Digite uma tag de abertura única, como strong, e pressione Enter (Windows) ou Return (Macintosh).

    A tag é inserida no início da seleção atual, enquanto uma tag de finalização correspondente é inserida no final.

  4. Para sair sem fazer nenhuma alteração, pressione Escape.

Uso do menu de dicas no Quick Tag Editor

O Quick Tag Editor inclui um menu de dicas de atributos que lista todos os atributos válidos da tag que você está editando ou inserindo.

Você também pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor.

Para ver um menu de dicas que lista os atributos válidos para uma tag, faça uma pausa rápida enquanto edita um nome de atributo no Quick Tag Editor. Um menu de dicas é exibido, listando todos os atributos válidos para a tag que você está editando.

Da mesma forma, para ver um menu de dicas que lista nomes de tag válidos, faça uma pausa enquanto digita ou edita um nome de tag no Quick Tag Editor.

Observação:

As preferências de dicas de código do Quick Tag Editor são controladas pelas preferências normais de dicas de código. Para obter mais informações, consulte Definição das preferências de dicas de código.

  1. Siga um destes procedimentos:

    • Comece a digitar um nome de tag ou atributo. A seleção no menu Dicas de código vai para o primeiro item que inicia com as letras que você digitou.

    • Use as teclas para cima ou para baixo a fim de selecionar um item.

    • Use a barra de rolagem para localizar um item.

  2. Pressione Enter para inserir o item selecionado ou clique duas vezes em um item para inseri-lo.
  3. Para fechar o menu de dicas sem inserir um item, pressione Escape ou continue digitando.

Desativação do menu de dicas ou alteração do atraso antes que o menu apareça

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Dicas de código.

    A caixa de diálogo Preferências de dicas de código é exibida.

  2. Para desativar o menu de dicas, cancele a seleção da opção Ativar dicas de código.

Edição de código com o seletor de tags

Você pode usar o seletor de tags para selecionar, editar ou remover tags sem sair da Visualização de design. O seletor de tags está localizado na barra de status, na parte inferior da janela Documento, e mostra uma série de tags.

Edição ou exclusão de uma tag

  1. Clique no documento.

    As tags aplicadas no ponto de inserção aparecem no seletor de tags.

  2. No seletor de tags, clique com o botão direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla Control enquanto clica em uma tag (Macintosh).
  3. Para editar uma tag, selecione Editar tag no menu. Faça as alterações no Quick Tag Editor. Para obter mais informações, consulte Edição de código com o Quick Tag Editor.
  4. Para excluir uma tag, selecione Remover tag no menu.

Seleção de um objeto correspondente a uma tag

  1. Clique no documento.

    As tags aplicadas no ponto de inserção aparecem no seletor de tags.

  2. Clique em uma tag no seletor de tags.

    O objeto representado pela tag é selecionado na página.

    Observação:

    Use esta técnica para selecionar linhas (tags tr) ou células (tags td) de tabela individuais.

Gravação e edição de scripts na Visualização de design

Você pode trabalhar com JavaScripts e VBScripts do cliente tanto na Visualização de código quanto na Visualização de design, da seguinte maneira:

  • Grave um script JavaScript ou VBScript para a página sem sair da Visualização de design.

  • Crie um link no documento para um arquivo de script externo sem sair da Visualização de design.

  • Edite um script sem sair da Visualização de design.

    Antes de iniciar, selecione Exibir > Auxílios visuais > Elementos invisíveis para garantir que os marcadores de script aparecerão na página.

Gravação de um script do cliente

  1. Coloque o ponto de inserção no local onde deve ser inserido o script.

  2. Selecione Inserir > HTML > Script.

  3. Selecione o script na janela de seleção do arquivo.

    Observação:

    Não é preciso incluir as tags de script de abertura e finalização.

A tag de script para o arquivo selecionado é inserida no documento.

Edição de um script

  1. Selecione o marcador de script.
  2. No Inspetor de propriedades, clique no botão Editar.

    O script é exibido na caixa de diálogo Propriedades do script.

    Se você estiver vinculado a um arquivo de script externo, o arquivo será aberto na Visualização de código, na qual você poderá fazer as edições.

    Observação:

    Se houver código entre as tags de script, a caixa de diálogo Propriedades do script será aberta, mesmo se também houver um link para um arquivo de script externo.

  3. Na caixa Linguagem, especifique JavaScript ou VBScript como linguagem do script.
  4. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.
  5. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente.

    Clique no ícone de pasta ou no botão Procurar para selecionar um arquivo ou digite o caminho.

  6. Edite o script e clique em OK.

Edição de scripts ASP do servidor na Visualização de design

Use o Inspetor de propriedades do script ASP para inspecionar e modificar scripts ASP do servidor na Visualização de design.

  1. Na Visualização de design, selecione o ícone visual da tag de linguagem de servidor.
  2. No Inspetor de propriedades do script ASP, clique no botão Editar.
  3. Edite o script ASP do servidor e clique em OK.

Edição de scripts na página usando o Inspetor de propriedades

  1. No Inspetor de propriedades, selecione a linguagem de script no menu pop-up Linguagem ou digite um nome de linguagem na caixa Linguagem.
    Observação:

    Se você estiver usando JavaScript e não tiver certeza da versão, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2.

  2. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor.

  3. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no ícone de pasta para selecionar o arquivo ou digite o caminho.

  4. Clique em Editar para modificar o script.

Usar comportamentos JavaScript

Você pode anexar facilmente comportamentos JavaScript (no lado do cliente) nos elementos de página, usando a aba Comportamentos do Inspetor de tags. Para obter mais informações, consulte Aplicação de comportamentos internos do JavaScript Dreamweaver.

Artigos relacionados

 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