Dreamweaver CS6: The Missing Manual

Snippets Basics

Snippets aren’t fancy or complex, but they sure save time. A snippet is simply a chunk of code you store away and then plunk into your web pages as necessary. They can be as simple as boilerplate legal text, or as complex as HTML, CSS, or JavaScript code (or code from any other programming language you encounter). For example, say you always use the same table design to list product specifications in your company’s catalog. Each time you want to create a similar table, you could go through all the same steps to build it—or you could turn that table into a snippet, and then, with a simple double-click, add it to page after page of your site. Or say you use the popular jQuery JavaScript library on each site you build, and have to include the code to link to jQuery’s JavaScript file—rather than type that code each time, just have Dreamweaver drop the pre-typed code into the page for you.

You keep these code chunks in the Snippets panel (see Figure 18-1), and summon them in a couple of ways:

• Choose Window→Snippets.

• Windows people can press Shift-F9. (There’s no Mac keyboard shortcut for the Snippets panel, but you can create your own, as described on Keyboard Shortcuts.)

Figure 18-1. The Snippets panel contains reusable chunks of code—snippets—that you can organize into folders. After you select a snippet from the list, Dreamweaver displays a preview in the Preview pane. In ...