Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Agilizando codificação no Dreamweaver

Publicado em: 2006-04-8 — 20.786 visualizacoes

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: uma folhinha com um S azul dentro ).
  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 uma folhinha com um S azul dentro 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:
    janela popup do painel snippets

    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.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

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.

5 comentários na matéria: “Agilizando codificação no Dreamweaver”

  1. Matheus de OliveiraNo Gravatar disse:

    humm…uma boa, o interessante é que eu já tinha visto essa janelinha, mas nunca percebi que dava pra adicionar códigos personalizados…

    Um que já adicionei é um pra comentários condicionais, pq sempre esqueço como declara-los, agora: “Meus problemas acabaram”…

  2. Adriano VieiraNo Gravatar disse:

    Post bem interessante, gostei…
    Eu já havia alterado o esquema de cores do meu DW (deixei o fundo preto) e deu um bom trabalho, agora vou criar alguns códigos para inserir nos Snippets, tudo isso para melhorar a produtividade e qualidade de trampo 😛

    Você sabe dizer em qual arquivo o DW guarda os Snippets “customizados”?

    Abraço!

  3. Bruno BarbosaNo Gravatar disse:

    Show de bola samy. Pra mim que estou começando a “trabalhar” não só com o DW mas com CSS, está sendo muito util. Aprendi muito nas ultimas semanas de estudo. Parabéns!

  4. PedroNo Gravatar disse:

    Oi, grande blog, muito útil. Acho que o vou consultar muitas vezes.

    Mas será que me pode ajudar numa duvida que tenho ?!?

    tenho uma div (content) com duas divs (foto e txt), tento alinhar uma ao lado da outra e consigo com o float:right em txt, mas quando o texto ultrapassa a o tamanho da div principal (content) esta não cresce em altura, apenas a div txt e sobrepõe o que está por baixo !!

    Obrigado, cumprimentos

  5. [caiocesar]No Gravatar disse:

    Meu caro, parabéns pelo seu blog e pelo site como um todo. Está de parabéns.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo