IRISM's WebZine

Skip to main content

Working with Dreamweaver Snippets, Libraries and Templates

Snippets

Snippets are pieces of code that you store and give a name. These can be inserted into a page, to save typing time. They need to be inserted directly into the code, so you need to understand how to code to some extent to effectively use snippets.

Unlike library items or templates, Dreamweaver does not add "begin" and "end" comments to the code to mark them. Once they are inserted, Dreamweaver treats them like regular code.

Libraries

Why work with library elements? Because, you can store entire blocks of code, give these blocks a name, and have them updatable on all pages that link to those blocks. This is not the same as using snippets - the snippets are merely copied into the code, but are not linked. The library blocks are linked. For example, if you have a sidebar for navigation, and want to add or remove a link from the sidebar, you can edit the corresponding library item, and then enable automatic update of all pages linked to that library block.

This is enormously time-saving!

When you insert a library element into your page, Dreamweaver creates "begin" and "end" comments that are inserted before and after, respectively, the library block of code. The code looks like this:

<!-- #BeginLibraryItem "/Library/yourlibraryblock.lbi" -->

<!-- #EndLibraryItem -->

The simplest way to put these library elements into your page is to drag and drop the element from the library into the page. You can do this in both design and code view. If you already have something that you want to replace with the library element, you can select the code to replace, and then drag and drop the library element at the top of the block. The library element will replace the selected code.

Templates

Templates are useful for defining a general layout of a page, with non-editable regions. Templates may also link to library elements, a particularly useful feature for sites with multiple templates sharing the same information.

When Dreamweaver inserts templates, it inserts the following into the code:

<!-- InstanceBegin template="/Templates/yourtemplate.dwt" codeOutsideHTMLIsLocked="false" -->

<!-- InstanceEnd -->

When Dreamweaver inserts editable regions, it inserts the following code:

<!-- InstanceBeginEditable name="EditableRegionName" -->

<!-- InstanceEndEditable -->

If you see the above comments, you know someone designed the site with Dreamweaver.

If you are using an external editor to edit a page created by Dreamweaver, and there is a possibility of it being edited again through Dreamweaver, take care not to change the template definition and editable region comments, or else, they will need to be manually added again!