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

Using Snippets

In Dreamweaver you can store portions of code, called snippets, to be reused. There are a certain number of predefined snippets you can use, or you can create your own from HTML comments, JavaScript, portions of the HTML code, and more. Snippets are particularly useful for code that needs to be used repetitively throughout a site, like an email address or a link. You can either place a snippet directly into the code or have it wrap around a selection.

In the lighthouse_history.html document, place the insertion point at the end of the last sentence about Point Reyes, “and a descent of over 300 steps” in the Design View pane.

This is where you will insert a predefined Dreamweaver snippet.

Open the Code panel group and select the Snippets tab. Open the Text folder on the Snippets tab and select the Different Link Color snippet. Click Insert at the bottom of the Snippets panel.

This snippet creates placeholder text with a null link in the document.


You can also drag the snippet to the point in the document where you want it to be placed.

Select the placeholder text “xxx.” Locate the code in the Code View pane and change the color in the font tag <font color="#FF0000"> to #333366, a dark blue.

You can override a page's default link color for individual links by placing the font color tags inside the link tags. For example, <a href="#"><font color="#333366"> Lighthouse</font></a> will override the default link color, whereas <font color="#333366"><a href="#">Lighthouse</a></font> will not. You may have to move the tags manually in Code View to get this effect—or you can just insert the Different Link Color snippet and replace “xxx” with your own text.

Select the table at the bottom of the page that contains the placeholder image and corresponding caption.

This is an example of a table that might be used throughout a Web site like the “Lights of the Coast” project site for images and corresponding captions. By creating a snippet that contains this table, you no longer have to recreate the same code every time you wish to include an image and caption combination. You can just insert the snippet quickly and easily. Another advantage is the consistency that will come about from using a snippet—you can use a standard look and layout for the image and caption combinations.

Click the New Snippet icon at the bottom of the Snippets panel.

The Snippet dialog box opens.


You can also delete and modify snippets by selecting them and clicking the Edit Snippet or Remove icons at the bottom of the Snippets panel. You can create folders to organize your snippets by clicking the New Snippet Folder icon.

Type Image Caption Table in the Name text field. Type Table layout for lighthouse 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 are now able to 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.

Test your new snippet by deleting the original table at the bottom of lighthouse_history.html and replacing it with the new snippet by selecting the Image Caption Table snippet icon in the Snippets panel and clicking the Insert button. Replace the placeholder image with pt_arena.jpg from the Lesson_12_Code/Images folder and replace the caption with View from the Point Arena Lighthouse.

Keep the names and descriptions of your snippets as short as possible. The first column in the Snippets panel displays the icons and names, while the second column displays the descriptions. You can roll over a description to see the full description pop-up.



Not a subscriber?

Start A Free Trial

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