Versões de 2017 do Dreamweaver CC

Observação:

A versão de outubro de 2017 (18.0) do Dreamweaver CC já está disponível. Consulte o Resumo de novos recursos.

dreamweaver_facebook_profile

As versões de 2017 do Dreamweaver CC trazem diversos recursos e aprimoramentos novos que incluem suporte ao Git, um novo editor de código, interface do usuário mais intuitiva com um tema escuro selecionável e diversas melhorias, inclusive uma experiência inicial aprimorada. 

Leia mais para ver uma introdução rápida sobre os novos recursos e aprimoramentos.

Para obter um resumo dos recursos introduzidos nas versões anteriores do Dreamweaver CC, consulte Resumo dos recursos | Versões de 2015 do Dreamweaver CC.


Adobe Dreamweaver CC 2017.5

O Dreamweaver CC 2017.5 oferece suporte aos seguintes novos recursos e aprimoramentos:

Leia mais para saber mais sobre esses recursos e aprimoramentos.

Suporte ao Git no Dreamweaver

A versão 2017.5 do Dreamweaver CC oferece suporte ao Git, que é um sistema de controle de versão de código aberto. Com o novo suporte ao Git, agora você pode gerenciar facilmente seus arquivos, incluindo código-fonte, de dentro do Dreamweaver.

Agora você pode executar operações comuns do Git no Dreamweaver sem a necessidade de ferramentas de terceiros. O novo painel do Git (Janelas > Git) permite executar diversas operações do Git, inclusive Confirmar, Push, Pull e Fetch.

Você também pode usar o Git como uma ferramenta de colaboração, criando e mesclando ramificações e repositórios remotos. Você também pode ver as diferenças entre duas versões de um arquivo e ver históricos de arquivos e repositórios. 

Além disso, o painel Arquivos no Dreamweaver agora oferece suporte a uma nova visualização do Git. Usando essa visualização do Git, você pode gerenciar os arquivos não rastreados, modificados, testados e confirmados associados ao seu site. 

Para saber mais sobre como usar o Git para controle de versão e colaboração, consulte Como usar o Git no Dreamweaver.

Usar o Git no Dreamweaver
Usar o Git no Dreamweaver

Novos temas de código

O Dreamweaver CC 2017.5 agora oferece suporte a dois novos temas de código: Monaki e Clássico. Você pode selecionar e usar esses temas de código que fornecem cores de código semelhantes ao Dreamweaver CC 2015. 

Selecione Dreamweaver > Preferências (macOS) ou Editar > Preferências > Interface (Windows), para experimentar os novos temas de código para ter legibilidade e aparência aprimoradas.

Novos temas de código no Dreamweaver 2017.5 - Monaki e Clássico
Novos temas de código no Dreamweaver 2017.5 - Monaki e Clássico

Experiência inicial aprimorada

Quando você inicia o Dreamweaver CC 2017.5 pela primeira vez, a tela de boas-vindas mostra uma experiência inicial aprimorada. A nova experiência inicial destaca um destes dois tutoriais em vídeo, com base na área de trabalho escolhida por você:

  • Um tutorial rápido sobre a área de trabalho do desenvolvedor
  • Um tutorial rápido sobre a área de trabalho padrão
Experiência inicial aprimorada no Dreamweaver
Experiência inicial aprimorada no Dreamweaver 2017.5

Você também pode acessar os dois tutoriais em vídeo pelo menu Ajuda. Clique em Ajuda > Tutorial rápido para ver os tutoriais.

Acessar os novos vídeos iniciais pelo menu Ajuda do Dreamweaver
Acessar os novos vídeos iniciais pelo menu Ajuda

Outros aprimoramentos

O Dreamweaver CC 2017.5 agora está integrado com uma nova versão do CEF. Com a nova versão do CEF, a Visualização dinâmica no Dreamweaver exibe os elementos HTML personalizados, as propriedades personalizadas do CSS e muito mais.

Adobe Dreamweaver CC 2017.1

O Dreamweaver CC 2017.1 oferece suporte de programação adicional por meio dos seguintes recursos:

Leia mais para ver uma introdução rápida sobre essas melhorias.

Suporte para PHP 7.1

Nas versões anteriores do Dreamweaver, você podia acessar as dicas e as verificações de código para o PHP 5.6. O Dreamweaver 17.1 é configurado para as versões 5.6 e 7.1 do PHP.

Você pode escolher compilar os arquivos PHP do site com 5.6 ou 7.1 na caixa de diálogo Configurações de site, ou em Editar > Preferências.

Para mais informações sobre o suporte para PHP 7.1, consulte os seguintes artigos:

Recurso Localizar e substituir aprimorado

Esta versão inclui aprimoramentos importantes nos recursos de localização e substituição. 

Agora você pode pesquisar atributos e tags usando a caixa de diálogo Localizar e substituir (Localizar > Localizar e substituir em arquivos). Você pode usar essa caixa de diálogo mesmo se nenhum arquivo estiver aberto no Dreamweaver (ao pesquisar dentro de uma pasta, por exemplo).

Além disso, a barra de pesquisa rápida Localizar e substituir (Localizar > Localizar e substituir) foi movida para a parte inferior da área de trabalho do Dreamweaver. Use esse painel para localizar e substituir texto e atributos com rapidez no documento atual.

Para obter mais informações sobre localizar e substituir, consulte Localizar e substituir texto, tags e atributos. Para obter informações sobre os problemas conhecidos com o recurso Localizar e substituir no Dreamweaver 17.1, consulte Problemas conhecidos e defeitos corrigidos nas versões de 2017 do Dreamweaver CC.

Novos atalhos de teclado para localizar e substituir:

  • Localizar no documento atual: Ctrl + F (no Windows) e Cmd + F (no Mac) 
  • Localizar e substituir em arquivos: Ctrl + Shift + F (no Windows) e Cmd + Shift + F (no Mac) 
  • Substituir no documento atual: Ctrl + H (no Windows) e Cmd + Alt +F (no Mac)

Para obter uma lista completa dos atalhos de teclado para localizar e substituir, consulte Atalhos de teclado para localizar e substituir.

Atualização para o Dreamweaver CC versão de 2017 (17.0.2)

Criar campanhas de email usando o Dreamweaver com o Campaign

Agora você pode usar a extensão do Campaign para Dreamweaver para criar campanhas de email personalizadas. 

É muito importante criar conteúdo personalizado para conectar-se imediatamente com o leitor e aumentar suas chances de sucesso com o marketing por email. 

Se você usa o Dreamweaver para criar campanhas de email, agora pode ir além e adicionar conteúdo personalizado, como o nome do leitor ou um chamado de ação personalizado, usando os dados do Adobe Campaign.

Para começar, baixe a extensão do Campaign clicando em Janela > Extensões > Procurar extensões, crie um boletim informativo por email ou edite um boletim existente. Depois de finalizar o design, personalize o conteúdo usando os campos de personalização e blocos de conteúdo do Campaign e você estará pronto. 

O Dreamweaver sincroniza automaticamente com o Campaign para que as alterações de conteúdo no Dreamweaver estejam disponíveis para você no Campaign. Em seguida, tudo o que você precisa fazer é inserir um endereço de email e enviar uma campanha personalizada aos seus destinatários.

Para obter mais informações, consulte Criar campanhas de email personalizadas.

Atualização para o Dreamweaver CC versão de 2017 (17.0.1)

Suporte integrado à codificação por cores

Agora você pode criar e personalizar temas de código, baseados nos temas padrão claro e escuro. Depois, você pode personalizar as cores de código modificando os seletores corretos no arquivo de tema.

Selecione o tema de código padrão claro ou escuro em Editar > Preferências > Interface e, se desejar mudar as cores do código, salve o tema com um novo nome e edite o arquivo de tema. 

Para obter mais informações sobre como personalizar as cores do código, consulte Personalizar a codificação por cores.

Observação:

Esta versão também inclui correções para vários defeitos. Para obter mais informações sobre os defeitos corrigidos, consulte Problemas conhecidos e defeitos corrigidos nas versões de 2017 do Dreamweaver CC.

Versão de 2017 do Dreamweaver CC (17.0)

A versão de 2017 do Dreamweaver CC traz para você um editor de código totalmente novo, uma interface de usuário mais intuitiva com temas escuro e claro selecionáveis e diversos aprimoramentos que incluem suporte para novos fluxos de trabalho, como pré-processadores de CSS.

Leia mais para ver a lista completa das novidades e alterações no Dreamweaver CC 2017:

Editor de código reformulado

Diversas melhorias de produtividade foram feitas no Editor de código do Dreamweaver para que você codifique de maneira simples, rápida e eficiente.

Com as dicas de código, novos usuários aprendem a usar HTML, CSS e outros padrões da Web, e os auxílios visuais como recuo automático, codificação por cores e fontes redimensionáveis reduzem erros e facilitam a leitura do código. 

Dicas de código

A funcionalidade da dica de código no Dreamweaver é aprimorada para oferecer informações mais úteis sobre o código selecionado.

Nas versões anteriores do Dreamweaver, ao inserir um colchete angular direito, uma lista suspensa de código relevante era exibida.

Nesta versão do Dreamweaver, além de obter o código relevante, você também recebe informações adicionais que ajudam a reforçar rapidamente seu conhecimento em HTML, CSS e outras tecnologias da Web dentro do próprio Dreamweaver. 

Dicas de código aprimoradas
Dicas de código aprimoradas

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

Melhorias na exibição de códigos

A aparência geral do código foi aprimorada para ter uma legibilidade melhor. É possível observar melhorias na formatação de código e na codificação por cores. 

Formatação de código

Quando você programa, o Dreamweaver recua o código automaticamente para evitar erros no recuo manual e para melhorar a legibilidade. 

Codificação por cores

O Dreamweaver agora é compatível com a codificação por cores para tipos adicionais de arquivo.

A codificação por cores está disponível 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. 

Você pode alterar o destaque de sintaxe de diferentes tipos de arquivos diretamente da barra de status na visualização de código.

Para obter mais informações sobre todas essas alterações, consulte Ambiente de codificação no Dreamweaver.

Suporte a pré-processadores de CSS

O Dreamweaver agora é compatível com pré-processadores de CSS comuns, como Sass, Less e SCSS, com suporte pleno a codificação por cores e compilação, para você poupar tempo e escrever um código mais limpo.

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

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 instantaneamente sem recarregar a página. 

Visualizar alterações em tempo real em seu navegador
Visualizar alterações em tempo real em seu navegador

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

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

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 oferece opções de código específicas de contexto e ferramentas em linha.

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

Editar códigos relacionados rapidamente sem abrir vários arquivos ou guias
Editar códigos relacionados rapidamente sem abrir vários arquivos ou guias

Documentação CSS no contexto (Documentos rápidos)

O Dreamweaver fornece documentação no contexto para as propriedades do CSS dentro da visualização de código.

Agora você não precisa sair do Dreamweaver e ir para uma página da Web para saber mais ou consultar sobre as propriedades do CSS. Para obter ajuda sobre o CSS, pressione Ctrl+K (no Windows) ou Cmd+K (no Mac).

Ajuda dos documentos rápidos para o CSS na interface da Visualização de código do Dreamweaver
Ajuda dos documentos rápidos para o CSS na interface da Visualização de código do Dreamweaver

Vários cursores para escrever e editar código

Para escrever várias linhas de código simultaneamente, use vários cursores. 

Esse recurso aumenta a produtividade de maneira significativa, pois não há necessidade de programar a mesma linha de código várias vezes.

Para utilizar vários cursores, você pode:

  • Para adicionar cursores a diversas linhas contínuas: pressione a tecla Alt e arraste verticalmente. 
  • Para adicionar cursores a diversas linhas descontínuas: pressione a tecla Ctrl e clique nas linhas nas quais deseja colocar o cursor.
  • Para selecionar o texto em diversas linhas contínuas: pressione a tecla Alt e arraste diagonalmente.
  • Para selecionar o texto em diversas linhas descontínuas: selecione um texto e pressione a tecla Ctrl (Windows) ou Cmd (Mac) e continue fazendo outras seleções. 
Multicursor-GIF3

Interface de usuário moderna

O Dreamweaver foi reformulado com uma interface intuitiva e personalizada, menus e painéis mais acessíveis e uma barra de ferramentas contextual e personalizável que mostra apenas as ferramentas de que você precisa.

A nova interface também oferece quatro níveis de contraste entre claro e escuro, para facilitar na leitura e edição de linhas de código.

Confira os snapshots de antes e depois da nova interface do usuário.

Modern user interface_2
Interface do usuário – versões 2015 do Dreamweaver

newUI
Nova interface do usuário – versão 2017 do Dreamweaver CC


Os menus, as barras de ferramentas e as áreas de trabalho do Dreamweaver também foram reformulados nesta versão. Leia para saber mais sobre essas alterações.

Alterações na área de trabalho

A interface do Dreamweaver é otimizada para incluir as seguintes áreas de trabalho padrão:

  • Área de trabalho do desenvolvedor

Essa área de trabalho é minimalista e, por padrão, inclui somente os painéis mais essenciais para desenvolvedores que programam sites, como, por exemplo, os painéis Arquivos e Snippets.

  • Área de trabalho padrão 

Essa área de trabalho inclui tudo o que você precisa quando trabalha com código e design, como os painéis Arquivos, Bibliotecas da CC, CSS Designer, Inserir, DOM, Ativos e Snippets.

Observação:

Depois de selecionar uma área de trabalho, você pode personalizá-la adicionando ou removendo painéis. Para obter mais informações sobre como personalizar áreas de trabalho, consulte Criar áreas de trabalho personalizadas.

Confira um resumo das diferenças entre as áreas de trabalho fornecidas no Dreamweaver CC 2015 e no Dreamweaver CC 2017.

Dreamweaver CC 2015

  • Iniciante
  • Código
  • Padrão
  • Design
  • Extract

Dreamweaver CC 2017

  • Desenvolvedor
  • Padrão

Para obter mais informações sobre alterações na área de trabalho, consulte Área de trabalho do Dreamweaver.

Alterações no menu

O menu do aplicativo foi aprimorado para remover itens raramente usados do menu e mover outros para locais do menu mais intuitivos.

Para obter uma descrição detalhada das alterações no menu do aplicativo do Dreamweaver, consulte Menus reformulados.

Alterações na barra de ferramentas

A barra de ferramentas agora é comum em todas as visualizações. A barra de ferramentas exibe apenas as ferramentas necessárias para a exibição na qual você está trabalhando.

No entanto, você pode personalizar a barra de ferramentas para exibir o conjunto de ferramentas do qual você precisa. 

Para obter mais informações, consulte Visão geral da barra de ferramentas.

Alterações na barra de status

A barra de status exibe informações úteis quando você trabalha na Visualização de código. 

Agora você pode:

  • Alternar entre modos de INS (inserir) e OVR (substituir).
  • Ver o número da linha e da coluna na parte inferior da tela. Esses números indicam a linha e a coluna nas quais o mouse está posicionado.
  • Selecionar a codificação por cores desejada para diferentes tipos de arquivos de código.

Para obter mais informações, consulte Visão geral da barra de status.

Alterações no painel Snippets

O painel Snippets agora está com uma aparência nova e mais simples. Ele foi reformulado para facilitar o processo de inserção do snippet.

A imagem a seguir destaca as principais alterações feitas no painel Snippets:

Alterações de UI no painel Snippets
Alterações de UI no painel Snippets

Nas versões anteriores do Dreamweaver, você tinha que inserir snippets usando atalhos do teclado.

Inserir snippets usando atalhos do teclado não era um processo eficiente devido aos seguintes motivos:

  • A necessidade de lembrar atalhos não intuitivos;
  • Possíveis conflitos com atalhos de palavras-chave do produto.

Nesta versão do Dreamweaver, você pode usar as teclas de acionamento para inserir snippets de código.

As teclas de acionamento são sequências de texto fáceis de usar atribuídas a snippets de código. Por exemplo: para um snippet de código que cria um link mailto, você pode digitar “mailto” e transformar isso na tecla de acionamento.

Depois de atribuir uma tecla de acionamento, coloque o cursor no seu documento, digite “mailto” e pressione Tab. O Dreamweaver insere o snippet de código relacionado no seu documento.

Para obter mais informações sobre o painel Snippets, consulte Reutilizar código com snippets.

Alterações no painel Arquivos

O painel Arquivos foi reformulado para ser usado de forma mais simples e intuitiva.

No seu modo mais simples, o painel Arquivos exibe uma lista com apenas os arquivos locais no seu computador. Conforme você trabalha com o painel Arquivos, configurando um site, configurando conexões para servidores remotos ou permitindo devolver e retirar arquivos, mais opções serão exibidas nele.

Para obter mais informações sobre as alterações no painel Arquivos, consulte Painel Arquivos reformulado.

Alterações na tela de boas-vindas e na experiência inicial

Quando você inicia o Dreamweaver ou quando fecha todos os documentos do Dreamweaver, uma nova área de trabalho Iniciar é exibida. Você tem acesso fácil a arquivos, bibliotecas e modelos iniciais usados recentemente com a área de trabalho Iniciar.

Se preferir as caixas de diálogo mais antigas, você ainda pode digitar Ctrl/Cmd + O para iniciar a caixa de diálogo Abrir ou Ctrl/Cmd + N para iniciar a caixa de diálogo Novo documento.  

Uma experiência inicial está disponível para ajudar você a reforçar as alterações rapidamente na área de trabalho do Dreamweaver CC 2017. Percorra rapidamente a experiência de personalização, e serão apresentadas uma área de trabalho e as opções de tema certas para você. 

Para obter mais informações, consulte Área de trabalho do Dreamweaver.

Realce dinâmico no recurso Localizar e substituir

A nova barra de ferramentas Localizar e substituir é discreta e fica na parte superior da janela sem bloquear qualquer parte da tela.

No geral, o recurso Localizar e substituir está mais rápido e eficiente em relação às versões anteriores do Dreamweaver. O Dreamweaver agora procura sequências de texto de pesquisa enquanto você digita no painel Localizar e destaca todas as instâncias do texto no documento atual. 

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

Aprimoramentos nas bibliotecas da Creative Cloud

Arquive, restaure, insira comentários e veja o histórico de versões de todos os seus ativos armazenados na Creative Cloud, incluindo os arquivos em suas Bibliotecas da Creative Cloud, ativos criados com produtos para desktop da CC e projetos móveis.

Recuperação automática dos arquivos após uma falha

Se o Dreamweaver fecha inesperadamente devido a erros do sistema, quedas de energia ou outros problemas, é possível recuperar todas as alterações não salvas nos arquivos que você estava editando.

Para obter mais informações, consulte Recuperação automática de arquivos.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online