I have been looking into CS5 and browsing around Dreamweaver today I came across a pretty useful tool. I’m sure most designers who use Dreamweaver already know about the snippet feature, but just incase any of you don’t, here it is: Dreamweaver menu – (Navigate to Window > snippet) Select this and a pop up window should appear like the one shown below:

The list displays all of Dreamweavers preset snippets. You can use one by dragging the required snippet onto your page. This will then insert that code into your code (or you can right click the snippet and “insert into code”)

For those of you that are thinking why would I need this:

The main reason, i believe is speed. Shortcuts used in the right way can prove very useful. Obviously this is not the best way to “learn” but if you are an experienced coder and already know to code that required snippet then why not! I personally use the snippet feature to create my own snippets that I know I will use over and over again in my site designs.

No to tell you how it’s done:

Firstly, you will need a chunk of code, something you know you will need to use over and over again. Maybe you have a standard footer to display your credentials as the designer, or a set meta area.

Select the code you wish to create a snippet with, right click and then click on “Create new snippet”. You will then get a pop-up window which asks you to define various options.

This is fairly straight forward:
Name – The name you wish to choose for the snippet
Description – A short description of the snippet
Snippet type – For simple use you should select ‘insert block’
Wrap selection – The name says it all
Preview type – Set this to code

Once that is configured you can click OK and your snippet will appear in the snippet list!

I hope this has been a useful tutorial, please feel free to comment below and ask any questions!