Section 16.3. Creating Snippets | Dreamweaver 8[c] The Missing Manual

16.3. Creating Snippets

Dreamweaver comes with a lot of snippets, and you many have no use for many of them. No problemit's simple to create snippets of your own. Here's how:

Create and select the code you wish to turn into a snippet .

You could, for instance, select a table in Design view, or select the opening and closing <table> tags (as well as all the code between them) in Code view.

If you make a snippet out of code that isn't visible in Design view, such as a JavaScript program or content that appears in the <head> of the page, you need to switch into Code view first and then select the code.
Click the New Snippet button on the Snippets tab (Figure 16-1) .

The Snippet window appears (Figure 16-2), displaying the code you selected in the Insert field.

Note: If you skip step 1 and just click the New Snippet button, you can either type the code or paste a previously copied selection into the Insert box (see step 6).

Figure 16-1. The Snippets tab on the Files panel contains reusable chunks of codesnippetswhich you can organize into folders. After selecting a snippet from the list, a preview appears in the Preview pane. In this example, you can see a preview of the snippet: a simple table with a colored background and dummy text. Snippets can have either a graphic preview (as in this example), called design preview, or a code preview, which is the raw code. Code previews are useful for snippets that aren't visible in Design view, such as JavaScript code. (When you create your own snippets, you specify the preview type.)
Title the snippet .

The name you type in the Name field appears in the Snippet tab. Make sure to give it an easily understood name.
In the Description field, type identifying details .

This step's optional, but useful. Use this field to provide a description of when and how to use the snippet and whether or not the snippet wraps a selection.
Select a Snippet type .

"Wrap selection" makes the code wrap around a selection when you use the snippet in your Web pages. The "Insert block" option is for a snippet that's a single block of code inserted into the documentfor example, a simple copyright notice.
If necessary, add the code for the snippet .

If you initially selected code in the document window, it already appears in the "Insert before" or "Insert after" field. If you're creating a wrapping snippet, then some code goes in the "before" field and some in the "after" field.

For example, say you wanted to create a snippet that would let you set off a paragraph of text by adding a horizontal rule at the beginning of the paragraph and one at the end. In both the "Insert before" and "Insert after" fields, you'd type <hr> the HTML code for a horizontal rule. (If you're creating XHTML pages as described on Section 3.2.2, you'd type <hr /> in both fields.)
Select a "Preview type."

The preview type determines how the snippet appears in the Preview pane of the Snippets tab (see Figure 16-1). Design means the snippet looks as it would in Design viewa snippet of a table appears as a table, for instance. Code means the code itself appears in the Preview pane (in that case, a snippet for a horizontal rule would preview like this: <hr>). Use Code preview for snippets that aren't visible in Design view, such as JavaScript code.
Click OK .

Dreamweaver adds the snippet to the Snippets tab, and you can then drop it in your Web pages using any of the techniques described on Section 16.2.

If you need to go back and edit a snippetchange the code, type, description, or nameselect the snippet in the Snippets tab and click Edit Snippet (Figure 16-1). You can also right-click (Control-click) the snippet name and then select Edit from the shortcut menu.

Whichever method you chose, the Snippet window (Figure 16-2) appears. Make your changes, and then click OK.

Figure 16-2. The Snippet window lets you create reusable chunks of HTML called snippets. For snippets that wrap around a currently selected object on the pagefor example, a snippet that adds a link to any selected text or graphicyou put code in the two insert boxes. The code that appears before the selected object goes in the top box, and the code that goes after the object appears in the bottom box. In this example, the snippet wraps the current selection in HTML comments.

16.3.1. Organizing Snippets

To keep snippets organized, you can create new folders to store them by category. To add a folder to the Snippets tab, click the New Folder button (see Figure 16-1). An untitled folder appears; type a name for it. If you select a folder before clicking New Folder, Dreamweaver creates the new folder inside that folder. You can move folders around by dragging them into other folders.

Note: To drag a folder or snippet to the top level of the Snippets list, you have to drag it all the way to the bottom of the tab, below any other folders. If you try to drag it to the top, Dreamweaver puts the folder or snippet inside the top folder in the list.

To move a snippet into or out of its folder, simply drag it. If you drag a snippet over a closed folder without releasing the mouse, that folder expands to reveal the folders inside, if any.

To delete a snippet, select it from the Snippets tab and then click the Delete Snippet (Trash can) button (see Figure 16-1). Quicker yet, press Delete.

Note: Having lots of snippets can slow down the Snippets panel, so it's best to remove any snippets you don't use (like a lot of the ones that came with the program, for example). If you don't want to permanently delete them, you can move them out of the main Macromedia Dreamweaver 8

Configuration

Snippets folder and store them in a separate folder on your hard drive. (For more on the configuration folder and how to find it, see the box on Section 19.2.6.)