Resources for Web Development Students @ Robin’s Blog

Snippets are small blocks of reusable code. For example, a doctype statement is used at the top of every XHTML document. Instead of retyping the doctype statement, a snippet can be created that contains this statement and reused in all future XHTML documents. Most web development applications have the ability to create and use snippets.

Using and Creating Snippets in Dreamweaver MX 2004

The Dreamweaver book that we use in class does not cover this powerful and timesaving Dreamweaver feature, so here’s a little introduction to Snippets in Dreamweaver.

Dreamweaver has a snippet library that includes thousands of snippets of code. The snippets can be accessed in Dreamweaver by clicking Window > Snippets or by pressing Shift+F9.

The Snippets panel is organized with folders; the folders are organized by the type of content or code to be added to the page. There are about 10 snippet folders included with Dreamweaver.

Click the plus sign next to any of the snippet folders to see the individual snippets or subfolders.

To add a snippet to your document, switch to Split (Code and Design) or Code View and position your cursor where you would like the snippet to be inserted. In the Snippets panel, double click the snippet you would like to insert or click the snippet once and click the Insert button on the Snippet Panel or drag the snippet from the panel into your XHTML Code.

Creating a new snippet is easy too. First create a new snippet folder to store your snippets in by clicking the Create New Snippet Folder icon in the Snippet panel. Give the folder a descriptive name and press Enter on your keyboard.

Once the folder is created, switch to Code or Split View and type the XHTML, HTML, CSS, JavaScript or PHP code.

Make sure that the folder that you want to store your snippet in is selected in the Snippet panel. Highlight the code that you want to create a snippet from. Right click the code and from the menu select Create New Snippet. The Snippet dialog box will appear.

Give you Snippet a Name and Description. The Insert Before code will include the code that was highlighted. If necessary you can make modifications to the code in the Insert Before box.

Wrap Selection is used for code snippets that wrap around existing text or code on a page. For example, use this option to apply inline formatting to text. If you use the Wrap Selection option you include the code that should be placed before the selected text in the Insert Before box and you type the code that should be placed after the selected text in the Insert After box.

Insert Block will insert a block of code into the document. You only need to add code to the Insert Before box when using this option.

The Snippets panel has a preview area. The Design and Code options in the Snippet dialog box are used to define how the snippet preview will display.

When you’re done creating your snippet, click OK. The snippet is ready for use!

There are several icons at the bottom of the Snippet panel:

Insert – Used to Insert Snippets: Click the location in the code (or select the code you want the snippet to be inserted around) where you want the snippet to be inserted, select the snippet in the Snippet panel, and click Insert.

Create New Snippet Folder – Used to organize snippets: Create subfolders in existing snippet folders by selecting the “parent folder” and click the Create New Snippet Folder.

Create New Snippet – Used to create new snippets: Select the folder that you want to store the snippet in. Highlight the code that you want to store in the snippet and click the Create New Snippet icon.

Edit Snippet – Used to edit existing Snippets: Select the snippet you want to edit in the Snippet panel and click the Edit Snippet icon.

Remove Snippet – Delete an existing snippet: Select the snippet and click the Remove Snippet icon or drag the snippet to the trash icon.

Would you like some free Dreamweaver snippets? Check out the Snippets Exchange

Next week we will discuss using and creating snippets in HomeSite+, Macromedia’s HTML editor.