DREAMWEAVER templates and libraries

Using the Sample Dreamweaver Templates and Libraries

Dreamweaver templates make it easy to create sites with a consistent design, as well as to update multiple web pages simultaneously. You can apply templates when you create a document or to an existing document. Libraries are collections of items such as images and movies that you want to reuse throughout your entire site. You can use library items with templates and documents to simplify your site maintenance. When you want to edit an item in your library, you can do it once, and tell Dreamweaver to update that item throughout your site.

In this article, you'll learn how you can create documents using the sample templates, as well as how to modify and reapply them to your web pages. You'll also learn how to add an item to your library and use it in your site.

This articles uses the K-5 sample templates to demonstrate the examples. However, the procedures can be applied to any template.

About Dreamweaver templates
Installing the sample templates
About editable and locked regions
Creating a document from a template
How to apply your new template to an existing web page
Editing a template and updating your documents
Detaching a document from its template
Creating a library item
Modifying a library item


About Dreamweaver templates
You can use Dreamweaver templates to create multiple documents that contain the same characteristics, and to update all documents based on the same template simultaneously. For example, suppose your site uses one basic design. You create one template to represent that layout. When you create pages based on the template, the content of each page is unique, but the layout is the same.

Dreamweaver templates are linked to the documents you create with them, unlike word processing templates. When you update a template, you can tell Dreamweaver to update all the documents based on that template with your changes. By using templates to create your web pages, you can quickly and easily update multiple pages at the same time.

For example, suppose you run a daily magazine on the web and you want to use the same layout (masthead at the top, address at the bottom, and so on) for every issue. You create several issues by generating hundreds of pages based on this one template. Later on, you decide the masthead isn't prominent enough, so you move it to the lefthand side. You can do this once in the template; when you save the template, you can choose to update all the documents that use this template simultaneously.


Installing the sample templates
You can easily use our sample templates to start building great new sites with Dreamweaver. Each group of sample templates is its own self-contained site. You can use these sample templates to either create a new site or use them with an existing site. Note that Dreamweaver only recognizes templates that are in the Templates folder, located in your local site folder.

To use the sample templates in a new site:

1 Download the files into a local folder.
2 Make sure the templates (files with the .DWT extension) are in a folder called Templates within the local folder.
3 In Dreamweaver, choose Site > New Site.
4 In Site Name, type the name of the new site. For example, if you've downloaded the K-5 templates, you could name the new site "K-5."
5 Choose the folder where the sample site is located and click OK.
6 Choose Window > Site Files to open the Site window and edit the site information, if necessary.
Here, you can view the files in your site, as well as open and close the folders to view the contents. To view a site map, choose Window > Site Map. For more information on creating a local site, see "Site Planning" in Dreamweaver Help.
To use the sample templates with an existing site:

1 Download the files into the folder containing the existing site.
2 Copy the templates (files with the .DWT extension) into a folder called Templates.
If you don't have a Templates folder within your site folder, create one, then copy the templates into the folder. If there are already templates in your Templates folder, be sure not to overwrite them.
3 Copy all of the other folders on the sample site to your local site, maintaining the same file structure. Depending on which site you choose, it may contain one or more folders called Images, Fireworks, or Library. These folders contain files that are used in the templates or sample pages.


About editable and locked regions
In a template, locked regions are elements of a page that remain constant (noneditable) from one page to another. Editable regions are the elements of a page that change, such as an article in a newsletter. To make a template useful, you should create editable regions or mark existing content as editable.

When you first open a template, the editable and locked regions are highlighted with different colors.
 


 
You can view your Highlighting preferences (choose Edit > Preferences, and click Highlighting) to determine which highlight colors represent the editable and locked regions.

You can also use the highlighting preferences to customize the highlight colors for the editable and locked regions of a template. You can use these colors to help remind yourself (and whomever else is using your templates) of the sections that cannot be edited in the document. Highlight colors only appear in the document window when the View > Invisible elements command is checked.

When you edit a template, the editable regions are highlighted in the template. Once you create a document from this template, however, the locked regions, not the editable regions, are highlighted in the document.

See also "Viewing editable and locked regions" and "Finding a document's editable regions" in Dreamweaver Help.


Creating a document from a template
Once you've set up your site and edited your templates, you can create documents based on the templates in your site. Documents are the web pages that are viewed on your site. Each document on your site will have different content, though some will share the common design elements based on the template you use. See also "Creating documents based on templates" in Dreamweaver Help.

To create a new document:

1 Choose File > New From Template.
2 Choose the site from the current sites pop-up menu (at the top of the Site window).
3 Choose a template from the Template list.
4 Click Select.
5 In the new document, click an editable region and type new text. In the following example, we created a new document from the K-5 layout1 template and typed "Springfield Elementary School Builds New Addition to Gymnasium."

6 Save the file.
Note that the locked regions (and not the editable regions) of your template are highlighted in your document.

How to apply your new template to an existing web page
If you've already created documents using a different template or no template at all, you can still apply your new template to the existing pages. For example, suppose you downloaded the sample templates into your new site. You can apply one of the templates to one of your documents, regardless of whether the document was created with a template.

To apply a template to a document:

1 In Dreamweaver, open a document.
2 In the Template palette (choose Window > Templates), select a template.
Note that when you select a template, a preview of the template displays in the Template palette.
3 Click Apply.
If there are objects in the document that do not fit into the design of the template, Dreamweaver asks you to designate the object to a new section.
Here, we've opened the document we created with the K-5 layout1 template (info.htm), and applied the layout template.
 


 

Editing a template and updating your documents
You can edit a template and update the documents that use the template. For example, suppose you want to change the font style of all the headings in your site and you have ten documents in your web site that use the same headings. You can update your template once, then tell Dreamweaver to update all of those documents.

To update your template:

1 In Dreamweaver, open the template.
2 Edit and save the template file. See the following procedures for instructions on modifying locked and editable regions.
The Update Template Files dialog box opens.
3 In the Update Templates Files dialog box, choose which pages to update and click Update. If you do not want to update any of the files, click Don't Update.
In the following template, we've changed the font style of "Heading" in column 1.
 


 
The K-5 templates already contain editable and locked regions, but you can create more editable regions if you want. You can also lock an editable region if you want a particular section to stay static after you've made your changes. You can determine if a region is editable by looking at the color highlighting.

To create an editable region:

1 In the Template palette, double-click the template you want to edit.
2 Select the area of the template you want to make editable.
3 Choose Modify > Templates > New Editable Region.
4 In the New Editable Region dialog box, type a new name for the region.
5 Click OK.
To lock an editable region:

1 In the template, choose Modify > Templates > Unmark Editable Region.
2 Select the name of the region you wish to lock.
3 Click OK.

Detaching a document from its template
Detach a document from a template if you want to isolate the document from any further changes to the template. For example, if you want to update ten out of eleven documents that use that template, you can detach the single document and update the other ten simultaneously.

To detach a template:

1 Open the document you wish to detach.
2 Choose Modify > Templates > Detach From, then select the name of the template.
You can also use a Dreamweaver template like you would a word processing template. Use a template once to format your document, then detach the document. If you detach the document, any changes you make to the template thereafter will not affect the document.

See also "Detaching a document from a template" in Dreamweaver Help.


Creating a library item
In addition to creating templates for your web site, you can also create and define a library. You can add objects like images, Flash Player movies, and forms to your library; then, you can reuse these items throughout your site. You can also edit a library item once, and update all the documents that use that item simultaneously.

We've included library items with the sample templates, so if you've set up a sample template, just choose Window > Library to preview the sample library items. For example, you can open the K-5 site and choose Window > Library. In the Library palette, you should see the address library item.

See also "Reusing page elements" in Dreamweaver Help.

To create a library item:

1 Create a new document (or open a template) in Dreamweaver and insert an object.
2 Select the object and choose Modify > Library > Add Object to Library.
The object file now displays in the library. All library items (files with the .LBI extension) are stored in the Library folder in your site. When you open the document (or template) again, you'll notice that the Library item is highlighted. You can change your Highlighting preferences by choosing Edit > Preferences, then clicking Highlighting.

Modifying a library item
After you've added an item to your library, you can always modify it for a template, specifically for the current document, or for all the documents that use the library item. The steps are pretty much the same, regardless of what you want to do.

To modify a library item:

1 Choose Window > Library (if the Library palette is not displayed).
2 In the Library palette, select a library item.
3 Change the item. In our example, we changed the address to "1234 Springfield Street..."
4 Save your changes.
5 In the dialog box that appears, choose whether or not to update the documents in your site.
If you do not update the documents now, you can do so later by choosing Modify > Library > Update Current Page or Update Pages.
Now, when you open the Library palette, you can see your changes. The following graphic shows our address change.

When you update a library item and choose to update the pages in your site, Dreamweaver distributes the changes to all instances of the item in documents and templates throughout your site.

To modify a library item specifically for the current document:

Select the library item in the document and click Make Editable in the Property Inspector.