Templates - Dreamweaver CS5: The Missing Manual

Chapter 20. Templates

Some web designers handcraft their sites with loving care, changing layouts, colors,
fonts, banners, and navigation page by page. But that approach isn't always practical—or
desirable. Consistency is a good thing. Web pages that look and act similarly reassure
visitors; they can concentrate on each page's unique content when the navigation bar and
left sidebar stay the same. But even more important, a handcrafted approach to web design is
often unrealistic when you need to crank out content on a deadline.

This Missing Manual helps you quickly and painlessly master the latest version of this industry-standard web design and management program. Perfect for beginners who need step-by-step guidance and for longtime Dreamweaver masters who need a handy reference, the 7th edition of this bestselling Missing Manual offers jargon-free language and clear descriptions for designing, organizing, building, and deploying websites. It's the ultimate atlas for Dreamweaver CS5.

That's where templates come in. Frequently, the underlying design
of many website pages is identical (see Figure 20.1, “These three web pages are part of a section of a website dedicated to answering
frequently asked questions. The pages each provide the answer to a different
question, but are otherwise identical, sharing the same banner, navigation buttons,
sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's
greatest timesaving features—Templates—which help you quickly build similar-looking
pages, and make updating page designs a snap.”). An employee directory at a company
site, for instance, may consist of individual pages dedicated to each employee. Each page
has the same navigation bar, banner, footer, and layout. Only a few particulars change from
page to page, like the employee's name, photograph, and contact information. This is a
perfect case for templates. This chapter shows you how templates can make quick work of
building pages where most, if not all, the pages use repetitive elements.

Template Basics

Templates let you build pages that share a similar structure and graphic identity,
quickly and without having to worry about accidentally deleting or changing elements.
Templates come in very handy when you design a site where other, less Dreamweaver-savvy,
individuals will build the individual pages. By using a template, you, the godlike
Dreamweaver guru, can limit the areas that these underlings can modify in each
page.

Note

Adobe Contribute, a simple, word processor–like program for updating websites,
works very well with sites built using Dreamweaver templates. If you build sites that people who don't know the first thing
about Dreamweaver or building web pages will update, Contribute can help. Contribute
even lets novices update pages on their sites through their own web browser. You can
learn more about Contribute at Adobe's website: www.adobe.com/products/contribute.

A new page based on a template—also called a template instance,
or child page—looks just like the template, except that page authors
can edit only designated areas of the page, called, logically enough, editable
regions. In the example in Figure 20.1, “These three web pages are part of a section of a website dedicated to answering
frequently asked questions. The pages each provide the answer to a different
question, but are otherwise identical, sharing the same banner, navigation buttons,
sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's
greatest timesaving features—Templates—which help you quickly build similar-looking
pages, and make updating page designs a snap.”, you can see that the
question-and-answer text is an editable region; the rest of the page remains consistent
(and is, in fact, locked).

A Dreamweaver template can be very basic: you can create one where a page author can
change one or more areas of a page built from the template (the editable regions), but he
can't edit other areas (the locked regions). At the same time,
Dreamweaver lets you build templates that give page authors an impressive amount of
flexibility in the pages they build. Here's an overview of the features you can tap when
you create and use templates:

Editable regions. These are the basic building
blocks of a template. An editable region is that part of a page—a paragraph, the
contents of a <div> element, or a headline, for example—that page authors can
change as they build template-based pages. Templates can include multiple editable
regions—a sidebar and the main content section of a page, for example.

Editable tag attributes. There may be times when you want to make a particular tag
property editable. For example, say you have a banner ad at the
top of a page--the banner ad's just a basic image file, and each page should have a
different ad. You want to make sure that no one can delete the image (after all, those
ads are paying for your site), but you do want them to be able to swap in a new image
file. In other words, no one should mess with the <img> tag; they should only be
able to assign a new file by changing the <img> tag's src
attribute. To keep someone from deleting the image but still allow them to swap in a
new image, just make the src property editable. (You could also
make the image's alt property editable, and if the
Width and Height properties vary from
image to image, you can make those attributes editable as well)"

Or you might want a unique headline design for each section of your site. To get that, when
you build the site template, assign an ID to the <body> tag and make the ID name
editable. Then, when you create pages for each section of the site, you add an ID name
specific to that section. For example, for a site's "About Us" page, you could set the
body's ID to about. Once you do, you can use a descendent
selector (like #about h1) to create a custom style for all the
headlines on just that page. On template-based pages showcasing your company's
products, change the ID to products, and then add a descendent selector style #product
h1 to your style sheet and you'll have a unique look for all h1 tags on product
pages.

Figure 20.1. These three web pages are part of a section of a website dedicated to answering
frequently asked questions. The pages each provide the answer to a different
question, but are otherwise identical, sharing the same banner, navigation buttons,
sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's
greatest timesaving features—Templates—which help you quickly build similar-looking
pages, and make updating page designs a snap.

Repeating regions and repeating tables. Some web pages, like product catalogs and news sites that post article
headlines, include lists of items. For pages like these,
Dreamweaver lets you define repeatable regions in your template.
For example, your design for a page of product listings might include each product's
picture, name, and price, organized using a table with multiple rows (Chapter 7, Tables).

As the template builder, you may not know in advance how many products the page
will eventually list, so you can't fully design the page. However, you can use
Dreamweaver to define a row—or any selection of HTML—as a repeating region, so that
page authors can add new rows of product information as needed.

Optional regions and editable optional regions. Optional regions make templates even more flexible. They let you show or hide content—from a
single paragraph to an entire <div> full of tags—on a page-by-page basis.

Suppose you create a template that displays your company's products. Some products
go on sale while others remain full price, so you add an optional
region to the product descriptions that displays a big "On Sale!" logo.
When you create a new product page, you could show the optional
region for products that are on sale and keep it hidden for the
others.

Editable optional regions are similar, but have the added
benefit of being editable. Maybe you're creating a template for an employee directory, giving each employee his or
her own page with contact information. Some employees also want their picture
displayed on the page, while others don't (you know the type). Solution: Add an
editable optional region that would let you show the space for a photo and add a
different photo for each page. For the shyer types, you'd simply hide the photo area
entirely.

Dreamweaver can also create nested templates, which inherit
design elements from a master template. Using nested templates, you can create a unified design throughout a site, along
with unique (nested) templates for individual sections. You'll find this feature described
in detail on the section called “Nested Templates”.

Facilitating page creation is only one of the benefits of templates. You'll also find
that templates greatly simplify the process of updating a website's design. Like Library
items (Chapter 19, Snippets and Libraries), pages based on templates retain a
reference to the original template file. Dreamweaver passes any changes you make to that
template to all the pages created from it, which can save you hours of time and trouble
when it comes time to update the look or structure of your site. Imagine how much time
you'll save when your boss asks you to add "just one more" button to a site's navigation
bar. Instead of updating thousands of pages by hand, you need to update only a single
template file.

Note

Templates aren't just for building regular, static web pages. You can also create
templates for the dynamic, database-driven web pages discussed in Part Six, “Dynamic Dreamweaver” of this book.

Creating a Template

The first step in creating a template is to build a basic web page and tell
Dreamweaver that you'd like to use it as a template. You go about this in two ways: build
a web page and turn it into a template, or create a blank, empty template file and add
text, graphics, tables, and other content.

Turning a Web Page into a Template

The easiest way to create a template is to base it on a web page in your current
site folder. Although you can create templates based on web pages that aren't part of your
current local site, you may run into problems with links and paths to images, as
described in a moment.

Once you open the page, choose File→Save As Template or, on the Common category of
the Insert panel (see Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), click
the Templates button and then select Make Template from the menu. In the Save As Template window (Figure 20.3, “The Save As Template dialog box lets you save your template into any of the local
site folders you defined in Dreamweaver. Stick to your current local site to avoid
broken links and similar problems.”), the name of the current local
site appears in the Site pop-up menu; meanwhile, all templates for that site show up in
the Existing Templates field.

Figure 20.2. The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.

Note

At this point, you could theoretically use the Site menu to save a template into
any local site folder you've set up (see Chapter 16, Introducing Site Management
for a discussion of local sites), but be careful with this option. If your page
contains images, external style sheets, and links, and you save it as a template for
another local site, Dreamweaver doesn't copy the images or style sheets from the first
site folder into the other one. As a result, the paths to the image files and links
don't work correctly, and the page won't show any styling.

If you must use a page from one site as a template for another, copy the web page,
graphics and style sheets into the new site's root folder, open
the page from there, and then create a template as described here.

Figure 20.3. The Save As Template dialog box lets you save your template into any of the local
site folders you defined in Dreamweaver. Stick to your current local site to avoid
broken links and similar problems.

Dreamweaver includes a Description field where you can add a brief note characterizing the
template. This description appears when you select a template as the basis for new pages
you create. The description is useful when other people build a
site using your templates and aren't sure whether templateA1,
templateA2, or templateA3 is the correct choice; a
simple "Use this template for all FAQ pages" is much clearer.

Finally, in the "Save as" box, type a name for the new template, and then click
Save. Choose Yes when Dreamweaver asks if you want to update links for the page. If you
choose No, all page-relative links break, styles from external style sheets won't work,
and all the images on the page appear as broken-image icons.

Dreamweaver saves the page in the Templates folder of your local site root folder.
It adds the extension .dwt to the file to indicate that it's a Dreamweaver template.
(For dynamic web pages, Dreamweaver adds the .dwt before the file's
extension. For example, a PHP template may have a name like maintemplate.dwt.php.)

Note

Don't get carried away building too many templates for a site. It doesn't make any
sense to create 20 templates for a 20-page site. You should only need a handful of
templates to cover the different types of pages you have on a site. In fact, you might
just need a single template to dictate the look of all the pages on your site.

Building a Template from Scratch

It's easiest to create a web page first and then save it as a template, but you can
also build one from scratch. Open the Asset panel's Templates category by choosing Window→Assets and then click the Template
assets icon (see Figure 20.4, “The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.”). Then click
the New Template button at the bottom of the Assets panel. Once Dreamweaver adds a new,
untitled template to the list, give it a new name. Something descriptive like "Press
release" or "Employee page" helps you keep track of your templates.

After you create a blank template, open it by double-clicking its name in the Assets
panel (or selecting its name and then clicking the Edit button at the bottom of the
Assets panel). It opens just like any web page, so that you can get busy designing it
with the unchanging elements of your site—logo, navigation bar, and so on. You'll learn
how to add editable regions to your template in the next section.

Defining Editable Regions

Your next task is to specify which parts of your template you want locked and which
you want editable. By default, everything on a page is locked. After
all, the main reason to use a template is to maintain a consistent, unchanging design and
structure among pages. To make a template usable, you must define the area or areas page
authors can change.

Figure 20.4. The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.

Adding a Basic Editable Region

To add an editable region to a template, start by selecting the part of the page you
want to make changeable. You can designate as editable anything in the document window
(that is, any HTML between the <body> tags).

Note

You can always add Cascading Style Sheets, JavaScript code, and meta tag information to the <head> of a
template-based page. Any <head> content in the original template files stays put
in the page you create from it, however. For example, you can't remove an external
style sheet applied to a template from a page based on that template.

For templates you created from scratch, place your cursor at the point where you
want to insert an editable region. For templates you built from an existing page, drag
across your page to select the elements you wish to make editable, or, for greater
precision, use the Tag selector (see the section called “The Insert Panel”) to make sure
you select the exact HTML you want.

Now tell Dreamweaver that you want to make the selected elements editable. You can
use any of these techniques:

In the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), select Editable Region from
the Template menu.

Choose Insert→Template Objects→Editable Region.

Press Ctrl+Alt+V (⌘-Option-V).

Right-click (Control-click) the selection and then choose Templates→New Editable
Region from the shortcut menu.

When the New Editable Region dialog box appears, type a name for the region (you
can't use the same name twice) and then click OK. You return to your template, where the
name you gave the region appears in a small blue tab above the editable region,
outlined in blue (see Figure 20.5, “This page is based on a template called "tips", as you can tell from the little
tab in the document window's upper-right corner. You can modify this page's editable
regions, which Dreamweaver labels with small tabs. In this example, one editable
region is called "Title". Two additional editable regions (named "question" and
"answer") appear within a repeating region (labeled "repeatQuestions") that lets you
duplicate editable regions to create a list of questions and answers. Optional regions
don't have any clear identifier on a template-based page; you can identify them only
in the Template Properties window, as described on page 780. You can also edit the
title of any page created from a template. All other parts of the page are locked
(circled); you can make changes to these parts only in the original template
file.”).

Note

If you use tables to lay out your pages (see Chapter 7, Tables), you'll
often assign one table cell as the main area to hold the primary content of the page.
For example, in the pages shown in Figure 20.1, “These three web pages are part of a section of a website dedicated to answering
frequently asked questions. The pages each provide the answer to a different
question, but are otherwise identical, sharing the same banner, navigation buttons,
sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's
greatest timesaving features—Templates—which help you quickly build similar-looking
pages, and make updating page designs a snap.”, the Frequently Asked Question
and its answer appear in a single cell on the page. This cell makes a perfect editable
region for a template. In the Tag selector, just click the <td> tag associated
with that cell and use any of the techniques discussed here to convert the contents of
that cell into an editable region. (By the way, if you're still using tables for layout, please read Chaer 910—CSS layout is by far the
preferred method for controlling page design.)

If you use CSS, on the other hand, you can create a separate <div> tag (see
the section called “Float Layout Basics”) for the main content area. In this case,
select just the contents of the <div> tag, not the tag
itself. Here's one instance where you want to avoid the Tag
selector (the section called “The Insert Panel”), which selects the entire <div>
element, tags and all. If you turn the <div> tag into an editable region, it's
possible for someone modifying the page to delete the tag entirely, which could wreak
untold havoc on your CSS-based layout.

Fortunately, Dreamweaver has a handy shortcut for selecting just the contents of a
<div> tag. Click anywhere inside the <div> tag, and then press Ctrl+A
(⌘-A) or choose Edit→Select All. Then, turn this selection into an editable region,
and the <div> tags will remain outside the editable region,
so no one can inadvertently delete them.

The Broken-Link Blues

Why aren't the links in my templates working?

When you created the link in the template file, you probably typed a path into the
Property inspector's Link field—a recipe for heartbreak. Instead, always select the
target web page for a link by clicking the folder icon in the Property inspector, or
by pressing Ctrl+L (⌘-L). In other words, when you add links to a template, always
link to pages within the site by browsing to the desired file.

Dreamweaver saves templates in the Templates folder inside the local root folder;
all document-relative links need to be relative to this location. (Absolute links,
like those to other websites, aren't a problem; neither are root-relative links; see
the section called “Understanding Links” to learn the difference.) The reason you
should browse to, rather than type in, your links is so that Dreamweaver can create a
proper relative link.

Imagine this situation: You create a template for all the classified ads that
appear on your site. You store all the ads for April 2001 inside a series of folders
like this: classifieds→2001→april, as shown in the site diagram here.

A link from a page in the april folder to the home page would
follow the path marked 1 here. So when you create a link in your template, you can
create a link to the home page by typing the path ../../../index.html.

That choice is logical if you're thinking about the page (in the
april folder) you'll create from the template—but it won't
work. Dreamweaver stores templates in the Templates folder, so the correct path would
be path 2, or ../index.html. When you create a
new page based on the template and save it in the april folder,
Dreamweaver, in its wisdom, automatically rewrites all paths in the page so that the
links function correctly.

The beauty of Dreamweaver is that you don't have to understand how all this works.
Just remember to use document-relative links in your templates and create them by
clicking the folder icon in the Property inspector.

You may find that a single editable region is all you need—for example, when you put
text for a product review in just a single area of a page (a section of a page enclosed
by a <div> tag, for example). However, if you need to be able to edit
multiple areas of a page, just add more editable regions to the template. For instance, when you create a template
for an employee page, you can create editable regions for the employee's name, telephone
number, and photo. If you change your mind and want to lock a region, select the
editable region and then choose Modify→Templates→Remove Template Markup. Dreamweaver removes the code that makes the region
editable. You can do the same thing with other types of template regions, like repeating
and optional regions.

If you add an editable region inside certain block-level elements,
like a paragraph or a heading, Dreamweaver pops up a warning message when you save the template, explaining that you can't
create additional paragraphs or headings inside this region on any pages you build
from this template. This just means that you selected the
contents of a paragraph or heading (not the actual paragraph or
heading tag itself) when you made the region editable. Dreamweaver considers anything
outside of the editable region locked, so you can't change those tags. Since it's
improper HTML to have a paragraph, heading, or other block-level elements inside
another paragraph or heading, Dreamweaver won't let you add a
paragraph, a heading, a bulleted list, or any other block-level element inside the
editable contents of the locked paragraph or heading. This characteristic may not be
such a bad thing, however. Imagine you're creating a template to be used by other
people building a website. You have a Heading 1 with a style applied to it, and you
want to make sure it looks the same on every page.

You wouldn't want anyone changing the heading tag, and possibly erasing the style.
In addition, you don't want them to change the Heading 1 to a Heading 2 or a Heading
3; nor do you want them to completely erase the <h1> tag and type paragraph
after paragraph of their random thoughts. You just want them to type in new text for
the page title. Selecting just the text inside the heading (as opposed to the
<h1> tag and the text) and turning it into an editable
region does just that. Viva micro-management!

If this is in fact what you want to do, you can save yourself the bother of having
to constantly see the "You place an editable region inside a block tag" warning box
each time you save the template by simply turning on the "Don't show me this message
again" checkbox. However, if you made a mistake and do want to
allow people to change the heading, or add more headings and paragraphs in this
region, you need to do two things: First, unlock the editable region you created (see
below); then, select the text and tag (the Tag selector [the section called “The Insert Panel”] is the best way to make sure you select a tag), and
then turn that into an editable region.

Warning

You can rename an editable region by clicking the blue tab on the template page
and typing a new name into the Property inspector. However, if you've already built
pages based on this template, that's not a good idea. Because template-based pages
identify regions by their name, Dreamweaver can lose track of where content should go
when you rename a region. See Figure 20.18, “When you apply a template to an existing page, you must tell Dreamweaver what to
do with the material already on the page. You do that by selecting one of the
template's editable regions from a pop-up menu, which takes charge of all editable
regions in the page you're converting.” for a workaround.

Adding a Repeating Region

Some web pages have types of content that repeat over and over on a page. For
example, a catalog page may display row after row of the same product
information—product picture, name, price, and description. An index of Frequently Asked
Questions may list questions and the dates visitors posted them. Dreamweaver provides a
couple of ways to turn content like that into an editable region in a
template.

Figure 20.5. This page is based on a template called "tips", as you can tell from the little
tab in the document window's upper-right corner. You can modify this page's editable
regions, which Dreamweaver labels with small tabs. In this example, one editable
region is called "Title". Two additional editable regions (named "question" and
"answer") appear within a repeating region (labeled "repeatQuestions") that lets you
duplicate editable regions to create a list of questions and answers. Optional regions
don't have any clear identifier on a template-based page; you can identify them only
in the Template Properties window, as described on page 780. You can also edit the
title of any page created from a template. All other parts of the page are locked
(circled); you can make changes to these parts only in the original template
file.

You could, of course, make the entire area where the repeating content appears
editable. For example, you could use one of Dreamweaver's CSS layouts (see Chapter 9, Page Layout) to build a template for a FAQ page. The list of questions and
answers go inside the page's main <div> tag. You can turn this div into an
editable region. The downside to this approach is that you won't have any ability to
enforce (or easily update) the HTML used to lay out the questions and answers, since
another designer could edit or delete everything in the div.

Under the Hood of Templates

Dreamweaver saves templates as HTML files in the Templates folder inside your
current local site folder (see Chapter 16, Introducing Site Management for
information on local sites). Each template bears the file extension .dwt to
distinguish template pages from regular web pages.

Dreamweaver treats files in the Templates folder differently from normal web
pages, so don't save anything but .dwt files there. In addition, since Dreamweaver
expects to find the Templates folder in the local root folder of your site, don't move
it or change its name in any way (don't even change the capital "T" in Templates, even
if you're a low-key type of person). If you do, your templates won't work.

As with Library items, Dreamweaver uses HTML comment tags to indicate the name of
a template. If you inspect the HTML code of a template-based document, you'll see
that, immediately following the opening <html> tag, Dreamweaver inserts a
comment tag with the text "InstanceBegin" followed by the location and name of the
template. Additional comment tags indicate areas of the page that you can modify, plus
special template features like template parameters used for optional regions. For
instance, the title of a page based on a template is always editable; its comment tag might look like this:

The first comment indicates the editable region's beginning and also includes the
editable region's name. When you edit pages based on the template, you can change only
the HTML between these comment tags. Everything else on the page is locked, even when
you're working in Code view.

Fortunately, Dreamweaver provides a pair of template tools to address the problem:
repeating regions and repeating tables. Both
let you create areas of a page that include editable (and uneditable) regions that you
can repeat any number of times (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating
information. Left: In this template, you see a repeating region, labeled
"repeatQuestion" (circled).Right: A complete page based on this template
includes two repeated editable regions (circled). If another page requires more
question/answer pairs, you can easily add additional ones to each list by clicking
the + button at the top of the repeating region in the template-based page
(right). Even with the ability to dictate how many repeating regions appear on a
template-based page, the master template still controls the page's basic design.
That means page authors can't change the repeating region's underlying HTML—for
example, they can't change the "Q" to "Question or the "A" to "Answer" because
both these elements reside in the uneditable part of the template page. If you,
however, go into the master template and make these changes, Dreamweaver
automatically changes the same elements in all the pages the template
created.”).

You add a repeating region the same way you add an editable region. Select the area of
the template page where you want to repeat information, which usually contains at least
one element that you have made editable. It could be a single list item (the <li>
tag), a table row (<tr> tag), or even an entire <div> tag.

Tip

You can make a repeating region that doesn't include an
editable region. For example, a template for a movie review web page could include a
repeating region that's simply a graphic of a star. A page author adding a new movie review could repeat the star graphic to match the
movie's rating—four stars, for example. (There's just one caveat—see the tip on Tip.)

Next, tell Dreamweaver that the elements you selected represent a repeating region.
You can use any of these techniques:

On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), select the Repeating Region
option from the Templates menu.

Choose Insert→Template Objects→Repeating Region.

Right-click (Control-click) the selection and choose Templates→New Repeating
Region from the shortcut menu.

Hindered by Highlighting

I'm distracted by the tabs and background colors that Dreamweaver uses to
indicate Library items and Templates. How do I get rid of them?

When you use Templates or Library items, you see blue tabs and yellow backgrounds,
respectively, to indicate editable regions and Library items. Although these visual cues don't
appear in a web browser, they can make your page hard to read while you work in
Dreamweaver. Fortunately, you can alter the background color of these items and even
turn highlighting off altogether.

Choose Edit→Preferences, or press Ctrl+U (⌘-U). In the Preferences Category list,
click Highlighting. To change the background color of editable regions, locked
regions, and Library items, use the color box (see the section called “Phase 4: Adding Images and Text”) or type in a hexadecimal color value
(see the section called “Phase 4: Adding Images and Text”). To remove the highlighting,
turn off the Show box next to the appropriate item.

Often, it's useful to keep highlighting on to help you keep track of Library items
and editable regions. If you want to turn off highlighting temporarily, simply choose
View→Visual Aids→Invisible Elements, or use the keyboard shortcut Ctrl+Shift+I
(⌘-Shift-I) to toggle these visual cues off and on. This technique has the added
benefit of hiding table borders, layer borders, and image maps, as well as other
invisible elements.

When the New Repeating Region dialog box appears, type a name for the region and then
click OK. You return to your template, where the name you gave the region appears in a
small blue tab above it (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating
information. Left: In this template, you see a repeating region, labeled
"repeatQuestion" (circled).Right: A complete page based on this template
includes two repeated editable regions (circled). If another page requires more
question/answer pairs, you can easily add additional ones to each list by clicking
the + button at the top of the repeating region in the template-based page
(right). Even with the ability to dictate how many repeating regions appear on a
template-based page, the master template still controls the page's basic design.
That means page authors can't change the repeating region's underlying HTML—for
example, they can't change the "Q" to "Question or the "A" to "Answer" because
both these elements reside in the uneditable part of the template page. If you,
however, go into the master template and make these changes, Dreamweaver
automatically changes the same elements in all the pages the template
created.”). (See the section called “Building Pages Based on a Template” for a discussion of using
a repeating region when building a new template-based page.)

Warning

Dreamweaver lets you name a repeating region with a name already in use by an
editable region. But don't, ahem, repeat names—multiple template areas with the same
name make Dreamweaver act unpredictably.

Repeating Tables

Dreamweaver's repeating table tool is essentially a shortcut to
creating a table with repeating rows. If you had time on your hands, you could achieve
the same effect by adding a table to the page, selecting one or more rows, and applying a
repeating region to the selection.

To use the repeating table tool:

Click the in template page where you want to insert the
table.

You can't insert a repeating table into an editable, repeating, or optional
region, as explained in the section called “Making a Tag Attribute Editable” coming up
on page 764. You must be in an empty, locked area of the template.

Figure 20.6. A repeating region lets page authors add multiple instances of repeating
information. Left: In this template, you see a repeating region, labeled
"repeatQuestion" (circled).Right: A complete page based on this template
includes two repeated editable regions (circled). If another page requires more
question/answer pairs, you can easily add additional ones to each list by clicking
the + button at the top of the repeating region in the template-based page
(right). Even with the ability to dictate how many repeating regions appear on a
template-based page, the master template still controls the page's basic design.
That means page authors can't change the repeating region's underlying HTML—for
example, they can't change the "Q" to "Question or the "A" to "Answer" because
both these elements reside in the uneditable part of the template page. If you,
however, go into the master template and make these changes, Dreamweaver
automatically changes the same elements in all the pages the template
created.

On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), select the Repeating Table option from the Templates menu.

Alternatively, you can choose Insert→Template Objects→Repeating Table. Either
way, the Insert Repeating Table window appears (Figure 20.7, “The Insert Repeating Table dialog box lets you kill three birds with one
stone: it adds a table to a page, turns one or more rows into a repeating region,
and adds editable regions into each table cell inside the repeating
region.”).

Fill out the basic properties of the
table.

The top part of the window lets you set up the basic structure of the table:
rows, columns, cell padding, cell spacing, width, and border. Basically, it's the
same information you provide when you create any table, as described on the section called “Inserting a Table”. You usually start a repeating table with two
rows—one for a heading, another to contain the information you want to
repeat.

Figure 20.7. The Insert Repeating Table dialog box lets you kill three birds with one
stone: it adds a table to a page, turns one or more rows into a repeating region,
and adds editable regions into each table cell inside the repeating
region.

In the "Starting row" box, type the number of the row
where the repeating region should begin.

Often 'll have just one repeating row: one row of product information, for
example. You may want to use the top row for labels indicating the information
contained in the rows below. If that's the case, enter 2 at
this step, leaving the first row as an uneditable part of the template.

It's conceivable, however, that you may want each entry to take up
two rows. The first would list Product Name and Description;
the second would contain a cell for a photo and a cell for the price. You set up
this effect in this step and the next.

In the "Ending row" box, type the number of the last
repeating row.

If you wish to repeat only a single row, enter the same number you provided for
step 4. If you want to create a double repeating row, add 1 to the number you
provided in step 4. For example, if you need three rows for each repeating entry,
add 2 to the number from step 4.

Type a name for this repeating region.

Don't use the same name as another template region. You'll run the risk of
unpredictable results on template-based pages.

Click OK.

Dreamweaver inserts a table into the page. A blue tab with the name of the
repeating region appears (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating
information. Left: In this template, you see a repeating region, labeled
"repeatQuestion" (circled).Right: A complete page based on this template
includes two repeated editable regions (circled). If another page requires more
question/answer pairs, you can easily add additional ones to each list by clicking
the + button at the top of the repeating region in the template-based page
(right). Even with the ability to dictate how many repeating regions appear on a
template-based page, the master template still controls the page's basic design.
That means page authors can't change the repeating region's underlying HTML—for
example, they can't change the "Q" to "Question or the "A" to "Answer" because
both these elements reside in the uneditable part of the template page. If you,
however, go into the master template and make these changes, Dreamweaver
automatically changes the same elements in all the pages the template
created.”), as do blue tabs in each
cell of each repeated row. These tabs indicate new editable regions—one per cell.

Since these new editable regions have uninformative names like EditRegion4, you
may want to rename them. Click the blue tab and type a new name in the Property
inspector. (But do so before you create any pages based on the
template—see the warning on the section called “Adding a Repeating Region”.)

To remove a repeating region, select it by clicking the blue Repeat tab, and then
choose Modify→Templates→Remove Template Markup. A more accurate way to select a repeating
region is to click anywhere inside the region, and then click <mmtemplate: repeat>
in the Tag selector (see the section called “The Insert Panel”). Note that removing a
repeating region doesn't remove any editable regions you added inside the repeating
region. If you want to rename a repeating region, heed the Warning on the section called “Adding a Repeating Region”.

Making a Tag Attribute Editable

An editable region lets you—or, more likely, page-author jockeys—change areas of
HTML, like a paragraph, image, or an entire table, on new pages created from your
template. However, when you create a template for others to use, you may want to limit
the page authors' editing abilities. For example, you may want to allow budding web
designers to change the source of the image used in a banner ad without letting them
change the width, height, and class applied to the image. Or you might want to use
templates but still let others assign a class or ID to the <body> tag—a move
that's normally forbidden on template-based pages. You can use Dreamweaver's Editable Tag Attribute to specify which tag properties your successors can
change.

Note

Before you make a tag attribute editable, first set that property to a default
value in the template: for example, add an ID to the <body> tag if you want to
make the ID editable. Doing so inserts a default value and makes the attribute appear
in the Editable Tag Attribute window (see steps 3 and 7 in the following
instructions).

To make a tag attribute editable:

Select the tag whose property you want to make
editable.

Using the Tag selector (see the section called “The Insert Panel”) is the most
accurate way.

Choose Modify→Templates→Make Attribute
Editable.

The Editable Tag Attributes window opens (Figure 20.8, “Dreamweaver provides detailed control for template pages. To make just a
single property of a single tag editable on pages based on your template, turn on
the "Make attribute editable" checkbox. In this case, the "id" attribute of the
body tag is editable, allowing page designers the freedom to apply different CSS
styles to the body of each template-based page. They could change the ID name from
page to page, and use descendent selectors to target styles that apply only to
elements within pages that have that specific ID.”).

Editable Regions, Repeating Regions, and Errors

When I try to insert an editable region inside a repeating region, I
get the following error: "The selection is already in an editable,
repeating, or optional region." What's that about?

This error message essentially means you're trying to add a template region
where it doesn't belong. It appears most often when you attempt to put a repeating
or optional region inside an editable region. That kind of nesting is a no-no;
anything inside an editable region can be changed on template-based pages, and as
such, Dreamweaver can't touch it.

However, you may get this error message seemingly by mistake. For instance,
it's perfectly OK to add an editable region inside a repeating region, and it's
even OK to add a repeating region inside an optional region, and vice
versa.

But say one day you select text inside a repeating region and try to turn it
into an editable region, and boom—error message. What probably happened was, when
you selected the text, Dreamweaver actually selected part of the hidden code used
to define a template region (see the box Under the Hood of Templates" on the section called “Adding a Repeating Region”) and thought
you were trying to put an editable region inside it. To avoid confusion, use the
Tag selector to select the page element you want to turn into an editable region.
In the Tag selector, you can click <p> to select the paragraph inside the
repeating region. Alternatively, go into Code view (see the section called “Code View”), and then select whatever part of the code inside the repeating region you
wish to make editable.

Figure 20.8. Dreamweaver provides detailed control for template pages. To make just a
single property of a single tag editable on pages based on your template, turn on
the "Make attribute editable" checkbox. In this case, the "id" attribute of the
body tag is editable, allowing page designers the freedom to apply different CSS
styles to the body of each template-based page. They could change the ID name from
page to page, and use descendent selectors to target styles that apply only to
elements within pages that have that specific ID.

Select an attribute from the menu or add a new attribute
with the Add button.

The Attribute menu displays only those properties you already set for the
selected tag. In other words, if you select an image, you probably see the
Src, Width, and Height properties
listed. But unless you set the image's alternative text, the
alt property won't appear.

To add a property, click the Add button. In the window that appears, type in the
appropriate property name. For example, to make the alt
(alternate text) attribute of a graphic editable, you'd type alt in here. (If you're not
sure of the attribute's name, check out Dreamweaver's built-in HTML reference,
described in the section called “Reference Panel” on page 448.)

Note

If you want page editors to be able to change a CSS class or ID applied to the
<body> tag on template-based pages—to apply different fonts, background
colors, or any of the many CSS formatting options to each template-based page—you
have to make the Class or ID attribute editable. (See the section called “Types of Styles” for more on CSS classes and IDs.)

Make sure you turn on the "Make attribute editable"
checkbox.

If you decide at some point that you no longer want people to be able to edit
this property, you can return to this dialog box and turn off editing, as described
in a moment.

Type a name in the Label field.

What you type here should be a simple description of the editable tag and property, which helps page authors correctly identify
editable properties. For example, you could use Product Image
if you're making a particular image's source
(src) property editable.

Choose a value type from the menu.

Your choices are:

Text. Use this option when a property's value
is a word. For example, you can change the image tag's
Align property to top, middle,
baseline, and so on. Or, when using Cascading Style Sheets, you
could make a tag's Class property editable to allow page
authors to apply a particular custom style to the tag—content,
footer, and so URL. Use this option to let page authors edit the
path to a file, like an image's src property or a link's
href property. Using its site management tools,
Dreamweaver keeps track of these paths and updates them when you move pages
around your site.

Color. If the property requires a web color,
like a background color, select this option. It makes Dreamweaver's color box
available to people who build pages from the template.

True/False. You shouldn't use this option.
It's intended for Dreamweaver's Optional Regions feature (discussed below), and
it doesn't apply to HTML properties.

Number. Use this choice for properties that
require a numeric value, like an image's Height and
Width properties.

Type a default value into the Default
field.

This step is optional. The default value defines the initial value for this
property, when people first create a page based on the template. They can then
modify this value for that particular page. If you already set this property in the
template, its value automatically appears in this box.

Click OK to close the window.

Dreamweaver adds code to the template page that allows page authors control of
the attribute. To set this attribute on pages created from the template, see the
instructions on the section called “Changing Properties of Editable Tag Attributes”.

If you later decide that you don't want a particular tag
property to be editable, Dreamweaver can help. Open the template file, select the tag with
the editable attribute, and choose Modify→Templates→Make Attribute Editable. In the window that appears, turn off the
"Make attribute editable" checkbox (Figure 20.8, “Dreamweaver provides detailed control for template pages. To make just a
single property of a single tag editable on pages based on your template, turn on
the "Make attribute editable" checkbox. In this case, the "id" attribute of the
body tag is editable, allowing page designers the freedom to apply different CSS
styles to the body of each template-based page. They could change the ID name from
page to page, and use descendent selectors to target styles that apply only to
elements within pages that have that specific ID.”). Unfortunately, doing so doesn't
remove all of the template code Dreamweaver added. Even after you
turn off editing for an attribute, Dreamweaver leaves behind the parameter used to
control the tag's property. To eliminate this extra code, see the
box on Understanding Template Parameters.

Adding Optional Regions

Templates provide consistent design. While consistency is generally a good thing, it
can also get boring. Furthermore, there may be times when you want the flexibility to
include information on some template-based pages but not on others.

Dreamweaver provides a fairly foolproof way to vary page design: optional
regions. An optional region is simply part of a template you can hide or
display on each template-based page (see Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a
page-by-page basis. In these examples, the template page (top) has an optional region
containing a "Chia Kitten" icon (circled). When you create a page from this template,
you can either display the optional region (middle) or hide it (bottom).”). When a page author creates a new
page based on the template, she can turn the region on or off.

Creating an optional region is a snap. Just select the HTML code you wish to make
optional and do one of the following:

On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), select the Optional Region
option from the Templates menu.

Choose Insert→Template Objects→Optional Region.

Right-click (Control-click) the selection and choose Templates→New Optional Region
from the shortcut menu.

In the New Optional Region window, type a name (Figure 20.10, “The Optional Regions feature lets you show or hide specific content on
template-based pages. Turning on "Show by default" tells Dreamweaver to display the
region when a page editor first creates a template-based page. Turn this box on if you
want to display the optional region on most pages. You'll save someone the effort of
doing so each time she creates a new template-based page.”). Make sure not to use the same
name as any other region on the page, and—although Dreamweaver lets you—don't use spaces
or other punctuation marks. (Following the rules for naming files as described on the section called “The Structure of a Website” ensures that the optional region works properly.)
Click OK to close the window and create the new optional region. Dreamweaver adds a light
blue tab with the word "If," followed by the name you gave the region (Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a
page-by-page basis. In these examples, the template page (top) has an optional region
containing a "Chia Kitten" icon (circled). When you create a page from this template,
you can either display the optional region (middle) or hide it (bottom).”).

Figure 20.9. Now you see it, now you don't. Optional regions let you show or hide content on a
page-by-page basis. In these examples, the template page (top) has an optional region
containing a "Chia Kitten" icon (circled). When you create a page from this template,
you can either display the optional region (middle) or hide it (bottom).

Locking Optional Regions

An optional region can include editable regions, repeating regions, and locked regions. For example, if
you want to allow a page editor to turn on or off a graphic ("This item on sale!!!!"),
insert the graphic outside an editable region on the page, and then make it an optional
region as described above. Since anything not inside an editable region is locked, a
page editor can't change the graphic or ruin its formatting—he can only make it visible
or hidden.

Repeating Optional Regions

An optional region can also include repeating regions. For example, suppose you
create a repeating region (see the section called “Locking Optional Regions”) that lets a
page editor add row after row of links to a list of related articles. You could then
turn this repeating region into an optional region, as described above, so that if a
particular page had no related articles, the page editor could simply hide the entire
"related articles" section of the page.

Figure 20.10. The Optional Regions feature lets you show or hide specific content on
template-based pages. Turning on "Show by default" tells Dreamweaver to display the
region when a page editor first creates a template-based page. Turn this box on if you
want to display the optional region on most pages. You'll save someone the effort of
doing so each time she creates a new template-based page.

Optional Editable Regions

Dreamweaver's Optional Editable Region command inserts an optional region with an editable
region inside of it. To use it, click on the spot in the template
where you'd like to add it, and then choose Insert→Template Objects→Optional Editable
Region (alternatively, you can choose this option from the Templates menu on the Common category of the Insert panel). The New Optional
Region window appears; give it a name, and then follow the same steps for adding an optional region (see the section called “Adding Optional Regions”).

This technique doesn't offer a lot of control; it's hard to insert HTML
outside the editable region, for example. So if you want an image
or table that's optional but not editable, it's usually better to
just create the editable region as described on the section called “Building a Template from Scratch”and turn it (and any other HTML you wish
to include) into an optional region.

Note

The Optional Editable Region command doesn't let you name the editable region; it
automatically assigns a generic name like EditRegion7. You can
select the editable region and change its name in the Property inspector, but do so
before you build any pages based on this template (see the
Warning on the section called “Adding a Repeating Region”).

Advanced Optional Regions

A basic optional region is a rather simple affair: It either appears or it doesn't.
But Dreamweaver offers more complex logic for controlling optional regions. For example,
you may want several different areas of a page to be either hidden or visible at the
same time—perhaps an "On Sale Now!" icon at the top of a page and a
"Call 1-800-SHIZZLE to order" message at the bottom of the page. When one appears, so
does the other.

Because these objects are in different areas of the page, you have to create two
separate optional regions. Fortunately, using Dreamweaver's advanced settings for optional regions, you can easily have a single region
control the display of one or more additional areas of a page. Here's how:

Create the first optional region using the steps
in
the section called “Adding Optional Regions” on page 767.

Give the region a name using the Basic tab of the New Optional Region window (Figure 20.10, “The Optional Regions feature lets you show or hide specific content on
template-based pages. Turning on "Show by default" tells Dreamweaver to display the
region when a page editor first creates a template-based page. Turn this box on if you
want to display the optional region on most pages. You'll save someone the effort of
doing so each time she creates a new template-based page.”).

Select the part of the page—an image, paragraph, or
table—you want to turn into a second optional region.

In this case, you make the display of this region dependent on the optional
region added in step 1. If the first region is visible on the page, this second
region also shows.

On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), choose the Optional
Region item from the Templates menu.

The New Optional Region window appears.

Click the Advanced tab.

The optional region's advanced options appear (see Figure 20.11, “The New Optional Region box lets you more precisely control the display of an
optional region. You can make the region appear only when another region is
visible, or use Dreamweaver's template expression language to create a more
complex behavior. In this case, the selected region appears only when another
region—named "kittyHead"—is not visible (the ! is the programming equivalent of
"is not").”). In this case, you want the
first optional region you created to control the display of this new region. So
instead of giving this region a name, you simply select the name of the first
optional region in the next step.

Figure 20.11. The New Optional Region box lets you more precisely control the display of an
optional region. You can make the region appear only when another region is
visible, or use Dreamweaver's template expression language to create a more
complex behavior. In this case, the selected region appears only when another
region—named "kittyHead"—is not visible (the ! is the programming equivalent of
"is not").

Click the "Use parameter" button and select the name of
the first optional region from the menu.

This step is what makes the first optional region control this region. If a page
displays the first region, it also displays this second region.

Click OK to close the window and create the new optional
region.

You can continue adding optional regions this way, using the Advanced tab and selecting the name of the first optional region from
the menu. As a result, the first optional region controls the display of many other
areas of the page.

Even fancier tricks

You can use these advanced controls for even more elaborate web page stunts. For
example, say your site has several sections. When a visitor is in one section of the
site, its navigation button is attractively highlighted and a secondary navigation bar
miraculously appears, offering links to other pages in that section.

Using a template, you can add an optional region with the highlighted section
button in it. When you add the secondary navigation bar to the page, you make
it an optional region controlled by the highlighted navigation
button. Then, when you add a page to that section of the site, you simply show the
optional region containing the highlighted button, causing the secondary navigation
bar to appear as well (see Figure 20.12, “An optional region on the page at left highlights the top navigation button
(Electricity Makes It Happen). By turning on a different optional region (right),
the navigation system can highlight the site's current section—"What is
Electricity?" (the third button from the top).”
for a look at how this works).

Figure 20.12. An optional region on the page at left highlights the top navigation button
(Electricity Makes It Happen). By turning on a different optional region (right),
the navigation system can highlight the site's current section—"What is
Electricity?" (the third button from the top).

Controlling regions with expressions

You can program even more complex behaviors using a basic expression
language, loosely based on JavaScript, that Dreamweaver understands. For
example, instead of having an optional region appear when another optional region is
visible (as in the previous example), suppose you want to have a region appear when
another region is invisible. This arrangement can come in handy
when you create a navigation bar unique to only one part of your site. For example, if
a visitor is in one section of your site, she sees a highlighted, "you are here"
navigation button for that section, but if she's in another section, the regular,
non-highlighted button appears.

In other words, you can build a single template for all the sections of a site,
but control the appearance of the navigation bar separately for pages in each
individual section (see Figure 20.12, “An optional region on the page at left highlights the top navigation button
(Electricity Makes It Happen). By turning on a different optional region (right),
the navigation system can highlight the site's current section—"What is
Electricity?" (the third button from the top).”).

Here's how you control the navigation bar:

Click the page where you wish to insert the navigation
buttons.

Insert the highlighted ("You are in this section")
navigation button.

This button could be a rollover image (see the section called “Editing a Hotspot's Properties”) or just a single graphic. If you have
multiple pages in the section, you probably also want to link this graphic to the
main page for that section.

Click next to the highlighted button and insert the
plain ("You can go here") navigation button.

The button could also be a rollover image with a link to the main page for
this section (for example, a main Products page).

In the Property inspector, select the highlighted
navigation button and its link (if it has one).

This button appears on any template-based page for this section.

On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), choose Optional Region
from the Template menu.

The New Optional Region window appears. Make sure you have the Basic tab
selected.

Type the name of the section into the Name field. Click
OK.

For example, if this section of your site advertises your company's products,
you can call it products. Don't use any spaces or punctuation
other than hyphens (–) or underscores (_) for the name. Also, make sure the "Show
by default" box is turned off. Since you'll be building
template-based pages for all the sections of your site, most pages you build will
be in other sections of the site. Your work goes faster if this highlighted button
starts out hidden. In the next steps, you make the plain navigation button appear
by default.

Use the Property inspector to select the plain button
and link, and then click the Optional Region button on the Insert
bar.

The New Optional Region window appears again, but this time you'll use the
advanced options.

Click the Advanced tab; select "Enter expression" (Figure 20.11, “The New Optional Region box lets you more precisely control the display of an
optional region. You can make the region appear only when another region is
visible, or use Dreamweaver's template expression language to create a more
complex behavior. In this case, the selected region appears only when another
region—named "kittyHead"—is not visible (the ! is the programming equivalent of
"is not").”).

You're going to type an expression in the Expression
field. An expression is a programming statement that's either true or false. (For
an obvious example, it's true that 2 is always equal to 2, but it's obviously
false to say, "2 is equal to 4." In programming, you express equality using a
pair of = signs. So 2==2 is true, but 2==4 is false.) The
important thing to remember here is that when an expression is true, the optional
region is visible; when it's false, it's hidden.

Type an exclamation point (!) followed by the name you
entered in step 6—!products, for example.

Dreamweaver's template expression language is based on the JavaScript
programming language. An exclamation mark means "not," so this code means
not products. Translation into non-propeller-head language:
when the products region (remember, that's the highlighted
button) is not displayed, this region (the button) appears on
the page.

The logic gets a little complicated, but have faith. When you add a new page
based on this template, the optional region you added in step 6 is
not visible (because you turned off the "Show by default"
box). In other words, because the region—products in this
example—is not showing, this region, the one with the plain
navigation button, appears on the page by default. Turning the
products region on hides the plain
navigation button. In other words, the first optional region works like a light
switch, alternately turning on one or the other navigation button.

Click OK to close the window and add the additional
optional regions.

Repeat this process for each button in the navigation bar. Now your template
is perfectly suited for displaying customized navigation bars for each section of
your site. When you create a new template-based page, simply turn on the region
for the particular section in which the page is located. (Hiding and showing
optional regions is described on the section called “Hiding and Showing Optional Regions”.)

As you can see, optional regions are very powerful—and potentially confusing. But
using even basic optional regions, you can exert a great deal of control over your
template-based pages. For more information on template expressions and optional
regions, take a look in Dreamweaver's Help sysem. (Choose Help→Dreamweaver Help to
open the Adobe Help system; then, in the search box, type template
expressions, open the Search Options section, choose Local Help from the
Search Location, and then hit Enter (Return). You'll then get a page that lists
several articles related to templates and template expressions.

Editing and Removing Optional Regions

After you insert an optional region, you can always return to the New Optional Region dialog box to change the region's name, alter its
default settings, or use advanced options. To edit an optional region, first select it using one of
these techniques:

Click the region's blue tab in the document window (Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a
page-by-page basis. In these examples, the template page (top) has an optional region
containing a "Chia Kitten" icon (circled). When you create a page from this template,
you can either display the optional region (middle) or hide it (bottom).”).

Click anywhere inside the optional region in the document window and then click
the <mmtemplate:if> tag in the Tag selector (see the section called “The Insert Panel” for details on the Tag selector).

When you select an optional region, Dreamweaver displays an Edit button in the
Property inspector. Click it to reopen the New Optional Region window. You can then
change the region's properties.

To remove an optional region, select it by using one of the techniques listed
previously and choose Modify→Templates→ Remove Template Markup. Dreamweaver removes most of the code associated with
the optional region (but see the box below).

Understanding Template Parameters

When you insert an optional region, Dreamweaver adds special code to the head of
the web page. Called a template parameter, this code is
responsible for showing or hiding an optional region.

In fact, Dreamweaver uses parameters when you make a tag attribute editable, too. A typical
parameter for an optional region might look like this:

<!-- TemplateParam name="SaleBug"
type="boolean" value="true" -->

The <!-- and --> are HTML comments that hide this code from web browsers.
TemplateParam tells Dreamweaver that the comment is actually part of the program's
Template features—specifically, a template parameter.

A parameter has three parts: name, type, and value. The name is the name you give
the editable region. The type—Boolean above—indicates that the value of this parameter
can be only one of two options: true or false. In this example, the value is "true,"
which simply means that the optional region called SaleBug is visible. (Don't worry;
you don't have to actually edit this code by hand to turn optional regions on and off,
as you'll see on the section called “Hiding and Showing Optional Regions”.)

In programming jargon, a template parameter is known as a
variable. In simpler terms, it's just a way to store
information that can change. Dreamweaver reacts differently depending on the
parameter's value: show the region if the parameter's true, or hide it if the
parameter's false.

Editable tag attributes also use parameters to store the values you enter for tag
attributes. For example:

<!-- TemplateParam name="PageColor"
type="color" value="#FFFFFF" -->

On template-based pages, you can change the value of an editable tag's parameter
using the Modify→Template Parameters menu (see the section called “Changing Properties of Editable Tag Attributes”).

Unfortunately, when you delete an optional region from a template, or remove the
ability to edit a tag attribute, Dreamweaver always leaves these parameter tags
hanging around in the head of the template document. Keeping in mind that Dreamweaver
adds these parameter tags directly before the closing </head> tag, you can find
and remove them in Code view (see Chapter 11, Under the Hood: HTML).

Nested Templates

Large sites may have many different sections or types of pages. Each section or type
of page may have its own unique look. A Frequently Asked Questions page may have distinct
areas for a question, an answer, and links to further resources, while a product page may
have a picture, a product description, and ordering information. You could create
different templates for each type of page, but even that may be more work than
necessary.

Note

Nested templates are a somewhat advanced and potentially confusing concept.
Many people happily use Dreamweaver templates without ever using the nested template
feature.

While many pages in a site may have subtle differences, they usually share very basic
design features. The overall structure of every page, for example, may be the same: same
logo, banner, and navigation bar. Even the basic layout may be the same (sidebar on the
left, main content in the middle, for example). And therein lies the problem with creating
individual templates for each section of a website: if you need to make a very basic
sitewide change, like adding a new button to the navigation bar or altering a sitewide
banner, you need to edit each template individually, adding extra
time, effort, and the chance of making a mistake.

Good news—Dreamweaver offers a tool to solve just this problem: nested templates. A nested template is one you make from
an existing template, which then becomes the master template (see
Figure 20.13, “Nested templates (middle row) let you build templates that share common, sitewide
design elements while giving you precise control over pages unique to each section of
the site. A page built from a nested template (bottom row) contains both elements from
your master template (top row)—like a banner and a sitewide navigation bar—in addition
to elements specific to the nested template—like a section-specific secondary navigation
bar. Dreamweaver passes changes you make to the master template on to all of the site's
pages, including those created from the nested templates. Changes you make to a nested
template, by contrast, end up on only the pages you build with that nested
template.”).

Imagine a basic software company website with three sections: Support, Our Products,
and Downloads. Each section has its own kind of information and specific layout needs.
However, all three sections share the same banner and navigation bar.

To create a template for this site, you first create a very basic template that
includes the site's common elements (including any editable regions)—this is your master
template. You can then create nested templates based on this master template. In the
nested templates, you can add design refinements and additional editable regions unique to
each of the site's sections.

Figure 20.13. Nested templates (middle row) let you build templates that share common, sitewide
design elements while giving you precise control over pages unique to each section of
the site. A page built from a nested template (bottom row) contains both elements from
your master template (top row)—like a banner and a sitewide navigation bar—in addition
to elements specific to the nested template—like a section-specific secondary navigation
bar. Dreamweaver passes changes you make to the master template on to all of the site's
pages, including those created from the nested templates. Changes you make to a nested
template, by contrast, end up on only the pages you build with that nested
template.

To create a nested template:

Build a template as described on the section called “Creating a Template”.

This page acts as your master template and it controls all your nested templates. It should include the elements you want on all of your
pages, like your logo and email links. It should also include editable regions that
you want to customize for each section of your site, like div tags that hold blocks of
text and images. That way, when you create a nested template from this master, you (or
a page author) have the flexibility to put unique content in these areas of your
pages,

Name and save this template (File→Save as Template), and
then close it.

Your template is safe on our hard drive.

Choose File→New.

The window for creating new documents and template-based pages opens (see Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal
the list of templates it uses. However, if you choose a template stored in a
different site, Dreamweaver doesn't copy any of that template's images to your
current site, nor does it translate relative links correctly. The result is broken
links aplenty.”).

On the left side of the New Document window, click the Page
from Template button. In the Site list, select the site on which you're
working.

You can open templates from any site you've defined in Dreamweaver, but this is
generally not a good idea, as Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal
the list of templates it uses. However, if you choose a template stored in a
different site, Dreamweaver doesn't copy any of that template's images to your
current site, nor does it translate relative links correctly. The result is broken
links aplenty.” explains.

Figure 20.14. You can use the "Site" list to choose another site you've defined and reveal
the list of templates it uses. However, if you choose a template stored in a
different site, Dreamweaver doesn't copy any of that template's images to your
current site, nor does it translate relative links correctly. The result is broken
links aplenty.

From the list of templates, select the name of the master
template file you created in step 1.

Make sure you have the "Update page when template changes" box turned on.
Otherwise, your nested templates won't update when you edit the master
template.

Click OK.

Dreamweaver creates a new template-based page. At this point, it's simply a basic
web page based on your original template. Next, you'll turn this into a
nested template.

Choose File→"Save as Template." Or, on the Common category
of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”),
select Make Nested Template from the Templates menu.

The Save As Template window appears (see Figure 20.3, “The Save As Template dialog box lets you save your template into any of the local
site folders you defined in Dreamweaver. Stick to your current local site to avoid
broken links and similar problems.”).

Type in a name for the template and click the Save
button.

Voilà! A nested template. What? It doesn't look like a nested template? In truth,
it isn't. Right now, there's no difference between it and your master template. They
share the same design, content, and template regions. You'll turn it into a nested
template by following the steps below.

Customizing Nested Templates

After you create a nested template file, the next step is to add the design elements
that make the template unique (and a true nested template). For example, you can add a
special type of table to display a set of product photos, descriptions, prices, and
other information. This table will appear only in pages you build with this nested
template, not those you build with the master template or any other nested
template.

There are a few things you should keep in mind when planning your template
development strategy:

When you create pages from templates, you can add content only to editable
regions. That's true not only for template-based pages, but for nested templates,
too. If the master template has no editable regions, you won't
be able to change anything on the nested template you create
from it.

When you work on a nested template, you can insert an editable region only into
an editable region supplied by the master template. For example, say you create a
master template to provide a consistent banner and navigation bar on the site, all
in a locked region of the master template. Then you add a large empty area at the
bottom of the page and turn it into an editable region. After you create a nested
template from the master, you can add new, additional editable regions to this open
area. In fact, you can add any template region—editable, optional, or repeating—to
this area.

If, when you work on a nested template, you insert a template region (editable,
optional, or repeating) into an editable region supplied by the master template, you
can modify only these newly added regions in the pages you
create based on that nested template. The rest of the editable region supplied by
the master template isn't editable on the pages based on the nested template.

Using the example in the previous paragraph, if you add a repeating table to
your nested template (see the section called “Repeating Tables” for more about
repeating tables), you can change only the editable areas of
that repeating table on any pages you create based on the nested template. Of course, the other side of the coin is that if you
add an editable region to the master template and then refrain from adding any
particular template regions when you create the nested template, all the HTML inside
that region is editable in the nested template and in all the
pages based on that template.

Using Nested Templates

Here's an example of how you can use nested templates. Suppose you want to create a uniform design for your site where
every page of the site has a logo as well as a sitewide navigation bar. Each page within
one section of the site also has a sidebar containing a secondary
navigation bar with navigation buttons for just that section. Finally, every page has a
large content area to hold the information specific to that page.

Using nested templates, creating a website like this couldn't be easier
(really!). Create a master template that includes the site banner and the navigation
bar, and then add editable regions for a sidebar and a main content area.

Next, create a nested template for one section of the site,
leaving the content area as it is—as an editable area. Since each page will have unique
content in this area, you don't need to do anything to this region (like define optional
or repeating regions).

Then add the secondary navigation bar to the nested template's sidebar area. To lock
this region so no one can tinker with it (in pages built from the nested template), add
an empty editable region, or see the Tip on the next page.

If you want, you can build similar nested templates for the other sections of the
site.

Now you're ready to start building the pages of your site. Create a new page based
on one of the section templates. Add text or graphics to the editable content area of
the page. Should you need to change the site logo or add a button to the sie-wide
navigation bar, open the master template, make the changes, save the file, and let
Dreamweaver update all the pages of your site with the new look. If you simply need to
change the secondary navigation for one section of the site, open the appropriate nested
template, change the sidebar, save the template, and let Dreamweaver update all the
pages built using that nested template.

Tip

You can lock an editable region passed from a master template to a nested template
so that page builders can't change this region in pages based on the nested template.
In the nested template, go into Code view, and then locate the beginning of the
editable region, which looks something like, <!--InstanceBeginEditable
name="regionName" -->. Then insert the text @@("")@@ directly after the
-->.

If you find yourself typing this code often, think about creating a snippet (see
the section called “Creating Snippets”) containing the text @@("")@@.

Building Pages Based on a Template

Building a template is only a prelude to the actual work of building your site. Once
you finish your template, it's time to produce pages.

To create a new document based on a template, choose File→New to open the New Document
window (see Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal
the list of templates it uses. However, if you choose a template stored in a
different site, Dreamweaver doesn't copy any of that template's images to your
current site, nor does it translate relative links correctly. The result is broken
links aplenty.”). Click the
"Page from Template" button, and then, from the Site list, select the site
you're working on. All the templates for the selected site appear in the right-hand column. Select the
template you wish to use, and then click Create.

Note

If you don't want your new web page linked to a template (so that future changes to
the template won't affect the web page), turn off the "Update page when template changes" checkbox. The result is a new page that
looks just like the template, but has no locked regions; you can edit the entire page.
This is a useful technique to use when you want to create a new template starting with
the general design and structure of an existing template. (Be aware that Dreamweaver
remembers this choice the next time you create a new template-based page. In other
words, future pages you create from a template will also be
unlinked—unless you remember to turn the "Update page" box back on.)

A new web page document opens, based on the template, bearing a tab in the upper-right
corner that identifies the underlying template name. Dreamweaver outlines any editable
regions in blue; a small blue tab displays each region's name (Figure 20.5, “This page is based on a template called "tips", as you can tell from the little
tab in the document window's upper-right corner. You can modify this page's editable
regions, which Dreamweaver labels with small tabs. In this example, one editable
region is called "Title". Two additional editable regions (named "question" and
"answer") appear within a repeating region (labeled "repeatQuestions") that lets you
duplicate editable regions to create a list of questions and answers. Optional regions
don't have any clear identifier on a template-based page; you can identify them only
in the Template Properties window, as described on page 780. You can also edit the
title of any page created from a template. All other parts of the page are locked
(circled); you can make changes to these parts only in the original template
file.”).

Dreamweaver makes it obvious which areas of a page are off-limits; your cursor changes
to a "forbidden" symbol (a circle with a line through it) when you venture into a locked
area.

To add content to an editable region, click anywhere inside the region. You can type
inside it, add graphics, or add any other object or HTML you can normally add to a
document. You can also change the document's title and add a Spry Menu bar (Chapter 5, Links), Spry widget (Chapter 13, Spry: Creating Interactive Web Pages),
Behavior (Chapter 14, Dreamweaver Behaviors), Cascading Style Sheet (see Chapter 4, Introducing Cascading Style Sheets), and meta tag information (items that go
in the <head> of an HTML document).

Working with Repeating Regions

Repeating regions work a bit differently from editable regions. In most cases, a
repeating region includes one or more editable regions (which you can edit using the
instructions above). However, Dreamweaver provides special controls to let you add,
remove, and rearrange repeating entries (see Figure 20.15, “Repeating regions are a great way to quickly add lists to your web pages. On the
page displayed here, repeating regions make it easy to add sets of questions and
answers. Each repeating entry has two editable regions, labeled "question" and
"answer". Clicking the + button adds an additional question/answer pair.”).

These regions let page editors add repeated page elements—like rows of product
information in a list of products. To add a repeating entry, click the + button that
appears to the right of the Repeat region's blue tab. You can then edit any editable
regions within the entry. Click inside an editable region inside a repeating entry and
click + again to add a new entry after it.

Deleting a repeating entry is just as easy. Click inside an editable region within the entry you want to delete and click the minus sign
button (-).

Tip

You can create repeating regions that don't have any editable regions—for example, you
can create a repeating region with a star in it; repeat the region several times to
indicate the rating for a product. Although you can use the + button to repeat such
regions, you can't delete those regions with the minus sign (–) button. In other
words, you're stuck with any extra stars you added. The only workaround is to add an
editable region to the repeating region. Then Dreamweaver lets you remove the
repeating regions.

To rearrange entries in the list, click inside an entry's editable region. Click the
up or down arrows to move the entry up or down in the list (to alphabetize it, for
example).

Figure 20.15. Repeating regions are a great way to quickly add lists to your web pages. On the
page displayed here, repeating regions make it easy to add sets of questions and
answers. Each repeating entry has two editable regions, labeled "question" and
"answer". Clicking the + button adds an additional question/answer pair.

Changing Properties of Editable Tag Attributes

Unlike editable or repeating regions, you can't readily see an editable tag attribute on template-based pages. There's no blue tab that
identifies them, as there are for editable regions; in fact, nothing appears in Design
view to indicate that there are any editable
tag properties on the page. The only way to find out is to choose
Modify→Template Properties to open the Template Properties dialog box (see Figure 20.16, “The Template Properties window lets you control editable tag attributes and other
parameters for optional regions. Depending on which parameter you select, the options
at the bottom of the window change. In this case, the src property of an image tag has
been made editable. To change the image tag's src property, click Dreamweaver's
familiar "Browse for File" button and select a new graphic file.”).

Figure 20.16. The Template Properties window lets you control editable tag attributes and other
parameters for optional regions. Depending on which parameter you select, the options
at the bottom of the window change. In this case, the src property of an image tag has
been made editable. To change the image tag's src property, click Dreamweaver's
familiar "Browse for File" button and select a new graphic file.

Dreamweaver displays all the editable tag attributes for this page in this window.
In addition, it displays all the parameters defined for this page, including optional
regions, as discussed in the box on the section called “Nested Templates”.

To change the value of a template property—in other words, to edit the property of
an editable tag—select its name from the list and fill out the option that appears at
the bottom of the window. For example, in the case of color properties, use the color
box to pick a color. If the property is a path (like a link or an image's
src property), click the "select a file" folder icon to browse to
the file.

Once you finish setting the editable properties for the page, click OK to close the
window.

Hiding and Showing Optional Regions

As with Editable Tag Attributes, you use the Template Properties window to control the display of optional regions. On
template-based pages, you can show or hide an optional region by choosing Modify→Template
Properties to open this dialog box (see Figure 20.17, “The Template Properties window displays optional regions as well as editable tag
attributes. Template properties for optional regions—in this example, "kittyHead"—have
a value of either true or false. True lets people see the contents of the region on
the page, while false hides the region. (The "Allow nested templates to control this"
option is described in the box "Controlling the Nest".)”). Next, select the name of the
optional region. To make all the page elements in the region visible, turn on the "Show"
checkbox at the bottom of the window. To hide all the optional regions, turn off this
box.

Figure 20.17. The Template Properties window displays optional regions as well as editable tag
attributes. Template properties for optional regions—in this example, "kittyHead"—have
a value of either true or false. True lets people see the contents of the region on
the page, while false hides the region. (The "Allow nested templates to control this"
option is described in the box "Controlling the Nest".)

Applying Templates to Existing Pages

What happens if you create a web page, and then decide you want
it to share the look of a template? No problem. Dreamweaver lets you apply a template to
any web page in your site. You can even swap one template for another by applying a new
template to a page based on a different template.

To apply a template to a page you already created:

Choose File→Open to open the page you want to
alter.

The page opens.

Choose Window→Assets. Click the Assets panel's Templates
button (see Figure 20.4, “The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.”).

The Assets panel appears and reveals a list of your site's templates.

Note

You can also apply a template to a page by choosing Modify→Templates→ Apply
Template to Page. Select the name of the template from the window that appears and
skip to step 5.

Click a template in the list on the Assets panel, and then
click Apply.

The Inconsistent Region Names dialog box opens (Figure 20.18, “When you apply a template to an existing page, you must tell Dreamweaver what to
do with the material already on the page. You do that by selecting one of the
template's editable regions from a pop-up menu, which takes charge of all editable
regions in the page you're converting.”).

Controlling the Nest

The Template Properties dialog box includes a checkbox
labeled "Allow nested templates to control this.". What does it do?

First off, this only applies if you use nested templates as described on the section called “Nested Templates”. If you never use them, this box has no effect on
your pages. However, if you do use (or plan on using) nested templates, here's how
that box works.

Imagine you create a template and add several optional regions and editable
tag attributes to it. You then use this template as the basic design for more
refined templates for each section of your site using the nested template feature.
When you create one of these nested templates based on the master template, it has
access to the Template Properties window, where page authors can modify any of the
template properties in the original, master
template.

For example, to better identify each section of a site, you might assign a
different class style to the <body> tag of a section's pages. The class
might apply a different background color to each page within a section: blue for
the products section, orange for the support section, and so on. In the master
template, you make the <body> tag's class property
editable. Now, when you create a nested template for the products section, you
simply open the Template Properties dialog box, and then assign a class style with
a blue page background. For the support section's nested template, apply a class
that sets the background to orange.

Now, when you create a template-based page for the support section, its
background is orange, while a page for the products section has a blue
background.

However, to let your site's color palette go really wild, you may want every
page in the site to have its own unique background color, each defined by a
different class style. In this case, you want to let every page based on a nested
template have an editable class property.

To do so, open the nested template, open the Template Properties window,
select the property you want to make editable in pages built from this template
(color in this case), and turn on the "Allow nested
templates to control this" checkbox. Now this property is uneditable in the nested
template, but editable in all the pages you create from it.

You've probably realized by now that the phrase "Allow nested templates to
control this" doesn't make much sense. Turning it on actually
prevents the nested template from controlling the property. A better way to think of it is "Allow pages
created from this nested template to control this property." The bottom line:
Turning on this box makes the attribute uneditable on that page. If the page is a
nested template, it lets the template property "pass through" to all pages based on this template. In other words, you can't set the
background color in the template, but you can change it in pages you create from
the template.

In the list under "Editable regions," choose
"Documentbody.".

To the right, in the Resolved column, you see <Not resolved>. This is
Dreamweaver's way of saying it doesn't know what to do with the contents of the
current page. You need to pick one of the template's editable regions.

From the "Move content to new region" menu, select an
editable region.

If you want to keep the material, select the name of an editable region in which
to place it from the list; otherwise, choose Nowhere, which, in effect, creates a
new blank page based on the template.

Unfortunately, you can only select a single editable region. If the original
page has several content regions, Dreamweaver pushes them all into a single editable
region.

If "Document head" also appears in the window, select it
and choose "head" from the "Move content to new region" menu.

This step preserves any special information you added to the head of your page,
like Cascading Style Sheets, meta tags, and custom JavaScript programs.
Unfortunately, Dreamweaver always replaces the title of your original page with the
default title of the template. You have to reenter the title (see the section called “Creating a Web Page”) after you apply the template.

Click OK.

Your new page appears.

Figure 20.18. When you apply a template to an existing page, you must tell Dreamweaver what to
do with the material already on the page. You do that by selecting one of the
template's editable regions from a pop-up menu, which takes charge of all editable
regions in the page you're converting.

Updating a Template

Templates aren't just useful for rapidly building pages; they also make quick work of site updates. Template-based
pages maintain a link to the original template; Dreamweaver automatically passes changes
you make to the original template along to every page built from it. If you used templates
to build your site, you probably won't cry on your keyboard when the boss asks you to add
an additional button and a link to the navigation bar. Instead of editing every page, you
can simply open the template file, update the navigation bar, and let Dreamweaver apply
the update to all the pages.

You update a template (and all the pages based on it) like this:

Choose Window→Assets.

The Assets panel appears.

Click the Templates button (see Figure 20.4, “The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.”).

A list of the site's templates appears.

Double-click the template's name to open it.

Alternatively, you can select the template in the Assets panel, and then click the
Edit button to open the original template (.dwt) file (see Figure 20.4, “The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.”). The template opens.

Tip

You can also open a template by double-clicking the appropriate template file
(.dwt) in the Templates folder in the Files panel.

Edit the template as you would any web page.

Since this is the original template file, you can edit any of the HTML in the
document, including Cascading Style Sheets, meta tags, and layers. You can also add or
remove editable regions.

Take care, however, to edit only the areas that you did
not mark as editable regions. The reason: When you update your
pages, any region marked as editable in a template file isn't passed on to pages based
on that template. After all, the template dictates only the design of those pages'
non-editable regions.

Note

Be careful when you remove editable regions from a template. If you already
built some pages based on the template, Dreamweaver warns you when you save the
template. As described below, you can either delete the content
you added to that region in each of the pages you created, or you can move it to
another editable region in the page.

Choose File→Save.

If you already created pages based on this template, Dreamweaver opens the Update
Template Files dialog box. It lists all the files that use the template.

Click Update to update all the files based on the
template.

Dreamweaver automatically applies the changes you make to the pages based on the
template. Then, the Update Pages dialog box opens. If you want to see a list of all
the files Dreamweaver changed, turn on the "Show log" box.

On a large site, this automatic update feature can be an incredible time-saver,
but you may not want to click Update, at least not right now.
Perhaps you're just saving some of your hard work on the template but aren't quite
finished perfecting it—why waste your time updating all those pages more than once? In such a scenario, click the
Don't Update button. Remember, you can always update the pages later (see the box
Wait to Update on page 786).

Click Close.

The Update Pages dialog box closes.

Remember that you need to update all your files, even if you make a simple change to
the template, like changing its name.

Updating Nested Templates

When you build a website using nested templates, you often end up with multiple
templates. The master template controls the design elements of nested templates, which
in turn control the pages based on those nested templates. (You can even make nested
templates out of nested templates, but for sanity's sake, you'd
better not.) With this level of complexity, updates to nested templates can get
confusing fast.

In a nutshell, here's how it works:

If you edit a locked region in a master template and then update your site,
Dreamweaver updates not only the nested templates, but all pages built from
them.

If you edit a locked region in a nested template and then update your site,
Dreamweaver passes those changes on only to pages built from that nested
template.

However, changes you make to an editable region of a master
template don't pass on to any page. Neither do changes you make to editable regions of a
nested template.

Wait to Update

Whenever you modify and save a template, Dreamweaver gives you the option of
updating any pages in the site that are descended from the template. The same holds
true of Library items; if you change a Library item, Dreamweaver asks if you want to
pass that change to all the pages with that item. Very often, you'll say
Yes.

But there are times when you want to wait to update your site. If you're making a
lot of changes to templates or multiple Library items, you may wish to wait until you
finish all your edits before you let the changes ripple through your pages. After all,
it can take some time to update large sites.

Dreamweaver lets you update pages that use templates and Library items any time.
Just choose Modify→Templates→Update Pages or Modify→Library→Update Pages.

Both menu options open the same window, the Update Pages dialog box.

At this point, you can update pages that use a specific template or Library item
by going to the "Look in" menu, choosing "Files that Use," and then selecting the
appropriate name from the pop-up menu. If you want to update all the pages in a site,
choose Entire Site, and then, from the pop-up menu, select the name of the local site.
Turn on both the Templates and "Library items" checkboxes to update all pages.

To see the results of Dreamweaver's work, turn on the "Show log" checkbox, which
displays all the files Dreamweaver updated.

Note

Sometimes, after you make changes to a master template, Dreamweaver doesn't update
the pages based on those templates. To safely verify that Dreamweaver updated all the templates,
recreate the Site Cache (Site→Advanced→Recreate Site Cache), choose Modify→Template
→Update Pages, and then select the "Entire Site" option.

Unlinking a Page from a Template

If you're confident that you won't make any further changes to a page's template and
you want to edit a page's locked regions, you can break the link between the page and
its template by choosing Modify→Templates→Detach from Template.

You can now edit all the HTML in the page, just as you can on a regular web
page—which is, in fact, what it now is. You removed all references to the original
template, so changes to the template no longer affect this page.

Note

If you unlink a nested template from its master template, Dreamweaver removes only
the code provided by the original master template. Any editable regions you added to
the nested template remain.

Exporting a Template-Based Site

The good news about Dreamweaver's sophisticated templating features is that they let
you build complex web pages that are easy to create and update. The not-so-good news is
that you need some behind-the-scenes code to achieve this ease of use. Dreamweaver's
template features rely on HTML comment tags to identify editable, optional, and
repeating page regions, as well as nested template and editable tag attributes (see the
box on Under the Hood of Templates).

Although this code is only for Dreamweaver's use and has no effect on how a web
browser displays the page, it does increase, by a small amount, the size of your pages.
That's probably why Dreamweaver includes a feature that lets you export an entire site
into a new folder on your computer without any template markup
code—to give you the leanest HTML possible. The following steps show you how.

Note

While it's certainly possible to perform this file-slimming procedure, truth be
told, it's not really necessary—the code Dreamweaver adds is minimal, so it won't have
much affect on the download speed of your site.

Choose Modify→Templates→Export Without
Markup.

Dreamweaver uses the currently active site, so make sure you've selected the
site you wish to export in the Files panel. The Export Site Without Template Markup
window appears (see Figure 20.19, “Dreamweaver lets you strip out template code from template-based pages with
the Export Site Without Template Markup command.”).

Figure 20.19. Dreamweaver lets you strip out template code from template-based pages with
the Export Site Without Template Markup command.

Click the Browse button, and then select a destination
folder for the exported site.

Select a folder other than the current local site folder.
You always want to keep the original files in the local folder, since they're the
ones that retain the template markup, making future updates possible.

Turn on the export options you want.

The Export window includes two options. The first, "Keep template data files,"
creates an XML file for each template-based page. In other words, when you export
the site, there's one HTML page (without any template code) and an XML file (which
includes all the template code as well as the page contents).

Theoretically, you could then go back and choose the File→Import→"XML into
Template" to recreate the page, complete with the original template information.
However, in practice, you probably won't. This process creates lots of additional
files that you wouldn't want to move to a website for one thing. Also, when you want
to work on the site to edit and update it, you should use the original files in the
site's local foldr, since they have the useful template code in them.

The "Extract only changed files" option speeds up the process of exporting a large template-based site. This option forces Dreamweaver to
export only pages you changed since the last export. Unfortunately, it doesn't tell
you which files it exports until after the fact. So, to make
sure you get those newly exported files to your server, you need to keep track of
the changed files by hand.

Click OK to export the site.

Dreamweaver goes through each page of the site, stripping out template code and
exporting it to the folder you specified.

You can use Dreamweaver's FTP feature to upload the files to your server (see
the section called “Transferring Files”), but you need to create a new site and
define the folder with the exported files as a local root
folder. Whenever you need to add or update template-based pages, use the original
site files, and then export the changed files. You can then switch to the site
containing the exported files and transfer the new or updated files to your server.
If that sounds like a lot of work, it is. Every change you make means exporting the site again. You're better off just leaving the template
code in your pages, or use this command only if you're absolutely sure that you're
done using templates for your site.

Template Tutorial

In this tutorial, you'll create a template for the Chia Vet website. Then you'll build
a page based on that template and enjoy an easy sitewide update courtesy of Dreamweaver's
templates feature.

Note

You'll need to download the tutorial files from www.sawmac.com/dwcs5/ to complete this
tutorial. See the note on Note for more details.

Once you download the tutorial files and open Dreamweaver, setup a new site as
described on the section called “Setting Up a Site”: Name the site
Templates, and then select the Chapter20 folder (inside the
MM_DWCS5 folder). (In a nutshell: Choose Site→New Site. In the Site Setup window, type
Templates into the Site Name field, click the folder icon next to
the Local Site Folder field, navigate to and select the Chapter20 folder, and then click
Choose or Select. Finally, click OK.)

Creating a Template

Open the Files panel by pressing the F8 key
(Shift-⌘-F).

Of course, if it was already open, you just closed it. Press F8 (Shift-⌘-F)
again.

In the Files panel, find and double-click the
pagetips.html.

It's usually easier to create a template from an existing web page (rather than
from scratch), which you then save as a template. For the purpose of getting to bed
before midnight tonight, pretend that you've just designed this beautiful
page.

Choose File→Save As Template.

The Save As Template dialog box opens.

In the description field, type Use for Chia
tips.

This description appears in the New Template window when you create a page based
on this template.

Name the templateTips; click Save. In the
Update Links window, click Yes.

Behind the scenes, Dreamweaver creates a new folder—Templates—in the site's root
folder, and saves the file as Tips.dwt inside it. A new template is born. You can
see it in the newly created Templates folder in the Files panel and in the Templates
page of the Assets panel (see the Note below).

The template is a model for other pages. But although they'll be
based on its design, they won't be identical. The next step
is to identify those areas of the design you want to change from page to page—the
editable regions.

Note

Templates don't always immediately show up in the Templates category of the Assets panel. Sometimes you need to click
the Refresh Site List button (the circular arrow in the bottom right of
the Assets panel) to see a newly added template.

Select the text from the "T" in the heading "Tips Title"
to the right of the "e" for "here" in "Subtitle goes here".

You just selected the title and subtitle for the page. As people add new tips to
the Chia Vet site, you'll want them to add specific titles for each tip, so you
should make these two paragraphs editable.

Choose Insert→Template Objects→Editable
Region.

The New Editable Region dialog box appears. Here, as in the following steps, you
can also, from the Insert panel's Common category, go to the Templates menu and
choose the Editable Region option (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”), or just press Ctrl+Alt+V
(⌘-Option-V).

TypeTitle; click
OK.

A small blue tab, labeled Title, appears above the
headline. You've just added one editable region—the most basic type of template
region. You'll make the main text area editable as well.

Select the two paragraphs of text beneath "Title". Repeat
steps 7 and 8; name the regionText.

Another small blue tab, labeled Text, appears above the
paragraphs. You might wonder why you did this in two chunks. Why not select the
title, subtitle, and paragraphs in one fell swoop and turn them into a single
editable region? Because of the "Related Tips" box. That's a bit of HTML that
appears between the subtitle and the first paragraph of text.
If you created just a single editable region, you also would have been able to edit
that tip box (since you would have inadvertently selected its HTML, too).

However, you've got bigger plans for that box. You want it to list web pages
with related information. But what if there are no related tips
for a particular page? In that case, you don't want the box to appear at all—a
perfect case for an optional region.

The first time you choose Edit→Select All (Ctl-+A, or ⌘-A works too), you select
the contents of the box; the second time you invoke Select All, you grab the
<div> tag that creates the box.

You'll turn this <div> into an optional region so you can hide it on most
pages, but display it when you can point visitors to related web pages.

Choose Insert→Template Objects→Optional
Region.

The New Optional Region window appears. (Again, this same option is available in
the Common category of the Insert Panel [Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to
tools for creating templates and setting up a variety of Dreamweaver template
features.”].)

TyperelatedTipsin the name field, turn off the "Show by Default" checkbox,
and then click OK.

From now on, when you create a new template-based page, you won't see this box.
When you build a page where you can point to related tips, however, you can make the
box visible.

You see a blue tab labeled "If relatedTips" above the "Related Tips" box (see
Figure 20.20, “When you create optional, editable, and repeating template regions, the Tag
selector is your best friend. Click a tag (<ul> in this case) to accurately
select a piece of content. You'll also see Dreamweaver-specific tags listed on
template files. Here, <mmtemplate:editable> indicates the editable region
you created in step 13. Because the <ul> tag appears to the right of the
<mmtemplate:editable> tag, you know that page authors can edit and change
the <ul> tag and everything inside it when they create template-based
pages.”): this part is the
optional region, and represents where the HTML code with the div is located.

Of course, to let someone add links to related pages, you need to add an
editable region as well.

Click anywhere inside the two links—for example in the
text "Related Tip 1" or "Related Tip 2". In the Tag selector at the bottom of the
document window, click the <ul> tag (circled in Figure 20.20, “When you create optional, editable, and repeating template regions, the Tag
selector is your best friend. Click a tag (<ul> in this case) to accurately
select a piece of content. You'll also see Dreamweaver-specific tags listed on
template files. Here, <mmtemplate:editable> indicates the editable region
you created in step 13. Because the <ul> tag appears to the right of the
<mmtemplate:editable> tag, you know that page authors can edit and change
the <ul> tag and everything inside it when they create template-based
pages.”). Choose Insert→Template
Objects→Editable Region. Name the new regionrelatedLinks.

Now you can edit the links inside the optional region.

Next, you'll add a repeating region to the right sidebar, so you can add
multiple sets of questions and answers. You'll then make the text editable, so you
can add story titles and links.

In the right sidebar, click inside the text "Question goes
here".

Both the question and answer are contained inside a <div> tag. You'll turn
that entire <div> tag into a repeating region.

At the bottom of the window, in the Tag selector, click
the <div.qa> tag to select that div.

Choosing Edit→Select All twice will also select the div. The .qa part means that
you applied a class named qa to that div. You just selected the
<div> tag and the two paragraphs inside it. Because you may want to add any
number of question/answer pairs, you'll turn this into a repeating region.

Dreamweaver inserts a new repeating region with the familiar blue tab. The tab
reads "Repeat: repeatQuestions," indicating that it isn't any ordinary template
region—it's a repeating region. However, turning a part of the page into a repeating
region doesn't automatically make it editable. Since you want to edit the text and
add new names to each page, you need to add an editable region
inside this repeating region.

Figure 20.20. When you create optional, editable, and repeating template regions, the Tag
selector is your best friend. Click a tag (<ul> in this case) to accurately
select a piece of content. You'll also see Dreamweaver-specific tags listed on
template files. Here, <mmtemplate:editable> indicates the editable region
you created in step 13. Because the <ul> tag appears to the right of the
<mmtemplate:editable> tag, you know that page authors can edit and change
the <ul> tag and everything inside it when they create template-based
pages.

Select the text "Question goes here". (Don't select the
orange "Q." that marks the beginning of the question, however.) Choose
Insert→Template Objecs→Editable Region. In the Name field, typequestion, and then click
OK.

Another blue tab, labeled "question," appears inside the repeating region. On
template-based pages, you can now change this text. You don't select the "Q." at the
beginning of the paragraph because you don't want that to be editable. That's part
of your design, and at some point you might want to change it (for example, you
might want to spell it out and add a colon: "Question:"). Because it's not part of
an editable region, you can make that change once in the template and have every
page based on that template reflect the change.

Choose File→Save.

A Dreamweaver dialog box appears, saying that the editable region you just
created is inside a block tag and that you won't be able to add new blocks in this
region. The reason for this dialog box is discussed on the section called “Adding a Repeating Region”, but in a nutshell it simply means that you
won't be able to add additional paragraphs inside this area. Since this editable
region is only intended for a single-line question and not multiple paragraphs, this
is OK. (If you don't see this warning dialog box, you or someone using your computer
may have already turned off that type of warning, as described in the next
step.)

Put a check inside the "Don't show me this message again"
box and click OK.

You may see another dialog box saying that you've changed a template and asking
if you want to update pages on the site. Well, since you haven't yet created any
pages from this template, there's nothing to update, so click the No button.

Dreamweaver saves the file. You'll add another editable region for the
answer.

The template should now look like Figure 20.21, “A template file. If you don't see the blue boxes representing editable,
optional, and repeatable regions, you may have turned them off. To show them,
choose View→Visual Aids and make sure you have Invisible Elements checked.”.

Choose File→Save, and close this File.

Congratulations! You've created your first template.

Creating a Page Based on a Template

Now it's time to get down to business and build some web pages. Look at the Files
panel and make sure you selected the site you defined in step 1. Then proceed as
follows:

Choose File→New.

The New Document window opens.

On the window's far left side, click the "Page from
Template" button.

A list of all defined sites appears in the Site list.

Figure 20.21. A template file. If you don't see the blue boxes representing editable,
optional, and repeatable regions, you may have turned them off. To show them,
choose View→Visual Aids and make sure you have Invisible Elements checked.

Make sure you have the site you set up for this tutorial
("Templates") selected in the Site column; also make sure the "Update page when
template changes" checkbox (in the right of the window) is turned
on.

If you don't turn on the "Update page" box, the new page doesn't link to the
original template file—and doesn't update when you make changes to the
template.

From the templates list, select Tips, and then click
Create.

And lo, a new, untitled web page document appears, one that looks (almost)
exactly like the template (Figure 20.22, “In template-based pages, blue tabs identify editable areas, and the yellow
tab at the top right lists the template's name. In some cases, template tabs may
overlap. Here, the tab for the editable region "question" sits on top of the tab
for the repeatable region. Notice that the repeating region has small control
buttons (+, -, and up and down arrows) and the optional region—the "Related Tips"
box—is invisible. (Remember, you deselected the "Show by Default" option for this
region.)”).

Choose File→Save. Click the Site Root button and save the
file astip1.htmlin the root folder. In the Document toolbar's Title field (at
the top of the document window), typeRepairing Chipped Terra Cotta.

To indicate that it's your template's offspring, the document window has a
yellow tab in the upper-right corner that reads Template:Tips. You can see your
editable and repeating regions indicated by blue tabs. Now it's time to add some
content.

Choose File→Open; in the Open file window, click the Site
Root button; double-click the filetip1_text.html.

You can also open this file by double-clicking its name in the Files panel. The
tip1_text.html page contains the content for
the new template-based page. It's just a matter of copying and pasting the text from
one page to the other.

Figure 20.22. In template-based pages, blue tabs identify editable areas, and the yellow
tab at the top right lists the template's name. In some cases, template tabs may
overlap. Here, the tab for the editable region "question" sits on top of the tab
for the repeatable region. Notice that the repeating region has small control
buttons (+, -, and up and down arrows) and the optional region—the "Related Tips"
box—is invisible. (Remember, you deselected the "Show by Default" option for this
region.)

Select the headline and the paragraph immediately
following it at the top of the page and choose Edit→Copy. At the top of the
document window, click thetip1.htmltab to switch to the template-based page.

Remember that you can add content only to an editable region. If you move your
mouse over the banner, navigation, or footer areas of the page, you see a black
"forbidden" symbol. You can't insert the cursor anywhere but inside an editable
region.

Click the blue tab labeled "Title" (the label is just
above the headline "Tips Title Goes Here").

This selects everything inside that region. Since it's just placeholder text
anyway, you'll replace it with the two paragraphs you just copied.

Choose Edit→Paste.

Dreamweaver replaces the dummy content with the title and subtitle for this Chia
Tip page. (If the two lines of text look like plain paragraphs, turn the top line
into a Heading 1 using the Format menu in the Property inspector, and add the class
tagline to the second paragraph.) Now you'll add the main
content of the tip.

Click thetip1_text.htmltab at the top of the Document window. Repeat steps7–9,
copying the remaining text on thetip1_text.htmlpage and pasting it into the Text editable region on
thetip1.htmlpage.

The main tip is in place. This particular page doesn't have any related tips, so
you'll leave the hidden optional region hidden (you'll show it on the next page you
build).

Time for some questions and answers.

Note

If, at a later time, Chia-Vet.com does add another page
with a tip that's related to this web page, you can make the Related Tips box
visible simply by choosing Modify→Template Properties and then turning on the
"Show relatedTips" checkbox. You'll see this process in action in step 5 on the section called “Creating Another Template-Based Page”.

In the page's right sidebar, delete the text "Question
goes here" and type, "Can I dye my Chia
Pet?"

You've added a question in one editable area, now time for the answer.

Click the "answer" tab and type some suitably silly answer
in keeping with the Chia Vet website.

For example: "You can certainly dye your Chia's body. Since terra cotta is
absorbent, any colored liquid will work. However, it's best to use non-toxic dyes
like food coloring or beet juice." As it happens, there's another important question
for this page. Since you're using a repeating region, it's easy to add another
question/answer pair.

Click the + button just to the right of the blue "Repeat:
repeatQuestions" tab.

You've added another pair of question and answer editable regions to the page,
as shown in Figure 20.23, “If a page has a lot of elements crowded together—tables, images, text, and so
on—Dreamweaver sometimes can't display the small buttons that let you add and
remove repeating entries. In this case, you can also use the Modify menu. Click a
repeating region, and then choose Modify→Templates→New Entry After Selection to
add a new entry after the current one, or New Entry Before Selection to add a new
entry before the current one.”.

Figure 20.23. If a page has a lot of elements crowded together—tables, images, text, and so
on—Dreamweaver sometimes can't display the small buttons that let you add and
remove repeating entries. In this case, you can also use the Modify menu. Click a
repeating region, and then choose Modify→Templates→New Entry After Selection to
add a new entry after the current one, or New Entry Before Selection to add a new
entry before the current one.

Repeat steps 11 and 12, adding an even sillier question
and answer.

Congratulations, you've just completed a web page for Chia-Vet.com. Save this
page and preview it in a Web browser (press F12 [Option-F12]). Return to Dreamweaver
and close this page. Now you'll add another page to the site.

Creating Another Template-Based Page

Templates are useful only if you use them to build lots of pages. You'll
build one more template-based page for this tutorial, and see how optional template regions let you create very adaptive web pages.

Choose File→New. In the New Document window, click the
"Page from Template" button; from the templates list, select Tips, and then click
Create.

Another new web page is born.

Choose File→Save. Save the file astip2.htmlin the root folder. In the Title field in the Document toolbar
(at the top of the document window), typeTrimming Your Chia's Coat.

You'll add some already created content to this page.

Repeat steps 6–10 on the section called “Creating a Template” in the section called “Creating a Page Based on a Template”. Use the filetip2_text.html located in the root
folder.

Because trimming a Chia Pet's mane with sharp scissors is a recipe for chipped
terra cotta, you've decided that you should provide a link from this page to the one
you created previously. Fortunately, the optional region you created earlier is
ready to be used.

Choose Modify→Template Properties.

The Template Properties window appears (see Figure 20.24, “The Template Properties window does double duty. It let you hide or show
optional regions, and it lets you set values for editable tag attributes.”). It lists the optional
region you wish to make visible.

Figure 20.24. The Template Properties window does double duty. It let you hide or show
optional regions, and it lets you set values for editable tag attributes.

Turn on the "Show relatedTips" checkbox and then click OK
to close the window.

The Related Tips box suddenly appears. There's only one related page, so you
don't need both bulleted items.

Delete second bullet point ("Related Tip 2") and change
the text of the first bullet to "Repairing
Chipped Terra Cotta". Link that text to
thetip1.htmlpage (use any of the link-creation techniques discussed on
the section called “Link from the Scorpio page to the Horoscopes page”).

This page is nearly complete: just one final item.

Repeat step 14 on the section called “Creating Another Template-Based Page”.

You're almost done.

Preview the page in a web browser.

While most of the page looks the same as the first template-based page you
created, the optional region let you add special content to this page without having
to create another template. Next you'll edit the template file and update the
website.

Close this page and tip1.html when you're
ready to move onto the next step.

Updating a Template

Now the fun begins. Remember, this page maintains a reference to the original
template. In the final phase, you're going to make a few changes to the template. Choose
Window→Assets to open the Assets panel, and then click the Template button to reveal the
templates for this site (see Figure 20.4, “The Templates category of the Assets panel lists the name, file size, and location
of each template in the current local site. The Apply button applies a template to the
current open web page. The Refresh Site List button updates the list of templates: If
you just created a template and don't see it listed, click this button. The New Template
button creates a new blank template in the Templates folder. Select a template from the
list and click the Edit Template button to open the template for editing.”):

Return to Dreamweaver, and in the Assets panel, click the
Templates button (see Figure 15-11), and double-click the Tips template to open
it.

The original template, the Tips.dwt file, opens. You can also open the .dwt file
by double-clicking its name inside the Templates folder in the Files panel.

There are a couple of things that need changing; first the copyright needs to be
updated.

In the footer, locate the Copyright 2008 and change it to
the current year.

If it's still 2008 (you early-adopter you), change the year to 2010 or whatever
the current year happens to be. You'll also add a link here.

You've also decided that you don't like the look of the "Q." and "A." in the
right sidebar, so you'll change that as well.

In the right sidebar, delete the period at the end of
"Q."; select the letter Q, and from the Class menu in the Property inspector
select the class styleq.

The Q changes appearance—the letter gets smaller, turns white, and has an orange
box around it.

Note

If you don't see a Class menu in the Property inspector, you're in CSS view.
Click the HTML button on the left side of the Property inspector to reveal the
Class menu.

Repeat step 4, replacing the "A." with just "A" and
applying the classato it.

The A changes appearance—the letter gets smaller, turns white, and a green box
surrounds it. Because both the Q and A are outside of the editable regions (that is,
the area with the blue tabs "question" and "answer"), the changes you just made will
pass on to template-based pages.

Choose File→Save.

Dreamweaver displays the Update Template Files window. This is the moment of
truth.

Click Update.

Dreamweaver opens the Update Pages dialog box and updates the appropriate web
pages, adding the copyright year, the link, and new Q and A icons to each one. In
this case, you based only two pages on the template, so Dreamweaver updates only two
pages—as indicated by the list of changes Dreamweaver shows when it's
finished.

Note

If, after you update pages based on a template, you don't see the number of
updated pages listed in the Update Pages window, turn on the Show Log
checkbox.

Click Close to close the Update Pages dialog box. Finally,
open the filestip1.htmlandtip2.html.

Notice that Dreamweaver updated the copyright and question/answer sections in
both (see Figure 20.25, “The finished tutorial page, complete with a useful Chia tip, a box with a link to
a related web page, and a helpful question and answer.”). This series
of events happened because you changed the template to which the page was
genetically linked. Ah, the power!

Figure 20.25. The finished tutorial page, complete with a useful Chia tip, a box with a link to
a related web page, and a helpful question and answer.