• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Editing Code > The Snippets Panel

The Snippets Panel

The Snippets panel is a stockpile of reuseable code such as table designs, headers, footers, and form fields. Some are nifty JavaScript tools, such as the Random Number Generator. Some are common design elements such as headers and footers. And if you're short on design ideas or you just want to put a whole page design together quickly, you can use design element snippets (Figure 4.69) wholesale and just change the text and the links.

Figure 4.69. This mockup page is made entirely of code blocks from the Snippets panel: a header, a few items from the Content Tables folder, and a footer.

Snippets vs. the Library

This panel is similar to Dreamweaver's Library feature (Chapter 17), with a few major differences. Both tools stockpile snatches of code, but the Library includes only items you create yourself and assign to the Library, whereas the Snippets panel comes fully stocked with prebuilt code to which you can add your own. When you update a Library item, all pages that use it are updated; snippets are not linked to the Snippets panel and no automatic update is included.

Library items, generally speaking, cannot be edited on individual pages that use them. Snippets not only can be edited once you put them on your page, but in most cases you need to edit them before they're at all useful.

Also, remember that other tools exist for similar reasons: Links and colors are already stored in the Assets panel (Chapter 2); entire prebuilt page designs are available from the New Document dialog box (Chapter 2); and you can create updateable templates, which are similar to library items, and also stored in the Assets panel (Chapter 17).

To view the Snippets panel:
  • From the menu bar, select Window > Snippets, or press Shift+F9.


  • On the Code panel group, click on the Snippets tab.

The Snippets panel will appear (Figure 4.70), displaying folders containing named chunks of code.

Figure 4.70. The Snippets panel contains blocks of code organized by design element.

Kinds of snippets

Snippets are either Wrap-type or Block-type. Block-type snippets get dumped on your page wholesale. Wrap-type snippets (Figure 4.71) allow you to insert an opening and closing snippet around selected text. These are a variation on the idea of inserting an opening and closing tag (Figure 4.72).

Figure 4.71. A simple example of a wrapping snippet is an opening and closing comment tag.

Figure 4.72. This snippet, which I added myself, makes the selected text, in this case a single letter, take on the specified formatting. The tags open before the selection and close after the selection.

To insert a snippet:
Locate a snippet that looks interesting.

Double-click it or drag it onto the page.

After it's on your page, make any changes you like to the content, the links, the colors, and so on, until the snippet's a useful part of your page.

To edit a snippet that's already in the Snippets panel:
In the Snippets panel, select the name of the snippet you want to edit.

Click on the Edit Snippet button . The Snippet dialog box will appear (Figure 4.73).

Figure 4.73. Here, I'm editing the Snippet called Basic: Brief Text from the Footers folder. If you like this footer, you can replace the dummy text and links with your actual footer content, and rename the footer Real Footer or something.

Edit the name and description of the snippet, if you like.

Click on the Wrap Selection or Insert Block radio button to change the type of snippet.

Edit the code—or paste some of your own code—in the Insert Code text box (or the Insert Before and Insert After text boxes, for Wrap-type snippets).

If it's a Wrap-type snippet, the Before section will appear before any selected text and the After section will appear after it:


If you want the snippet to preview in the panel as if it were in Design view (Figure 4.74), select the Design radio button. To instead preview code (Figure 4.75), select Code.

Figure 4.74. Some snippets preview just Design view.

Figure 4.75. Some snippets preview just the code.

Click OK to close the dialog box and save your changes.

To add your own snippet to the panel:
Select the code or objects on your page that you want to make into a snippet (Figure 4.76); or if you want to type it from scratch, don't select anything.

Figure 4.76. Select your future snippet in either Design or Code view.

Click on the Add Snippet button , or right-click (Control+click) on the text and select Create New Snippet from the context menu of the Snippets panel.

The Snippet dialog box will appear.

If you selected some code or objects in step 1, it will appear in the Insert Code or Insert Before text box here (Figure 4.77).

Figure 4.77. The stuff I selected in step 1 appears in the Snippets dialog box.

Follow steps 3-7 above, and be sure to include a name and close all your tags.

To rearrange snippets in the panel:
  • To create a new folder, click on the New Snippet Folder button and type a name for the folder (Figure 4.78).

    Figure 4.78. Type a name for your new folder.

  • To move any snippet or folder from one folder to another, just click and drag it to a new location (Figure 4.79).

    Figure 4.79. I moved my new folder into the Text folder.

  • To rename a snippet, click and hold on the name until a text box appears, and type a new name (Figure 4.80). Or, select Rename from the Options menu (Figure 4.81) and type a new name.

    Figure 4.80. You can rename any snippet or folder.

    Figure 4.81. Select Rename from the Options menu.

  • To delete a snippet, select it and click on the Delete button on the Snippets panel. A dialog box will ask you to confirm the deletion.

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