Working with Snippets

---

One of Dreamweavers' best new additions is the Snippets panel (Figure 42-12), located in the Code panel group. A snippet is a stored block of code saved via the Snippets panel into the Configuration\Snippets directory inside your Dreamweaver program files. Through the Snippets panel, you can create and insert codeblocks of HTML and JavaScript, as well as other scripting types (ASP, CFML, and so on). Your saved snippets are available to you in all your Dreamweaver sites because their code becomes part of the Dreamweaver program.

Figure 42-12: The Snippets panel comes with many predefined code snippets.

Inserting a code snippet

Dreamweaver ships with many built-in, predefined snippets that may be used in your site pages. These snippets are organized in folders (within the Configuration\Snippets directory in the Dreamweaver program files) that are arranged in the Snippets panel. To open the Snippets panel, press Shift+F9 or open the Code panel group and click the Snippets tab.

To review the available snippets:

1. Locate a folder that interests you and select a snippet.

2. Place the insertion point in the desired position in the document; to insert a code snippet around a selection, make the selection in the document.

3. In the Snippets panel (Window ® Snippets), double-click the snippet.

   You can also right-click (Windows) or Control + click (Macintosh) the snippet, and choose Insert from the pop-up menu.

Creating a code snippet

When creating a snippet, you can decide whether you want the code to wrap around a selection or to be inserted as a block of code. For example, you can take the datescript used in the example for the embedded JavaScript and build a snippet for use in any site. To make the snippet more user-friendly, be sure to add comments that explain the code. To create a code snippet from the script:

1. Open the  datescript.js file from either the Assets (Scripts) panel or from the scripts folder found at the root level of the Chapter 42 site.

2. Choose Edit ® Select All or press Control+A (Command+A) and copy the code. Close the file.

3. Open the Snippets panel and open the JavaScript folder. Locate and open the date folder so that when you create the new snippet, it is saved into this folder. (You could also simply create your new snippet anywhere and later drag it to a folder so that it is easier to locate later.)

4. Click the New Snippet icon at the bottom of the panel. When the Snippet dialog box opens (Figure 42-13) name the snippet and provide a description so that others will understand what this code will do.

   
   Figure 42-13: The Snippet dialog box

5. Choose Insert Block and paste the copied datescript code into the Insert Code field. You may choose between the Design or Code Preview Type, but in this case, it will not matter much because the rendering of the script can only be done in the browser.

   Normally, the preview type lets you set which view is triggered when inserting a snippet. If Design view is set as the preview type, the code is rendered there. Since the date script is processed client-side in the browser, you will not see the dynamic date in Design view.

6. Click OK to close the dialog box. Now when you need the date script, you can simply embed it via the Snippets panel.

If your snippet is code that should wrap around other content or tags, use the Wrap Selection option and place the first portion of the code in the Insert Before field. Place the last portion in the Insert After field.

Editing or deleting a code snippet

Snippets are easy to edit or delete. To edit, simply select the snippet and either right-click (Control + click) and choose Edit or select and use the Edit button at the bottom of the Snippets panel.

To delete a snippet, select it and use your Delete (Backspace) key or click the Delete icon at the bottom of the Snippets panel.

Sharing your snippets

One of the things that make snippets so useful is that you can share them with others who use Dreamweaver. Predefined snippets are stored as files in the Dreamweaver program but custom snippets (and snippet folders) are saved within user-specific configuration folders. To share a snippet, follow these steps:

1. Locate and copy the snippet file (or folder of files).

2. Give the file to other members of your team.

3. Let them know that they can place the file(s) or folder(s) inside their own user-specific configuration folder or within the Program Files (Applications)\Dreamweaver MX\Configuration\Snippets folder.

Where to Look for User-Specific Configuration Folders

Windows XP and Windows 2000

c:\Documents and Settings\username\Application Data\Macromedia\ Dreamweaver MX\Configuration

In Windows XP, this folder may be inside a hidden folder. To locate the folder, run a search that incorporates hidden files and folders and look for Application Data. When the Application Data folder (username) is found, right-click and choose Properties. Uncheck the Hidden option. Another dialog box will ask whether you want this to include sub-folders and files. Choose that option.

Windows NT

c:\WinNT\Profiles\username\Application Data\Macromedia\Dreamweaver MX\ Configuration\

Macintosh OS X

Hard disk:Users:username:Library:Application Support:Macromedia: Dreamweaver MX:Configuration

---