Guia do Usuário Cancelar

Ambiente de codificação no Dreamweaver

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

 

 

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.

Artigos relacionados

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais    |    Política de privacidade online