Using Code Snippets in Dreamweaver

July 26th, 2006

A snippet is a chunk of code that you can store in Dreamweaver to reuse later. Snippets can include HTML, JavaScript, ASP, JSP, etc. For example, let’s say you need to add several graphics to your Web site, and each graphic is in a two-cell table with the graphic in the upper cell and the caption in the lower cell. Since you will use the same table (with different content) several places on the site, there is no need to create the table each time. Simply create it once, save it as a snippet, and reuse it whenever you need to.

Dreamweaver also contains some predefined snippets that you can use as a starting point. For example, one snippet of JavaScript lets you add a Close button to any Pop-up windows you include on your Web site. This snippet obviates the need to create the code for each window.

Dreamweaver also includes snippets of code that lets you add a Browse for File… button, a variety of formatted tables, drop-down menus, a Print button, navigation aids such as breadcrumb links, and many more options.

To add a snippet to your page:

  1. Place the insertion point where you want to insert the code snippet, or select code to wrap a snippet around.
  2. In the Snippets panel (Window | Snippets), double-click the snippet you want.
  3. You can also right-click (Windows) or Control-click (Macintosh) the snippet, then select Insert from the pop-up menu.

To create a snippet:

  1. In the Snippets panel, click the New Snippet icon (the one with the plus sign) at the bottom of the panel. The Snippet dialog will appear.

    2. Snippet Dialog

  2. Type a name for the snippet. Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (”).
  3. In the Description text box, enter a text description of the snippet. (optional)
  4. For Snippet Type, select Wrap Selection or Insert Block.
  5. If you chose Wrap Selection, add code to the following text boxes:
    • Insert Before: Type or paste the code to insert before the current selection.
    • Insert After:Type or paste the code to insert after the current selection.
  6. If you chose Insert Block, type or paste the code to insert.
  7. Click OK.

To edit a Snippet:

  1. In the Snippets panel, select a snippet and click the Edit Snippet button at the bottom of the panel.

To delete a Snippet:

  1. In the Snippets panel, select a snippet and click the Remove button at the bottom of the panel.

Posted in Dreamweaver | Trackback | del.icio.us | Top Of Page

Leave a Reply

You must be logged in to post a comment.