Lesson 6 - Snippets

DW Cover

Snippets come in two flavors

Code snippets let you store content for quick reuse. You can create, insert, edit, or delete snippets of HTML, JavaScript, CFML, ASP, PHP, and more. You can also manage and share your code snippets with team members. Note that snippets are different from library assets in that they are available to all of your sites whereas library assets are only available to the site where they were created.

Some predefined snippets that you can use as a starting point are available and are listed in the Snippets tab in the Files Panel. Later, we will insert one of those into our document.

There are actually two types of snippets.

Insert Block - This snippet is a block of code that is inserted into the document.
Wrap Selection - This is a snippet that is used to wrap around code in the document. It consists of two snippets, a starting block and an ending block. To use this you highlight the content that is to be wrapped and then insert the snippet.

Insert a Snippet

In the document move the cursor to the location where the snippet is to be inserted. This is called the insertion point. If you are inserting a snippet that is a wrapper then highlight the code to select the insertion point.

In the Files panel select the Snippets tab. All the available snippets are shown and range from Form Elements to javascript code. I selected Comments, Multi-Line from the Comments folder to get the code that denotes a comment in HTML which is shown below.

Select Snippet

To copy the snippet into the document either double click on it or right-click (Windows) or Control-click (Macintosh) the snippet, and then select Insert from the pop-up menu.

Insert Snippet for Comment

Now that the comment delimiters have been inserted into your code you may enter the text of your comment.

Create a New Snippet

It's easy to create a new snippet. Of course, you must initially create the code you intend to become your snippet. Before doing this we will create a new folder in the Snippets panel and call it MySnippets. First, make sure nothing is selected in the Snippets panel then select the folder icon from the icons at the bottom of the Snippets panel:

Snippets New Folder

After naming the folder make sure it is selected so that the new snippet will be placed in the folder after it has been created. In the document, highlight the code that is going to be the new snippet. You may select the code from the docement in either the code or design view windows. In this case, the snippet is selected from the code view. It is a block of HTML code that will be used to insert a centered image of the Dreamweaver box.

To add the code as a snippet click on the "New Snippet" button at the bottom of the panel.

Snippets Icons

At this point you'll give it a name and description. In this case it is a block of code so we select "Insert Block". You also have a choice of selecting a 'Preview type' of the snippet, whether the snippet shows up in the preview window as code or as it would look in the design view. Selecting either would work because this snippet has an image in it. By selecting Design the image would be displayed. Click OK and the snippet will be added to MySnippets folder.

Snippets Block Code

Next, we will create a snippet that will use the 'Wrap selection' option. In the 'Insert before' section, the opening tag for the starting paragraph tag with the style information is inserted. In the 'Insert after' section the closing tag is inserted. Since this snippet is just code then it makes sense to select Code as the Preview Type. Selecting Design option in this case would show nothing in the preview window. You click "OK" and you will see the new snippet in MySnippets folder, ready to be used.

Snippet Wrapping

The new snippet has been added to MySnippets and is now available to be used.

View New Snippet

To use this snippet I could insert an image, highlight it, and then insert the snippet from the snippets panel. Now, the image will be centered.

Note that Dreamweaver does not interpret what the snippets do so it is up to you to insert it in the correct location, not outside the <head> tag, outside the form, if it is a form element snippet. Snippets also do not take advantage of the site management features which keeps track of paths to images and links.

Reference:

Code Snippets for Dreamweaver CS4 - Adobe Help

McFarland, David Sawyer (2007). Dreamweaver CS3: The Missing Manual. O'Reilly Press, Sebastopol, CA.

Top