Matéria para usuários do Dreamweaver baseada no DWMX2004 versão em inglês.

Nesta matéria vou abordar o uso de um painel do DW que poucos usuários desta ferramenta conhecem e a grande maioria talvez sequer se aperceberam de que ela existe ou mesmo não têm a mínima noção da sua utilidade.

Refiro-me ao painel Snippets que você acessa pelo menu Windows > Snippets ou simplesmente teclando Shift + F9
As traduções para o português aplicavéis para a palavra inglesa snippets são: retalho, apara, um pequeno pedaço (…de código, no contexto do editor). E, é isto que este painel faz; armazena pequenos trechos de código para serem inseridos automaticamente na marcação do documento. E melhor ainda, você pode criar e armazenar os pequenos trechos de código que você usa com maior frequência, personalizando o painel.

Vamos à prática:

1. Abra o seu DW, crie um novo documento e escreva o parágrafo abaixo para testes;
   Este é um parágrafo que escrevi para testar a matéria sobre o painel Snippets do Dreamweaver. O Maujor ensina como criar códigos HTML para serem inseridos no documento.
2. Tecle Shift + F9 para expor o painel Snippets na janela à direita;
   (você irá encontrar várias pastas e sub-pastas já instaladas no painel, por padrão).
3. Abra uma das pastas e se houver, as sub-pastas, até chegar aos arquivos dos trechos de código;
   (são os que contém um ícone com este formato: ).
4. Na janela de código selecione uma palavra qualquer do parágrafo que você escreveu (etapa 1 acima) e dê dois cliques sobre um dos ícones ou selecione o ícone e clique no botão de inserção na parte inferior esquerda do painel;
   (observe na janela de código que o DW inseriu o código, na área selecionada do seu documento).
5. Tecle Ctrl + Z para desfazer a inserção do código e experimente com outros códigos existentes;
   (cada arquivo tem um nome indicando o código que vai ser inserido e a inserção é feita no local onde você posionou o cursor na janela de código)
6. Explore um pouco o painel e vamos em frente.

Personalizando o painel

O seu documento para testes (etapa 1 lá em cima) deverá estar sem qualquer código inserido e apenas com o parágrafo que você digitou.

Vamos personalizar o painel:

1. Observe na parte inferior esquerda do painel um botão de inserção e na parte inferior à direita ícones clicáveis assim:
   (O ícone da pastinha é para criar um novo snippet, o sinalzinho de + (mais) chama uma janela popup de edição nova, o lápis é para editar um snippet existente e a lixeirinha é para apagar um snippet.)
2. Assegure-se de que nenhuma pasta padrão esteja selecionada. Para anular uma seleção de pasta clique uma vez na barrinha de títulos acima das pastas;
3. Clique no ícone da pastinha lá em baixo do painel. Isto cria uma nova pasta que você pode nomear. Vamos chamar aqui a pasta criada de "Meus códigos HTML"
4. Selecione a pasta criada e clique no ícone do sinalzinho de + (mais) lá em baixo do painel. Isto cria um arquivo novo na pasta e abre uma janela pop-up para você inserir o seu código;

   Preencha a janela como mostrado abaixo:
   

   Criamos um código para ser inserido na primeira ocorrência da abreviatura HTML no documento.

5. Vamos testar o código criado. No parágrafo que você digitou selecione HTML e clique duas vezes sobre o ícone do arquivo abbr-HTML que você acabou de criar. Se você fez tudo certo, no parágrafo onde estava HTML agora está assim:
   <abbr title="HyperText Markup Language">HTML</abbr>. Você acaba de criar uma maneira rápida de inserir o elemento ABBR na primeira vez em que HTML aparece no documento;
6. Mas, e as demais instâncias de HTML que aparecem no documento e que devem ser marcadas com <abbr>HTML</abbr> sem o atributo title? Crie outro snippet com o nome de abbr-simples por exemplo, que não contenha o atributo title.

Agora você já conhece e sabe como funciona o painel Snippets. Está em condições de fazer algumas experiências para se familiarizar melhor com ele.
Observe na figura acima que existe a opção Insert Block que serve para inserir um bloco de código em um lugar do documento, diferente portanto de Wrap Selection que foi a opção que usamos acima e que serve para colocar TAGs em um texto selecionado.

Sugestões de códigos para criação de snippets

• abbr-IE, abbrURL, abbrXHTML, abbrCSS – são semelhantes ao explicado.
• acronym-XXX – para inserir um acrônimo que você utilize com frequência.
• code – para inserir a TAG <code></code>
• style – para inserir a TAG:
  <style type="text/css">
  </style>
• zerandoCSS – para inserir a regra CSS niveladora:
  * {
  margin:0;
  padding:0;
  border:0;
  }

Bem, isto é tudo. O uso do painel Snippets sem dúvida agiliza, e muito, a produção. Não só códigos podem ser personalizados, mas também qualquer texto comum que tenha de ser digitado muitas vezes no projeto, pode e deve ser inserido no painel, economizando tempo de digitação. Façam bom proveito da dica e se ficar alguma dúvida ou tiver algo a acresentar os comentários estão aí para isso.

Esta matéria foi publicada em: 2006-04-8 (sábado). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/04/08/cod-dw/trackback no seu site.