This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Code Snippets
Code snippets are reusable blocks of code that can be inserted in a page. Dreamweaver supplies a collection of code snippets on the Snippets panel (Shift-F9), including blocks of HTML and JavaScript. You can also create your own code snippets and add them to the Snippets panel.
To insert a code snippet:
- In Code view, place the insertion point where you want to insert the snippet.
- From the Window menu, choose Snippets, or press Shift-F9.
The Snippets panel appears (
Figure 3.22
).
Figure 3.22 Access code snippets on the Snippets panel.
- Select a folder to access the snippets. For example, select the Accessible folder and then select the Headers folder.
- In the Headers folder, double-click the Text on Top snippet (
Figure 3.23
).
The Text on Top header is added to your page at the insertion point ( Figure 3.24 ).
Figure 3.23 Double-click a snippet to add it to your page.
Figure 3.24 The Text on Top code snippet in the Headers folder is added at the insertion point.
)
)
)
To create a code snippet:
- On the Snippets panel, click the New Snippet button at the bottom of the panel (
Figure 3.25
).
The Snippet dialog appears.
Figure 3.25 Click the New Snippet button at the bottom of the Snippets panel to create a new snippet.
- In the Name field, enter a name for the snippet (
Figure 3.26
).
Figure 3.26 Creating a new snippet in the Snippet dialog.
- In the Description field, enter an optional description of the snippet.
- Select the Wrap Selection radio button to insert two blocks of code, one before and one after a tag on the page. Or select the Insert Block radio button to insert a single block of code.
- If you chose the Wrap Selection option in the previous step, enter your code in the Insert Before and Insert After fields (
Figure 3.27
). If you chose Insert Block, enter your code in the Insert Code field.
Figure 3.27 Enter your code if you chose Wrap Selection in Step 4.
- To select the format for previewing your snippet, select the Design or Code radio button in the Preview Type section.
- Click OK to save your snippet and close the Snippets dialog. A preview of the snippet is displayed (in Code or Design view) on the Preview pane of the Snippets panel, directly above the Snippets folders.
)
)
)