Guia do Usuário Cancelar

Ambiente de codificação no Dreamweaver

 

 

Saiba como usar o ambiente de codificação no Dreamweaver para escrever códigos mais rapidamente.

Se você quer trabalhar com código no Dreamweaver, pode usar a área de trabalho do desenvolvedor. Esta área de trabalho mostra a Visualização de código por padrão, e tem apenas painéis de arquivos e snippets encaixados à esquerda da tela.

Se você precisar de mais funcionalidade, clique em Janela e escolha o painel adequado do qual você precisa.

Observação:

Se as áreas de trabalho predefinidas não oferecem exatamente o que você precisa, é possível personalizar o seu próprio layout da área de trabalho. Abra os painéis e encaixe-os onde preferir e salve a área de trabalho como uma área de trabalho personalizada. Para obter mais informações, consulte Criar áreas de trabalho personalizadas.

Trabalhar com códigos no Dreamweaver

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

Você pode alternar entre diferentes visualizações clicando nos botões Código, Dividir e Design/dinâmica no topo da sua área de trabalho.

Também é possível usar o Inspetor de código para exibir o HTML em uma janela flutuante. Com o Inspetor de código, é possível exibir o design do site e o código simultaneamente sem precisar dividir a visualização no meio. Para obter mais informações, consulte Visualização de código em uma janela separada com o Inspetor de código.

Visualização de código na janela Documento - Visualização de código

Selecione Exibir > Código.

Codificação e edição de uma página simultaneamente na janela Documento - Visualização dividida

  1. Selecione Exibir > Código e design.

    O código aparece no painel superior e a página aparece no painel inferior.

  2. Para exibir a página na parte superior, selecione Visualização de design visível, no menu Opções de visualização da barra de ferramentas Documento.
  3. Para ajustar o tamanho dos painéis na janela Documento, arraste a barra divisora para a posição desejada. A barra divisora está localizada entre os dois painéis.

    A Visualização de código é atualizada automaticamente quando você fizer alterações na Visualização de design. Após fazer alterações na Visualização de código, atualize manualmente o documento na Visualização de design clicando em Visualização de design ou pressionando F5.

Visualização de código em uma janela separada com o Inspetor de código

O Inspetor de código permite que você trabalhe em uma janela de codificação separada, exatamente como na Visualização de código.

  1. Selecione Janela > Inspetor de código. A barra de ferramentas inclui as seguintes opções:

    Gerenciamento de arquivos

    Insere ou obtém o arquivo.

    Visualizar/depurar no navegador

    Visualiza ou depura o documento em um navegador.

    Atualizar Visualização de design

    Atualiza o documento na Visualização de design para que ele reflita quaisquer alterações feitas no código. As alterações feitas no código só aparecerão automaticamente na Visualização de design depois que você executar determinadas ações, como salvar o arquivo ou clicar neste botão.

    Navegação de código

    Permite mover-se rapidamente pelo código. Consulte Acesso a uma função JavaScript ou VBScript.

    Opções de visualização

    Permite que você determine como o código será exibido. Consulte Definir a aparência do código.

Codificar mais rápido no Dreamweaver

A Visualização de código no Dreamweaver oferece recursos de codificação fáceis de usar que ajudam os designers na transição para o desenvolvimento na Visualização de código, e os programadores experientes também podem se beneficiar de recursos de ajuda visual, tais como recuo automático, codificação por cores e fontes redimensionáveis para reduzir erros e melhorar a legibilidade.

Confira alguns recursos que o Dreamweaver oferece.

Dicas de código e preenchimento de código

O recurso de dicas de código (ou preenchimento de código) no Dreamweaver permite que você selecione tags, atributos e estilos de CSS de um menu pop-up enquanto digita. Com o preenchimento automático de código, é possível codificar mais rápido e com menos erros.

Aqui está um exemplo que mostra como ele funciona em HTML. 

Assim que você começa a digitar “<”, o Dreamweaver abre um menu pop-up, listando todas as tags HTML disponíveis. Conforme você continua digitando sua tag, o Dreamweaver atualiza automaticamente as opções HTML disponíveis e permite que você selecione uma tag aplicável. Quando você pressiona Enter, o Dreamweaver insere automaticamente a tag para você. Em seguida, ele exibe um segundo menu pop-up que lista todas as propriedades disponíveis dessa tag.

O suporte de dica de código também está disponível para CSS, JavaScript e PHP (versões PHP 5.6 e 7.1). 

Para obter mais informações, consulte Dicas de código e preenchimento de código.

Suporte para versões do PHP 5.6 e 7.1

O Dreamweaver é compatível com PHP versões 5.6 e 7.1. 

Você pode optar por compilar os arquivos PHP de seu site com as versões 5.6 ou 7.1 do PHP usando a caixa de diálogo Configurações de site (por site) ou as preferências do aplicativo (para todos os arquivos PHP salvos fora de sites do Dreamweaver). O Dreamweaver definirá as dicas de código e as verificações de linting para a versão da linguagem PHP selecionada.

Para os novos sites no Dreamweaver, o compilador PHP padrão é definido para a versão especificada em Editar > Preferências > PHP.

Para obter mais informações sobre o suporte ao PHP no Dreamweaver, consulte:

Para obter informações gerais sobre as versões 5.6 e 7.1 do PHP, consulte os seguintes recursos:

Dicas de códigos de objeto JavaScript

O Dreamweaver suporta dicas de código de objeto em JavaScript. O Dreamweaver fornece dicas de código para objetos JavaScript básicos como matrizes, datas, números e cadeias de caracteres. 

Além disso, o Dreamweaver controla as funções do JavaScript que você cria e fornece dicas de código usando seus próprios nomes de função.

Para obter mais informações, consulte Dicas de código e preenchimento de código.

Refatorar código JavaScript

O Dreamweaver permite a refatoração de código. Refatoração de código é o processo de reestruturação do código de programa sem modificar seu comportamento externo. O código se torna mais legível e fácil de entender. 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 variáveis de forma abrangente.

Para obter mais informações, consulte Escrever e editar código

Codificação por cores para diferentes tipos de arquivos

O Dreamweaver é compatível com codificação por cores nos formatos HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML e YAML.

Vários cursores para tarefas repetitivas

Escreva mais de uma linha de código ao mesmo tempo para realizar tarefas rapidamente, como criar uma lista com marcadores, atualizar uma série de sequências e fazer várias edições simultaneamente.

Esse recurso aumenta a produtividade, porque você não tem que escrever a mesma linha de código várias vezes. Vários cursores fazem isso para você de uma vez.

Enquanto edita o código, você pode:

  • Adicionar vários cursores para adicionar novo conteúdo em vários lugares.
  • Selecionar o texto em vários lugares para aplicar a mesma edição em diferentes partes do seu documento.

Para obter mais informações, consulte Adicionar vários cursores ou seleções múltiplas.

Edição rápida de arquivos de códigos relacionados

Para fazer mudanças rápidas no seu código, posicione o cursor em snippets de código específicos e use o menu de contexto, ou pressione Ctrl+E (no Windows) ou Cmd+E (no Mac) para acessar a Edição rápida.

O Dreamweaver apresenta a você opções de código específicas do contexto e ferramentas em linha.

Cenário de caso de uso

Considere o seguinte exemplo:

Você está editando um arquivo HTML e observa algo incorreto na Visualização dinâmica. Você então alterna para a Visualização de código e percebe que tem de editar outro arquivo relacionado (digamos um arquivo CSS) para corrigir o problema. 

Em vez de alternar guias, clique com o botão direito do mouse no código relevante e clique em Edição rápida ou use um atalho de teclado, e o Dreamweaver abre a seção relevante do código no arquivo CSS relacionado, dentro do próprio arquivo HTML.

Você pode editar o código CSS sem ter de sair ou alternar as guias. As alterações são atualizadas automaticamente no arquivo CSS.

Para obter mais informações, consulte Edição rápida.

Documentação CSS no contexto

Os documentos rápidos fornecem documentação para as propriedades CSS dentro da Visualização de código.

Não é necessário sair do Dreamweaver e acessar uma página da Web para saber mais sobre as propriedades CSS. Pressione CTRL+K (no Windows) ou Cmd+K (no Mac) para abrir os Documentos rápidos.

Para obter mais informações, consulte Obtenha ajuda com CSS dentro do Dreamweaver usando Documentos rápidos.

Suporte pronto para uso para Emmet

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

O plug-in do Emmet está incluído no Dreamweaver, permitindo que você use abreviações do Emmet sem ter de instalar o plug-in.

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.

Para obter mais informações sobre como usar o Emmet, consulte Usar conjunto de ferramentas Emmet com o Dreamweaver.

Recolhimento de código

O Dreamweaver permite contrair seções do código para que você possa se concentrar com mais facilidade nas seções que está editando no momento. 

É possível contrair o código com base nas tags ou brackets ou recolher o código com base na seleção. 

Para obter mais informações, consulte Recolher e expandir código.

Validação do código

O Dreamweaver oferece a avançada funcionalidade de linting para ajudá-lo a depurar erros em seu código. 

Ele analisa o código para sinalizar erros potenciais ou uso suspeito de código. Erros de sintaxe de HTML, erros de análise em CSS ou avisos em arquivos JavaScript são alguns dos itens sinalizados pelo linting no Dreamweaver.

Para obter mais informações sobre linting do código no Dreamweaver, consulte Linting de código.

Se você está trabalhando com PHP e seu documento contém um código inválido, o Dreamweaver exibe esse código na Visualização de design (se estiver aberta) e o destaca na Visualização de código (dependendo das preferências que você definir).

Se você selecionar o código em qualquer visualização, o Inspetor de propriedades exibirá as informações sobre por que ele é inválido e como corrigi-lo.

Observação:

A opção para realçar códigos inválidos na Visualização de código fica desativada por padrão. Para acioná-la, alterne para a Visualização de código (Exibir > Código) e depois selecione Exibir > Opções da visualização de código > Realçar código inválido.

Você também pode especificar preferências para regravar automaticamente vários tipos de código inválido ao abrir um documento.

Para obter mais informações sobre como definir preferências de codificação, consulte Definir preferências de codificação.

Suporte para pré-processadores CSS

O Dreamweaver agora suporta pré-processadores CSS comuns, como SASS, Less e SCSS, com codificação por cores, dicas de código e compilação. 

Com o suporte do pré-processador CSS, você pode economizar tempo ao trabalhar com grandes sites que têm folhas de estilo complicadas.

Para obter mais informações sobre o suporte a pré-processadores de CSS no Dreamweaver, consulte Usar pré-processadores de CSS no Dreamweaver.

Salvar e reusar os snippets de código

Salve blocos de código usados com mais frequência, como snippets de código no painel Snippets. Em seguida, você pode inseri-los em várias páginas.

Snippets de código salvos no painel Snippets não são específicos do site e podem ser reutilizados em outros sites.

Você também pode usar snippets em diferentes dispositivos e entre diferentes versões do Dreamweaver usando sincronizar configurações.

Para obter mais informações, consulte Reutilizar códigos com snippets.

Visualização em tempo real no navegador

Visualize rapidamente as alterações de código no navegador em tempo real sem atualizar manualmente seu navegador. O Dreamweaver agora se conecta com seu navegador para que as alterações apareçam no navegador instantaneamente sem recarregar a página.

Para obter mais informações, consulte Visualização em tempo real no navegador.

Personalizar atalhos de teclado

Você pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado específicos, por exemplo, Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posição específica no código, você poderá adicioná-los ao Dreamweaver usando o Editor de atalhos de teclado.

Para obter instruções, consulte Personalização de atalhos de teclado.

Abertura de arquivos na Visualização de código por padrão

Quando você abre um tipo de arquivo que normalmente não contém nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo é aberto na Visualização de código (ou no Inspetor de código), e não na Visualização de código. É possível especificar quais tipos de arquivo serão abertos na Visualização de código.

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
  2. Selecione Tipos de arquivos/editores na lista Categoria à esquerda.
  3. Na caixa Abrir na Visualização de código, adicione a extensão do tipo de arquivo que você deseja abrir automaticamente na Visualização de código.

    Digite um espaço entre as extensões de nome de arquivo. É possível adicionar quantas extensões desejar.

Receba ajuda com mais rapidez e facilidade

Novo usuário?