As últimas atualizações para a versão 2014 do Dreamweaver CC incluem integração com o Extract para ajudar você a criar sites para desktop e dispositivos móveis de uma composição de PSD diretamente no Dreamweaver. As novas guias dinâmicas tornam mais fácil inserir e reorganizar com precisão os elementos HTML, e a edição avançada da visualização dinâmica permite fazer alterações em tempo real.

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

Adobe Dreamweaver CC 2014.1.1 (fevereiro de 2015)

Nova tela de boas-vindas

É a primeira vez que você usa o Dreamweaver? Você já usou o Dreamweaver e quer ampliar seus conhecimentos? Deseja saber o que mudou da versão anterior para a versão atual? Se você for usuário iniciante ou usuário experiente ou se estiver avaliando a nova versão do Dreamweaver, agora será possível obter todos os recursos de aprendizado essenciais na Tela de boas-vindas.

A atualização mais recente para a Dreamweaver CC versão 2014 fornece acesso rápido a vídeos (inclusive novos recursos), tutoriais práticos, dicas e técnicas e muito mais na Tela de boas-vindas.

Tela Bem-vindo
Tela Bem-vindo

Observação:

essa nova Tela de boas-vindas está disponível somente para usuários do idioma inglês. Para usuários de outros idiomas, são exibidos a Tela de boas-vindas e o Procedimento para novos recursos no Dreamweaver CC 2014.1.

Melhorias para painel Extract

Os ícones Guias dinâmicos e Exibição rápida do elemento agora aparecem na Visualização dinâmica quando você arrasta imagens do painel Extract. Esses auxílios visuais ajudam a colocar a imagem de forma rápida e precisa na posição desejada.

Painel Extract
Painel Extract

Aprimoramentos na edição na Visualização dinâmica

Elementos do tipo arrastar e soltar

Agora você pode mover elementos na Visualização dinâmica arrastando o nome da tag associada. Quando você passa o mouse sobre um nome da tag, o cursor mão é exibido para indicar o elemento que pode ser arrastado. É possível soltar o elemento arrastado com a ajuda do recurso Guias dinâmicas que indicará visualmente o posicionamento do elemento que virá após o elemento solto.

Marca de seleção

Agora você pode selecionar textos, imagens ou outros elementos em uma tag, clicando e arrastando em qualquer lugar dentro de uma tag (marca de seleção). A marca de seleção ajuda a selecionar facilmente vários elementos dentro de uma tag.

Observação:

somente as operações que têm suporte do navegador são compatíveis com a marca de seleção na Visualização dinâmica.

Melhorias para Exibição do elemento

Agora a Exibição do elemento mostra o texto de dica “Classe/ID” para indicar claramente que uma classe ou ID podem ser especificadas.

Além disso, as alterações feitas na Exibição do elemento são salvas quando você clica em “+”. Também é possível pressionar Enter ou Return para salvar alterações, como nas versões anteriores do Dreamweaver. 

Novos temas de Visualização de código

Dez novos temas de cores estão adicionados à Visualização de código:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

Para obter mais informações sobre os temas da Visualização de código, consulte Definir tema de cores para Visualização de código.

Melhorias do CSS Designer

Essa atualização inclui algumas alterações na interface de usuário do CSS Designer e uma alteração na configuração padrão da caixa de seleção Exibir conjunto

No início, a caixa de seleção Exibir conjunto será selecionada por padrão e as alterações feitas para essa opção permanecerão ao longo das sessões do Dreamweaver. Por exemplo, se desmarcar essa opção, a próxima sessão do Dreamweaver manterá a configuração e exibirá a opção como não verificada.

Estas são as alterações na interface do usuário:

  • O painel CSS Designer rola quando a propriedade é adicionada: ao clicar em “+” na seção Propriedades, o painel rola de modo que a linha Adicionar propriedade seja exibida quase no centro do painel Propriedades. Se a seção Propriedades for muito pequena, o painel rola para mostrar a linha Adicionar propriedade na parte inferior da seção.
  • Realce de fundo: quando o foco está na caixa de texto Adicionar nova propriedade, a linha é realçada em fundo cinza. 
  • Posição dos botões “+” e “-”: a posição dos botões “+” e “-” que aparecem em cada seção no CSS Designer (Fonte, Seletores, Consulta de mídia e Propriedades) é mudada para esquerda da extrema direita para torná-los mais visíveis.
  • A categoria “Personalizar” agora é chamada de “Mais”.

Depuração remota da visualização dinâmica

Você pode depurar remotamente os documentos abertos do Dreamweaver na visualização dinâmica usando a rolagem DevTools Cromo do Google. No Google Chrome, você pode usar a porta 5471, que pode ser ativada seguindo estas etapas:

  1. Inicie o Dreamweaver, seguindo o comando:

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: abrir <installation_path> --args -enableRemoteDebugging

    Observação: insira dois hifens antes de args

  2. Clique em OK na caixa de diálogo indicando que a porta 5471 é ativada para depuração.

    O Dreamweaver é iniciado.

    Clique em OK na caixa de diálogo para iniciar o Dreamweaver
    Clique em OK na caixa de diálogo para iniciar o Dreamweaver

  3. Abra os documentos que você deseja depurar na visualização dinâmica.

  4. Para iniciar a depuração, abra o Google Chrome e navegue até localhost:5471. Uma lista de links é exibida para todos os documentos abertos no Dreamweaver. 

    Observação: como o novo painel da tela Boas-vindas e do Extract usam Chromium Embedded Framework (CEF), você também verá entradas relacionadas a esses recursos.

    Agora você pode usar a rolagem DevTools Cromo do Google para depurar os documentos necessários.

  5. Para interromper a depuração e abrir o Dreamweaver no modo normal, saia do Dreamweaver e inicie-o novamente.

Outros aprimoramentos

Alterações no fluxo de trabalho de preferências de redefinição

Agora, quando você redefine as preferências usando os atalhos de teclado, o Dreamweaver cria um backup das preferências na pasta “Backups do Adobe Dreamweaver CC 2014.1”. Essa pasta é criada automaticamente na mesma pasta como a pasta de preferências original do Dreamweaver no Windows e no Mac.

O caminho completo da pasta de backup é exibido na caixa de diálogo de preferências de redefinição.

Redefinir preferências e configurações
Redefinir preferências e configurações

Alteração no modo de exibição de documentos dinâmicos

Por padrão, documentos dinâmicos, como ASP, PHP e CFM, já não abrem no Visualização de código. Eles abrem no mesmo modo (Código/Dinâmica/Dividir) como o último documento fechado ou o último documento em foco.

Adobe Dreamweaver CC 2014.1 (outubro de 2014)

Extract no Dreamweaver

A integração do Extract com o Dreamweaver permite que os designers e desenvolvedores da Web apliquem as informações de design e extraiam os ativos otimizados para a Web diretamente no ambiente de codificação. O Extract fornece uma solução completa e independente para a extração de ativos e informações de estilo de composições de PSD, reduzindo a necessidade de intercalar entre o Photoshop e o Dreamweaver.

Com o painel Extract no Dreamweaver, você pode extrair CSS, imagens, fontes, cores, degradês e medidas para a sua página da Web. Além desses recursos básicos do Extract, o Dreamweaver também oferece os seguintes recursos exclusivos:

  • O acesso direto aos arquivos PSD na Creative Cloud e aos arquivos PSD que são compartilhados com você em uma pasta colaborativa
  • Dica de código de contexto para definir facilmente fontes, cores e degradês no CSS
  • Suporte à função Arrastar e soltar para criar tags de imagens de camadas PSD
  • Colagem de estilos diretamente na Visualização dinâmica (por exemplo, CSS Designer e Exibição do elemento)

A área de trabalho padrão no Dreamweaver (chamada Extract) mostra o painel do Extract à esquerda para que você possa começar rapidamente. No primeiro lançamento do Dreamweaver, o painel do Extract mostra um tutorial simples para ajudá-lo a aprender sobre os fluxos de trabalho do Extract. Você pode clicar em Introdução a começar a usar o Extract.

Painel Extract área de trabalho padrão
Painel Extract

Para obter mais informações sobre fluxos de trabalho do Extract no Dreamweaver, consulte Integração do Dreamweaver com o Extract.

Arquitetura de 64 bits

A versão de 64 bits do Dreamweaver está disponível e suporta todos os recursos assim como a versão de 32 bits. Com essa adição, agora você pode baixar as seguintes versões do Dreamweaver do aplicativo Adobe Creative Cloud:

SO Local de instalação padrão Pasta Preferências do aplicativo
Windows de 32 bits C:\Arquivos de programas\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows de 64 bits C:\Arquivos de programas\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac de 64 bits /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Perguntas frequentes

  • Um aplicativo de 64 bits poderá ser executado na versão de 32 bits do Windows? - Não
  • É possível instalar a versão de 32 bits e de 64 bits no mesmo computador Windows? - Não
  • Como posso verificar se o meu sistema está executando a versão de 32 ou de 64 bits do Dreamweaver?
    • Windows: inicie o Dreamweaver. Abra o Gerenciador de tarefas e procure o processo do Dreamweaver. Se a versão lançada do Dreamweaver for de 64 bits, o nome do processo será “Dreamweaver.exe”. Se a versão lançada for de 32 bits, o nome do processo será “Dreamweaver.exe *32”.
    • Mac: abra o Monitor de atividades e verifique Exibir > Colunas > Tipo. Procure o Dreamweaver no Monitor de atividades e observe a coluna Tipo. Se o Dreamweaver for de 64 bits, a coluna Tipo indicará “64 bits”.

Instalação da versão de 64 bits do Dreamweaver

  1. Assegure-se de que o computador esteja executando um sistema operacional de 64 bits:

    Para verificar se o computador é de 64 bits, siga as etapas descritas nos artigos a seguir:

  2. Baixe a versão de 64 bits do Dreamweaver da Creative Cloud e instale a versão.

Melhorias na Visualização dinâmica

Guias dinâmicos

Os guias dinâmicos são ferramentas visuais de feedback na Visualização dinâmica que indicam as posições possíveis onde você pode inserir um elemento nos seguintes cenários:

  • Ao arrastar do painel Inserir
  • Ao arrastar do painel Ativo
  • Arrastando (movendo) elementos na Visualização dinâmica.

Observação:

os guias dinâmicos não são suportados nos documentos de grade fluida.

Os guias dinâmicos aparecem conforme você passa o mouse sobre elementos diferentes na página antes de soltar um elemento. Eles podem aparecer acima, abaixo, à esquerda ou à direita do elemento sobre o qual o mouse é passado.

  • Acima e abaixo — aparece ao passar o mouse sobre todos os tipos de elementos/tags, exceto tags inline. Quando você passa o mouse na metade superior do elemento, os guias aparecem acima do elemento no qual o mouse foi passado. Quando você passa o mouse na metade inferior do elemento, os guias aparecem abaixo do elemento no qual o mouse foi passado.
Guias dinâmicos acima e abaixo dos elementos sobre os quais o mouse é passado
Guias dinâmicos acima e abaixo dos elementos sobre os quais o mouse é passado

  • Esquerdo e direito — aparece ao passar o mouse sobre tags inline, por exemplo, <a> ou <span>, ou sobre as tags que têm a propriedade “float” definida.
Guias dinâmicos à direita e à esquerda dos elementos sobre os quais o mouse é passado
Guias dinâmicos à direita e à esquerda dos elementos sobre os quais o mouse é passado

Inserção de um elemento estrutural com precisão

Você pode usar a Exibição rápida do elemento junto com os Guias dinâmicos para inserir mais precisamente um elemento HTML na estrutura do documento. 

Ao pausar por um tempo antes de soltar o elemento, o ícone de Exibição rápida do elemento (</>) é exibido. Quando você passa o mouse sobre esse ícone, a Exibição rápida do elemento é aberta e você pode soltar o elemento na Exibição rápida do elemento.

Ícone Exibição rápida do elemento
Ícone de Exibição rápida do elemento que ajuda na inserção com precisão

Agora é possível recortar, copiar, colar e excluir elementos na Visualização dinâmica usando o menu de contexto de clique com o botão direito do mouse. Você também pode duplicar elementos ou selecionar a tag mãe ou filha usando o menu de contexto na Visualização dinâmica.

Observação:

você também pode usar os atalhos do teclado (por exemplo, no Windows, Ctrl+x, ctrl+c, Ctrl+v, Ctrl + d e a tecla Delete) na Visualização dinâmica.

Primeiro, selecione um elemento na Visualização dinâmica para ver a Exibição do elemento. Em seguida, clique com o botão direito na área da tag para ver as opções do menu contextual acima. As opções são funcionais no nível da tag. 

Alterações na Exibição do elemento

Agora, você pode aplicar não apenas os seletores a um elemento, mas também pode criar um seletor na origem CSS desejada e atribuir uma consulta de mídia usando a Exibição do elemento. Quando você digita um seletor que não existe em nenhuma folha de estilos e pressione Enter, a Exibição do elemento fornece as opções para escolher uma origem CSS e uma consulta de mídia.

Opções de origem CSS e de consulta de mídia na Exibição do elemento
Opções de origem CSS e de consulta de mídia na Exibição do elemento

Se você não quiser escolher uma origem CSS ou uma consulta de mídia, pressione Esc para ignorar as opções.

Agora, você pode clicar com o botão direito em um seletor aplicado para ir para o código correspondente (opção Ir para código) ou para colar quaisquer estilos copiados (opção Colar estilos).

Opções Ir para código e Colar estilo na Exibição do elemento
Opções Ir para código e Colar estilo na Exibição do elemento

Observação:

ir para a opção Código mostra subopções, se o mesmo seletor for adicionado a várias consultas de mídia. A opção Colar estilos mostra subopções, se os seletores copiados forem pseudoseletores ou seletores compostos.

Movimentação de elementos na Visualização dinâmica

Agora, o Dreamweaver suporta o movimento de elementos (no nível da tag) na Visualização dinâmica. Você pode selecionar um elemento na Visualização dinâmica e arrastar e soltá-lo em qualquer outra posição.

  1. Clique no elemento que deseja mover e quando a Exibição de elemento (caixa azul em torno de elementos) for exibida, arraste o elemento. Quando o “arrastar” é inicializado, o cursor do mouse é alterado indicando que o elemento está pronto para ser movido.

  2. Os elementos de referência (elementos com relação ao qual você deseja colocar o elemento arrastado) são destacados com uma borda azul. Os Guias dinâmicos (em verde) aparecem para indicar os possíveis locais onde podem ser soltos com relação ao elemento de referência.

Observação:

somente os elementos estáticos podem ser movidos na Visualização dinâmica. As tags de conteúdo dinâmico, como PHP, não podem ser movidas.

Ao pausar por um tempo antes de soltar o elemento, o ícone de Exibição rápida do elemento (</>) é exibido. Quando você passa o mouse sobre esse ícone, a Exibição rápida do elemento é aberta e você pode soltar o elemento na Exibição rápida do elemento. 

O Dreamweaver agora suporta a navegação dos elementos de página usando o teclado para facilitar e acelerar o processo de design da Web aos usuários de teclado. Você pode usar:

  • As teclas de seta para cima e para baixo para navegar pelos elementos da página. A navegação de teclado na Visualização dinâmica facilita o acesso simples aos elementos aninhados e envolvidos.
  • A tecla Tab para percorrer os seletores na Exibição do elemento

Para obter mais informações, consulte Navegação de teclado na Visualização dinâmica.

Quick Tag Editor na Visualização dinâmica

Pressionar Ctrl+T no Windows ou Cmd+T no Mac na Visualização dinâmica mostra o Quick Tag Editor para o elemento selecionado. O Quick Tag Editor tem três estados: Editar tag, Colocar tag e Inserir HTML. Você pode alternar entre esses estados usando Ctrl/Cmd + T.

Quick Tag Editor na Visualização dinâmica
Quick Tag Editor na Visualização dinâmica

Alterações na área de trabalho do Dreamweaver

Alterações na barra de ferramentas Documento

A barra de ferramentas Documento foi alterada e simplificada para o uso.

  • As opções de Visualização dinâmica e de design são mescladas em um único controle (suspenso).
Opções de Visualização dinâmica e de design no Dreamweaver CC (outubro de 2014)
Opções de design e da Visualização dinâmica na última atualização - Dreamweaver CC (outubro de 2014)

Botões Design e Visualização dinâmica na barra de ferramentas Documento em versões anteriores
Botões Design e Visualização dinâmica na barra de ferramentas Documento em versões anteriores

  • O campo Título do documento foi movido agora para o Inspetor de propriedades.
Barra de ferramentas Documento no Dreamweaver CC (Outubro)
Barra de ferramentas Documento na última atualização - Dreamweaver CC (outubro de 2014)

Campo Título do documento movido para o Inspetor de propriedades no Dreamweaver CC (outubro de 2014)
Campo Título do documento movido para o Inspetor de propriedades na última atualização - Dreamweaver CC (outubro de 2014)

Campo Título na barra de ferramentas Documento em versões anteriores
Campo Título na barra de ferramentas Documento em versões anteriores

  • Os botões Inspecionar e Código dinâmico são substituídos por ícones.
Ícones Código dinâmico e Inspecionar no Dreamweaver CC (outubro de 2014)
Ícones Código dinâmico e Inspecionar na última atualização - Dreamweaver CC (outubro de 2014)

Botões Código ativo e Inspecionar em versões anteriores
Botões Código ativo e Inspecionar em versões anteriores

  • As opções Voltar, Avançar e Atualizar são agrupadas com a barra de endereços e colocadas no centro da barra de ferramentas Documento.
Barra de endereço com as opções Voltar, Avançar e Atualizar no Dreamweaver CC (outubro de 2014)
Barra de endereço com as opções Voltar, Avançar e Atualizar na última atualização - Dreamweaver CC (outubro de 2014)

Barra de endereço com as opções Voltar, Avançar e Atualizar nas versões anteriores
Barra de endereço com as opções Voltar, Avançar e Atualizar nas versões anteriores

  • Os ícones de Visualizar/depurar no navegador, das opções da Visualização dinâmica e do Gerenciamento de arquivos são agrupados juntos e alinhados no lado direito da barra de ferramentas Documento.
Os ícones de Visualizar/depurar no navegador, das opções da Visualização dinâmica e do Gerenciamento de arquivos no Dreamweaver CC (outubro de 2014)
Os ícones de Visualizar, Depurar no navegador, opções da Visualização dinâmica e Gerenciamento de arquivos na última atualização - Dreamweaver CC (outubro de 2014)

Os ícones de Visualizar/Depurar no navegador, das opções da Visualização dinâmica e do Gerenciamento de arquivos nas versões anteriores
Os ícones de Visualizar/Depurar no navegador, das opções da Visualização dinâmica e do Gerenciamento de arquivos nas versões anteriores

Alterações na área de trabalho padrão

As áreas de trabalho prontas para uso que estão disponíveis com o Dreamweaver são alteradas e são como se segue:

  • Código
  • Design
  • Extract
Áreas de trabalho
Áreas de trabalho

Agora a área de trabalho padrão é o Extract. Essa área de trabalho mostra o painel Extract à esquerda e a página da web à direita. No primeiro lançamento do Dreamweaver, o painel do Extract mostra um tutorial simples para ajudá-lo a aprender sobre os fluxos de trabalho do Extract. Para começar a usar o Extract, clique em Introdução.

Área de trabalho do Extract
Área de trabalho do Extract

A exibição padrão para documentos HTML agora é a Visualização dividida, uma divisão horizontal para mostrar a Visualização dinâmica e a Visualização de código. Arquivos dinâmicos como aqueles listados abaixo são abertos na Visualização de código completo por padrão. Quando você divide a visualização, esses documentos são mostrados na Visualização de design e Visualização de código.

  • PHP
  • Modelo do PHP (Example.dwt.php)
  • ASP
  • Modelo do ASP (Example.dwt.asp)
  • JSP
  • Modelo do JSP (Example.dwt.jsp)
  • CFM
  • Modelo de CFM (Example.dwt.cfm)
Exibição padrão para documentos HTML na Visualização dinâmica e na Visualização de código
Visualização padrão para documentos HTML sendo mostrados na Visualização dinâmica e na Visualização de código

Visualização padrão para os documentos dinâmicos sendo mostrados na Visualização de código completa
Visualização padrão para os documentos dinâmicos sendo mostrados na Visualização de código completa

Dica: para alternar para a Visualização de design, clique na lista suspensa adjacente a "Dinâmica" e clique em Design. Para alterar a divisão horizontal para uma divisão vertical, selecione Exibir > Dividir verticalmente. Agora, a Visualização dinâmica/de design aparece à esquerda. Para exibir a Visualização dinâmica/de design à direita, desmarque a opção Exibir > Visualização dinâmica à esquerda ou Visualização de design à esquerda.

Agora, o Dreamweaver memoriza o estado da visualização dinâmica escolhida para um documento HTML e aplica a mesma visualização para todos os documentos HTML que você abrir mais tarde. Por exemplo, considere que HTML1 é o documento que você abre primeiro. A visualização de documento é dividida com a Visualização de código e a Visualização dinâmica. Suponha que você altere a visualização deste documento para Visualização dinâmica completa. Em seguida, o próximo documento aberto, o HTML2, é exibido na Visualização dinâmica completa.  

Alterações nos documentos de grade fluida

Suporte para a edição da Visualização dinâmica

Os novos recursos de edição na Visualização dinâmica foram introduzidos na versão anterior do Dreamweaver CC. Nesta versão, esses recursos de edição na Visualização dinâmica foram também disponibilizados para documentos de grade fluida. A edição na Visualização dinâmica acelera os esforços de desenvolvimento de uma página da Web fluida, já que você pode editar e visualizar alterações imediatamente na mesma exibição.

Os seguintes recursos ajudam a editar os documentos de grade fluida na Visualização dinâmica:

Agora você também pode visualizar a estrutura HTML DOM de um documento de grade fluida usando a Exibição rápida do elemento

Observação: a exibição rápida do elemento nos layouts de grade fluida não permite copiar, colar, duplicar ou reorganizar os elementos HTML.

A interface do usuário para exibir e editar os documentos de grade fluida foi alterada para acomodar os recursos de edição na Visualização dinâmica. Agora, quando você seleciona um elemento em um documento de grade fluida, a Exibição do elemento é mostrada junto com outros controles, tais como Ocultar elementos e Iniciar uma nova linha.

Opções de grade fluida em versões anteriores
Opções de grade fluida em versões anteriores

Opções de grade fluida junto com a Exibição do elemento no Dreamweaver CC (outubro de 2014)
Opções de grade fluida junto com a Exibição do elemento na última atualização - Dreamweaver CC (outubro de 2014)


Além disso, os documentos de grade fluida são abertos diretamente na Visualização dinâmica. Você não pode mais exibir ou editar os documentos de grade fluida na Visualização de design.

Barra de ferramentas Documento no Dreamweaver CC (Outubro)
Barra de ferramentas Documento na última atualização - Dreamweaver CC (outubro de 2014)

Barra de ferramentas Documento em um documento de grade fluida em versões anteriores
Barra de ferramentas Documento em um documento de grade fluida em versões anteriores

Para obter mais informações sobre os documento de grade fluida, consulte Design responsivo usando layouts de grade fluida.

Alterações no fluxo de trabalho de inserção

A caixa de diálogo Inserir para documentos de grade fluida agora contém um 'assistente de posição' . O assistente de posição permite que você posicione o elemento inserido antes, depois, ou aninhe-o no elemento em foco (na Visualização dinâmica). Para obter mais informações sobre como inserir elementos de grade fluida, consulte Inserção de elementos de grade fluida.

Alteração na opção Gerenciar elementos ocultos

A opção Gerenciar elementos ocultos (botão de olho na barra de ferramentas de documento) foi movida para o menu contextual em um documento de grade fluida.


Para gerenciar os elementos ocultos, clique com o botão direito na página de grade fluida e selecione “Gerenciar elementos ocultos” para ver os elementos ocultos. Para ocultar esses elementos, você pode clicar no ícone de olho na HUD. 

Opção Gerenciar elementos ocultos no menu contextual no Dreamweaver CC (outubro de 2014)
Opção Gerenciar elementos ocultos no menu contextual na última atualização - Dreamweaver CC (outubro de 2014)

O ícone de “olho” para gerenciar os elementos ocultos em versões anteriores
O ícone de “olho” para gerenciar os elementos ocultos em versões anteriores

Temas de cores prontos para Visualização de código

Agora é possível escolher um dos seguintes temas de cores prontamente disponíveis para a Visualização de código:

  • Clássico (padrão; coincide com as versões anteriores do Dreamweaver)
  • Corvo
  • Ardósia
  • Blanche
  • Geneva
Temas Clássico, Corvo, Ardósia, Blanche e Geneva
Temas Clássico, Corvo, Ardósia, Blanche e Geneva

Use as preferências de codificação por cor para especificar um tema para Visualização de código. Você pode personalizar o tema escolhendo esquemas do cor diferentes para planos de fundo, primeiro plano e caracteres ocultos.

Para cada tipo de documento exibido, você pode personalizar as cores para categorias diferentes de tags e elementos de código, tais como tags relacionadas a formulário ou identificadores JavaScript. Por exemplo, com o tema de corvo aplicado a todos os tipos de documento, você pode escolher a cor azul para tags relacionadas a formulário apenas em documentos HTML.

Todas as configurações personalizadas em um tema são salvas quando você clica em Aplicar e o tema personalizado fica disponível para ser usado nas sessões do Dreamweaver.

Observação:

Você pode manter os temas de código personalizados sincronizados entre suas instâncias do Dreamweaver usando a opção Sincronizar configurações localizada em Preferências. Para obter mais informações, consulte Sincronizar configurações do Dreamweaver com a Creative Cloud.

Para obter mais informações, consulte Definir tema de cores para Visualização de código.

Sincronização da Visualização de código e da Visualização dinâmica

A sincronização da Visualização de código e da Visualização dinâmica permite visualizar imediatamente todas as alterações feitas no código na Visualização dinâmica. Ao contrário das versões anteriores do Dreamweaver, você não precisa atualizar para visualizar as alterações na Visualização dinâmica.

Você pode ver a sincronização da Visualização de código e da Visualização dinâmica em ação nos seguintes fluxos de trabalho (quando o foco estiver na Visualização de código):

  • As operações de texto, como Cortar/Copiar/Colar/Excluir, Fazer/Desfazer.
  • Movimento dos elementos na Exibição rápida do elemento quando o foco está na Visualização de código.
  • Digitação na Visualização de código.
  • Ações Excluir/Duplicar/Copiar/Colar na Exibição rápida do elemento (opções do menu de contexto).
  • Operações no Inspetor de propriedades, por exemplo, alteração de formatos de texto — negrito/itálico, alteração de classe, ID, formato, propriedades de página e aplicação de fontes.
  • Adição ou exclusão de classes ou de IDs usando dicas de código na Visualização de código.
  • Inserção de elementos, como Div, imagem, hiperlink e elementos estruturais do painel Inserir na Visualização de código.
  • Adição/exclusão de estilos CSS na tag <style>. 
  • Edição do código em arquivos CSS.

Observação:

todas as alterações no código JavaScript exigem a atualização ou recarregamento total da página para que as alterações sejam refletidas na Visualização dinâmica. 

Painel Ativos na Visualização dinâmica

O painel Ativos (Janelas > Ativos) está agora disponível na Visualização dinâmica. Usando o painel Ativos, é fácil controlar as seguintes tarefas:

  • Arrastar ou inserir ativos (imagens, URLs, cores ou mídia) do painel de visualização ou da exibição em lista do painel Ativos.

Observação: você pode arrastar ativos do painel de visualização somente no Mac.

  • Copiar o valor da cor e colar o valor em qualquer campo de texto no Dreamweaver, como propriedades de CSS Designer, Visualização de código, Seletor de cores ou para outros aplicativos como o bloco de notas.

Observação:

 

  • Como scripts, as categorias Modelo e Biblioteca são mais relevantes na Visualização de código, elas estão ocultas no painel Ativos da Visualização dinâmica.
  • Nessa versão do Dreamweaver CC, as categorias Flash e Filmes estão combinadas em uma única categoria chamada "Mídia".
         

Painel Ativos na Visualização dinâmica
Painel Ativos na Visualização dinâmica

Painel Ativos na Visualização de código e de design
Painel Ativos na Visualização de código e de design


Para obter instruções detalhadas sobre como usar o painel Ativos, consulte Trabalho com ativos.

Novos modelos iniciais

O Dreamweaver inclui agora os novos modelos iniciais responsivos que o ajudam a trabalhar com os sites responsivos rapidamente. É possível escolher um dos seguintes modelos na caixa de diálogo Novo documento (Arquivo > Novo > Modelos iniciais):

  • Página Sobre
  • Postagem de blog
  • Comércio eletrônico
  • Email
  • Portfólio
Novos modelos iniciais responsivos
Novos modelos iniciais responsivos

Ao escolher um modelo e clicar em Criar na caixa de diálogo Novo documento, o Dreamweaver perguntará se você deseja salvar o novo documento. Ao salvar o documento, você faz uma cópia do modelo, que pode ser personalizado posteriormente para atender as suas necessidades.

Restaurar preferências na inicialização

A solução de problemas do Dreamweaver exige às vezes a exclusão da pasta de preferências que contém todas as configurações personalizadas. Antes desta versão, você tinha que navegar manualmente até a pasta de preferências em sua máquina e excluí-la. Esta versão fornece a opção de um clique para excluir as preferências usando uma caixa de diálogo:

Restaurar preferências
Restaurar preferências

Você pode abrir a caixa de diálogo Restaurar preferências mantendo pressionadas as seguintes teclas de atalho durante a inicialização do Dreamweaver:

  • tecla (Win) Windows + Ctrl + Shift
  • (Mac) Cmd + Option + Shift

Observação:

use a opção Restaurar preferências com cautela. Quando você redefinir as preferências e as configurações, todas as configurações personalizadas na área de trabalho, os atalhos do teclado, as extensões e as preferências de aplicativo serão perdidos.

No Mac, pressione Cmd + Option + Shift ao iniciar o Dreamweaver (clicando no ícone Dreamweaver).

No Windows, execute as seguintes etapas:

  1. Vá para a pasta de instalação, localize Dreamweaver.exe e clique no arquivo.

  2. Mantenha pressionadas as teclas do Windows + Ctrl + Shift e clique duas vezes em Dreamweaver.exe.

Pressione as teclas de atalho mencionadas acima, mesmo quando aparecer a caixa de diálogo UAC (Controle de Conta de Usuário). 

Outros aprimoramentos

Alterações para sincronizar configurações

Agora é possível importar as configurações da versão anterior do Dreamweaver salvas na Creative Cloud usando a caixa de diálogo Preferências. Todas as configurações locais são substituídas pelas configurações importadas da nuvem e são aplicadas durante a próxima inicialização do Dreamweaver.

Importação de configurações de versões anteriores do Dreamweaver
Importação de configurações de versões anteriores do Dreamweaver

Além disso, desta versão em diante, além das configurações que eram sincronizadas nas versões anteriores, as seguintes configurações também serão sincronizadas com a Creative Cloud:

Alterações no CSS Designer

Essa versão do Dreamweaver inclui muitas melhorias na experiência do usuário de CSS Designer. O painel CSS Designer também inclui uma experiência inicial que ajuda você a começar a usar os fluxos de trabalho rapidamente.

Alterações na tela de boas-vindas

A opção Modelos de sites na tela de boas-vindas é substituída por Modelos iniciais. Você pode acessar os Modelos de sites na caixa de diálogo Novo documento (Arquivo > Novo).

Atualizações da versão do jQuery

Agora, o Dreamweaver inclui as bibliotecas atualizadas do jQuery como segue:

  • jQuery - 1.8.3 para jQuery - 1.11.1
  • jQuery UI - 1.9.2 para jQuery UI - 1.10.4

As páginas iniciais do jQuery foram removidas. 

Atualização do PhoneGap

A integração direta do Dreamweaver com o PhoneGap Build para empacotar aplicativos não é suportada na última atualização da versão de 2014 do Dreamweaver CC (outubro de 2014) e posterior.

Contudo, você pode acessar diretamente o serviço PhoneGap Build online e utilizar as atualizações de recursos mais recentes para empacotar seus aplicativos da web como aplicativos nativos para dispositivos móveis. Para obter mais informações, consulte Usar o PhoneGap Build com a atualização mais recente da versão de 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