This tutorial is designed to help you learn how to create and use snippets or blocks of code or design in Dreamweaver. It is intended for use by people using the following versions of Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Snippets are a useful tool to learn because they allow you to save blocks of code or even your design to a library to use later — even years later in other web pages. I use them all the time for things like copyright blocks, common navigation, even whole layouts. Snippets help you speed up your design work by eliminating repetitive tasks. When you build a snippet, you build it once and then use it everywhere you need it.
Open Dreamweaver and in the Window menu, choose Snippets. Dreamweaver comes pre-installed with a number of useful snippets, including:
- Comments for various comment blocks including IE conditional comments
- Common footer variants including a list of links and copyright statements
- Form elements including a bunch of drop down menus for forms such as a drop down of the months
- And some meta tags, navigation, and text elements that you might use
To create a new snippet, you need to build the block of HTML or design first. Do this in Dreamweaver as you normally would. Once you have the block exactly how you would like it, highlight it your cursor.
Click on the New Snippet icon below the snippets window. It looks like a file with a plus sign.
Give your snippet a name. This will appear in the snippets list name column.
Give your snippet a description. This will appear in the description column and is not required.
There are two ways you can insert a snippet — as a block or wrapped around existing text. At first it's easiest to create stand-alone snippets that you just insert as a block of HTML. But after a while you may want to create a snippet that surrounds variable content in your page. For example, if you create a snippet to make text bold and blue with a
SPANelement, you want the opening tag (
<span>) to be before the text and the closing tag (
</span>) to be after it. This would be a wrapping snippet.
Choose the type of snippet you are creating — click “Wrap selection” or “Insert block.”. If you choose a wrapping snippet, you will need to move the code that comes after the highlighted text to the second box.
Verify that the code you highlighted is exactly what you want in your snippet. This is what will be pasted into future documents, so it's a good idea to make sure that all the tags are closed and the snippet can stand alone.
Choose how you want the preview in the snippet pane to display — as code or design. Dreamweaver typically uses the mode you used to highlight your snippet in originally, but you can choose either.
You can move your snippet into a new folder or leave it at the root of your snippets library — whatever is most useful to you.
Be sure to check out the pre-installed snippets. There may be one or two there that would help you manage your site.
What You Need