Resumo de novos recursos - maio de 2015

Consultas de mídia visual

Suporte a linting de código

Com esta nova versão do Dreamweaver, agora você pode depurar erros comuns em seu código usando linting. Linting é o processo de execução de um programa para identificar erros potenciais no código. O Dreamweaver pode executar o linting de arquivos HTML, CSS e JavaScript quando eles são carregados, salvos ou editados. Os erros e avisos são relacionados no novo painel Saída.

Para obter mais informações, consulte Linting de código.

Suporte a Emmet

Você é um desenvolvedor ávido que digita várias linhas de código no Dreamweaver? Poupe tempo usando abreviações do Emmet no código. Fáceis de lembrar e digitar, essas abreviações se expandem em código completo na Visualização de código quando você pressiona a tecla Tab.

Para obter informações detalhadas, consulte Inserção de código usando o Emmet.

Pré-processadores de CSS

Visualização de imagens e cores na Visualização de código

Visualização de imagens

Agora o Dreamweaver permite que você visualize imagens na Visualização de código, passando o mouse sobre o URL da imagem.

É possível agora visualizar imagens em caminhos de imagens remotas como <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Se o Dreamweaver não conseguir exibir a visualização de caminhos remotos, será exibida a mensagem "Não é possível carregar a imagem".

Você pode obter uma visualização para os seguintes tipos de arquivo de imagem:

JPEG
JPG
PNG
GIF
BMP
SVG

A visualização de imagens é mostrada quando você passa o mouse sobre URLs nos seguintes casos:

• url( );
• data-uri( )
• Valor do atributo src da tag img

Visualização de cores

A visualização de ativos na Visualização de código foi melhorada. Agora o Dreamweaver permite que você visualize cores na Visualização de código, passando o mouse sobre valores de cores. Estes são os formatos aceitos:

Valores de cores hexadecimais de 3 e 6 dígitos: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Nomes de cores predefinidos: verde-oliva, azul-petróleo, vermelho etc.

Novos snippets de código

Snippets são trechos de código que você pode reutilizar repetidamente em seus projetos. Esta versão do Dreamweaver fornece snippets de código novos e atualizados:

• Bootstrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• Snippets JavaScript (atualizados)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

Para obter informações sobre como usar snippets de código, consulte Trabalhar com snippets de código.

Integração de Bootstrap

Agora você pode abrir sites criados com a estrutura Bootstrap (versão 3 ou posterior) no Dreamweaver e editar as páginas usando código ou recursos de design visual. O Dreamweaver reconhecerá os arquivos CSS associados se o termo “bootstrap” fizer parte do nome de arquivo. 

Você também pode adicionar componentes de Bootstrap no Dreamweaver (painel Inserir) e modificar o design para diversas janelas de visualização editando as grades de maneira fácil e rápida.

Para obter informações detalhadas, consulte Trabalhar com arquivos de Bootstrap.

Modelos iniciais de Bootstrap

Agora o Dreamweaver inclui modelos de Bootstrap que ajudam você a começar a trabalhar rapidamente com seus designs responsivos. Você pode acessar os seguintes modelos de Bootstrap na caixa de diálogo Novo documento:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Dobramento de código

O dobramento de código agora é possível em arquivos HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML e SVG baseados em blocos de tags. Quando você passa o mouse sobre a coluna de número da linha, um pequeno triângulo aparece ao lado dos números de linha na Visualização de código. Você pode clicar nele para recolher ou expandir os blocos de código. Essa nova funcionalidade de dobramento de código substitui a funcionalidade existente, que é baseada na seleção.

Ícones de dobramento de código (triângulos invertidos) são exibidos para todos os blocos de tags que têm mais de duas linhas de código na Visualização de código.

As operações Copiar, Recortar, Colar e arrastar-e-soltar mantêm o estado de dobramento do código. Por exemplo, quando você copia um bloco de código que está recolhido, a operação de colagem cola o texto copiado como um bloco recolhido.

Dobramento de código em arquivos HTML

Ao contrário da funcionalidade anterior de recolhimento de código, agora o conteúdo recolhido passa a conter a tag de finalização e é renderizado de maneira diferente da implementação anterior.

O número de caracteres exibidos em um bloco de código recolhido aumentou. Isso ajuda a visualizar os atributos iniciais, se houver, no bloco de tags recolhido. Por exemplo, se a tag Div recolhida tiver atributos id e class, o bloco recolhido ficará assim:

No Windows, você pode visualizar o código dentro de um bloco recolhido passando o mouse sobre o código recolhido. O bloco recolhido é expandido automaticamente quando o código dentro dele recebe o foco por meio de Seletor de tags, Localizar e substituir, Ir para linha, Exibição rápida do elemento, Visualização dinâmica ou Desfazer/refazer. Quando o foco é deslocado para fora do bloco de código, este é recolhido automaticamente.

Dobramento de código em arquivos CSS, LESS, SASS, SCSS e JS

Blocos de código delimitados por chaves agora podem ser recolhidos em arquivos CSS, Less, Sass, SCSS e JS.

Passe o mouse sobre a região de código recolhida em qualquer linha que contenha as chaves de abertura “{“.

Quando você clica em Recolher, o conteúdo entre o par de chaves correspondentes é recolhido e a visualização é exibida como "{...}".

Dobramento de código em arquivos PHP

Nos arquivos PHP, os elementos HTML e os blocos de código CSS e JS podem ser recolhidos além dos blocos de código PHP.

Cada bloco PHP que começa com “<?php” e termina com “?>” pode ser recolhido.

Passe o mouse sobre a região de código recolhida em qualquer linha que contenha <?php e clique no ícone Recolher para recolher o bloco de código.