Section 16.4. Built-in Snippets | Dreamweaver 8[c] The Missing Manual

16.4. Built-in Snippets

Many of the snippets that come with Dreamweaver offer solutions to specific problems you may never encounter, like a page footer containing two lists of links and a copyright notice. However, some of them are useful for most Web developers. Here are some examples:

Close Window Button . When you create a pop-up window (Section 11.4.1.2), this snippet lets you add a Close button to let people dismiss the window. The "Close Window Button" snippet (in the Form Elements folder) places a form button with the words Close Window on the window page, complete with the JavaScript necessary to close the window when your visitor clicks the button.

Note: Some browsers don't recognize a Form button without the <form> tag. To play it safe, first insert a form (see Section 10.2), and then insert the Close Window Button snippet inside it.

Dropdown Menus . If you create a lot of forms for your sites (see Chapter 10), you'll find some useful snippets in the Form Elements folder, especially in the Dropdown Menus subfolder. For example, the "Numbers 1-12" snippet inserts a menu with the numbers 112 already coded into itgreat for capturing credit card expiration dates on an e-commerce site. (To create an even more useful drop-down snippet, see the tutorial on Section 16.8.1.)

TROUBLESHOOTING MOMENT
A Snippet of Caution

Snippets aren't as smart as other Dreamweaver features. Dreamweaver's usually good about warning you before you make a mistake, but it doesn't make a peep if you're incorrectly adding a snippet.

For instance, when you use one of the program's form snippets to add, say, a text field to a page, Dreamweaver doesn't check to see if you're really putting the snippet into a form. Dreamweaver doesn't let you know if the required <form> tag is missing, and certainly doesn't add it itself. Furthermore, if you're working in Code view, Dreamweaver lets you add snippets to the <head> or even outside the <html> tags altogether, which is useful when creating dynamic Web pages that include server-side programming code, but just creates messy and invalid HTML on normal Web pages.

Furthermore, snippets don't take advantage of Dreamweaver's site management features to keep track of links or paths to images. Suppose you create a snippet that includes an image. If you insert that snippet into another page, the image may not show up correctly. If you create a snippet that includes a link from one page to another on your site, that link's also unlikely to work in another page.

So it's best to create snippets without images or linksbut there are workarounds. For instance, you can create snippets with fake linksuse nothing but the # symbol for the link, for exampleand update the link after you insert the snippet into a page. For images, you can use Dreamweaver's Image Placeholder object to simulate a graphic in a snippet (choose Insert Image Objects Image Placeholder). After adding the snippet to the page, update the placeholder with your real image file.

If you want to create reusable content that can keep track of links and images, see Dreamweaver's Library feature, described on Section 16.5.

Autoclear Textfield . Ever seen a Web form with a text field that has some helpful instructions inside the field ("Type your name here," for example)? This text magically disappears when you click in the field, leaving you free to type as instructed. A snippet called "Textfield, Autoclear" (also in the Form Elements folder) supplies both the text field and the bit of JavaScript that perform this little trick.