Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 18. Snippets and Libraries > Creating Snippets
18.3. Creating Snippets
Dreamweaver comes with a lot of snippets, and you many have no use for many of them. No problem—it'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. Or, if you wanted to save a pull-down form menu (see Section 11.3.5) that took you half an hour to build, just click the form menu in Design 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 18-1).
The Snippet window appears (Figure 18-2), displaying the code you selected in the Insert field.
Tip:
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).
Title the snippet.
The name you type in the Name field appears in the Snippets tab. Make sure to give it an easily understood name.
Figure 18-1. The Snippets tab on the Files panel contains reusable chunks of code—snippets—which 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.)
In the Description field, type identifying details.
This step is 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 document—for example, a simple copyright notice, or a form menu.
If necessary, add the code for the snippet.
If you initially selected code in the document window, it already appears in the "Insert before" field for a snippet that wraps around other code. For snippets that are just a single block of code, the code appears in the "Insert code" box.
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 12.5.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 18-1). Design means the snippet looks as it would in Design view—a 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; you can then drop it in your Web pages using any of the techniques described on Section 18.2.
