O'Reilly logo

Dreamweaver 8: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

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

    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.

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

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

    Note

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

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

    Figure 16-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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required