Previous Section  < Day Day Up >  Next Section

17.2 Using Snippets

Snippets come in two varieties: those that are a simple block of code and those that wrap around the current selection in the document. For example, in the Text folder of the Snippets tab, you'll find a snippet called Service Mark. Adding this snippet to a page instantly inserts the code <sup>sm</sup>, creating a superscript service mark (sm) symbol.

But on occasion, you may want to wrap code around something you've already typed. You may want to add an HTML comment to your page (a message that won't appear in a Web browser, but that you can use for helpful notes to yourself or other Web designers). The "Comment, multi-line" snippet (in the Comments folder) can help you add such comments quickly. It wraps whatever you've selected with opening (<!--) and closing HTML comments (-->). Adding an HTML comment is as easy as typing the comment, selecting it, and then inserting this snippet.


Unfortunately, unless the snippet's description (visible in the Snippet Panel's Description column) speci- fies that the snippet wraps, there's no way to tell whether a snippet is intended to wrap around a selection. You either have to try the snippet, or open the snippet in editing mode (see Section 17.3.1) to find out. (While you've got the snippet open, you can add a note to its description indicating its ability, or inability, to wrap.)

To add a snippet to a Web page, click in the document where you want the item to go, or select the object you wish to wrap with a snippet. Then do one of the following:

  • Double-click the name of the snippet on the Snippets tab of the Code panel.

  • Select the snippet on the Snippets tab and click Insert.

  • Drag the snippet from the panel into the document window. (If the snippet is supposed to wrap a selection, drag the snippet onto the selected object.)

Snippets can be used in either Design or Code view (see Section 10.2), but some snippets only make sense in Code view. For example, the JavaScript snippets that come with Dreamweaver typically have to be inserted in the <head> of a page, inside <script> tags. To use them, you must switch to Code view, insert the script tags, and then put the snippets inside.

Snippets simply dump their contents into a document; Dreamweaver doesn't step in to make sure that you're adding the code correctly. Unless you're careful梐nd have some knowledge of HTML梱ou might end up adding snippets that make your Web page unviewable. (For advice on how to avoid such pitfalls, see the box in Section 17.4.)

The Snippets tab on the Code panel contains reusable chunks of code梥nippets梬hich you can organize in 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).
    Previous Section  < Day Day Up >  Next Section