Resumo dos novos recursos

A nova versão de 2014 do Dreamweaver inclui vários aprimoramentos à Visualização dinâmica e ao CSS Designer para ajudar a criar e atualizar facilmente conteúdos para a Web e dispositivos móveis. O novo recurso Exibição rápida do elemento ajuda a exibir, navegar e editar rapidamente a marcação HTML.

Este artigo apresenta esses novos recursos e vários outros aprimoramentos, além de fornecer links para outros recursos de ajuda e aprendizado.

Exibição rápida do elemento

Revise a marcação no documento usando o novo recurso Exibição rápida do elemento, que cria uma árvore HTML interativa dos conteúdos estático e dinâmico. Modifique a estrutura do conteúdo estático diretamente na árvore HTML. 

Exibição rápida do elemento

A Exibição rápida do elemento (Exibir > Exibição rápida do elemento) foi criada para ajudar a acelerar o processo de desenvolvimento. Em versões anteriores do Dreamweaver, era necessário destacar os elementos HTML na Visualização dinâmica, alternar para a Visualização de código e editar os elementos. Depois da edição, era necessário voltar novamente para a Visualização dinâmica a fim de visualizar as alterações. Agora, com a Exibição rápida do elemento, você pode exibir todos os elementos da página em uma exibição única e fácil de ler e editar o conteúdo estático.

Para obter mais informações, consulte Exibição rápida do elemento.

Novos recursos de edição na Visualização dinâmica

Inspecione e altere as propriedades de elementos HTML diretamente na Visualização dinâmica e veja o resultado sem precisar atualizar tudo.  

Inspetor de propriedades rápido

A Visualização dinâmica agora exibe o Inspetor de propriedades rápido para elementos HTML em suas páginas. Dependendo do elemento HTML selecionado, o Inspetor de propriedades rápido permite editar atributos ou texto diretamente na Visualização dinâmica.

Inspetor de propriedades rápido para editar atributos de imagem

Inspetor de propriedades da Visualização dinâmica para formatar texto
Inspetor de propriedades rápido para formatar texto

Para obter mais informações, consulte Inspetor de propriedades rápido da Visualização dinâmica.

Exibição do elemento

Com a nova Exibição do elemento, agora é possível associar elementos HTML a classes e IDs diretamente na Visualização dinâmica. A Exibição do elemento indica as classes e IDs disponíveis para ajudar a exibir e escolher a opção necessária rapidamente.

Exibição do elemento para editar classes e IDs

Para obter mais informações, consulte Associar elementos HTML com classes e IDs.

Edição de texto dinâmico

Agora, você pode editar texto diretamente na Visualização dinâmica e visualizar as alterações sem precisar alternar entre visualizações diferentes.

Clique duas vezes no elemento de texto na Visualização dinâmica para entrar no modo de edição. Para obter mais informações, consulte Editar texto diretamente na Visualização dinâmica.

Editar texto diretamente na Visualização dinâmica. Edição de texto dinâmico.
Editar texto diretamente na Visualização dinâmica

Inspetor de propriedades da Visualização dinâmica

O Inspetor de propriedades está agora disponível na Visualização dinâmica, assim você pode editar sua página rapidamente sem alternar para a visualização de código ou de design.

Para obter mais informações, consulte Inspetor de propriedades da Visualização dinâmica.

Inspetor de propriedades da Visualização dinâmica
Inspetor de propriedades da Visualização dinâmica

Inserção dinâmica

Nessa versão, você pode inserir elementos HTML diretamente na Visualização dinâmica usando o painel Inserir. Os elementos são inseridos em tempo real, sem a necessidade de alternar os modos. Também é possível visualizar as alterações imediatamente. 

Para obter mais informações, consulte Inserir elementos diretamente na Visualização dinâmica.

Arrastar e soltar na Visualização dinâmica do painel Inserir
Arrastar e soltar na Visualização dinâmica do painel Inserir

Aprimoramentos no CSS Designer

Interface de usuário aprimorada para controle de bordas

Um controle com guias que ajuda a configurar as propriedades das quatro bordas de maneira fácil e intuitiva.

  • Controle com guias para evitar que todos os valores sejam exibidos de uma vez, reduzindo a confusão.
  • Ícones intuitivos e fáceis de usar que qualquer iniciante pode acompanhar.
  • Dois conjuntos de ícones para indicar os estados não definido/excluído e desativado.
  • Uma guia “Todos os lados” única para definir as propriedades de todas as bordas de uma vez.
  • Linha computada que direciona você até a guia mais adequada durante a inspeção. 
Propriedades do Controle de bordas antes da versão 2014 do Dreamweaver CC

Propriedades do Controle de bordas na versão 2014 do Dreamweaver CC

Para obter mais informações, consulte Definir propriedades de borda.

Copiar e colar estilos

Agora é possível copiar estilos de um seletor e colá-los em outro. Você pode copiar todos os estilos ou somente uma categoria de estilos específica, como Layout, Texto e Borda.

Clique com o botão direito em um seletor e escolha entre as opções disponíveis:  

Copiar estilos usando o CSS Designer
Copiar estilos usando o CSS Designer

  • Se um seletor não tiver estilos, as opções Copiar e Copiar todos os estilos estarão desabilitadas.
  • A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a opção Copiar e Copiar todos os estilos fica disponível.
  • É possível colar estilos existentes parcialmente em um seletor (sobreposição). A união
    de todos os seletores é colada.
  • Também é possível copiar e colar estilos para diferentes integrações de arquivos CSS:
    estilos de importação, link e inline.

Caixas de texto de edição rápida

O Dreamweaver agora inclui caixas de texto de edição rápida, nas quais você pode especificar o código abreviado de propriedades, como margem, preenchimento, borda e raio da borda. Essa alteração foi feita para os usuários que preferem especificar o código em vez de usar o mouse ou o teclado para especificar propriedades. 

Caixas de texto de edição rápida

Especificar propriedades

Aprimoramentos no fluxo de trabalho de propriedades personalizadas

Antes, era necessário clicar em + no painel Propriedades do CSS Designer para adicionar as propriedades “Outro“ (ou personalizado). Agora, um grupo de caixas de texto (nome e valor da propriedade) torna-se prontamente disponível no final da lista Propriedades. Essas caixas de texto permitem digitar diretamente o nome da propriedade e seu valor sem precisar clicar em +.

Para adicionar outras linhas de propriedades personalizadas, pressione Tab.

O nome do grupo de propriedades “outro” foi alterado para “Personalizado”.

Caixas de texto para adicionar o nome e valor da propriedade

Atalhos de teclado

Agora, você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Também é possível navegar entre os grupos de propriedades no painel Propriedades.  

Atalho

Fluxo de trabalho

CTRL + Alt +[Shift =]

Adiciona seletor (se o controle estiver na seção de seletor)

CTRL + Alt+ S

Adiciona seletor (se o controle estiver em qualquer lugar no aplicativo)

CTRL + Alt +[Shift =]

Adiciona propriedade (se o controle estiver na seção de propriedade)

CTRL + Alt+ P

Adiciona propriedade (se o controle estiver em qualquer lugar no aplicativo)

Select + Delete

Exclui o seletor, se ele estiver selecionado

CTRL + Alt + (PgUp/PgDn)

Salta entre seções - enquanto estiver no subpainel propriedades 

Seletores mais específicos/menos específicos

Nessa versão, o Dreamweaver oferece até três (ou menos) sugestões de regra ao adicionar um seletor. Você pode torná-lo mais ou menos específico usando as teclas de seta para cima/para baixo.

Seletores mais específicos/menos específicos
Seletores mais específicos/menos específicos

Rolar para a categoria

Antes, quando você clicava na categoria Fundo ou Outro na parte superior do painel Propriedades do CSS Designer, essas categorias tornavam-se “visíveis” no painel. As categorias não eram exibidas na parte superior do painel.

Agora, as categorias Fundo e Outro (renomeada para Personalizado) são exibidas na parte superior do painel quando você clica nelas.

Rolar para a categoria

Suporte para conexões SFTP usando o arquivo de identidade

A versão de 2014 do Dreamweaver permite conectar a servidores de publicação por SFTP usando pares de chaves pública-privada e chaves de identificação (com ou sem frase secreta). Com esse aprimoramento do Dreamweaver, suas opções de provedores de serviço de hospedagem na Web foram ampliadas. Você pode assinar qualquer provedor de serviços que exija o uso de pares de chaves pública-privada para autenticação.

Observação:

O Dreamweaver oferece suporte apenas aos arquivos de chave OpenSSH.

Para obter mais informações, consulte Conexões SFTP.

Aprimoramentos no recurso Desfazer/Refazer

Até então, para desfazer/refazer uma operação executada no painel CSS Designer, era necessário clicar no arquivo CSS (em arquivos relacionados) e desfazer/refazer a operação. 

Com os aprimoramentos no recurso Desfazer/Refazer, você pode desfazer/refazer uma operação diretamente da Visualização dinâmica de um documento no painel CSS Designer. Essas alterações serão refletidas automaticamente no arquivo CSS associado. Para informar a você que o arquivo relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos).

  • Quando você desfaz/refaz uma ação no painel CSS Designer, a Visualização dinâmica é atualizada automaticamente.
  • Ao editar o documento usando o código-fonte e desfazer as alterações na Visualização dinâmica, a exibição muda para Visualização dividida, e o código-fonte relacionado é colocado em foco.

Todas as ações de desfazer/refazer são registradas no nível do arquivo HTML. Isso significa que todas as alterações manuais realizadas em um arquivo CSS podem ser desfeitas de QUALQUER arquivo relacionado. Por exemplo, considere que o style1.css e o style2.css estão relacionados ao index.html. Se você adicionar estilos ao .h1 em style1.css e os desfizer no style2.css, os estilos adicionados ao .h1 serão excluídos do style1.css.  

Observação:

Para desfazer/refazer alterações em arquivos JavaScript, alterne para o respectivo arquivo JS e desfaça/refaça. 

Alterações no fluxo de trabalho do Business Catalyst e do PhoneGap Build

O Business Catalyst e o PhoneGap Build agora são disponibilizados como complementos do Dreamweaver. Instale o Business Catalyst e o PhoneGap Build como extensões e continue usando esses serviços como fazia antes.

Para instalar as extensões do Business Catalyst e do PhoneGap Build, vá para Gerenciar > Buscar complementos, procure as extensões e instale-as.

Alterações no acesso a extensões do Dreamweaver

Agora é possível exibir e instalar extensões do Dreamweaver usando a Adobe Creative Cloud. As extensões são denominadas “Complementos”.

Para procurar complementos na Adobe Creative Cloud, clique em Janela > Buscar complementos no Dreamweaver. A página de complementos da Adobe Creative Cloud é exibida. 

Janela > Extensões no Dreamweaver CC 13.0
Janela > Extensões no Dreamweaver CC 13.0

Janela > Buscar complementos no Dreamweaver CC 2014
Janela > Buscar complementos na versão 2014 do Dreamweaver CC

Para obter mais informações sobre como instalar os complementos, consulte Complementos.

Alterações na sincronização de configurações

O recurso Sincronizar configurações no Dreamweaver permite manter as configurações sincronizadas com instâncias do Dreamweaver em seus computadores e na Creative Cloud. A versão de 2014 do Dreamweaver detecta automaticamente se você ativou o recurso Sincronizar configurações na versão anterior do Dreamweaver e permite importar as configurações da Creative Cloud.

Ao iniciar a versão de 2014 do Dreamweaver pela primeira vez após a instalação, a seguinte caixa de diálogo é exibida: 

Importar configurações de sincronização
Importar configurações de sincronização

  • Para importar as configurações armazenadas na Creative Cloud, clique em Importar config. sincr

Observação: essa opção não estará disponível posteriormente. 

  • Para sincronizar as configurações na instância atual do Dreamweaver com a Creative Cloud, clique em Sincronização local.
  • Para sincronizar automaticamente as configurações, selecione Sempre sincronizar configurações automaticamente.
  • Para exibir opções avançadas de sincronização de configurações, clique em Avançado.

Enviar bug/solicitação de recurso diretamente do Dreamweaver

Agora é possível acessar os formulários de sugestões e de relatório de erro diretamente no Dreamweaver em Ajuda > Enviar bug/solicitação de recurso.

Enviar bug/solicitação de recurso no menu Ajuda
Enviar bug/solicitação de recurso no menu Ajuda

Centro de Ajuda

Aprenda a usar novos recursos e realizar tarefas comuns do Dreamweaver com o novo Centro de Ajuda

Ao contrário das versões anteriores, agora você pode descobrir novos recursos e fluxos de trabalho eficazes ao iniciar o Dreamweaver pela primeira vez. É possível ignorar o tour do recurso novo ou desativar a mensagem de ajuda no aplicativo quando desejar. Se necessário, você pode ativá-los novamente.

Procedimento para novos recursos

O Dreamweaver agora inclui um minitour dos novos recursos que são fornecidos na versão mais recente.
Além de apresentar os novos recursos, o tour também direciona você até uma galeria de vídeos,
onde você pode ver os novos recursos em ação.

O procedimento para novos recursos ou a opção de minitour são exibidos assim que você
inicia o Dreamweaver. Você também tem a opção de ignorar o tour e ir para a
tela de boas-vindas para começar a trabalhar.

Observação: o procedimento para novos recursos é exibido após instalar ou atualizar o
Dreamweaver ou excluir preferências e reiniciar o Dreamweaver.

Tour de novos recursos
Tour de novos recursos

Veja um resumo do que é exibido no procedimento para novos recursos:

  • Mensagem de boas-vindas. Você também é solicitado a especificar se usou o Dreamweaver anteriormente para que a experiência possa ser personalizada adequadamente.
  • Apresentação de recurso por recurso e uma breve descrição (com uma opção para ignorar o tour).
  • Galeria de vídeos contendo vídeos relacionados aos novos recursos.

Galeria de vídeos

Ao final do procedimento para novos recursos, a galeria de vídeos é exibida com vídeos
relacionados aos novos recursos. Quando você passa o mouse sobre as miniaturas, uma breve
descrição do vídeo é exibida.

Galeria de vídeos
Galeria de vídeos

Observação:

Você pode acessar o procedimento para novos recursos e a galeria de vídeos a qualquer momento enquanto usa o Dreamweaver.
Para fazer isso, vá para o menu Ajuda ou a Tela de boas-vindas e clique na opção necessária.

Mensagens no aplicativo

O Dreamweaver agora apresenta dicas para aumentar a produtividade enquanto você trabalha
em seus projetos. O objetivo dessas dicas é ajudar você a executar de forma mais eficiente a tarefa
que está realizando.

As dicas são baseadas em “acionadores” específicos. Por exemplo, quando você clica nos seletores Tag
em qualquer exibição ou clica com o botão direito do mouse em um elemento para inspecioná-lo, o prompt para a
Visualização rápida de elemento é exibido. A Exibição rápida do elemento é um recurso novo que ajuda a exibir
e editar a marcação HTML de forma mais fácil que outros métodos anteriores (acionadores).

Depois que você tiver utilizado as sugestões apresentadas, a mensagem no aplicativo não será exibida novamente
para o mesmo acionador. Porém, a mensagem será exibida novamente para outros acionadores que forem identificados.

É possível desativar a exibição de mensagens no aplicativo em Preferências. Para obter
mais informações, consulte Desativar ou redefinir mensagens no aplicativo e no produto

Exemplos de mensagens no aplicativo: 

Exibição rápida do elemento

Acionadores:

  • Os seletores de tags (todas as exibições) estão selecionados
  • Dinâmico + Inspecionar ou clique com o botão direito do mouse + Inspecionar sobre um elemento

Mensagem:

Mensagem de Exibição rápida do elemento

Inspetor de propriedades da Visualização dinâmica para classes e IDs 

Acionadores:

  • Editar ID usando PI na Visualização de design

Mensagem:

Mensagem da Visualização dinâmica

Mensagens no produto

O Dreamweaver integra-se perfeitamente com muitos outros aplicativos da Creative Cloud,
e as mensagens no produto apresentam esses fluxos de trabalho de integração. Usando esses
fluxos de trabalho, você pode utilizar melhor a Adobe Creative Cloud e seus recursos.

As mensagens no produto são exibidas com base nos “acionadores” identificados. Por exemplo, ao
tentar usar as Transições do CSS, o fluxo de trabalho do “Edge Animate” é sugerido por meio da
mensagem no produto.

Uma mensagem no produto contém uma breve descrição do fluxo de trabalho alternativo (ou melhor)
que você pode usar em um cenário específico. Ela também inclui uma miniatura de vídeo
em que você pode clicar para ver um vídeo que explica o fluxo de trabalho. O botão Mais informações vincula você
a um item/blog que fornece mais informações.

As mensagens no produto são exibidas somente uma vez quando o acionador identificado ocorre.

Observação:

Exemplos de mensagens no produto: 

Edge Animate

Acionador:

  • Clique em Transição do CSS e depois em +

Mensagem:

Mensagem do Edge Animate

Parfait

Acionador:

  • Inserir imagem > Editar configurações da imagem

Mensagem:

Editar configurações da imagem

Desativar ou redefinir mensagens no aplicativo e no produto

Vá para a caixa de diálogo Preferências > Acessibilidade e faça o seguinte:

  • Para desativar as mensagens, desmarque a caixa de seleção Mostrar ajuda no aplicativo.

Se você reativá-las, as mensagens exibidas anteriormente não serão exibidas.
Serão exibidas apenas as mensagens que não foram exibidas antes.

  • Para ver as mensagens exibidas antes, clique em Redefinir.
desativar dicas. desativar as mensagens no aplicativo.
Preferências para desativar ou redefinir a ajuda no aplicativo

Alterações no menu Ajuda

Agora, o menu Ajuda está reorganizado para fornecer acesso rápido aos procedimentos para novos recursos, à galeria de vídeo, aos recursos de Ajuda e aprendizado e ao formulário de envio de bug/solicitação de recurso.

Menu Ajuda antes do Dreamweaver CC 2014
Menu Ajuda antes da versão 2014 do Dreamweaver CC

Menu Ajuda do Dreamweaver CC 2014
Menu Ajuda na versão 2014 do Dreamweaver CC

Logotipo da Adobe

Fazer logon em sua conta