Guia do Usuário Cancelar

Escrever e editar código

Pesquisar

Última atualização em 13 de fev de 2023

Dreamweaver

Abrir aplicativo

Saiba como trabalhar na Visualização de código e aproveitar ao máximo os recursos de codificação do Dreamweaver.

Você pode trabalhar com código no Dreamweaver de várias maneiras.

Basta abrir um novo arquivo de código usando a caixa de diálogo Novo documento e começar a digitar seu código.

Criar um novo arquivo de código no Dreamweaver

À medida que você digita, dicas de código são exibidas para ajudar você a selecionar o código e evitar erros de digitação. Obtenha ajuda com CSS quando precisar usando os Documentos rápidos do Dreamweaver.

Também é possível inserir o código usando o painel Inserir ou usar atalhos de codificação como abreviações do Emmet.

Se você estiver copiando e colando a mesma parte do código várias vezes, experimente estes recursos para poupar tempo:

O painel Snippets é incrível para criar e inserir snippets de código pré-formatados rapidamente em seu código.
Com o recurso Vários cursores, você pode criar e editar várias linhas de código de uma vez.

O Dreamweaver também fornece um conjunto eficiente de ferramentas de edição que tornam a navegação e as alterações no seu código um processo simples.

Use o recurso localizar e substituir do Dreamweaver para pesquisar tags, atributos ou texto no código.
Use o recurso Navegador de código para navegar no código relacionado dentro ou fora do arquivo atual. Como uma opção ainda melhor, use o recurso Edição rápida para editar o código em arquivos relacionados sem precisar abrir o arquivo em uma nova guia.
Clique com o botão direito no código para exibir um menu de contexto simples e relevante que permite editar o código diretamente.
Use o recurso Quebra automática de tag para quebrar a linha de texto em tags.

Leia para obter mais informações sobre todos esses recursos de código.

Inserir código usando o painel Inserir

Posicione o ponto de inserção no código.
Selecione uma categoria apropriada no painel Inserir.
Clique em um botão no painel Inserir ou selecione um item em um menu pop-up do painel Inserir.

Quando você clica em um ícone, o código é exibido imediatamente na página ou, então, uma caixa de diálogo é exibida solicitando mais informações para concluir o código.

O número e o tipo dos botões disponíveis no painel Inserir variam de acordo com o tipo do documento atual. Isso também depende da visualização que você está usando: Visualização de código ou Visualização de design.

Use o conjunto de ferramentas Emmet com o Dreamweaver

Emmet é um plug-in que permite a codificação e a geração de código HTML e CSS em alta velocidade.

Use abreviações do Emmet na Visualização de código ou no Inspetor de código do Dreamweaver e pressione a tecla Tab para expandir essas abreviações em marcações HTML ou CSS.

As abreviações de HTML se expandem em páginas HTML e PHP. As abreviações de CSS se expandem em páginas CSS, LESS, SASS, SCSS ou na tag de estilo em uma página HTML.

Confira alguns exemplos que demonstram como você pode usar abreviações de Emmet na Visualização de código. Para obter informações detalhadas e referência, consulte a documentação do Emmet.

Observação:

Atualmente o Dreamweaver é compatível com as abreviações do Emmet 1.2.2.

Exemplo 1: inserção de código HTML usando o Emmet

Para adicionar rapidamente o código HTML a uma lista não ordenada com três elementos, abra o arquivo HTML e digite a seguinte abreviação do Emmet na Visualização de código em <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Agora, verifique se o cursor está posicionado logo após a abreviação do Emmet e pressione Tab para expandir a abreviação. Como alternativa, selecione a abreviação inteira e pressione Enter.

A abreviação se expande para o seguinte código:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Exemplo 2: inserção de código CSS usando o Emmet

Para inserir o código CSS para a criação do raio da borda com prefixos do fornecedor, abra o arquivo CSS e digite a seguinte abreviação do Emmet dentro de uma classe:

-bdrs

Ao pressionar Tab, a abreviação se expande para este código:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Trabalhar com comentários de código

Um comentário é um texto descritivo que você insere no código HTML para explicar o código ou fornecer outras informações. O texto do comentário aparece somente na Visualização de código e não é exibido em um navegador.

Adicionar comentários ao seu código

Primeiramente, insira o texto de comentário para adicionar comentários. Em seguida, coloque o cursor do mouse no ponto de inserção e clique no ícone Inserir da barra de ferramentas para abrir o submenu Aplicar comentário.

Também é possível selecionar o texto e transformá-lo em um comentário. O texto selecionado é delimitado em um bloco de comentários.

É possível adicionar comentários usando várias opções de sintaxe. Selecione a sintaxe adequada e o Dreamweaver insere as tags para você. Você apenas precisa inserir seu texto de comentário.

Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou de Cmd+/ (no Mac) para adicionar comentários.

Se você usar o atalho de teclado sem selecionar texto, o comentário será aplicado à linha atual. Se você selecionar o texto e usar o atalho de teclado, o comentário é aplicado ao texto selecionado.

Remover comentários do código

Para remover os comentários de código, selecione o código e clique no ícone Remover comentário na barra de ferramentas. Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou Cmd+/ (no Mac) para remover comentários.

Alternar comentários de código

Para alternar entre exibir e ocultar comentários na Visualização de código, pressione Ctrl+/ no Windows ou Cmd+/ no Mac para o comentário ou para a linha selecionados.

Usar vários cursores para adicionar ou alterar o texto em vários locais

Adicione cursores em diversos locais ou selecione várias seções de código e edite-as simultaneamente usando o recurso vários cursores do Dreamweaver.

Observação:

As operações de copiar e colar e de localizar e substituir não funcionam com vários cursores ou seleções múltiplas.

Adicionar vários cursores ou seleções múltiplas

É possível adicionar vários cursores de maneiras diferentes de acordo com as suas necessidades.

Se você deseja adicionar o mesmo texto em vários locais sem substituir qualquer texto existente, adicione vários cursores.

Se você deseja substituir o texto existente, é possível fazer seleções múltiplas. É possível selecionar linhas de texto contínuas, linhas de texto descontínuas ou ambas e adicionar cursores a elas.

Para adicionar vários cursores ou seleções múltiplas na mesma coluna em linhas contínuas:

Mantenha a tecla Alt pressionada e clique e arraste verticalmente. Ao arrastar verticalmente, os cursores são adicionados a cada linha pela qual você arrasta.

Texto adicionado aos cursores em várias linhas

Para selecionar linhas contínuas de texto, pressione a tecla Alt e arraste diagonalmente. Ao arrastar diagonalmente, o Dreamweaver seleciona um bloco de texto retangular na seleção em questão.

Selecionar e atualizar várias linhas de texto simultaneamente

Observação:

Para adicionar cursores ou incluir várias linhas em uma seleção rapidamente, use o atalho de teclado Shift-Alt-Seta para baixo ou Seta para cima.

Depois de adicionar os cursores (ou selecionar texto) em vários locais, comece a digitar.

Se você tiver vários cursores, o novo texto será adicionado.

Se você tiver conteúdo selecionado em várias linhas de texto, ele será substituído pelo novo texto que você digitar.

Para adicionar vários cursores em colunas diferentes pelas linhas:

Para adicionar cursores às linhas de texto descontínuas, pressione a tecla Ctrl e clique nas linhas nas quais deseja colocar o cursor.

Adicionar cursores a várias linhas de texto descontínuas

Para selecionar linhas de texto descontínuas, selecione um texto e, em seguida, pressione a tecla Ctrl (Windows) ou Cmd (Mac) e continue fazendo outras seleções.

Para adicionar cursores no início/final de cada linha:

Selecione várias linhas de texto e pressione as teclas de seta para a esquerda ou direita.

Para adicionar cursores em linhas precedentes ou subsequentes de uma seleção:

Pressione as teclas Shift+Alt+Seta para cima/baixo e, em seguida, pressione a tecla de seta para a direita.

Para selecionar linhas de texto contínuas e descontínuas:

Você pode combinar essas técnicas para selecionar as linhas de texto contínuas ou as linhas de texto separadas em uma única seleção.

Primeiro, selecione as linhas de texto descontínuas e, em seguida, pressione Ctrl + Alt (no Windows) ou Cmd + Alt (no Mac) e arraste para adicionar um conjunto de linhas às seleções múltiplas existentes.

Selecionar linhas de texto contínuas e descontínuas

Obter ajuda com CSS no Dreamweaver usando os Documentos rápidos

Ao trabalhar com arquivos CSS, LESS ou SCSS no Dreamweaver, você pode obter informações sobre as propriedades ou os valores do CSS rapidamente.

Coloque o cursor do mouse em uma propriedade ou o valor e pressione Ctrl+K, o Dreamweaver abrirá a documentação do projeto do Web Platform Docs.

É possível abrir vários editores inline e visualizadores de documentos simultaneamente.

Para fechar apenas um editor inline ou visualizador de documento, clique no “X” no canto superior esquerdo, ou pressione Escape enquanto os Documentos rápidos tiverem foco.

Para fechar todos os editores e documentos inline, coloque o cursor do mouse no editor de código delimitador principal e pressione Escape.

Analisar o código

O Dreamweaver é compatível com linting (análise estática de código) para HTML, CSS e JavaScript.

O painel Saída exibe os erros e avisos detectados por linting. Para obter mais informações, consulte Linting de código.

Além disso, o Dreamweaver também exibe uma visualização rápida do erro na coluna de número de linha da linha que contém o erro. O número de linha é exibido em vermelho para indicar que contém erros, e quando você passa o mouse sobre ele, uma descrição breve do erro é exibida.

Observação: somente o primeiro erro da linha é exibido. Se a linha contém apenas um aviso, a descrição do aviso é exibida. Se a linha contém um aviso e um erro, apenas a descrição do erro é exibida.

Delimitar o texto do código usando o recurso Quebra automática de tag

Use o recurso Quebra automática de tag na Visualização de código para delimitar linhas de texto específicas com uma tag. Na Visualização de design ou dinâmica, você pode usar esse recurso para delimitar objetos com uma tag.

Selecione o texto na Visualização de código ou um objeto na Visualização de design e pressione Ctrl+T no teclado.

Uma janela pop-up é exibida para que você faça a seleção dentre várias tags HTML.
Selecione uma tag no menu.

Se você estiver trabalhando na Visualização de código, o texto selecionado é delimitado com a tag. Se você estiver trabalhando na Visualização de design ou dinâmica, o objeto selecionado é delimitado com a tag.

Editar código com o menu de contexto Codificação

Use o menu de contexto do Dreamweaver para fazer edições rápidas no código.

Para acessar o menu de contexto, clique com o botão direito (Windows) ou clique com a tecla Command pressionada (no Mac). Você pode usar estas opções:

Edição rápida

Clique nessa opção para entrar no modo Edição rápida. Neste modo, o Dreamweaver fornece o código de contexto específico e as ferramentas inline permitindo que você avance rapidamente à seção do código necessária. Para obter mais informações, consulte Edição rápida.

Recortar, copiar, colar

Clique nessas opções para recortar, copiar e colar textos rapidamente sem precisar acessar o menu Editar.

Localizar e substituir, Localizar próximo, Localizar anterior

Clique nessas opções para localizar e substituir textos rapidamente sem precisar acessar o menu Localizar.

Criar snippet

Use essa opção para criar snippets de código para que você possa salvá-los e reutilizá-los posteriormente. Selecione o código e clique em Criar snippet para que o código selecionado se torne um snippet. Para obter mais informações, consulte Trabalhar com snippets de código.

Abrir arquivo relacionado

Clique com o botão direito sobre um link/tag de script e depois em Abrir arquivo relacionado para abri-lo.

Anexar folha de estilos

Anexe uma folha de estilos CSS existente à sua página.

Seleção

O submenu Seleção inclui várias opções de edição do código que você pode usar em uma parte do código selecionada, como alternar a linha e os comentários em bloco, expandir e recolher a seleção, converter CSS inline em regras, mover regras CSS e imprimir o código.

Navegador de código

Clique nessa opção para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Para obter mais informações, consulte Navegação no código relacionado.

Ferramentas de dicas de código

O submenu Ferramentas de dicas de código coloca o seletor de cores, o navegador do URL e as ferramentas da lista Fonte ao seu alcance.

Recuo dos blocos de código

Ao escrever e editar código na Visualização de código ou no Inspetor de código, você pode alterar o nível de recuo de um bloco ou linha de código selecionado, deslocando-o para a direita ou a esquerda em uma tabulação.

Recuo do bloco de código selecionado

Pressione Tab ou
Pressione Ctrl+] ou
Selecione Editar > Recuar código.

Cancelar recuo do bloco de código selecionado

Pressione Shift+Tab ou
Pressione Ctrl+[ ou
Selecione Editar > Diminuir recuo do código.

Navegação no código relacionado

O Navegador de código exibe uma lista de códigos fonte relacionados a uma determinada seleção de sua página. Use-o para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Quando você clica em um link do Navegador de código, o Dreamweaver abre o arquivo que contém a parte relevante do código. O arquivo aparece na área relacionada a arquivos, se estiver ativada. Se você não tiver arquivos relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento.

Se você clicar em uma regra CSS no Navegador de código, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um arquivo, o Dreamweaver exibe a regra na visualização Dividida. Se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e exibe a regra na área relacionada a arquivos acima do documento principal.

Você pode acessar o Navegador de código das Visualizações de design, de código e dividida assim como pelo Inspetor de código.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de código, consulte www.adobe.com/go/dw10codenav.

Para assistir a um tutorial em vídeo sobre como trabalhar com Visualização dinâmica, arquivos relacionados e o Navegador de código, consulte www.adobe.com/go/lrvid4044_dw.

Abrir o Navegador de código

Alt+clique (Windows) ou Command+Option+Click (Macintosh) em qualquer local da página. O Navegador de código exibe links para o código que afeta a área onde você clicou.

Clique fora do Navegador de código para fechá-lo.

Observação:

Você também pode abrir o Navegador de código clicando no indicador Navegador de código . Esse indicador aparece próximo ao ponto de inserção em sua página quando o mouse fica sem atividade por 2 segundos.

Navegar até o código com o Navegador de código

Abra o Navegador de código na área da página na qual você está interessado.
Clique na parte do código para a qual você deseja ir.

O Navegador de código agrupa os códigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabética. Por exemplo, suponha que as regras CSS em três arquivos externos afetam a seleção em seu documento. Neste caso, o Navegador de código relaciona esses três arquivos, assim como as regras CSS relevantes à seleção. Para CSS relacionados a uma determinada seleção, o Navegador de código funciona como o painel de Estilos CSS no Modo atual.

Observação:

Quando você passa o cursor do mouse por links para as regras CSS, o Navegador de código exibe dicas de ferramentas das propriedades na regra. Essas dicas de ferramentas são úteis quando você quer distinguir entre muitas regras que compartilham o mesmo nome.

Desativar o indicador do Navegador de código

Abra o Navegador de código.
Selecione Desativar indicador no canto inferior direito.
Clique fora do Navegador de código para fechá-lo.

Para reativar o indicador do Navegador de código, Alt+clique (Windows) ou Command+Option+clique (Macintosh) para abrir o Navegador de código e desmarcar a opção Desativar indicador.

Acessar uma função JavaScript ou VBScript

Na Visualização de código e no Inspetor de código, é possível exibir uma lista de todas as funções JavaScript ou VBScript no código e acessar qualquer uma delas.

Exiba o documento na Visualização de código (Exibir > Código) ou no Inspetor de código (Janela > Inspetor de código).
Siga um destes procedimentos:
- Na Visualização de código, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) em qualquer lugar da Visualização de código e selecione o submenu Funções no menu de contexto.
Observação:

O submenu Funções não aparece na Visualização de design.

Qualquer função JavaScript ou VBScript do código aparece no submenu.

Observação:

Para ver as funções em ordem alfabética, mantenha pressionada a tecla Control enquanto clica com o botão direito do mouse (Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualização de código. Em seguida, selecione o submenu Funções.
- No Inspetor de código, clique no botão Navegação de código ({ }) na barra de ferramentas.
Selecione um nome de função para ir até a função no código.

Extrair JavaScript

O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo externo e vincula o arquivo externo ao seu documento. O JSE também pode remover manipuladores de eventos, como onclick e onmouseover do seu código e, então, anexar ao seu documento, de modo não intrusivo, o JavaScript associado a esses manipuladores.

Confira a seguir as limitações do Extrator de JavaScript antes de usá-lo:

O JSE não extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). Há chance de que a externalização desses scripts possa causar resultados imprevistos. Por padrão, o Dreamweaver lista esses scripts na caixa de diálogo Externalizar JavaScript, mas não os seleciona para extração. (Você pode selecioná-los manualmente se desejar).
O JSE não extrai JavaScript de regiões editáveis de arquivos .dwt (modelo do Dreamweaver), regiões não editáveis de instâncias de modelos ou itens de biblioteca do Dreamweaver.
Após extrair JavaScript usando a opção Externalizar JavaScript e Anexar de modo não intrusivo, você não poderá mais editar comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver não pode inspecionar e preencher o painel Comportamentos com comportamentos anexados de modo não intrusivo.
Você não pode desfazer suas alterações após ter fechado a página. No entanto, você pode desfazer alterações, desde que permaneça na mesma seção de edição. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.
É possível que algumas páginas complexas não funcionem conforme o esperado. Esteja atento ao extrair JavaScript de páginas com document.write() no corpo e em variáveis globais.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte a JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript.

Para usar o Extrator de JavaScript:

Abra uma página que contenha JavaScript.
Clique em Ferramentas > Externalizar JavaScript.
Na caixa de diálogo Externalizar JavaScript, edite as seleções padrão, se necessário.
- Selecione Externalizar somente JavaScript se você deseja que o Dreamweaver mova todo JavaScript para um arquivo externo e para fazer referência àquele arquivo no documento atual. Esta opção deixa os manipuladores de evento como onclick e onload no documento e deixa os comportamentos visíveis no painel Comportamentos.
- Selecione Externalizar JavaScript e Anexar de modo não intrusivo se desejar que o Dreamweaver 1) mova JavaScript para um arquivo externo e faça referência a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de execução usando JavaScript. Ao selecionar esta opção, você não poderá mais editar comportamentos no painel Comportamentos.
- Na coluna Editar, desmarque todas as edições que não deseja realizar ou selecione as edições que o Dreamweaver, por padrão, não selecionou.
  Por padrão, o Dreamweaver lista mas não seleciona as seguintes edições:
  
  Blocos de script no cabeçalho do documento que contêm chamadas document.write() ou document.writeln().
  
  Blocos de script no cabeçalho do documento que contêm assinaturas de funções relacionadas ao código de manuseio EOLAS, conhecido por usar document.write().
  
  Blocos de script no corpo do documento, a menos que os blocos contenham apenas construtores de widget do Spry ou de conjunto de dados do Spry.
- O Dreamweaver atribui IDs automaticamente a elementos que ainda não têm IDs. Se não gostar dessas IDs, você poderá alterá-las, editando as caixas de texto de ID.
Clique em OK.

A caixa de diálogo de resumo oferece um resumo de extrações. Revise as extrações e clique em OK.
Salve a página.

O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extraído. O Dreamweaver salva o arquivo SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nível da página da qual você extraiu o JavaScript. Não se esqueça de enviar esses arquivos dependentes para seu servidor Web quando enviar a página original.

Edição rápida

Em vez de desorganizar o ambiente de codificação com muitos painéis e ícones, o modo Edição rápida no Dreamweaver insere o código de contexto específico e as ferramentas inline. Dessa forma, você pode avançar rapidamente à seção do código necessária.

Como entrar no modo Edição rápida:

Clique com o botão direito do mouse em um snippet de código e selecione Edição rápida no menu de contexto exibido.
Pressione Ctrl+E (no Windows) ou Cmd+E (no Mac).

Usar o modo Edição rápida com arquivos HTML

Em um arquivo HTML, coloque o cursor do mouse dentro de uma classe, do atributo id (nome ou valor) ou do nome da tag. A Edição rápida mostra todas as regras CSS, SCSS e LESS no seu projeto que são correspondentes. É possível editar essas regras diretamente inline, sem precisar sair do contexto do arquivo HTML.

Quando várias regras correspondem, navegue entre elas usando a lista à direita (ou use o Alt+Seta para cima/baixo).

Para criar uma regra CSS diretamente do editor inline, clique em Nova regra ou pressione Ctrl+Alt+N (no Windows) ou Cmd+Opt+N (no Mac).

Usar o modo Edição rápida com arquivos JavaScript

Em um arquivo JavaScript, coloque o cursor do mouse no nome de uma função. A Edição rápida mostra o corpo da função, mesmo se estiver presente em outros arquivos com referência a uma instrução necessária.

Usar o modo Edição rápida com arquivos CSS, SCSS, or LESS

Quando você insere a Edição rápida com o cursor do mouse em um valor de cor, é possível acessar o seletor de cores e modificar as cores usadas no código CSS rapidamente.

Acessar o seletor de cores em um arquivo CSS

Em um arquivo CSS, LESS ou SCSS, coloque o cursor do mouse em uma função de momento de transição cubic-bezier() ou steps(). Dessa forma, a Edição rápida exibe um editor gráfico da curva de transição.

As funções de tempo predefinidas ease, ease-in, ease-out, ease-in-out, step-start e step-end também são pontos iniciais válidos.

Manipular uma curva de Bézier usando a Edição rápida

Refatorar código

Refatoração de código é o processo de reestruturação do código de programa sem modificar seu comportamento externo para torná-lo mais legível e facilitar sua manutenção, compreensão e depuração. Ele é usado quando há códigos duplicados, métodos longos ou classes grandes no código. A depuração do código fica mais rápida graças a funções pequenas e substituições apropriadas.

Com a refatoração de JavaScript, você pode renomear funções e definir o escopo de uma variável para chamá-la no bloco de código no qual ela está definida.

Observação:

A refatoração de código agora está disponível somente em arquivos .js.

Refatorar JavaScript

Você pode refatorar código em documentos html, php e javascript. Quando você clica com o botão direito na área de código no Dreamweaver, a opção Refatorar é exibida no menu suspenso. O menu Refatorar inclui as seguintes opções:

Renomear
Extrair para Variável
Extrair para Função
Delimitar em Try/Catch
Delimitar na Condição
Converter em Arrow Function
Criar Getters/Setters

Para entender como as opções de refatoração funcionam, consulte as seguintes seções:

Renomear

A opção Renomear é usada para alterar todas as ocorrências do nome de uma variável ou função em um código JavaScript. Para refatorar uma variável, não é necessário clicar e arrastar para selecioná-la.

Siga estas etapas para renomear no código JavaScript:

Selecione o código que precisa ser alterado ou posicione o cursor de texto nele.
Clique com o botão direito no texto selecionado e selecione Refatorar > Renomear. Você também pode usar o atalho de teclado Ctrl + Alt + R no Windows ou Command + Option + R no macOS para Renomear.
Vários cursores são exibidos na tela, permitindo que você altere todas as ocorrências da variável. Melhorias no recurso de vários cursores fazem com que a próxima ocorrência da variável seja selecionada. Digite novamente o nome de uma única variável ou função para substituir o nome atual.

Antes de Renomear

Depois de Renomear

Extrair para Variável

Use a opção Extrair para Variável para substituir uma expressão por uma variável, uma variável local ou constantes no código JavaScript. Para fazer isso, selecione uma expressão e clique com o botão direito nela. Em seguida, selecione Refatorar > Extrair para Variável. Você também pode usar o atalho de teclado Ctrl + Alt + V no Windows e Cmd + Alt + V no macOS.

Extrair para Função

Use a opção Extrair para Função para substituir uma expressão nas chamadas de uma função dentro de um parâmetro. O valor padrão do novo parâmetro pode ser iniciado dentro do corpo da função ou transmitido para as demais chamadas de função.

Para refatorar usando a opção Extrair para Função, siga estas etapas:

Selecione uma expressão ou um conjunto de expressões no código JavaScript.

Seleção de uma expressão
Clique com o botão direito e selecione Refatorar > Extrair para Função. Você também pode usar o atalho de teclado Ctrl + Alt + M no Windows ou Cmd + Alt + M no Mac.
No menu pop-up exibido na tela, selecione o escopo de destino para extrair a função.

Tipos de escopo
O resultado varia de acordo com o escopo de destino selecionado. Por exemplo, o escopo de destino pode ser um construtor, a classe selecionada ou uma função global.

As características da opção Extrair para Função são:
- Identificação dos parâmetros que devem ser transmitidos com base nos identificadores disponíveis na seleção ou no escopo de destino.
- Identificação dos parâmetros de retorno que devem retornar da função com base nos identificadores cujos valores são alterados na seleção.
- Criação de uma função com um nome exclusivo.
As capturas de tela abaixo mostram o resultado de acordo com o respectivo escopo de destino selecionado.
Construtor

Classe

Global

Delimitar em Try/Catch

Use a opção Delimitar em Try Catch em uma exceção em um bloco de código exibido como erro após a compilação do programa. Essa função delimita o bloco de código em um bloco Try/Catch. Esse bloco de código é marcado como uma exceção durante a execução do programa.

Selecione o código ou posicione o cursor nele, clique com o botão direito e selecione Refatorar > Delimitar em Try/Catch. Se você posicionar o cursor no código, essa opção verificará se há instruções próximas a ele ou se o código é uma instrução. Se houver instruções, a opção delimitará o código em um bloco Try/Catch.

Delimitar na Condição

Use a opção Delimitar na Condição em uma expressão em um código para ser compilado somente com uma condição específica.

Selecione uma expressão no código, clique com o botão direito e selecione Refatorar > Delimitar na Condição.

Converter em Arrow Function

Uma Arrow Function é uma expressão que não tem suas próprias expressões de função, como this, arguments, super ou new.target. Essas expressões de função são usadas em expressões de não método e não podem ser usadas como um construtor.

Posicione o cursor em uma função, clique com o botão direito e selecione Refatorar > Converter em Arrow Function.

Observação:

Se a instrução selecionada tiver um parâmetro, a estrutura do parâmetro será exibida como param => {instruções}.
Se a instrução selecionada não tiver parâmetros ou tiver mais de um parâmetro, como em param (param1, param2), a estrutura do parâmetro será exibida como param (param1, param2) => {instruções}.

Criar Getters/Setters

Em JavaScript, um setter pode ser usado para executar uma função na qual uma propriedade especificada precisa ser alterada. Na maioria das vezes, os setters são usados com getters para criar um tipo de pseudo propriedade. Você não pode criar um setter para uma propriedade que tem um valor real.

Posicione o cursor em um membro de uma expressão de objeto, clique com o botão direito e selecione Refatorar > Criar Getters/Setters.

Dicas de soluções de problemas

A tabela abaixo mostra dicas de soluções de problemas para as respectivas mensagens de erro, que são exibidas na tela ao selecionar um código de maneira incorreta:

Nome da função	Mensagem de erro	Dica de solução de problemas
Renomear	Nenhuma expressão na posição especificada	Posicione o cursor sobre ou antes do nome de uma variável ou função.
Extrair para Variável	A seleção não forma uma expressão	Selecione uma expressão no código antes de refatorá-lo.
Extrair para Função	O bloco selecionado deve representar um conjunto de instruções ou uma expressão	Verifique se você selecionou um bloco com um conjunto de instruções ou uma expressão.
Delimitar em Try/Catch	Selecione um código válido para delimitar em um bloco Try/Catch	Verifique se você selecionou um código antes de aplicar a opção de refatoração em Try/Catch.
Delimitar na Condição	Selecione um código válido para quebrar linha em um bloco de condição	Verifique se você selecionou uma expressão antes de aplicar a opção de refatoração Delimitar na Condição.
Converter em Arrow Function	Posicione o cursor dentro de uma expressão de função	Verifique se você posicionou o cursor dentro de uma expressão de função antes de aplicar a opção de refatoração.
Criar Getters/Setters	Posicione o cursor em um membro de uma expressão de objeto	Verifique se você posicionou o cursor em um membro de uma expressão de objeto antes de aplicar a opção de refatoração Criar Getter/Setters.

Localizar e substituir texto

Você pode usar os recursos de localização e substituição do Dreamweaver para pesquisar qualquer tipo de texto, código ou espaço no branco em seu site ou pasta.

Você pode pesquisar toda a marcação, ou pode limitar a pesquisa a apenas o texto renderizado na Visualização de design ou apenas o código.

Você também pode usar algoritmos de correspondência de padrão (expressões regulares) avançados para sofisticadas operações de localizar e substituir.

Assim que localizar o texto, você pode escolher substituí-lo pelo texto, código ou espaço em branco especificado.

Para obter mais informações, consulte Localizar e substituir texto.

Visualização de imagens e cores na Visualização de código

Após inserir o código relevante de imagens e cores, é possível visualizá-las diretamente na Visualização de código.

Visualização de imagens

Passe o mouse sobre qualquer URL de imagem para visualizar a imagem na Visualização de código. Você pode visualizar imagens indicadas como:

url();
data-uri()
Valor do atributo src da tag img

O Dreamweaver também exibe visualizações de imagens hospedadas remotamente.

Se o Dreamweaver não puder exibir a visualização de caminhos remotos, a mensagem “Não é possível carregar a imagem” será exibida.

Você pode visualizar estes tipos de imagem:

JPEG
JPG
PNG
GIF
SVG

Visualização de imagens na Visualização de código

Visualização de cores

Passe o mouse sobre os valores de cor para visualizar cores na Visualização de código. Os formatos compatíveis são:

Valores de cor hexadecimais de 3 e 6 dígitos: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228, 0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Nomes de cores predefinidos, como, verde-oliva, verde azulado, vermelho.

A visualização de cores está disponível em todos os tipos de documento para os formatos de cores acima.

Visualização de cores na Visualização de código

Clique com o botão direito do mouse em um valor e selecione Edição rápida para abrir o seletor de cores e selecionar uma cor diferente.

Observação:

Para desativar visualizações de imagens e cores, desmarque a opção Exibir > Opções de visualização de código > Visualização do ativo.

Impressão do código

Você pode imprimir o código para editá-lo offline, arquivá-lo ou distribuí-lo.

Abra uma página na Visualização de código.
Selecione Arquivo > Imprimir código.
Especifique as opções de impressão e clique em OK (Windows) ou Imprimir (Macintosh).