Dreamweaver II | Templates and Libraries

Templates and Libraries

Machines are supposed to automate work processes, make life more convenient, and reduce human error. Software programs (the best ones) have the same goal: to free us from the drudgery of repetitive tasks.

Ready to be liberated? In Dreamweaver, templates and libraries are the workflow automation tools that bring big projects to a speedy conclusion.

Templates make it possible to create numerous pages based on a common design. Libraries allow you to reuse common page elements like nav bars and footers, rather than recreating them over and over again. Both are valuable tools to improve your workflow.

 

Here's an all-too-common Web design scenario. You spent weeks creating a gorgeous Web site for your new employer. Now, the work has become somewhat repetitious. Text here, graphics there. Sigh! When is lunch again?

Too bad you have all this grunt work to do—there's a new project you want to design. How can you hurry through your tasks as quickly as possible? By developing templates for similar page layouts. That way, all you have to do is insert the content and you're set. Plus, should you decide to make last-minute changes, you simply edit the template and Dreamweaver will update all related pages automatically.

Let's take a look at how you can speed things up by using Dreamweaver templates. You'll create a template-based site starting with the following scenario:

	Your friend Mark is a dive master in Costa Rica. He wants to publish a series of essays featuring dive sites in Central America. There could be more than 30 all together. No problem—you can use templates to publish any number of pages.

Download the "scuba" folder from the course downloads to get some hands-on experience using templates. Define a new site in Dreamweaver (Site > New Site) and select the "scuba" folder as the local root folder.

Planning Your Page Layout

We'll start by creating a basic layout for the essay pages. Open essay.html and take a look.

First, identify the global elements that will appear on every page—the top banner, the navigation bar with the link to HOME, and Mark's email address.

The global elements are highlighted in red—these elements will appear on every page of the site.

Then, identify the editable content that will change on each page—the essay title, content, photos, and captions.

The areas highlighted in pink will change on each page.

Creating a New Template

Now that we have the basic layout, we can convert it into a template. Go to File > Save As Template.

When the Save as Template dialog pops up, choose the "scuba" site from the Site dropdown to make sure the template is saved in the correct site.

Name this template "essay" (lowercase letters, no spaces). Dreamweaver will add the extension.

Entering a description of the template is optional, but it could be helpful if you are using several different templates.

When you click Save, Dreamweaver goes to work. A Templates directory is created inside your local root folder. The essays.html page is converted into template format and copied into the Templates directory. A dialog pops up asking you whether you want to update links. Click Yes.

After the dust has settled, you'll see a few changes in your workspace. The document toolbar is now titled <<Template>> essay.dwt. This indicates that the page is now in template format.

The <<Template > > title is one way to tell you are working with a template rather than a regular HTML page.

Notice the new Templates directory in your local root folder, listed in the Files panel. It contains the essay.dwt template file.

Dreamweaver keeps all template files in the Templates directory.

The original essay.html file remains in your scuba folder. Dreamweaver created a copy before converting to template format, keeping the original HTML page intact in case you need it later.

Creating Editable Regions

The first step is to identify the editable page areas, known in Dreamweaver as editable regions.

1. Select "Insert title here," then click the <h1> tag using the Tag selector in the lower-right corner of the document window (this ensures that you have selected the entire h1 tag). Go to Insert > Template Objects > Editable Region.

In the New Editable Region dialog, name the region "essay title" and click OK.

Give each editable region a clear name, so you know what goes where.

Your new editable region will be highlighted. The name appears in a tab on top. If you don't see the editable region tag, choose View > Visual Aids > Invisible Elements.

By default, the Editable Region tabs are teal. If you want to change the color, choose the Highlighting category in your Preferences panel.

2. Select both paragraphs of greek text and choose Insert > Template Objects > Editable Region. Name this region "essay".

3. The photo is next. Select the image placeholder, choose Insert > Template Objects > Editable Region, and name the region "photo".

4. One more region—the caption under the photo. Select the small line of text that reads "caption", then click the <p> tag in the Tag selector to make sure you've selected the entire paragraph. Choose Insert > Template Objects > Editable Region.

That's it. Go to File > Save to save your changes. If a warning message pops up about block tags, click OK.

The block tag message is confusing at first. Basically, it is telling you that the "essay title" editable region is inserted within a <h1> block tag. It looks like this in the code:

<h1><!-- TemplateBeginEditable name="EditRegion3" -->Insert title here<!-- TemplateEndEditable --></h1>

When you create an HTML page based on this template, you'll only be able to enter one line of text. It is not valid to enter another block tag (like another header or paragraph) inside this editable region.

To prevent this type of error message, be careful to select the entire <h1> tag before you add the editable region. The code should like this:

<!-- TemplateBeginEditable name="essay" --><h1>Insert title here</h1><!-- TemplateEndEditable -->

Here, the editable region tags are outside the h1 tags. This means you will be able to insert additional block tags within this area.

As long as you select the block element correctly before applying the editable region, you won't ever see the block tag alert. But if this problem does turn up, just switch to the Code view to manually reverse the tag order, so the block tag is inside the editable region.

 

Creating a Child Page

Now that the template is finished, we are ready to first our first template-based HTML page. Pages based on a template are called child files.

Open the Assets panel (Window > Assets) and click the Templates icon on the left. The essay template should be listed. Click the refresh icon if you don't see it there.

The Templates category of the Assets panel lists all the templates in a given site.

Control-click (right-click on a PC) the "essay" template and choose New from Template from the context menu.

Control-click (or right-click) the template file to open a menu of options. You can also use the little icons at the bottom of the Assets panel.

A new, untitled html file will open in the Document window. Go to File > Save As and save the page as galapagos.html.

Editing a Child Page

Your new galapagos.html page will look exactly like your template. The only difference is the file extension (it is an .html file rather than a .dwt).

If you try to click around the page, you'll get a "don't" symbol, a little circle with a cross. You won't be able to select anything outside the editable regions.

1. Insert your cursor into the "essay title" editable region, and type "Galapagos". If the h1 formatting disappears, select the text and choose "Heading 1" from the Format menu in the Property inspector.

2. Copy/paste Mark's essay into the essay region. Open the galapagos.txt file from the text directory. Select the entire essay and go to Edit > Copy. Then switch back to the galapagos.html file, click the "essay" tab, and Edit > Paste.

3. Replace the image placeholder with a real photo. You'll find galapagos1.jpg in the Images directory.

4. Open the captions.txt file and copy the caption for galapagos1.jpg. Then switch back to the galapagos.html file and paste into the "caption" editable region.

If you don't see the small text style, make sure the caption is inserted in a paragraph. Hit your Return key to add the paragraph formatting.

There you go—the Galapagos page is finished. For extra practice, create another child page based on the template. Open the Assets panel and select the Templates category. Control-click (right-click on a PC) the "essay" template and choose New from Template. Save the new page as belize.html.

Fill in the following info into each region:

	1. Essay title: Belize 2. Essay: Copy/paste the belize.txt file. 3. Photo: Insert belize1.jpg. 4. Caption: Copy/paste the belize1.jpg caption from the caption.txt file.

When you are finished, save and preview your Galapagos and Belize pages in a browser to see how they look. Pretty good, but the home link isn't working. Also, Mark called up asking if you could change his email address, and he wants to add a date above each essay. Back to the template to make these changes!

Editing a Template

Open the essay.dwt file. You'll find it in the Templates directory in the Files panel, or in the Templates category of the Assets panel.

1. Select "HOME" in the yellow nav bar and link to the index.html file in the scuba folder. The home page isn't based on a template because it has a slightly different page layout. That's OK—most Web sites will be a mix of template-based and non-template-based pages.

2. Change Mark's email address to markburton@divejournal.com.

3. Finally, we need to add another editable region for the date. Click below the essay title. If the "essay" tab is in the way, select the tab, press your left arrow key to position your cursor to the left, then hit the return key to allow yourself some space.

Type "insert date here". Apply the .date class style to format the date in bold italics (you'll find the .date style in the CSS Styles panel).

With "insert date here" selected (use the Tag selector to get the entire paragraph block tag), choose Insert > Template Objects > Editable Region. Name the region "date."

We're done, so save the template. Lots of activity happening behind the scenes—the Update Template files dialog pops up, asking if you want to update belize.html and galapagos.html (the two child pages based on the template). Click Update.

When you make a change to a template, Dreamweaver will ask to update all child pages.

Open the galapagos.html file and take a look. All the changes made to the template have been updated in this child page.

You'll see a new Editable region called "date" above the essay. Type in "Thursday, 18 August 2005".

Scroll down to the bottom of the page—Mark's email address has been changed. To test the home link, save and preview in a browser.

Next, open the belize.html page. Mark's email address and the home link have already been updated by Dreamweaver, you just need to fill in the date—"Tuesday, 01 November 2005". Save your changes and test in a browser.

This covers the basic process of creating and using templates:

	Design the basic page layout and save as a template. Define the editable regions. Using the Assets panel, create the child pages based on the template. Insert your text and images into the editable regions. If necessary, go back and edit your template. The changes will apply to the child pages automatically.

If you are feeling comfortable up to here, let's move on to explore further methods for working with templates.

Repeating Regions

Mark is happy with the layout of the essay pages, but he would like to have the option of adding more photos down the right column.

1. Open the essay.dwt file. Click the image placeholder, then use the tag selector in the lower left corner to select the nested div that holds the photo and caption.

Select the div that holds the photos and caption.

You will see a border around the div when it is selected.

2. Choose Insert > Template Objects > Repeating Region. In the dialog that pops up, name the region "photodiv" and click OK.

3. The repeating region will be labeled "Repeat: photodiv".

The Repeat: tab indicates that this region will repeat.

That's it—you're done. Save the template and update all pages.

You might hit a snag here. The Inconsistent Region Names dialog pops up, informing you that there are two "unresolved" regions, caption and photo. When we changed the photo table to a repeating region, Dreamweaver changed the "editable" template tags to "repeating." Our old "editable" caption/photo regions in the child pages don't match the new template.

Don't be frustrated by the Inconsistent Regions dialog—it is there to help you sort out any inconsistencies between the template and child pages.

This dialog can be unsettling at first, but Dreamweaver is only asking what to do with the stranded child page content. We could choose to move the content into another editable region, but nothing matches up. Select Nowhere and Use for all to remove the mismatched data from the child pages. No great loss, we'll insert it again later.

4. Open the galapagos.html file. We've lost the photo and caption we entered earlier, but it is quick enough to browse to insert galapagos1.jpg and the caption again.

You'll see the Repeating Region Controls above the photo table region. Click the + button to add another table region. Insert galapagos2.jpg to replace the image placeholder, then copy/paste the galapagos2 caption from the captions.txt file.

Click the + (plus) button to add a region, the - (minus) button to subtract a region, or the arrow buttons to move a region up or down.

This is so easy that you might feel inspired to add another photo table (click the + button again). Insert galapagos3.jpg and its respective caption.

Save your changes when you're done. If you want some more practice, insert the three belize photos and captions in the belize.html page.

Optional Regions

Another phone call from Mark. He wants to add a map to the Galapagos page. He doesn't have one for Belize yet. No problem, we'll make the map an optional region.

1. Open the essay.dwt file. Since the map is quite big, we'll put it at the bottom of the page, after the essay. Select the essay tab, press your right arrow key, then hit Return to move your cursor down below. Insert an image placeholder for the map (Insert > Image Objects > Image Placeholder). Set the width to "296" and the height to "240".

You can choose any color for your Image Placeholder to make it stand out against the page background.

2. With the image placeholder selected, go to Insert > Template Objects > Editable Optional Region. Name the optional region "map" and check Show by default.

3. The new optional region will be marked with an If map tab (indicating that the region is optional).

4. Save your template and update all pages.

Open galapagos.html and scroll down to the bottom of the page. You'll see the image placeholder after the essay. Replace the placeholder with galapagos_map.jpg. Save and preview in a browser.

Now open belize.html. We don't have a map for this page, so we will hide the optional region. Go to Modify > Template Properties.

Map is listed with a value of "true." Uncheck "show map" to get a value of "false." Click OK—the optional region will disappear from view.

The Template Properties dialog lists all optional regions.

Once you get the hang of templates, you will wonder how you ever worked without them. I know I do!

 

Using Library Items

Library items have a similar goal to templates, but a different approach. Rather than standardizing page layouts, library items are used for elements that repeat from page to page—for example, a navigation bar, a line of copyright info, or a business address.

Let's say your company headquarters has moved to a new office. You may have to change the address on every page of the Web site—that includes five template pages (you are using a different template for each department) as well as 15 other odd pages that weren't based on a template.

However, if you had the foresight to save the address as a library item, you only need to edit the library item—the changes will apply automatically to every occurrence.

Creating a Library Item

The Library is found in the Assets panel (Window > Assets) and denoted by a book icon in the left column of the panel.

To save an item to the library, select it in your document and click the New Library Item button.

Any element can be saved as a library item: a paragraph of text, a link, a table, a div, a Spry widget, or a list-based navigation menu. Just select the element, then click the New Library Item icon in the Assets panel.

When you create a library item, Dreamweaver creates a Library folder in your defined site. All library items within a site are stored in the Library folder, and all library items have the .lbi extension.

Like templates, library items should be kept in this Library folder, and you shouldn't add non-lbi files to this folder. Dreamweaver makes relative links to each library item in a page. To do so, it needs to know exactly where the original library item is stored.

Using Library Items

To insert a library item, select the item from the Library and click the Insert button.

After you insert a library item, you'll notice that you won't be able to edit it—the item is locked. Instances of a library item cannot be edited on a page-by-page basis. Instead, you can click the Edit icon in the Assets panel to open the original library item in the Document window.

Switch to the Library Items category in the Assets panel, select the library item, and click the Edit icon.

The library item might look rather plain—library items don't include CSS formatting. No problem, you can add the CSS formatting later on, after you insert it into the html file.

Remember that your library items won't include the CSS formatting that is applied to the pages in which they reside.

Edit the library item, and save. Dreamweaver will apply the changes site-wide, updating every instance of the library item.

Now that you've taken a look at how templates and library items can help you save time and raise the quality of your Web sites, let's go ahead and complete the project for this lesson.

Exercise Use templates to build an 11-page Web site for a Napa Valley winery. Discussion Share your thoughts and opinions with other students at the Discussions Board.