Using Dreamweaver Snippets

The Snippets panel is used to store useful bits of code, or snippets , that can be inserted anytime , anyplace. In that way snippets are like Library items. But there's a big difference between snippets and Library items. If you change or update a snippet, there's no site-wide update to previously inserted versions of the snippet. There's no connection between the code in an inserted snippet and the original snippet.

Dreamweaver comes with many useful prebuilt snippets already loaded and ready to use. You'll find them in the Snippets panel. If the Snippets panel is not already visible, choose Window > Snippets to bring it forward.

In the Snippets panel ( Figure 13.22 ), the snippets that come with Dreamweaver are nicely organized into folders for you. Inside the folders you find individual snippets. Click on an individual snippet to see a preview in the preview pane at the top of the panel. You can also see a description of the highlighted snippet. If you work with a narrow window, as in Figure 13.22, you may have to scroll to the right with the horizontal scrollbar at the bottom of the Snippets panel to see the description. Expand the width of the panel ( Figure 13.23 ) to read the description without scrolling.

Figure 13.22. The Snippets panel comes preloaded with many useful snippets.

Figure 13.23. There's a brief description of a snippet to the right of its name .

You've probably already figured out that any custom snippets you save will appear in the Snippets panel, too. Your snippets and Dreamweaver's snippets are used in the same way. We'll explain how to save a new snippet first, and then how to use it.

To save a snippet:

1.	Open a document containing the material you'd like to make into a snippet. Highlight the snippet ( Figure 13.24 ). Be sure you get all the surrounding material needed by clicking the tag in the tag selector. Figure 13.24. Select something on a page to save as a snippet.
2.	Click the New Snippet icon in the bottom right of the Snippets panel. The Snippet dialog appears ( Figure 13.25 ). Complete the following fields: Name: Type a name for the new snippet. Description: Type a description. This is helpful, but optional. Snippet type: Click Wrap selection if the snippet is meant to wrap around a selection. Click Insert block if the snippet is meant to be inserted as a block. If you choose Wrap selection, you will be asked to choose the parts of the snippet to Insert Before or Insert After the wrapped selection. Insert code: The code you highlighted in the document is displayed here. This is an editable field. Preview type: Choose either Design or Code. Figure 13.25. When you save your own snippets, you decide on a name, description, and other basics.
3.	Click OK.
4.	The snippet appears in the Snippet panel ( Figure 13.26 ). The preview displays in the preview pane. Figure 13.26. Snippets you save appear in the Snippets panel. You can drag them into existing folders or organize new folders of your own.

To use a snippet:

1.	Position the insertion point in the document.
2.	Highlight the snippet in the Snippets panel and do one of the following: Click the Insert button at the lower left of the Snippets panel. or Double-click the snippet name. or Drag the snippet from the Snippets panel onto the document.
3.	The snippet appears in the document. Replace any dummy text with correct content ( Figure 13.27 ). Figure 13.27. When you insert a snippet into a document, the text or other element the snippet contains appears on your page.

Tips

• The snippet preview pane won't display the snippet with any CSS shown. The snippet must be on a page before CSS rules take effect.

• Delete or modify snippets by highlighting them and using the Edit Snippet or Remove buttons at the lower right of the Snippets panel.

• Organize your snippets by dragging them into preexisting folders or creating new folders of your own naming.

• Don't use any special characters such as ampersans (&) or angle brackets (< and >) in snippet names .