Reutilizar código com snippets

Se você perceber que está repetindo blocos de código várias vezes, pode usar snippets de código para acelerar o processo de escrever o código. Escreva o código uma vez, salve-o como um snippet e clique duas vezes no painel Snippets para inseri-lo em vários lugares.

Snippets de código criados usando o painel Snippets não são específicos do site e podem ser reutilizados em outros sites. Você também pode usar snippets em diferentes dispositivos e entre diferentes versões do Dreamweaver usando sincronizar configurações.

O Dreamweaver tem vários snippets de código incorporados. No entanto, você também pode criar seus próprios snippets de código e salvá-los.

Navegue nos seguintes casos de uso para entender onde você pode usar snippets em seu fluxo de trabalho:

• Esteja trabalhando em uma organização que segue determinados padrões de design ou como freelancer que trabalha em vários projetos, você pode usar snippets de código para alcançar a uniformidade de design, armazenando estas partes comuns de código como snippets e, em seguida, inserindo-as em seu código.
• Se é necessário definir, manter e aplicar alguns padrões de codificação, então os snippets de código podem ser úteis.
• Codificar manualmente elementos responsivos em uma página da Web pode ser demorado. Use alguns dos snippets da seção Bootstrap ou Responsive_Design_Snippets do painel Snippets (por exemplo, um snippet de código de tabela responsiva). Com um clique você inseriu quase 20 linhas de código àquela tabela responsiva.
  Edite a tabela conforme necessário. Você pode mesclar colunas ou linhas, adicionar colunas ou linhas, estilizá-las como quiser e, então, selecionar o código e salvá-lo como um novo snippet que você pode reutilizar em todas as outras páginas que criar. Para obter mais informações sobre como usar snippets de código, consulte Criar snippets de código.
• Comportamentos de JavaScript, efeitos de CSS e estilos de CSS também são excelentes candidatos para a reutilização do código.

Painel Snippets

No Dreamweaver, você pode gerenciar snippets de código usando o painel Snippets (Janela > Snippets).

Um painel Snippets é como uma coleção de partes de código.

O que você pode fazer com o painel Snippets

Você pode realizar as seguintes tarefas usando o painel Snippets.

Expanda as pastas para navegar para um snippet de código e clique duas vezes nele, ou clique no ícone Inserir para inserir o snippet no local do cursor. Para envolver o texto existente em um snippet de código, selecione o texto e, em seguida, insira o snippet. O texto é envolvido dentro do snippet de código. Para obter mais informações, consulte Inserir snippets.

Gerencie seus snippets hospedando-os em pastas com uma convenção de nomenclatura intuitiva. Para criar uma pasta de snippet, clique no ícone Nova Pasta. Uma nova pasta de snippet é criada dentro de um nó selecionado. Para alterar o local da pasta de snippet, arraste-a para o local desejado. Para obter mais informações, consulte Criar pastas de snippet. 

Use os snippets pré-empacotados e edite-os para criar seus próprios snippets de código. Ou, crie seus próprios snippets de código do zero e salve-os no painel Snippets para reutilizá-los posteriormente. Para obter mais informações, consulte Criar snippets.

Para editar um snippet existente, selecione o snippet e clique no ícone Editar. Para obter mais informações, consulte Editar snippets.

Exclua snippets que você não precisa mais. Para excluir um snippet, selecione-o e clique no botão Excluir.

Para renomear um snippet, clique com o botão direito no snippet para abrir o menu de contexto. Escolha Renomear snippet e digite o novo nome do snippet.

As teclas de acionamento permitem que você crie códigos curtos intuitivos que você pode digitar, em vez de navegar para um determinado snippet no painel Snippets e inseri-lo. Se você tiver definido as teclas de acionamento, coloque o cursor no local exigido no código. Em seguida, digite o texto da tecla de acionamento e pressione tab. O snippet de código é inserido em seu código. Para obter mais informações, consulte Adicionar teclas de acionamento e inserir snippets de código usando teclas de acionamento.

Inserir snippets

Você pode inserir snippets de código em seu código no ponto onde o cursor é posicionado.

Criar snippets

Editar snippets

Para fazer alterações em um snippet existente, você pode:

• Clicar com o botão direito no snippet para abrir a caixa de diálogo Editar snippet
• Selecionar o snippet e clicar no ícone Editar snippet na parte inferior do painel.

Quando você edita um snippet, as instâncias existentes do snippet no documento não são atualizadas.

Você pode editar todos os campos na caixa de diálogo Snippet, tais como nome, descrição, tecla de acionamento e código.

Criar pastas de snippets

Adicionar teclas de acionamento e inserir snippets de código usando teclas de acionamento

Use teclas de acionamento para adicionar rapidamente snippets de código.

Primeiro, atribua teclas de acionamento para todos os seus snippets usados com frequência. Em seguida, na Visualização de código, digite o texto da tecla de acionamento e pressione tab. O Dreamweaver adiciona o snippet no local do cursor.

Como distribuir snippets em vários dispositivos

O recurso de sincronização em nuvem do Dreamweaver ajuda a manter os snippets sincronizados em duas máquinas.

Use o recurso sincronizar configurações do Dreamweaver para sincronizar snippets criados usando uma instância do Dreamweaver em outra máquina que execute o Dreamweaver (por exemplo, instalações do Dreamweaver no escritório e em casa). 

Para sincronizar as configurações: