Creating Snippets in Dreamweaver CS5

Snippets in Dreamweaver are an excellent way of reusing a certain piece of code that you find yourself using constantly, over and over again, without having to manually retype it or copy and paste it.  I find myself using it in my own line of work quite often, when developing exercises for courses.

Exercise example
Example of complicated code I have to enter often

I use Dreamweaver to develop our courseware, and every exercise in our class documents are usually made up of nested divs, each of which pertain to specific details about the exercise, such as the exercise’s title, length, and instructions. I used to type these nested divs out manually and oftentimes unwittingly created errors, which required me to dig into the code and hunt the bug down. Here’s where snippets came to my rescue! I’m going to make a snippet that’s just a blank exercise.

Creating a Snippet

  1. Write your code in the Code View, highlight it, right click it, then select “Create New Snippet”.
    Create New Snippet
  2. Fill out the corresponding info for your snippet. There are two different Snippet types: Wrap selection and Insert block.
    1. Wrap selection provides Insert before and Insert after fields for the opening and closing snippet pieces. In the example below, it is used to wrap the selected text in a “FilePath” span:
      Wrap selection
    2. Insert block simply inserts the snippet into the code wherever the cursor is:
      Create New Snippet Window

Once you’ve created your snippet, it will appear in the Files panel, in the Snippets tab. If you right click in the Snippets section, you can even create a new folder just for your own snippets, for better organization.

Snippets in Files panel

Now, every time you click on your snippet here, Dreamweaver will automatically insert it wherever your cursor is.

You can even create keyboard shortcuts for snippets (and essentially any function in Dreamweaver), so you can insert it at just the push of whatever button you want! Look out for my next blog entry to find out how.

To hear about the latest Adobe news, blogs, and training, subscribe to our newsletter. Click here to subscribe.

Snippets are covered in our advanced Dreamweaver CS5 class.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.


One thought on “Creating Snippets in Dreamweaver CS5”