Previous Section  < Day Day Up >  Next Section

17.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:

  • Comments Snippets. The snippets in the Comments folder are great for turning any selection into a comment. For example, suppose you want to leave a message to other developers working on a page. Just type the message into the document window, select it, and insert the "Comment, multi-line" snippet. It's faster than using the Comments object in the Insert bar. You'll find snippets that add comments to JavaScript programming or Cascading Style Sheets as well.

  • Close Window Button. When you create a pop-up window (Section, 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.

    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 adding a snippet incorrectly.

    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 won'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 is also unlikely to work in another page.

    So it's best to create snippets without images or links-but there are workarounds. For instance, you can create snippets with fake links梪se nothing but the # symbol for the link, for example梐nd 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 InsertImage ObjectsImage 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 in Section 17.5.


    Some browsers don't recognize a Form button without the <form> tag. To play it safe, first insert a form (see Section 11.2) and then insert this 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 1-12 already coded into it梘reat for capturing credit card expiration dates on an ecommerce site.

  • 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.

    Previous Section  < Day Day Up >  Next Section