Posicione o ponto de inserção no código.
Última atualização em
27/04/2021
Saiba como trabalhar na Visualização de código e aproveitar ao máximo os recursos de codificação do Dreamweaver.
Há várias maneiras de trabalhar com código no Dreamweaver.
Você pode abrir um novo arquivo de código usando a caixa de diálogo Novo documento e começar a digitar o código.
À 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 úteis Quick Docs do Dreamweaver.
Você também pode inserir código usando o painel Inserir ou usar atalhos de codificação como abreviações Emmet.
Se você se encontrar copiando e colando o mesmo trecho de código várias vezes, experimente estes recursos que economizam tempo:
- O painel Trechos é invalioso para criar e inserir rapidamente trechos de código pré-formatados no seu código.
- Múltiplos cursores permitem criar e editar múltiplas linhas de código ao mesmo tempo.
O Dreamweaver também oferece um conjunto robusto de ferramentas de edição que tornam a navegação e as alterações no código um processo suave.
- 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. Melhor ainda, use o recurso Edição rápida para editar código em arquivos relacionados sem nem mesmo abrir o arquivo em uma nova guia.
- Clique com o botão direito no código para abrir um menu de contexto simples e relevante que permite editar o código diretamente.
- Use Quebrar tag para envolver texto em tags.
Continue lendo para obter mais informações sobre todos esses recursos de código.
Inserir código usando o painel Inserir
Selecione uma categoria apropriada no painel Inserir.
Clique em um botão no painel Inserir ou selecione um item do menu suspenso no painel Inserir.
Quando você clica em um ícone, o código aparece na sua página imediatamente, ou uma caixa de diálogo aparece solicitando mais informações para completar 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. Abreviações CSS se expandem em páginas CSS, LESS, SASS, SCSS ou dentro da tag style 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 informações detalhadas e referência, consulte a documentação do Emmet.
Nota
O Dreamweaver atualmente suporta abreviações Emmet 1.2.2.
Exemplo 1: Inserindo código HTML usando Emmet
Para adicionar rapidamente código HTML para uma lista não ordenada com três elementos, abra o arquivo HTML e digite a seguinte abreviação Emmet na exibição Código dentro de <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 toda a abreviação 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: inserir código CSS usando Emmet
Para inserir código CSS para criação de raio de borda com prefixos de fornecedor, abra o arquivo CSS e digite a seguinte abreviação Emmet dentro de uma classe:
-bdrs
Ao pressionar Tab, a abreviação se expande para o seguinte 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. Depois, posicione o cursor no ponto de inserção e clique no ícone Inserir na 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 é envolvido em um bloco de comentário.
É possível adicionar comentários usando várias opções de sintaxe. Selecione a sintaxe adequada e o Dreamweaver insere as tags para você. Basta inserir o texto do comentário.
Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou 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 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 mostrar e ocultar comentários na visualização de código, simplesmente pressione Ctrl+/ no Windows ou Cmd+/ no Mac para o comentário ou linha selecionada.
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.
Nota
As operações de copiar e colar e localizar e substituir não funcionam com vários cursores ou várias seleções.
Adicionar vários cursores ou seleções múltiplas
Você pode adicionar vários cursores de diferentes maneiras, dependendo dos seus requisitos.
Se quiser adicionar o mesmo texto em vários locais sem substituir nenhum texto existente, adicione vários cursores.
Se você deseja substituir o texto existente, é possível fazer seleções múltiplas. Você pode selecionar linhas contínuas de texto ou linhas descontínuas de texto, ou ambas, e adicionar cursores a elas.
Para adicionar vários cursores ou várias seleções na mesma coluna em linhas contínuas:
Mantenha a tecla Alt pressionada e clique e arraste verticalmente. Quando você arrasta verticalmente, cursores são adicionados a cada linha que você atravessa.
Para selecionar linhas contínuas de texto, pressione a tecla Alt e arraste diagonalmente. Quando você arrasta diagonalmente, o Dreamweaver seleciona um bloco retangular de texto dentro dessa seleção.
Nota
Para adicionar cursores rapidamente ou incluir várias linhas em uma seleção, use o atalho de teclado Shift-Alt-Seta para cima ou para baixo.
Depois de adicionar os cursores (ou texto selecionado) em vários locais, basta começar a digitar.
Se você tiver vários cursores, novo texto é adicionado.
Se você selecionou conteúdo em várias linhas de texto, o texto selecionado é substituído pelo novo texto inserido.
Para adicionar vários cursores em diferentes colunas entre linhas:
Para adicionar cursores a linhas descontínuas de texto, simplesmente pressione a tecla Ctrl e clique nas diferentes linhas onde deseja posicionar o cursor.
Para selecionar linhas descontínuas de texto, selecione algum texto, pressione a tecla Ctrl (Windows) ou Cmd (Mac) e continue a fazer outras seleções.
Para adicionar cursores no início/fim de cada linha:
Selecione várias linhas de texto e pressione as teclas de seta para a esquerda ou direita.
Para adicionar cursores nas linhas anteriores ou seguintes para uma seleção:
Pressione as teclas Shift+Alt+Seta para cima/para baixo e depois pressione a tecla de seta para a direita.
Para selecionar linhas contínuas e descontínuas de texto:
Você pode combinar essas técnicas para selecionar linhas contínuas e separadas de texto dentro de uma única seleção.
Primeiro selecione as linhas descontínuas de texto, depois pressione Ctrl-Alt (no Windows) ou Cmd-Alt (no Mac) e arraste para adicionar um conjunto de linhas às várias seleções existentes.
Obter ajuda com CSS no Dreamweaver usando os Documentos rápidos
Ao trabalhar com arquivos CSS, LESS ou SCSS no Dreamweaver, você pode obter rapidamente mais informações sobre propriedades CSS ou valores.
Posicione o cursor dentro de uma propriedade ou valor e pressione Ctrl + K, Dreamweaver abre a documentação do projeto Web Platform Docs.
É possível abrir vários editores inline e visualizadores de documento simultaneamente.
Para fechar um único editor inline ou visualizador de documento, clique no "X" no canto superior esquerdo ou pressione Escape enquanto o Quick Docs estiver em foco.
Para fechar todos os editores inline e documentos, posicione o cursor de volta no editor de código principal e pressione Escape.
Analisar código
O Dreamweaver oferece suporte ao linting (análise de código para possíveis erros) 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 da linha é exibido em vermelho para indicar que contém erros e, ao passar o mouse sobre ele, uma breve descrição 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 Design ou Live, é possível usar este recurso para envolver objetos com uma tag.
Selecione texto na visualização Código ou um objeto na visualização Design e pressione Ctrl+T no teclado.
Um pop-up aparece permitindo selecionar entre 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 estiver trabalhando na visualização Design ou Live, o objeto selecionado será envolvido 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). As seguintes opções estão disponíveis:
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 mais informações, consulte Edição rápida.
Recortar, copiar, colar
Clique nestas opções para cortar, copiar e colar texto rapidamente sem precisar acessar o menu Editar.
Localizar e substituir, Localizar próximo, Localizar anterior
Clique nestas opções para localizar e substituir texto 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 Trabalho com snippets de código.
Abrir arquivo relacionado
Clique com o botão direito sobre uma tag de link/script e clique em abrir arquivo relacionado para abrir o arquivo.
Anexar folha de estilos
Anexar uma folha de estilos CSS existente à página.
Seleção
O submenu Seleção inclui várias opções de edição de código que podem ser usadas em um trecho de código selecionado, como alternar comentários de linha e bloco, expandir e recolher seleção, converter CSS inline em regras, mover regras CSS e imprimir 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 disponibiliza o seletor de cores, o navegador de URL e a lista de fontes ao seu alcance.
Recuo dos blocos de código
Ao escrever e editar código na visualização Código ou no inspetor de Código, é possível alterar o nível de recuo de um bloco ou linha de código selecionado, deslocando-o para a direita ou esquerda em uma tabulação.
Recuo do bloco de código selecionado
- Pressione Tab, ou
- Pressione Ctrl+], ou
- Selecione Editar > Recuar código.
Remover o 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 nas visualizações Design, Código e Dividida, e também no inspetor de código.
Para 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 um tutorial em vídeo sobre como trabalhar com a 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+clique (Macintosh) em qualquer lugar da página. O Navegador de código exibe links para o código que afeta a área em que você clicou.
Clique fora do Navegador de código para fechá-lo.
Nota
Também é possível abrir o Navegador de código clicando no indicador do Navegador
de código 
. Este
indicador aparece próximo ao ponto de inserção na página quando o mouse
fica inativo por 2 segundos.
Navegar até o código com o Navegador de código
Abrir o Navegador de código na área da página que você tem interesse.
Clique na parte do código para o 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 um painel de Estilos CSS no modo Atual.
Nota
Quando você focaliza links para regras CSS, o Navegador de código exibe dicas de ferramentas das propriedades na regra. Essas dicas de ferramenta são úteis quando você deseja distinguir entre muitas regras que compartilham um 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.
Ir para uma função JavaScript ou VBScript
Na visualização Código e no inspetor de código, você pode visualizar uma lista de todas as funções JavaScript ou VBScript no código e saltar para qualquer uma delas.
Visualizar o documento na visualização Código (Visualizar >
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.
Nota
O submenu Funções não aparece na Visualização de design.
Qualquer função JavaScript ou VBScript do código aparece no submenu.
Nota
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.
Selecionar um nome de função para saltar para 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.
Observe as seguintes limitações do Extrator 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 ocorrências do modelo 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 uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte ao JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript.
Para usar o Extrator de JavaScript:
Abrir uma página que contém JavaScript.
Clique em Ferramentas > Externalizar JavaScript.
Na caixa de diálogo Externalizar JavaScript, edite as seleções padrão se necessário.
Selecione Apenas externalizar JavaScript se quiser que o Dreamweaver mova qualquer JavaScript para um arquivo externo e faça referência a esse arquivo no documento atual. Esta opção mantém manipuladores de eventos como onclick e onload no documento e mantém os Comportamentos visíveis no painel Comportamentos.
Selecione Externalizar JavaScript e anexar discretamente se quiser que o Dreamweaver 1) mova JavaScript para um arquivo externo e faça referência a ele no documento atual e 2) remova manipuladores de eventos do HTML e os insira em tempo de execução usando JavaScript. Quando você seleciona esta opção, não é mais possível editar Comportamentos no painel Comportamentos.
Na coluna Editar, desmarque qualquer edição que não queira fazer ou selecione edições que o Dreamweaver não selecionou por padrão.
Por padrã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ção relacionadas ao código de manipulação EOLAS, que é conhecido por usar document.write().
Blocos de script no corpo do documento, a menos que os blocos contenham apenas construtores de widget Spry ou conjunto de dados Spry.
Dreamweaver atribui automaticamente IDs a elementos que ainda não têm IDs.Se não gostar desses IDs, você pode alterá-los editando as caixas de texto ID.
Clique em OK.
A caixa de diálogo de resumo fornece um resumo das 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 sobrecarregar seu ambiente de codificação com muitos painéis e ícones, o modo Edição rápida no Dreamweaver coloca código e ferramentas específicas do contexto inline, permitindo que você acesse rapidamente a seção de código necessária.
Você pode entrar no modo Edição rápida:
- Clicando com o botão direito em um trecho de código e selecionando Edição rápida no menu de contexto que aparece
- 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. Você pode editar essas regras diretamente inline, sem nunca sair do contexto do arquivo HTML.
Quando várias regras correspondem, navegue entre elas usando a lista do lado direito (ou use Alt+seta para cima/para 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 referenciados por uma instrução require()).
Usar o modo edição rápida com arquivos CSS, SCSS ou LESS
Quando você abre a Edição rápida com o cursor dentro de um valor de cor, você pode acessar o seletor de cores e modificar rapidamente as cores usadas no seu código CSS.
Em um arquivo CSS, LESS ou SCSS, posicione o cursor em uma função de tempo de transição cubic-bezier() ou steps() e a Edição rápida exibe um editor gráfico de 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 de partida válidos.
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 JavaScript, você pode renomear funções e definir o escopo de uma variável para que possa chamá-la de dentro de um bloco de código no qual ela está definida.
Nota
A refatoração de código agora está disponível apenas 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 Refactor aparece no menu suspenso.Refactor consiste nas 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 a funcionalidade de cada opção de refatoração, 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. A seleção de uma variável com clique e arraste não é necessária para refatorar.
Execute as seguintes etapas para renomear em JavaScript:
Destaque ou posicione o cursor de texto no código que precisa de alteração.
Clique com o botão direito no texto selecionado e selecione Refactor > Rename. Você também pode usar os atalhos 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 um nome único de Variável ou função para substituir o nome atual.
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 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 inicializado dentro do corpo da função ou passado através de chamadas de função.
Execute as seguintes etapas para refatorar usando Extract to Function:
Selecione qualquer expressão ou um conjunto de expressões em JavaScript.
Clique com o botão direito e selecione Refactor > Extract to Function. Você também pode usar Ctrl + Alt + M no Windows OS ou Cmd + Alt + M no Mac OS.
Selecione o escopo de destino para extrair a função do menu pop-up que é exibido na tela.
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 de Extract to function são:
- Ele identifica os parâmetros a serem passados com base em identificadores disponíveis na seleção ou no escopo extraído.
- Ele identifica os parâmetros de retorno da função com base em identificadores cujos valores são alterados na seleção.
- Ele também cria uma função com um nome único.
As seguintes capturas de tela exibem a saída com base no respectivo escopo de destino selecionado.
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. Este bloco de código é marcado como uma exceção durante a execução do programa.
Selecione ou posicione o cursor no código, clique com o botão direito do mouse e selecione Refatorar > Envolver em Try Catch. Se você posicionar o cursor em uma posição, ele encontra as instruções ao redor, caso contrário verifica se o código consiste de instruções ou não. Se houver instruções, ele envolve o código em um bloco Try Catch.
Delimitar na Condição
Use Envolver em condição para uma expressão em um código para compilar apenas para uma condição específica.
Selecione uma expressão no código, clique com o botão direito e selecione Refatorar > Envolver em condição.
Converter em Arrow Function
Uma função de seta é uma expressão que não tem expressões de função próprias como this, arguments, super ou new.target. Essas expressões de função são para expressões que não são métodos e não podem ser usadas como construtor.
Posicione o cursor em uma função, clique com o botão direito e selecione Refatorar > Converter em função de seta.
Nota
- Se a instrução selecionada tiver um parâmetro, a estrutura do parâmetro aparece como param => {instruções}.
- Se a instrução selecionada tiver zero ou mais de um parâmetro como param (param1, param2), a estrutura do parâmetro aparece 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 a seguir fornece dicas de solução de problemas para as mensagens de erro correspondentes que são exibidas na tela devido à seleção incorreta de código:
|
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 localizar e substituir do Dreamweaver para pesquisar qualquer tipo de texto, código ou espaço em branco no 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 poderosos algoritmos de correspondência de padrão (expressões regulares) para sofisticadas operações de localizar e substituir.
Uma vez que tenha encontrado 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.
Visualizar imagens e cores na exibição de código
Depois de inserir código relevante para imagens e cores, você pode visualizá-las diretamente na visualização de código.
Visualização de imagem
Passe o mouse sobre qualquer URL de imagem para visualizar a imagem na Visualização de código. Você pode visualizar imagens que são referenciadas como qualquer um dos seguintes:
- 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 conseguir exibir a visualização para caminhos remotos, ele exibe a mensagem "Não foi possível carregar a imagem".
Você pode visualizar os seguintes tipos de imagem:
- JPEG
- JPG
- PNG
- GIF
- SVG
Visualização de cores
Passe o mouse sobre os valores de cor para visualizar cores na Visualização de código. Os formatos suportados são:
- valores de cores 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 Olive, Teal, red.
A visualização de cores está disponível em todos os tipos de documento para os formatos de cor acima.
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.
Nota
Para desabilitar visualizações de imagens e cores, desmarque a opção Exibir > Opções de exibição de código > Visualização de ativo.
Impressão do código
Você pode imprimir seu 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).
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
