A nova versão 2014 do Dreamweaver CC inclui vários aprimoramentos para Visualização dinâmica e CSS Designer que ajudam a criar e a 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 o markup 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 processa uma árvore de HTML interativa para os conteúdos estático e dinâmico. Modifique a estrutura estática do conteúdo direto na árvore HTML. 

Exibição rápida do elemento
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 qualquer um dos direitos de propriedades de elementos HTML na Visualização dinâmica e veja como fica sua aparência 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. Com base no 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 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 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 ajudá-lo a exibir e escolher a opção requerida rapidamente.

Exibição do elemento para editar classes e IDs
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 de forma que você pode editar a 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 do CSS Designer

Interface de usuário aprimorada para controle de bordas

Um controle com guias que ajuda a configurar as quatro propriedades de 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 antes da versão 2014 do Dreamweaver CC

Propriedades do Controle de bordas na 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á-lo em outro. Você pode copiar todos os estilos ou copiar apenas a categoria de estilos específica como Layout, Texto e Borda.

Clique com o botão direito no mouse 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 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, onde você pode especificar o código abreviado para 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
Caixas de texto de edição rápida

Especificar propriedades
Especificar propriedades

Aprimoramentos no fluxo de trabalho personalizado de propriedades

Antes, era necessário clicar em + no painel Propriedades do CSS Designer para adicionar as propriedades “Outras“ (ou personalizadas). 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 linhas de propriedades personalizadas adicionais, pressione Tab.

O nome do grupo de propriedades “other“ é alterado para “Custom“.

Caixas de texto para adicionar o nome e valor da propriedade
Caixas de texto para adicionar o nome e valor da propriedade

Atalhos do 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

Com essa 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 (renomeadas para Personalizado) são exibidas na parte superior do painel quando você clica nelas.

Rolar para a categoria
Rolar para a categoria

Suporte para conexões SFTP usando o arquivo de identidade

A versão 2014 do Dreamweaver CC 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 chave OpenSSH.

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

Desfazer/Refazer aprimoramentos

Até aqui, 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 são disponibilizados como add-ons do Dreamweaver. Agora, instale o Business Catalyst e o PhoneGap Build como extensões e use esses serviços como fazia antes.

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

Alterações em extensões de acesso para Dreamweaver

Agora é possível exibir e instalar extensões do Dreamweaver usando a Adobe Creative Cloud. Agora, as extensões são denominadas “Add-ons”.

Para procurar add-ons na Adobe Creative Cloud, clique em Janela > Buscar add-ons no Dreamweaver. A página Add-ons da Adobe Creative Cloud é exibida. 

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

Janela > Buscar add-ons no Dreamweaver CC 2014
Janela > Procurar add-ons na versão 2014 do Dreamweaver CC

Para obter mais informações sobre como instalar os add-ons, consulte Add-ons.

Alterações para sincronizar 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 2014 do Dreamweaver CC 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.

Quando você inicia a versão 2014 do Dreamweaver CC 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 que são 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 as opções avançadas de configurações de sincronização, clique em Avançado.

Envio de erros/solicitação de recursos diretamente do Dreamweaver

Agora é possível acessar diretamente ao formulário de Wishlist e de relatório de erro no Dreamweaver (Ajuda > Enviar solicitação de erro/recurso.

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

Help Center

Aprenda a usar novos recursos e como abordar tarefas comuns do Dreamweaver com o novo Help Center

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 e continuar trabalhando.

Observação: o procedimento para novos recursos é exibido durante a instalação ou atualização do
Dreamweaver ou quando você exclui preferências e reinicia 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 a Dreamweaver CC anteriormente para que a experiência possa ser personalizada adequadamente.
  • Introdução recurso por recurso e uma breve descrição (com uma opção para ignorar o tour).
  • Galeria de vídeos contendo os 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 Bem-vindo 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 “triggers” 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 Visualização rápida de elemento é um recurso novo que ajuda a exibir
e editar a marcação HTML de forma mais fácil do que a de outros métodos que você já experimentou (acionadores).

Depois que você tiver utilizado as sugestões apresentadas, o prompt no aplicativo não será exibido novamente
para o mesmo acionador. Porém, o prompt será exibido novamente para os outros
triggers 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) são clicados
  • 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
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 em Visualização de design

Mensagem:

Mensagem da Visualização dinâmica
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 a Adobe Creative Cloud e suas ofertas de uma maneira melhor.

As mensagens no produto são exibidas com base nos “triggers” 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:

Para ver as mensagens novamente, redefina a configuração de ajuda no aplicativo em Preferências.
Para obter mais informações, consulte Desativar ou redefinir mensagens no aplicativo e no produto

Exemplos de mensagens no produto:: 

Edge Animate

Acionador:

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

Mensagem:

Mensagem do Edge Animate
Mensagem do Edge Animate

Parfait

Acionador:

  • Inserir imagem > Editar configurações da imagem

Mensagem:

Editar configurações da imagem
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 aprendizagem e ao formulário de envio de solicitação de erro/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

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