Observação:
A versão de outubro de 2017 (18.0) do Dreamweaver CC já está disponível. Consulte o Resumo de novos recursos.
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.
O Dreamweaver CC 2017.5 oferece suporte aos seguintes novos recursos e aprimoramentos:
- Suporte ao Git para gerenciar arquivos no Dreamweaver
- Novos temas de código
- Experiência inicial aprimorada para novos usuários
Leia mais para saber mais sobre esses recursos e aprimoramentos.
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.
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.
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
Você também pode acessar os dois tutoriais em vídeo pelo menu Ajuda. Clique em Ajuda > Tutorial rápido para ver os tutoriais.
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.
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.
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.
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.
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.
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.
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:
- Alterações em menus, áreas de trabalho e barras de ferramentas
- Alterações no painel Snippets
- Alterações no painel Arquivos
- Alterações na tela de boas-vindas e na experiência inicial
- Realce dinâmico no recurso Localizar e substituir
- Aprimoramentos nas bibliotecas da Creative Cloud
- Recuperação automática dos arquivos após uma falha
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.
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.
Para obter mais informações, consulte Dicas de código e preenchimento de código.
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.
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.
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.
Para obter mais informações, consulte Visualização em tempo real no navegador.
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.
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).
Para obter mais informações, consulte Obter ajuda com o CSS no Dreamweaver usando os Documentos rápidos.
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.
Para obter mais informações, consulte Usar vários cursores para adicionar ou alterar o texto em vários locais.
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.
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.
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.
Para obter mais informações sobre alterações na área de trabalho, consulte Área de trabalho do Dreamweaver.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.