| In Dreamweaver you can store portions of code, called snippets, so that they can be reused easily. There are a certain number of predefined snippets provided in Dreamweaver that you can use, or you can create your own snippets from comments, JavaScript routines, portions of code, and other sources. Snippets are particularly useful for code that needs to be used repetitively throughout a site, such as an email address or a link. In this way, they are similar to library items (covered in Lesson 12); however, unlike library items, snippets do not update throughout a site when you make changes to the original snippet. You can either place a snippet directly into the code or have it wrap around a selection. | | 1. | In the training.html document, place the insertion point after the "Phone" text field in the Contact Information section of the form and press Return (Macintosh) or Enter (Windows).
In the following steps, you will insert a predefined Dreamweaver snippet on the new paragraph line.
| 2. | In the Files panel group select the Snippets tab. Open the Accessible folder and open the enclosed Form Elements folder. Select the Browse For File Button snippet. Click Insert at the bottom of the Snippets panel. Save the training.html document.
 This snippet creates a button that the visitor can click to select a file on their hard drive to upload with the rest of their contact information.
Tip You can also drag the snippet to the point in the document where you want it to be placed. | | | 3. | In the asana.html document, select the div surrounding the table at the bottom of the page that contains the placeholder image and corresponding caption.
Tip To select the div, you can click the thin dotted border surrounding the table, or you can place the insertion point anywhere inside the table and use the Tag selector at the bottom of the Document window to select the <div> tag. This table is an example of one that might be used throughout a Website for images and corresponding captions. By creating a snippet that contains this table, you no longer have to re-create the same code every time you want to include an image and caption combination. You can just insert the snippet quickly and easily. Another advantage is the consistency that comes from using a snippetyou can use a standard look and layout for the image and caption combinations.
| 4. | Click the New Snippet button at the bottom of the Snippets panel.
 The Snippet dialog box opens.
Note You can delete or modify snippets by selecting them and clicking the Edit Snippet or Remove buttons at the bottom of the Snippets panel. You can create folders to organize your snippets by clicking the New Snippet Folder button. | | | 5. | Type Image and Caption Table in the Name text field. Type Table layout for images needing captions in the Description text field. Select Insert Block For Snippet Type and select Design For Preview Type. Click OK.
 The snippet is created and now appears in the Snippets panel. You can now insert this snippet into a document whenever you need it by selecting it in the Snippets panel and either dragging it to your document or clicking the Insert button on the Snippets panel.
Because the last snippet you inserted was in the Form Elements folder in the Accessible folder, the new snippet appears inside the Form Elements folder.
Note You can organize your snippets by dragging them into different folders, creating folders, and renaming folderssimilar to working with files in the Files panel. You can also create keyboard shortcuts for your snippets. You can access the Keyboard Shortcuts dialog box from either the context menu on the Code panel group or by pressing Dreamweaver > Keyboard Shortcuts (Macintosh) or Edit > Keyboard Shortcuts (Windows). To create shortcuts for snippets, choose Snippets from the Commands menu, select a snippet from the list of snippets, click the plus (+) button to add a shortcut for the selected item (follow the Dreamweaver prompts to create a new set if necessary), and press a key combination. The combination of keys pressed will appear in the Press Key text field. | | | 6. | Test your new snippet by deleting the original div at the bottom of asana.html and replacing it with the new snippet by selecting the Image and Caption Table snippet in the Snippets panel and clicking the Insert button.
|
Keep the names and descriptions of your snippets as short as possible. The first column in the Snippets panel displays the icons and names; the second column displays the descriptions. You can roll over a description to see the full description popup. |
