Saiba como trabalhar na Visualização de código e aproveitar ao máximo os recursos de codificação do Dreamweaver.

Você pode trabalhar com código no Dreamweaver de várias maneiras. 

Abra um novo arquivo de código usando a caixa de diálogo Novo documento e insira seu código.

Criar um novo arquivo de código no Dreamweaver
Criar um novo arquivo de código no Dreamweaver

À medida que você digita, dicas de código são exibidas para ajudar você a selecionar o código e evitar erros de digitação. Obtenha ajuda com CSS quando precisar usando os Documentos rápidos do Dreamweaver.

Também é possível inserir o código usando o painel Inserir ou usar atalhos de codificação como abreviações do Emmet.

Se você estiver copiando e colando a mesma parte do código várias vezes, experimente estes recursos para poupar tempo:

  • O painel Snippets é incrível para criar e inserir snippets de código pré-formatados rapidamente em seu código.
  • Com o recurso Vários cursores, você pode criar e editar várias linhas de código de uma vez.

O Dreamweaver também fornece um conjunto eficiente de ferramentas de edição que tornam a navegação e as alterações no seu código um processo simples.

  • Use o recurso localizar e substituir do Dreamweaver para pesquisar tags, atributos ou texto no código.
  • Use o recurso Navegador de código para navegar no código relacionado dentro ou fora do arquivo atual. Como uma opção ainda melhor, use o recurso Edição rápida para editar o código em arquivos relacionados sem precisar abrir o arquivo em uma nova guia.
  • Clique com o botão direito no código para exibir um menu de contexto simples e relevante que permite editar o código diretamente.
  • Use o recurso Colocar tag ao redor para colocar tags ao redor do texto.

Leia para obter mais informações sobre todos esses recursos de código.

Inserir código usando o painel Inserir

  1. Posicione o ponto de inserção no código.
  2. Selecione uma categoria apropriada no painel Inserir.
  3. Clique em um botão no painel Inserir ou selecione um item em um menu pop-up do painel Inserir.

    Quando você clica em um ícone, o código é exibido imediatamente na página ou, então, uma caixa de diálogo é exibida solicitando mais informações para concluir o código.

    O número e o tipo dos botões disponíveis no painel Inserir variam de acordo com o tipo do documento atual. Isso também depende da visualização que você está usando: Visualização de código ou Visualização de design.

Use o conjunto de ferramentas Emmet com Dreamweaver

Emmet é um plug-in que permite a codificação e a geração de código HTML e CSS em alta velocidade.

Use abreviações do Emmet na Visualização de código ou no Inspetor de código do Dreamweaver e pressione a tecla Tab para expandir essas abreviações em marcações HTML ou CSS.

As abreviações de HTML se expandem em páginas HTML e PHP. As abreviações de CSS se expandem em páginas CSS, LESS, SASS, SCSS ou na tag de estilo em uma página HTML.

Confira alguns exemplos que demonstram como você pode usar abreviações de Emmet na Visualização de código. Para obter informações detalhadas e referência, consulte a documentação do Emmet.

Observação:

atualmente o Dreamweaver é compatível com as abreviações do Emmet 1.2.2.

Exemplo 1: inserção de código HTML usando o Emmet

Para adicionar rapidamente o código HTML a uma lista não ordenada com três elementos, abra o arquivo HTML e digite a seguinte abreviação do Emmet na Visualização de código em <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Agora, verifique se o cursor está posicionado logo após a abreviação do Emmet e pressione Tab para expandir a abreviação. Como alternativa, selecione a abreviação inteira e pressione Enter.

A abreviação se expande para o seguinte código:

 

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Exemplo 2: inserção de código CSS usando o Emmet

Para inserir o código CSS para a criação do raio da borda com prefixos do fornecedor, abra o arquivo CSS e digite a seguinte abreviação do Emmet dentro de uma classe:

-bdrs

Ao pressionar Tab, a abreviação se expande para este código:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Trabalhar com comentários de código

Um comentário é um texto descritivo que você insere no código HTML para explicar o código ou fornecer outras informações. O texto do comentário aparece somente na Visualização de código e não é exibido em um navegador.

Adicionar comentários ao seu código

Primeiramente, insira o texto de comentário para adicionar comentários. Em seguida, coloque o cursor do mouse no ponto de inserção e clique no ícone Inserir da barra de ferramentas para abrir o submenu Aplicar comentário.

Também é possível selecionar o texto e transformá-lo em um comentário. O texto selecionado é delimitado em um bloco de comentários.

Inclusão de comentários
Inclusão de comentários

É possível adicionar comentários usando várias opções de sintaxe. Selecione a sintaxe adequada e o Dreamweaver insere as tags para você. Você apenas precisa inserir seu texto de comentário.

Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou de Cmd+/ (no Mac) para adicionar comentários.

Se você usar o atalho de teclado sem selecionar nenhum texto, o comentário é aplicado à linha atual. Se você selecionar o texto e usar o atalho de teclado, o comentário é aplicado ao texto selecionado.

Remover comentários do código

Para remover os comentários de código, selecione o código e clique no ícone Remover comentário na barra de ferramentas. Também é possível usar os atalhos de teclado Ctrl+/ (no Windows) ou Cmd+/ (no Mac) para remover comentários.

Alternar comentários de código

Para alternar entre exibir e ocultar comentários na Visualização de código, pressione Ctrl+/ no Windows ou Cmd+/ no Mac para o comentário ou para a linha selecionados.

Usar vários cursores para adicionar ou alterar o texto em vários locais

Adicione cursores em diversos locais ou selecione várias seções de código e edite-as simultaneamente usando o recurso vários cursores do Dreamweaver.

Observação:

As operações de copiar e colar e de localizar e substituir não funcionam com vários cursores ou seleções múltiplas.

Adicionar vários cursores ou seleções múltiplas

É possível adicionar vários cursores de maneiras diferentes de acordo com as suas necessidades.

Se você deseja adicionar o mesmo texto em vários locais sem substituir qualquer texto existente, adicione vários cursores.

Se você deseja substituir o texto existente, é possível fazer seleções múltiplas. É possível selecionar linhas de texto contínuas, linhas de texto descontínuas ou ambas e adicionar cursores a elas.

Para adicionar vários cursores ou seleções múltiplas na mesma coluna em linhas contínuas:

Mantenha a tecla Alt pressionada e clique e arraste verticalmente. Ao arrastar verticalmente, os cursores são adicionados a cada linha pela qual você arrasta.

Texto adicionado aos cursores em várias linhas
Texto adicionado aos cursores em várias linhas

Para selecionar linhas contínuas de texto, pressione a tecla Alt e arraste diagonalmente. Ao arrastar diagonalmente, o Dreamweaver seleciona um bloco de texto retangular na seleção em questão. 

Selecionar e atualizar várias linhas de texto simultaneamente
Selecionar e atualizar várias linhas de texto simultaneamente

Observação:

Para adicionar cursores ou incluir várias linhas em uma seleção rapidamente, use o atalho de teclado Shift-Alt-Seta para baixo ou Seta para cima. 

Depois de adicionar os cursores (ou o texto selecionado) em vários locais, comece a digitar. 

Se você tiver vários cursores, o novo texto será adicionado.

Se você tiver conteúdo selecionado nas várias linhas de texto, o texto selecionado será substituído pelo novo texto que você digitou.

Para adicionar vários cursores em colunas diferentes pelas linhas: 

Para adicionar cursores às linhas de texto descontínuas, pressione a tecla Ctrl e clique nas linhas nas quais deseja colocar o cursor.

Adicionar cursores a várias linhas de texto descontínuas
Adicionar cursores a várias linhas de texto descontínuas

Para selecionar linhas de texto descontínuas, selecione um texto e, em seguida, pressione a tecla Ctrl (Windows) ou Cmd (Mac) e continue fazendo outras seleções. 

Para adicionar cursores no início/final de cada linha:

Selecione várias linhas de texto e pressione as teclas de seta para a esquerda ou direita.

Para adicionar cursores em linhas precedentes ou subsequentes de uma seleção:

Pressione as teclas Shift+Alt+Seta para cima/baixo e, em seguida, pressione a tecla de seta para a direita.

Para selecionar linhas de texto contínuas e descontínuas:

Você pode combinar essas técnicas para selecionar as linhas de texto contínuas ou as linhas de texto separadas em uma única seleção.

Primeiro selecione as linhas de texto descontínuas e, em seguida, pressione Ctrl-Alt (no Windows) ou Cmd-Alt (no Mac) e arraste para adicionar um conjunto de linhas às seleções múltiplas existentes.

Selecionar linhas de texto contínuas e descontínuas
Selecionar linhas de texto contínuas e descontínuas

Obter ajuda com CSS no Dreamweaver usando os Documentos rápidos

Ao trabalhar com arquivos CSS, LESS ou SCSS no Dreamweaver, você pode obter informações sobre as propriedades ou os valores do CSS rapidamente.

Coloque o cursor do mouse em uma propriedade ou o valor e pressione Ctrl+K, o Dreamweaver abrirá a documentação do projeto do Web Platform Docs.

É possível abrir vários editores inline e visualizadores de documentos simultaneamente.

Documentação do CSS no Dreamweaver
Documentação do CSS no Dreamweaver

Para fechar apenas um editor inline ou visualizador de documento, clique no “X” no canto superior esquerdo, ou pressione Escape enquanto os Documentos rápidos tiverem foco.

Para fechar todos os editores e documentos inline, coloque o cursor do mouse no editor de código delimitador principal e pressione Escape.

Analisar o código

O Dreamweaver é compatível com linting (códigos de análise para possíveis erros) para HTML, CSS e JavaScript.

O painel Saída exibe os erros e avisos detectados pelo linting. Para obter mais informações, consulte Linting de código.

Além disso, o Dreamweaver também exibe uma visualização rápida do erro na coluna de número de linha da linha que contém o erro. O número de linha é exibido em vermelho para indicar que contém erros, e quando você passa o mouse sobre ele, uma descrição breve do erro é exibida.

Observação: somente o primeiro erro da linha é exibido. Se a linha contém apenas um aviso, a descrição do aviso é exibida. Se a linha contém um aviso e um erro, apenas a descrição do erro é exibida.

Delimitar o texto do código usando o recurso Colocar tag ao redor

Use o recurso Colocar tag ao redor na Visualização de código para delimitar linhas de texto específicas com uma tag. Na Visualização de design ou dinâmica, você pode usar esse recurso para delimitar objetos com uma tag.

  1. Selecione o texto na Visualização de código ou um objeto na Visualização de design e pressione Ctrl+T no teclado.

    Uma janela pop-up é exibida para que você faça a seleção dentre várias tags HTML.

  2. Selecione uma tag no menu.

    Se você estiver trabalhando na Visualização de código, o texto selecionado é delimitado com a tag. Se você estiver trabalhando na Visualização de design ou dinâmica, o objeto selecionado é delimitado com a tag.

Editar código com o menu de contexto Codificação

Use o menu de contexto do Dreamweaver para fazer edições rápidas no código. 

Para acessar o menu de contexto, clique com o botão direito do mouse (Windows) ou clique pressionando a tecla control (no Mac). Você pode usar estas opções:

Edição rápida

Clique nessa opção para entrar no modo Edição rápida. Neste modo, o Dreamweaver fornece o código de contexto específico e as ferramentas inline permitindo que você avance rapidamente à seção do código necessária. Para obter mais informações, consulte Edição rápida.

Recortar, copiar, colar

Clique nessas opções para recortar, copiar e colar textos rapidamente sem precisar acessar o menu Editar.

Localizar e substituir, Localizar próximo, Localizar anterior

Clique nessas opções para localizar e substituir textos rapidamente sem precisar acessar o menu Localizar.

Criar snippet

Use essa opção para criar snippets de código para que você possa salvá-los e reutilizá-los posteriormente. Selecione o código e clique em Criar snippet para que o código selecionado se torne um snippet. Para obter mais informações, consulte Trabalhar com snippets de código.

Abrir arquivo relacionado

Clique com o botão direito sobre um link/tag de script e depois em Abrir arquivo relacionado para abri-lo.

Anexar folha de estilos

Anexe uma folha de estilos CSS existente à sua página.

Seleção

O submenu Seleção inclui várias opções de edição do código que você pode usar em uma parte do código selecionada, como alternar a linha e os comentários em bloco, expandir e recolher a seleção, converter CSS inline em regras, mover regras CSS e imprimir o código.

Navegador de código

Clique nessa opção para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Para obter mais informações, consulte Navegação no código relacionado.

Ferramentas de dicas de código

O submenu Ferramentas de dicas de código coloca o seletor de cores, o navegador do URL e as ferramentas da lista Fonte ao seu alcance.

Recuo dos blocos de código

Ao escrever e editar código na Visualização de código ou no Inspetor de código, você pode alterar o nível de recuo de um bloco ou linha de código selecionado, deslocando-o para a direita ou a esquerda em uma tabulação.

Recuo do bloco de código selecionado

  • Pressione Tab ou
  • Pressione Ctrl+] ou
  • Selecione Editar > Recuar código.

Cancelar recuo do bloco de código selecionado

  • Pressione Shift+Tab ou
  • Pressione Ctrl+[ ou
  • Selecione Editar > Diminuir recuo do código.

O Navegador de código exibe uma lista de códigos fonte relacionados a uma determinada seleção de sua página. Use-o para navegar por códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, arquivos de bibliotecas e arquivos de origem iframe. Quando você clica em um link do Navegador de código, o Dreamweaver abre o arquivo que contém a parte relevante do código. O arquivo aparece na área relacionada a arquivos, se estiver ativada. Se você não tiver arquivos relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento.

Se você clicar em uma regra CSS no Navegador de código, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um arquivo, o Dreamweaver exibe a regra na visualização Dividida. se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e exibe a regra na área relacionada a arquivos acima do documento principal.

Você pode acessar o Navegador de código das Visualizações de design, de código e dividida assim como pelo Inspetor de código.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de código, consulte www.adobe.com/go/dw10codenav_br.

Para assistir a um tutorial em vídeo sobre como trabalhar com Visualização dinâmica, arquivos relacionados e o Navegador de código, consulte www.adobe.com/go/lrvid4044_dw.

Abrir o Navegador de código

  • Alt+clique (Windows) ou Command+Option+Click (Macintosh) em qualquer local da página. O Navegador de código exibe links para o código que afeta a área onde você clicou.

Clique fora do Navegador de código para fechá-lo.

Observação:

você também pode abrir o Navegador de código clicando no indicador Navegador de código . Esse indicador aparece próximo ao ponto de inserção em sua página quando o mouse fica sem atividade por 2 segundos.

  1. Abra o Navegador de código na área da página na qual você está interessado.

  2. Clique na parte do código para a qual você deseja ir.

O Navegador de código agrupa os códigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabética. Por exemplo, suponha que as regras CSS em três arquivos externos afetam a seleção em seu documento. Neste caso, o Navegador de código relaciona esses três arquivos, assim como as regras CSS relevantes à seleção. Para CSS relacionados a uma determinada seleção, o Navegador de código funciona como o painel de Estilos CSS no Modo atual.

Observação:

Quando você passa o cursor do mouse por links para as regras CSS, o Navegador de código exibe dicas de ferramentas das propriedades na regra. Essas dicas de ferramentas são úteis quando você quer distinguir entre muitas regras que compartilham o mesmo nome.

Desativar o indicador do Navegador de código

  1. Abra o Navegador de código.

  2. Selecione Desativar indicador no canto inferior direito.

  3. Clique fora do Navegador de código para fechá-lo.

Para reativar o indicador do Navegador de código, Alt+clique (Windows) ou Command+Option+clique (Macintosh) para abrir o Navegador de código e desmarcar a opção Desativar indicador.

Acessar uma função JavaScript ou VBScript

Na Visualização de código e no Inspetor de código, é possível exibir uma lista de todas as funções JavaScript ou VBScript no código e acessar qualquer uma delas.

  1. Exiba o documento na Visualização de código (Exibir > Código) ou no Inspetor de código (Janela > Inspetor de código).
  2. Siga um destes procedimentos:
    • Na Visualização de código, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) em qualquer lugar da Visualização de código e selecione o submenu Funções no menu de contexto.

    Observação:

    O submenu Funções não aparece na Visualização de design.

    Qualquer função JavaScript ou VBScript do código aparece no submenu.

    Observação:

    Para ver as funções em ordem alfabética, mantenha pressionada a tecla Control enquanto clica com o botão direito do mouse (Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualização de código. Em seguida, selecione o submenu Funções.

    • No Inspetor de código, clique no botão Navegação de código ({ }) na barra de ferramentas.
  3. Selecione um nome de função para ir até a função no código.

Extrair JavaScript

O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo externo e vincula o arquivo externo ao seu documento. O JSE também pode remover manipuladores de eventos, como onclick e onmouseover do seu código e, então, anexar ao seu documento, de modo não intrusivo, o JavaScript associado a esses manipuladores.

Confira a seguir as limitações do Extrator de JavaScript antes de usá-lo:

  • O JSE não extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). Há chance de que a externalização desses scripts possa causar resultados imprevistos. Por padrão, o Dreamweaver lista esses scripts na caixa de diálogo Externalizar JavaScript, mas não os seleciona para extração. (Você pode selecioná-los manualmente se desejar).

  • O JSE não extrai JavaScript de regiões editáveis de arquivos .dwt (modelo do Dreamweaver), regiões não editáveis de instâncias de modelos ou itens de biblioteca do Dreamweaver.

  • Após extrair JavaScript usando a opção Externalizar JavaScript e Anexar de modo não intrusivo, você não poderá mais editar comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver não pode inspecionar e preencher o painel Comportamentos com comportamentos anexados de modo não intrusivo.

  • Você não pode desfazer suas alterações após ter fechado a página. No entanto, você pode desfazer alterações, desde que permaneça na mesma seção de edição. Selecione Editar > Desfazer externalizar JavaScript, para desfazer.

  • É possível que algumas páginas complexas não funcionem conforme o esperado. Esteja atento ao extrair JavaScript de páginas com document.write() no corpo e em variáveis globais.

Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte a JavaScript no Dreamweaver, consulte www.adobe.com/go/dw10javascript_br.

Para usar o Extrator de JavaScript:

  1. Abra uma página que contenha JavaScript.

  2. Clique em Ferramentas > Externalizar JavaScript.

  3. Na caixa de diálogo Externalizar JavaScript, edite as seleções padrão, se necessário.

    • Selecione Externalizar somente JavaScript se você deseja que o Dreamweaver mova todo JavaScript para um arquivo externo e para fazer referência àquele arquivo no documento atual. Esta opção deixa os manipuladores de evento como onclick e onload no documento e deixa os comportamentos visíveis no painel Comportamentos.

    • Selecione Externalizar JavaScript e Anexar de modo não intrusivo se desejar que o Dreamweaver 1) mova JavaScript para um arquivo externo e faça referência a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de execução usando JavaScript. Ao selecionar esta opção, você não poderá mais editar comportamentos no painel Comportamentos.

    • Na coluna Editar, desmarque todas as edições que não deseja realizar ou selecione as edições que o Dreamweaver, por padrão, não selecionou.

      Por padrão, o Dreamweaver lista mas não seleciona as seguintes edições:

      • Blocos de script no cabeçalho do documento que contêm chamadas document.write() ou document.writeln().

      • Blocos de script no cabeçalho do documento que contêm assinaturas de funções relacionadas ao código de manuseio EOLAS, conhecido por usar document.write().

      • Blocos de script no corpo do documento, a menos que os blocos contenham apenas construtores de widget do Spry ou de conjunto de dados do Spry.

    • O Dreamweaver atribui IDs automaticamente a elementos que ainda não têm IDs. Se não gostar dessas IDs, você poderá alterá-las, editando as caixas de texto de ID.

  4. Clique em OK.

    A caixa de diálogo de resumo oferece um resumo de extrações. Revise as extrações e clique em OK.

  5. Salve a página.

O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extraído. O Dreamweaver salva o arquivo SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nível da página da qual você extraiu o JavaScript. Não se esqueça de enviar esses arquivos dependentes para seu servidor Web quando enviar a página original.

Edição rápida

Em vez de desorganizar o ambiente de codificação com muitos painéis e ícones, o modo Edição rápida no Dreamweaver insere o código de contexto específico e as ferramentas inline. Dessa forma, você pode avançar rapidamente à seção do código necessária.

Como entrar no modo Edição rápida:

  • Clique com o botão direito do mouse em um snippet de código e selecione Edição rápida no menu de contexto exibido.
  • Pressione Ctrl+E (no Windows) ou Cmd+E (no Mac).

Usar o modo Edição rápida com arquivos HTML

Em um arquivo HTML, coloque o cursor do mouse dentro de uma classe, do atributo id (nome ou valor) ou do nome da tag. A Edição rápida mostra todas as regras CSS, SCSS e LESS no seu projeto que são correspondentes. É possível editar essas regras diretamente inline, sem precisar sair do contexto do arquivo HTML.

Usar o modo Edição rápida com arquivos HTML
Usar o modo Edição rápida com arquivos HTML

Quando várias regras correspondem, navegue entre elas usando a lista à direita (ou use o Alt+Seta para cima/baixo).

Para criar uma regra CSS diretamente do editor inline, clique em Nova regra ou pressione Ctrl+Alt+N (no Windows) ou Cmd+Opt+N (no Mac).

Usar o modo Edição rápida com arquivos JavaScript

Em um arquivo JavaScript, coloque o cursor do mouse no nome de uma função. A Edição rápida mostra o corpo da função, mesmo se estiver presente em outros arquivos com referência a uma instrução necessária.

Usar o modo Edição rápida com arquivos JavaScript
Usar o modo Edição rápida com arquivos JavaScript

Usar o modo Edição rápida com arquivos CSS, SCSS, or LESS

Quando você insere a Edição rápida com o cursor do mouse em um valor de cor, é possível acessar o seletor de cores e modificar as cores usadas no código CSS rapidamente.

Acessar o seletor de cores em um arquivo CSS
Acessar o seletor de cores em um arquivo CSS

Em um arquivo CSS, LESS ou SCSS, coloque o cursor do mouse em uma função de momento de transição cubic-bezier() ou steps(). Dessa forma, a Edição rápida exibe um editor gráfico da curva de transição.

As funções de tempo predefinidas ease, ease-in, ease-out, ease-in-out, step-start e step-end também são pontos iniciais válidos.

Manipular uma curva de Bézier usando a Edição rápida
Manipular uma curva de Bézier usando a Edição rápida

Localizar e substituir tags, atributos ou texto

Você pode procurar tags, atributos e valores de atributo específicos. Por exemplo, é possível procurar todas as tags img que não têm o atributo alt.

Você também pode procurar sequências de texto específicas que estão ou não dentro de um conjunto de tags de contêiner. Por exemplo, é possível procurar a palavra Sem título contida em uma tag title para localizar todas as páginas sem título do seu site.

Para obter mais informações, consulte Localizar e substituir texto.

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

Após inserir o código relevante de imagens e cores, é possível visualizá-las diretamente na Visualização de código.

Visualização de imagens

Passe o mouse sobre qualquer URL de imagem para visualizar a imagem na Visualização de código. Você pode visualizar imagens indicadas como:

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

O Dreamweaver também exibe visualizações de imagens hospedadas remotamente.

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

Você pode visualizar estes tipos de imagem:

  • JPEG
  • JPG
  • PNG
  • GIF
  • SVG
Visualização de imagens na Visualização de código
Visualização de imagens na Visualização de código

Visualização de cores

Passe o mouse sobre os valores de cor para visualizar cores na Visualização de código. Os formatos compatíveis são:

  • Valores de cor 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, como, verde-oliva, verde azulado, vermelho.

A visualização de cores está disponível em todos os tipos de documento para os formatos de cores acima.

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

Observação:

Clique com o botão direito do mouse em um valor e selecione Edição rápida para abrir o seletor de cores e selecionar uma cor diferente.

Você pode imprimir o código para editá-lo offline, arquivá-lo ou distribuí-lo.

  1. Abra uma página na Visualização de código.
  2. Selecione Arquivo > Imprimir código.
  3. Especifique as opções de impressão e clique em OK (Windows) ou Imprimir (Macintosh).

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