• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

17.3. Creating Snippets

Dreamweaver comes with a lot of snippets, many of which you may have no use for. No problem—it's simple to create snippets of your own. Here's how:

  1. Create and select the code you wish to turn into a snippet.

    You could, for instance, select table in Design view, or select the opening and closing <table> tags (as well all code between them) in Code 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'll need to switch into Code view first and then select the code.

  2. Click the New Snippet button on the Snippets tab (Figure 17-1).

    The Snippet window appears (Figure 17-2), displaying the code you selected in the Insert field.

    Figure 17-2. The Snippet window lets you create reusable chunks of HTML called snippets. For snippets that wrap around a currently selected object on the page—for example, a snippet that adds a link to any selected text or graphic—you put code in the two insert boxes. The code that appears before the selected object goes in the top box, and code after the object appears in the bottom box.


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

  3. Title the snippet.

    The name you type in the Name field appears in the Snippet tab. Make sure to give it an easily understood name.

  4. 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 the snippet wraps a selection or not.

  5. Select a Snippet type.

    Wrap Selection makes the code wrap code around a selection (Figure 17-2) when you use the snippet in your Web pages. The Insert Block option is for a snippet that is a single block of code inserted into the document—for example, a basic table design.

  6. If necessary, add the code for the snippet.

    If you initially selected code in the document window, it already appears in the Insert Before or Insert Code field. If you're creating a wrapping Snippet, then some code will go 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.

  7. Select a Preview Type.

    The preview type determines how the snippet will appear in the Preview pane of the Snippets tab (see Figure 17-1). Design means the snippet will look as it would in Design view—a snippet of a table will appear as a table. Code view means the code itself will appear 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.

  8. Click OK.

    The snippet is added to the Snippets tab, and you can then drop it in your Web pages using any of the techniques described on page 516.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint