Using Templates | Using Libraries | Exercises

Templates and libraries are two tools provided by Dreamweaver that allow to reuse material and help ensure consistency in your Website. You do not have to use these tools, but once you have mastered the basics discussed in the previous sections, you may find templates and libraries to be quite valuable. They are particularly helpful in creating large or complicated Websites.

Using Templates

Templates allow you to create a blueprint that you can use to define the formatting for multiple Web pages. Once you create a template for a site, if you need to change something, you can change the template and all the Web pages that use the template will be updated automatically. Templates also help you to maintain control if multiple people will be contributing to your Website.

Creating a template

To create a template,

1. Format an html page so that it looks the way you want the template to appear.

2. Choose File > Save As Template. In the dialog box, give the template a filename. The template is saved with a .dwt file extension.

3. Initially, the template is not editable. You need to create regions in the template that can be changed (called editable regions). To create an editable region, first select (highlight) the part of the template you want to make editable. Then choose Insert > Template Objects > Editable Region. The following dialog box appears:

If you wish, give the region a name (for example, text). Or you can accept the name assigned by default. Then click OK.  The editable region will be created, and will be indicated on your template as shown below:

When you create a Web page based on the template you can replace the editable regions (e.g., EditRegion1) with text, images, or any other Web content.

Other, non-editable parts of the page cannot be changed by users (unless you change the template). The gives you control over the format of any Web pages based on the template.

Modifying and applying templates

When you are working with templates, you can see a list of your templates by displaying the Assets panel (Window > Assets) and clicking the templates icon
() which appears on the left side of the Assets panel.

The Assets panel will show a list of the templates you have created for the current site. Above the list is a preview panel that shows you what the selected template looks like. For example, here is the Assets panel showing the templates being used for this online module:

To modify an existing template, open it in any of these ways:

• Choose Modify >Templates > "Open Attached Template" to modify the template attached to the Web page in which you are currently working
  
  
• Double click the template's filename icon in the Files or Assets panel
  
  
• Choose File > Open and choose Files of Type: Template Files (*.dwt) in the Open dialog box.)

Once you have opened the template, you can edit it in much the same way you edit an html file.

To apply a temple to the page in which you are currently working, click on the template name in the Assets panel and click Apply, or choose Modify > Templates > Apply Template to Page

To detach a Web page from a template, choose Modify > Templates > Detach from Template.

Using Libraries

In Dreamweaver, a library is created for each Web site. Initially the library is empty, but you can easily add items to it. When you place an item in the library you can insert it into your Web pages whenever you want without having to recreate the item. Later, you can modify the library item if you wish, and all instances of it will automatically be updated throughout the Website.

Displaying the Library

To use the library, open the Assets panel (choose Window > Assets). Then click on the Library icon in the Assets panel. Your library will be displayed.

The library lists all the items you have added to it. If you click on an item, a preview of the item appears above the list of items. In the above example, a library item called "top" is selected.

Adding items to the library

To add an item to the library, select something in your document. You can then add it to the library in either of these ways:

• Click on the new library item icon () at the bottom of the library panel.
  
• Drag the selected content to the library.

Dreamweaver gives you the opportunity to give the library item a name (it is called "untitled" until you name it).

Inserting library items into your document

Once you have placed an item in the library, you can insert it anywhere you want in the document by clicking on the item in the library and clicking the "Insert" button.

Editing library items

To edit a library item, click on the item name in the library, and then click the Edit button () at the bottom of the library panel. The library item will open in the document window, and you can modify it.  When you then save the modified library item, the following dialog box appears:

Click Update to change all the instances of this library item throughout your Website.

In some cases, you may wish to change an instance of the library item without changing the library item itself.  In this case, you need to detach the instance from the library. To do this, click on the item in your document, then click on Detach From Original in the properties panel.

Dreamweaver then warns you that this instance will no longer be associated with the library item:

Click OK if you want to go ahead and make this content independent of the library.

Deleting library items

To delete a library item, click on the item in the library and then click on the delete button ( ) at the bottom of the library panel.

Exercises

Note: For instructions on how to set up practice files for these exercises, go to the Exercise Instructions page.

Templates

1. Save Pselect.htm under another name. Make sure the title.gif is at the top of the page, but delete everything else. Then choose Save As Template to save it as a template. Define the title as locked but make everything also editable.

2. Create a new html file and attach it to the template you created.

3. Modify the template and see how it affects the attached file.

4. Detach the template from the file.

Libraries

1. Add the image DWhdr.gif to the top Pwelcome.htm.

2. Open the site library.

2. Add DWhdr.gif to the library. Give it a name.

3. Insert the library item you just created to the top of each of the pages in your practice site.

4. Preview your work in your browser. Trying clicking on the graphic.