Guia do Usuário Cancelar

Reutilizar código com snippets

 

 

Saiba como você pode criar snippets usando o painel Snippets do Dreamweaver e reutilizar seu código em diferentes sites do Dreamweaver.

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.

Como fazer o melhor uso de um snippet?

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.

Painel Snippets no Dreamweaver
Painel Snippets no Dreamweaver

O que você pode fazer com o painel Snippets

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

Inserir 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.

Criar pastas de 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

Criar snippets

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.

Editar snippets

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

Excluir snippets

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

Renomear snippets

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.

Adicionar/editar teclas de acionamento

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.

  1. Posicione o cursor no ponto de inserção em que deseja inserir o snippet de código.

  2. No painel Snippets (Janela > Snippets), clique duas vezes no snippet ou clique no ícone Inserir na parte inferior do painel Snippets.

    Você também pode clicar com o botão direito do mouse no snippet (Windows) ou manter pressionada a tecla Control enquanto clica no snippet (Macintosh) e selecionar Inserir no menu pop‑up.

Observação:

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.

Observação:

Para ver como é um snippet de código, insira um snippet no modo de exibição de design.

Criar snippets

  1. No painel Snippets, clique no ícone Novo snippet na parte inferior do painel.

  2. Digite um nome para o snippet.

    Observação:

    Os nomes de snippet não podem conter caracteres inválidos nos nomes de arquivo, como barras (/ ou \), caracteres especiais ou aspas duplas (“).

  3. (Opcional) Digite uma descrição de texto para o snippet.

    Uma descrição de texto facilita o uso do snippet para os outros membros da equipe identificarem e usarem o snippet.

    Criar um snippet de código com descrição suficiente torna mais fácil identificá-lo para posterior reutilização
    Criar um snippet de código com descrição suficiente torna mais fácil identificá-lo para posterior reutilização

    Observação:

    Você também pode criar teclas de acionamento para adicionar snippets em seu código. Para obter mais informações, consulte Adicionar teclas de acionamento e inserir snippets de código usando teclas de acionamento.

  4. Clique em OK.

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

  1. No painel Snippets, clique no botão Nova pasta de snippets na parte inferior do painel.

  2. Arraste snippets para a nova pasta ou para outras pastas, conforme desejar.

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.

  1. No painel Snippets, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Adicionar tecla de acionamento.

    Selecione Adicionar tecla de acionamento no painel Snippets
    Selecione Adicionar tecla de acionamento no painel Snippets

  2. Digite o texto necessário no campo da tecla de acionamento.

    Na imagem a seguir, uma tecla de acionamento de mailto é atribuída a um snippet de código para criar um link mailto, facilitando a lembrança dele mais tarde. Certifique-se de criar teclas de acionamento simples, curtas e intuitivas.

    Digite o texto no campo Tecla de acionamento
    Digite o texto no campo Tecla de acionamento

    Observação:

    As teclas de acionamento não podem conter quaisquer caracteres especiais (além de sublinhado). Além disso, a mesma tecla de acionamento não pode ser usada para dois snippets diferentes.

  3. Para adicionar snippets a seu código usando teclas de acionamento, digite o texto de acionamento (na Visualização de código) e pressione tab para inserir o snippet em seu código.

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:

  1. Clique em Editar > Preferências.

  2. Na seção Sincronizar configurações, clique em Sincronizar configurações agora.

    As configurações são salvas na nuvem. Na próxima vez que você iniciar o Dreamweaver, essas configurações serão importadas. As configurações locais são substituídas pelas configurações importadas da nuvem.

    Seus snippets e todas as outras configurações de preferência são sincronizadas.

    Para obter mais informações sobre sincronização de configurações, consulte Sincronização de configurações do Dreamweaver com a Creative Cloud.

Observação:

Se você sincroniza configurações com frequência, habilite a sincronização automática clicando em Habilitar sincronização automática na seção Sincronizar configurações no painel Preferências. Todas as alterações nas configurações são automaticamente salvas na nuvem.

Receba ajuda com mais rapidez e facilidade

Novo usuário?