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 — 19.607 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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