Working with Templates

[ LiB ]

A Dreamweaver MX 2004 template fits within the ordinary definition of the word template in that it is a page that serves as a pattern for others like itself. Even those who don't use Dreamweaver templates might create a template page and just resave it with a new name for each page of that type that is needed. However, Dreamweaver templates take the concept further, adding a measure of power and ease: The pages made from a template can be updated automatically, all at once, just by updating the template itself.

Therefore, a Dreamweaver template is an HTML page, but a special type of HTML page. Special code inserted by Dreamweaver makes it possible for the template and its child pages (the HTML pages made from the parent template) to be connected in such a way that an update to the template updates all child pages.

Template Basics

The basic procedure for working with templates is simple: Create a template page, including editable and noneditable regions ; use the template to create one or more child pages, or apply the template to existing pages; update the template, and let Dreamweaver automatically update all child pages.

What Templates Are and Where They Live

A Dreamweaver template is an HTML document that has the .dwt filename extension and that lives in a folder called Templates in a site's Local Root folder. The file's name, minus its extension, is its template name. You can view and manage the templates for a site with the Templates category of the Assets panel, shown in Figure 20.1. Each template must belong to a particular site and can be used only from within that site.

Figure 20.1. The Templates category of the Assets panel.

Don't move or rename the Templates folder! And don't move any template files out of this folder, or Dreamweaver won't recognize them as templates anymore!

In addition to their HTML content, templates contain special markup embedded in HTML comments. This code is in Dreamweaver's template language and looks something like this:

 <!-- TemplateBeginEditable name="doctitle" -->

Creating Templates

There are several ways to create new templates, all of them equally effective. To create a new template, do one of the following:

In the Assets panel (select Window > Assets), choose the Templates category and click the New Template button at the bottom of the panel (see Figure 20.1). This adds a new .dwt file to your Templates folder and gives you the chance to rename it. To edit the template, select it in the panel and click the Edit Template button.
Choose File > New and, in the New Document dialog box, choose Template > HTML Template from the category lists (see Figure 20.2). This creates and opens a new, empty file. The first time you save the document, instead of displaying a standard Save dialog box, Dreamweaver asks you what template name the file should have and what site it should belong to. The template is automatically stored in the Templates folder for that site with the .dwt filename extension.

Figure 20.2. Creating a new template with the New Document dialog box.
You can also turn any HTML document into a template by opening it and choosing File > Save As Template, or by going to the Common category of the Insert bar and choosing Make Template from the template objects (see Figure 20.3). Dreamweaver asks you to name the template and saves it in the Templates folder as a .dwt file.

Figure 20.3. Turning an HTML document into a template with the Make Template object.

Making Regions Editable

When you build child pages from a template, all parts of the template are locked except those that you (or Dreamweaver) have specifically defined as editable. You generally want to leave things such as the title banner, navigation bar, and footer locked so that they remain the same on all child pages. You'll probably want to unlock the content area by declaring it to be an editable region so that each child page can have its own unique content. Dreamweaver automatically makes the page title an editable region.

To see how editable regions are defined, open any template page, go to Code view, and find the page title area. You'll see this:

 <!-- TemplateBeginEditable name="doctitle" -->    <title>Untitled Document</title> <!-- TemplateEndEditable -->

The opening and closing lines surround the editable area. The name of this editable region is doctitle .

Any region in a template can be made editable by surrounding it with this code and assigning it a unique name. To define a region as editable, do one of the following:

Put the cursor inside a table cell , empty paragraph, layer, or other region. From the template objects in the Insert bar, choose the Editable Region object. When Dreamweaver prompts you, give the region a unique name. You can get the same result by right-clicking inside a region and choosing New Editable Region from the context menu.
Select the tag (such as td or table ) from the Tag Selector or in Design view and choose Insert > Template Objects > Editable Region.
If you prefer to do things manually, go to Code view, find the region you want to define as editable, and surround it with the code listed earlier. To create an editable region within a heading, for instance, you type something like this:

 <h1><!-- TemplateBeginEditable name="main heading" --> &nbsp; <!-- TemplateEndEditable --></h1>

Line breaks aren't crucial to the effect, so break lines wherever you like.

After you've created the region, it appears in Design view with a colored label. It appears in the Tag Selector as <mmtemplate:editable> . You can select the region for editing by clicking the label or the Tag Selector entry. The Property inspector then lets you change its name (the only property of editable regions).

Note that it's entirely legal to assign a block-level text element, such as a p , li , or h1 tag, to be an editable region. If you do so, every time you save the template, Dreamweaver warns youas if you've done something stupid. You can safely ignore these warnings.

When you define the template, you can put any content you like inside the editable regionsmaybe a helpful bit of text such as [title goes here]. Because this text is inside an editable region, you can overwrite it in any child page. Dummy text like this can help you visualize the design of the finished pages as you're working.

Working with Child Pages

After you've defined one or more templates, you can create new pages based on those templates or apply the templates to existing pages.

To create a new document based on a template, choose File > New. In the New Document dialog box, bring the Templates tab to the front. Choose the site you're working on, and the template you want to base your page on, and click OK to create the child page (see Figure 20.4).

Figure 20.4. Creating a new document based on a template.

To apply a template to an existing document, open the document. From the Templates category of the Assets panel, select the template you want to apply. Either click the Apply button or drag the template to the Document window. If the page has any content, Dreamweaver needs to either put that content into editable regions in the template or throw the content away. You see a dialog box indicating what content exists in the current document body and document head (see Figure 20.5). As long as any regions are set to <Not Resolved>, you won't be allowed to continue. You must select each region and, in the Move Content to New Region drop-down, choose one of the following:

Figure 20.5. Applying a template to an existing document.

Nowhere to delete the region's content
Head for any existing document head content (keywords, scripts, style sheets, and so on)
One of the named editable regions to put the content in that region

After you've created your child page, you can save it as normal (select File > Save) to any folder in your site. You can add or edit content only in the editable regions. While you're in Design view, the Tag Selector displays only tags within editable regions. Each editable region itself is marked as <mminstance:editable> . If you examine the document in Code view, you'll see that all noneditable code (code outside the editable regions) appears in gray. An HTML comment at the top of the page, and another at the bottom, indicate that this page is a template instance , or a child page based on a particular template:

 <!-- InstanceBegin template="/Templates/main.dwt"  codeOutsideHTMLIsLocked="false" -->   <html>     etc   </html> <!-- InstanceEnd -->

Figure 20.6 shows a typical child page being edited.

Figure 20.6. A template's child page being edited in Code and Design view.

Within the document's head section are two editable regions: the head region for head content such as meta tags, and the doctitle region for the page title. In Code view, they look like this (shown in bold):

 <head>  <!-- InstanceBeginEditable name="doctitle" -->   <title>My Web Page</title>   <!-- InstanceEndEditable -->  <meta http-equiv="Content-Type content="text/html; charset=  iso-8859-1">  <!-- InstanceBeginEditable name="head" -->   <script src="myscripts.js"></script>   <!-- InstanceEndEditable -->  </head>

If you're in Design view, use the View Options submenu to display head content. You see a blue box surrounding the page title, as shown in Figure 20.7. That's the doctitle region. To add other head content, such as keywords or other meta tags, you have two choices:

Figure 20.7. The doctitle editable region within a child document's head section, as displayed in Design view.

Click anywhere inside the doctitle box in the Head Content bar, and use the Insert bar or menu to add head objects as normal. This puts the code for your meta tags and so forth inside the head tag in the HTML (so they'll work fine in the browser), but within the doctitle editable region. They don't belong there.
If you want your head content inserted inside the head editable region (which is where it logically belongs!), you have to be a bit sneakier because the head editable region doesn't appear in the Head Content bar until you place some content there. Switch to Code view and place the insertion point between the opening and closing head region tags:

  <!-- InstanceBeginEditable name="head" -->   <!-- InstanceEndEditable -->

Then use the Insert bar or menu to insert a head object. After you do this, the Head Content bar in the Document window shows a second blue box, representing the head region, as shown in Figure 20.7. From now on, you can place the cursor in that box and insert more head content.

A template isn't a straitjacket. You can open any child page in an editor other than Dreamweaver and change the locked code if you want to. But the next time the original template is updated, Dreamweaver overwrites your changes. If you want to divorce the child from its template parent, you can open the file in another program and manually delete the template comments, or you can open the file in Dreamweaver and choose Modify > Templates > Detach From Template. All locked regions are then editable, but the page no longer updates when the parent template updates.

Working with Template Pages

The glory of Dreamweaver templates is that they're updatable. As soon as you've created a template, you can open the template file and edit any content in the page's locked regions. Your changes are immediately applied to all child pages. To open a template for editing, you can select it in the Templates category of the Assets panel and click the Edit Template button (see Figure 20.1), or find it in the Templates folder in the Site panel and double-click to open it (as you would any file). When the template is open, you can make any changes you like to the areas that are not editable regions. You can also add, rename, or delete editable regions. Every time you save the template, Dreamweaver offers to update all child pages. If you've renamed or deleted any regions, and the template has child pages, Dreamweaver asks how content in those child pages should be disposed of. You can choose to reassign the child pages' content to a different editable region or to delete the content.

If you have more than a few child pages based on your template, updating might take a few moments. But you don't have to update every time you save. If you are in the (good!) habit of saving often, you can save time by updating only once, at the end of your editing session.

Uploading and Templates

When it's time to upload your site files to a web server, remember that you don't have to upload the template files themselves (the .dwt files in the Templates folder)just the child pages. Two uploading habits can be helpful when working with templates:

Use the Synchronize command (Site > Synchronize) to determine which files need uploading after editing. This guarantees that, after you've edited a template, all updated child pages get uploaded.
Enable cloaking for your site in the Cloaking category of the Site Definition dialog box. Cloak the Templates folder by right-clicking it in the Site panel and choosing Cloaking > Cloak . Dreamweaver warns you that this doesn't work for batch site operations, but it stops the folder from being uploaded during synchronization.

Beyond the Basics with Templates

Editable regions and automatic updates are just the beginning of what you can do with Dreamweaver templates. Thanks to the template language (those special HTML comments in templates and child pages), you can use templates to generate complex websites that include optional content, editable tag attributes, repeating regions, nested templates, and more!

Optional Regions

An optional region is a piece of document content that exists in the template. You can choose to hide or show it independently in each child page. Optional regions are great if, for instance, some of the pages based on your template are long enough to require a Back to Top button and others aren't, if some pages require Next or Previous links and others don't, and so forth.

Creating Optional Regions in Templates

To define an area of your template as optional, open the template file and do the following:

Put the insertion point where you want the optional content to appear. If you've already created the content and just want to make it optional, select the content.
From the Template objects in the Insert bar, choose Optional Region.
When the Optional Region dialog box appears, leave the Basic tab in front and give your region a unique name. If you want the region to be invisible by default, deselect the Show by default check box. Otherwise, leave it selected. Click OK to close the dialog box and insert the region.

Check your document in Code view after doing this, and you'll see that Dreamweaver has added two sets of template instructions. In the head section, a template parameter is defined, named whatever you called your optional region, with a type of boolean and a value of true or false . Here's an example:

 <!-- TemplateParam name="back to top" type="boolean" value="true" -->

Your optional content is surrounded by more template code, like this:

 <!-- TemplateBeginIf cond="_document['back to top']" -->    <a href="#top">Back to top</a> <!-- TemplateEndIf -->

This conditional statement determines whether the content should be included in the child page, based on the value of the parameter defined in the head.

In Design view, the optional region is marked with a colored label. In the Tag Selector, it's indicated as <mmtemplate:if> . If you select the region, the Property inspector lets you change its name. Or you can click the Edit button to reopen the Optional Region dialog box and change its default settings.

As with all template code, you are free to move these optional region delimiters if you discover they don't surround exactly the right content.

Using Optional Regions in Child Pages

As soon as your template defines an optional region, you can determine on a page-by-page basis whether the content shows. To do this, open the child page and choose Modify > Template Properties. The dialog box that appears lists any optional regions, along with a true/false value, as shown in Figure 20.8. Select the region name and select or deselect the Show [region name] check box to show or hide the region on this page. If you choose to hide the optional region, and then you check your document in Code view, you'll see that the code for this region is gone! If you choose to show it, and then check Code view, the code is back!

Figure 20.8. Determining the visibility of an optional region in the Template Properties dialog box.

Making Optional Regions Editable

By default, optional regions aren't editable. They contain locked content (such as Back to Top or Next/Previous links). You can, however, create an optional region that contains an editable region.

To insert an optional/editable region, open your template file, go to the Template objects in the Insert bar, and choose Editable Optional Region. If you already have an optional region, and you want to make it editable, just put the insertion point inside the optional region and choose the Editable Region object from the Insert bar. No matter how you do it, Dreamweaver puts an editable region inside an optional region. In Design view, it appears as two colored labels nested one inside the other, or two tags in the Tag Selector. In Code view, it appears like this:

 <!-- TemplateBeginIf cond="_document['  myRegionName  ']" -->    <!-- TemplateBeginEditable name="EditRegion4" -->  [content goes here]  <!-- TemplateEndEditable --> <!-- TemplateEndIf --></td>

When editing your child pages, you can show or hide the specified content (indicated here by [content goes here] ). If it's showing, you can change those contents.

Editable Attributes

Editable attributes in templates let you specify any attribute to any tag in the template's locked regions. They also allow this attribute to be controlled by the child page. Sound esoteric? It's actually amazingly useful! With editable attributes, you can insert a consistently placed and sized logo in a locked area of the page while allowing child pages to assign a different src attribute (so that a different logo can appear in different pages). You can include consistent Next and Previous links on every page while allowing child pages to control where the links go by making the href attribute editable. And you can do a lot more. Your imagination is the only limit.

Creating Editable Attributes in Templates

To specify an attribute as editable in a template, open the template and do the following:

Select the tag whose attribute you want to make editable.
Choose Modify > Templates > Make Attribute Editable.
In the dialog box that appears, select the desired attribute from the Attribute drop-down list. If your attribute doesn't appear in the list, click the Add button to add it. (You also might want to check that you didn't accidentally select a tag other than the one you think you should be working with.) Select the Make editable check box. For the Label, assign a unique and easily recognizable name (such as next_href or logo_src). In the Type drop-down, choose the appropriate type of value (string, URL, number, and so on) that this attribute takes. The default value is whatever value the attribute currently has; you can change this if you like. When you're done, click OK to close the dialog box.

After you've assigned the editable attribute, if you select the tag and examine the Property inspector, or go to Code view and examine the tag's HTML, you see that Dreamweaver has inserted a template parameter in place of your attribute. Here's an example:

 <img name="logo" src="@@(logo_src)@@" width="112" height="30" />

If you go to Code view and look at the end of the head section of your document, where Dreamweaver defines template parameters, you'll find an additional line of code that looks something like this:

 <!-- TemplateParam name="logo_src" type="URL"  value="../images/jewelry_logo.gif" -->

What's happening here? The code in the head section defines the logo_src parameter, with a type of URL , and assigns it a default value. The code in your tag tells Dreamweaver to insert that parameter in place of a specific attribute.

Dreamweaver doesn't interpret the parameter while you're viewing the template in Design view. So if you've used a parameter to specify an image source, for instance, you see a broken image icon as you work. When you get to the child page, however, Dreamweaver substitutes a real value for the parameter, and the page displays properly.

Using Editable Attributes in Child Pages

To edit the attribute in a child page, open the child page and choose Modify > Template Properties. The dialog box shown in Figure 20.9 appears. All editable attributes and their default values are listed. Select the attribute you want to change, enter a new value for it, and click OK to close the dialog box. Note that Dreamweaver gives more help for some parameter types than others. If your parameter type is color, the Template Parameters dialog box includes a color picker. But for URL-type parameters, you must enter the relative or absolute URL manuallythere's no Browse button. (Note also that relative URLs must be relative to the template file, not the child page.)

Figure 20.9. Using Modify > Template Properties to set an editable attribute in a child page.

If you check a child page in Code view after setting your editable attributes, you'll see that the tag attribute now has a standard value, in place of the template parameter. In the document's head section, however, the template parameter definition is still present.

Repeating Regions

With repeating regions, you can define a chunk of page content that appears one or more times in any given child page. For instance, you can create a one-row table in the template. In one child page you could repeat that row to create a five-row table, and in another child page you could repeat the row to create a two-row table. Or your template could define one subheading and text paragraph as a repeating region so that some child pages could have several subheading/text units and others would have only one. Repeating regions are most useful when they contain editable regions so that each repeated table row or subheading can have its own unique content.

Creating Repeating Regions in Templates

To define one or more editable regions as a repeating region, open a template file and do the following:

Create the page element you want to repeat. This can be a table with one or more rows, text heading and/or paragraph, ordered or unordered listyou name it.
Assign editable regions within this element wherever you want. (See the earlier section "Making Regions Editable" if you don't know how to do this.) To create a table with a repeating row, for instance, you probably want an editable region in each table cell. For a text heading/paragraph combination, you want an editable region inside the heading and another inside the paragraph.
Select exactly the element(s) you want to repeat. It's a good idea to either use the Tag Selector or work in Code and Design view while doing this to make sure that you get exactly the right selectionthe tr tag for a repeating table row, the li tag for a repeating list element, and so on.
From the Template objects in the Insert bar, choose the Repeating Region object. When the dialog box opens, give your region a unique name, and click OK.

If you examine your document in Code view at this point, you'll see that Dreamweaver has added template code to indicate the beginning and end of the repeating region, as well as code for each editable region. Your code might look something like this:

 <ul>   <!-- TemplateBeginRepeat name="  gadget-list  " -->   <li><!-- TemplateBeginEditable name="  gadget-item  " -->  anything    goes here  <!-- TemplateEndEditable --></li>   <!-- TemplateEndRepeat --> </ul>

This example defines a repeating list item. You wouldn't want the repeating region code defined outside the ul tags, or you'd create multiple lists in the child pages instead of multiple list items in one list.

Using Repeating Regions in Child Pages

Using repeating regions in child pages is easy and fun. When you open a child page whose parent template contains a repeating region, and view it in Design view, you see a colored Repeat label with the name of the region, followed by a little set of control icons for adding, removing, and rearranging repeating entries (see Figure 20.10). To work with the repeating region, do the following:

Figure 20.10. Working with a repeating region in a child page.

Enter whatever content you like in the editable region(s) within the repeating region.
Add more repetitions by pressing the + button in the region control bar. Enter content into these editable regions as well.
If you end up with too many iterations, place the insertion point in the one you want to remove and press the - button in the region control bar.
To rearrange the iterations, place the insertion point in an item you want to move, and use the up and down icons in the control bar.

The code for the repeating region in the child page includes indications of where each iteration begins and ends:

 <ul>   <!-- InstanceBeginRepeat name="  gadget-list  " -->   <!-- InstanceBeginRepeatEntry -->   <li><!-- InstanceBeginEditable name="  gadget-item  " -->  Gadget  <!-- InstanceEndEditable --></li>   <!-- InstanceEndRepeatEntry -->   <!-- InstanceBeginRepeatEntry -->   <li><!-- InstanceBeginEditable name="  gadget-item  " -->  Doodad  <!-- InstanceEndEditable --></li>   <!-- InstanceEndRepeatEntry -->   <!-- InstanceEndRepeat --> </ul>

Repeating Tables

Probably the most common use of repeating regions in web pages is to build a table in which one or more rows repeats and every cell contains an editable region. Price lists, company directories, and a whole host of other layout tasks work very well with this kind of repeating table structure. And guess what? Dreamweaver provides you with a special object just for creating this structure.

To create a repeating table, open a template document and follow these steps:

Place the insertion point where you want the table with its repeating rows to be located.
From the Insert bar's category of Template objects, choose Repeating Table. The Insert Repeating Table dialog box appears, as shown in Figure 20.11, allowing you to specify the table's basic structure, as well as how many rows will repeat. To create a table that includes a header row and one repeating data row, for instance, you should create a two-row table in which the Starting Row and Ending Row of the repeating region are both set to 2.

Figure 20.11. Creating a simple repeating table in a template document.

Give the repeating region a unique and easy-to-remember name. Then click OK to close the dialog box and insert the table.
As soon as the table is inserted, you'll see that it contains a repeating region and, within that region, one editable region for each table cell. There's nothing magic about any of these regions. They're exactly the same as they would be if you had created them yourself using the Repeating Region and Editable Region objects. It's a good idea to rename the editable regions by selecting each and using the Property inspector. You can apply any formatting to the tableit's essentially a normal HTML table.

In the child pages based on this template, you use the repeating table exactly like you would use any repeating region.

Nested Templates

Nested templates let you define templates based on other templates, and then create child pages based on those templates. What?! It might sound daunting, but if you're willing to put a little extra thought into it, nested templates can make even extensive and complex websites easier to create and maintain. For instance, suppose you have an overall layout that you want all the pages in your site to have. That's your main template. But you also want some pages in your hierarchysecond- or third-level pages, perhapsto have additional page elements. Or you want an overall layout for all pages, but pages in different sections of your website should have additional requirements. You can define one main template for the entire site and then additional templates for each section, or for each level of the hierarchy, that are based on the main template.

Creating a Nested Template

To create a nested template, do the following:

Create the main template you want throughout your site, using any of the methods discussed earlier in this chapter. Add editable regions to this template as normal.
Create a new child page based on this template. It's easiest to do this by choosing File > New and selecting from the Templates tab of the New Document dialog box.
With the child page open, choose File > Save As Template, or, from the Insert bar's Template objects, choose the Nested Template object. Either of these actions opens the New Template dialog box. Give your template a unique name, and click OK.

Congratulations! You have created a template based on a template. But the fun doesn't really begin until you learn how to handle editable regions, attributes, and other template features across your multiple generations of templates.

You don't have to stop with one generation of nesting. It's possible to nest templates inside nested templates, as many generations deep as you like.

Editable Regions and Nested Templates

When you nest templates, editable regions always begin in the parent template. As shown in Figure 20.12, the parent template defines one or more editable regions. The nested template can then lock part of any of these regions, so the child page retains only part of it as editable. If the nested template does not specify which portion of the parent's editable region should be locked, the entire region is passed to the child page as editable.

Figure 20.12. How editable regions progress from parent to nested template and ultimately to child page.

When building the main template, you must keep in mind that you'll be defining editable regions for two purposes: some to be inherited by the nested template and locked there, and some to be passed down through the nested template to the child pages.

When building the nested template, keep in mind that if you do nothing to one of the parent template's editable regions, it is passed to the child page as an editable region. To lock part of one of the parent template's editable regions, define another editable region within it. For instance, a layout table in a parent template might have a row defined as an editable region; in the nested template, one of the cells in that row can be defined as an editable region, which automatically locks all other cells in the row. Figure 20.13 shows this happening in Design view. The code for the editable row looks like this:

Figure 20.13. A very simple nested template showing an editable region from the parent template (edit-row) containing an editable region defined in the nested template (edit-cell).

 <!-- InstanceBeginEditable name="edit-row" -->   <tr>     <td>this content will be locked in child pages</td>     <td><!-- TemplateBeginEditable name="edit-cell" -->this  content will be editable in child pages  <!-- TemplateEndEditable --></td>   </tr> <!-- InstanceEndEditable -->

The edit-row region is defined in the parent template; the edit-cell region is defined in the nested template.

Dreamweaver uses color-coded highlights to keep track of which editable regions have been defined where. By default, the labels for all editable regions defined in a parent template are aqua (#66CCCC); labels for editable regions defined in a nested template are gold (#FFCC33). If you don't like these colors, you can change them in the Preferences/Highlighting dialog box (select Edit > Preferences).

What if you want a child template to lock an entire editable region from the parent template instead of locking part of it by making another part editable? You can't do this, but you can create an empty editable region in the child template to accomplish your goal. In the nested template, place the insertion point anywhere in the parent's editable region, and create a new editable region. Then delete all contents from this editable region.

Template Parameters in Nested Templates

Optional regions, editable attributes, and any other template parameter that appears in the Template Properties dialog box can also be used with nested templates. As with editable regions, any template parameter defined in a parent template can be passed to nested templates to control, or can be passed directly to the child pages. Parameters defined in parent templates for control by child pages are called pass-through parameters , because they pass through the nested template.

To set up pass-through parameters in your nested template setup, do the following:

While creating the parent template, define an optional region, editable attribute, or other template parameter.
When working with the nested template, choose Modify > Template Properties to open the Template Properties dialog box. Parameters defined in the parent template appear here.
Select any parameter. At the bottom of the dialog box, select the option to Allow Nested Templates to Control This. The parameter's value is replaced with the pass-through indicator, as shown in Figure 20.14. Click OK to close the dialog box.

Figure 20.14. Defining a pass-through parameter in a nested template.

After you've defined the pass-through parameter, each child page you create based on the nested template can set the parameter independent of all other pages. Just open the child page and choose Modify > Template Properties. Select the parameter, and set its value.

Exercise 20.1. Creating a Template-Based Site

This exercise builds and formats a small website using basic and advanced template features. Before you start, download the chapter_20 folder from the book's website at www.peachpit.com to your hard drive. Define a site called Chapter 20, with this folder as the local root folder.

Start by opening the layout.html file and examining its contents. This file holds the layout you'll use for the site, including a layout table and navigation banner, and a link to a CSS style sheet (see Figure 20.15).

Figure 20.15. The layout for the TechnoDude website, as found in layout.html.

With layout.html open, choose Insert > Template Objects > Make Template. When the Template dialog box appears, name the template main . Without closing the file, examine the Templates category of the Assets panel; the main template should be there now. Also check out the Site panel. A Templates folder has been added to the site, containing a file called main.dwt . (If the folder doesn't show up, click the Refresh button in the Site panel toolbar.)
The template needs one editable region where the main page content will go. Place the insertion point in the central table cell, and choose Insert > Template Objects > New Editable Region. Name the region maincontent , as shown in Figure 20.16. Save the template file (select File > Save), and close it.

Figure 20.16. Adding the maincontent editable region to the main TechnoDude template.
Create a new home page based on this template. Choose File > New. When the New Document dialog box appears, bring the Templates tab to the front, choose the Chapter 20 site and the main template, and click OK to close the dialog box. A new untitled document, which is the child page of the main template, opens. Only the main-content area is editable. Select the placeholder text there and delete it. In its place, enter a heading and a bit of text formatted with the h1 and p tags. The style sheet attached to the template changes their appearance automatically because these tags have been redefined. Save the page as index.html , at the site's root level, and close it.

The subsidiary pages of the website already exist, but they're not formatted yet. Open nutrition/index.html and examine it. You'll see that it contains some headings and text, but nothing more. No styles or other formatting have been applied. With this file open, find the main template in the Assets panel, and drag its file icon to the Document window. A dialog box appears, asking you how to dispose of the page's existing content. Select the body content in the dialog box, and choose maincontent from the drop-down menu to put the content in that region (see Figure 20.17). Click OK to close the dialog box. The page has been formatted, and framework elements have been added! Save and close.

Figure 20.17. Applying the main template to the nutrition page in the TechnoDude website.

Make sure you're dragging the main template from the Assets panel and not the Site panel. If you drag from the Site panel to the Document window, it just opens the main.dwt file. If you drag from the Assets panel, it applies the template to the open document.

Repeat step 4 to apply the main template to the sartorials/index.html page. Before closing it, preview the page in a browser. The template formatting is present, and because the navigation banner and links are in the template, the three pages you just set up index.html, nutrition.html , and sartorials.html should successfully link to one another. (Don't worry about the tech support pages just yet. You're saving them for some special treatment.)
Navigation bars are always more user -friendly if they change to indicate which page is currently being displayed. When the nutrition page is open, the NUTRITION button at the top of the page should appear altered , along with the other buttons. The trick is, because the navigation buttons are in a locked part of the main template, they can't be changed except through template parameters and expressions. To accomplish this, you'll set up some editable attributes.

Open the main template (you can open it from the Assets panel or the Site window). Click the NUTRITION button, and choose Modify > Templates > Make Attribute Editable. The dialog box shown in Figure 20.18 appears. Choose Src as the attribute, and select the Make editable check box. Name the editable attribute nutrition_src . Set the attribute type to URL. Leave the default value at its current setting. When you're done, click OK to close the dialog box. In Design view, the image now shows up as a broken image. That's because, if you look at the Property Inspector, its source is set to an expression, @@( nutrition_src )@@and that can't be displayed in Design view!

Figure 20.18. Making an image source editable to customize the TechnoDude navigation bar.

Repeat this procedure with the other two buttons in the navigation banner, naming the attributes techsupport_src and sartorials_src . When you're done, save and close the template, allowing it to update child pages.

To make use of these editable attributes, open the nutrition page ( nutrition/index.html ). First, note that the images show up correctly! That's because the child page has placed the default values assigned in the template in the HTML code, replacing the expressions in the template. This happened when you updated the pages.

You want the NUTRITION button to display an alternative image. Choose Modify > Template Properties. The three source parameters are present. Select nutrition_src and change its URL to ../images/nutrition_down.gif . (This image was created for you in Fireworks.) Click OK to close the dialog box. The button is now orange! (See Figure 20.19.)

Figure 20.19. The TechnoDude navigation bar with a customized image source.

Open the sartorials page ( sartorials/index.html ) and repeat this procedure, setting the sartorials_src parameter to ../images/sartorials_down.gif . When you're done, preview in a browser to see the newly improved navigation bar in action. Again, don't worry about the tech support pages just yet.
Because there are several pages in the tech support section, it merits its own templateone that's based on the main template but that has some tech support-specific features as well. This will be a nested template!

Create a new file based on the main template (choose File > New, and use the New Document dialog box, as you did previously). With this new document open, choose Insert > Template Objects > Make Nested Template. Name the template techsupport . This template is now a child template of the main template.

Select Modify > Template Properties to set the techsupport_src parameter to ../images/techsupport_down.gif . All pages in this section should have the TECH SUPPORT button displayed in orange. When you're done, save and close.
The techsupport template needs a navigation bar in its left column, specifically for navigation among the tech support pages. But you can't put one there because there's no editable region for it in the main template. Remember, all editable regions must start in the parent template. Open the main template, and, in the left column, insert an editable region. Call this region navbar . After it's made, delete the placeholder text Dreamweaver put there. You don't want that text to appear in the nutrition and sartorials pages! For those pages, this side region will remain empty. When you're done, save and update, and close.

Open the techsupport template again. Place the insertion point inside the navbar region, and choose Insert > Images > Fireworks HTML. In the dialog box that appears, browse to the techsupport_menu.html page. This page contains a sliced image table made in Fireworks. It doesn't matter whether you delete the file after insertion. Click OK to close the dialog box and insert the small navigation bar (see Figure 20.20). You might get an error message, as Dreamweaver tells you the inserted code would require changing a locked region. Click OK to close the error message. The Fireworks HTML and JavaScript are inserted in the document, despite the message.

Figure 20.20. Inserting the tech support navigation bar into an editable region in the techsupport nested template.

In order to make sure the navigation bar is locked in pages based on this template, you'll need to add another editable region within the navbar region. Place the insertion point immediately following the table containing your navigation bar and insert an Editable Region object from the Insert bar. Call the region tech_navbar . Delete the placeholder contents Dreamweaver puts in the editable region, so it will automatically be empty in child pages.

Save (choosing to update any child pages) and close the template.
Apply the techsupport template to all pages within the techsupport folder, using the same method you used previously in this exercise. (If you're not a glutton for punishment , it's okay to focus on just a few of the pages. It's not really necessary for the exercise to set them all up.) While you're working, note that you can't select the new navigation bar. This area was made noneditable for all child pages when you inserted content into it in the techsupport template.

Working Smart: Using the Template Language

The code in templates might look like HTML comments, but that's just to fool browsers into ignoring it. This code is actually a scripting language (a small subset of JavaScript, in fact) that Dreamweaver uses to construct child pages from templates. If you want to become a true template power user, you should learn how to speak template.

Opening and Closing Tags

Templates and regions are defined with opening and closing tags that look like this (as defined in the template):

 <!-- TemplateBeginEditable name="doctitle" --> <!-- TemplateEndEditable -->

or this (as used in a child page):

 <!-- InstanceBeginEditable name="doctitle" --> <!-- InstanceEndEditable -->

These tags take a little more typing than your average HTML tag, but they follow the basic HTML syntax of <tag attribute="value"> , and they can contain simple scripting constructs such as conditionals and parameters. Table 20.1 lists the main tags used in defining template-based pages and their editable regions.

Table 20.1. Tag Pairs for Defining Templates and Regions

Tag Pair	Usage	Attributes
<!--InstanceBegin template="/Templates/ techsupport.dwt" codeOutsideHTMLIsLocked= "false" --> <!-- InstanceEnd -->	Surrounds the `html` element for a child page based on a template.	`template` : The root-relative URL of the DWT file this page is based on `codeOutsideHTMLIsLocked` : True or false, determining whether server-side code added outside the `html` tag is controlled by the template ( `true` ) or the child page ( `false` )
<!-- TemplateBeginEditable name="myStuff" --> <!-- TemplateEndEditable -->	Surrounds an editable region (in the template).	name: The name assigned to the region. Should be unique and easily identifiable.
<!-- InstanceBeginEditable name="myStuff" --> <!-- InstanceEndEditable -->	Surrounds an editable region (in the child page).

Parameters and Expressions

Template parameters work like variables in a scripting language. They're declared in the document head and can be used anywhere in the document. Dreamweaver uses them to set optional regions, editable attributes, and other template constructs, but you can use them for much more than this if you know the rules.

Defining Template Parameters

Parameters are defined by a statement in the template head, like this:

 <!-- TemplateParam name="myParameter" type="color" value="red" -->

In the template's child page, the definition statement changes to look like this:

 <!-- InstanceParam name="myParameter" type="color" value="red" -->

Like variables in a scripting language, template parameters can be of various data types, for storing different kinds of information. These types are Boolean (true/false), text, number, color, and URL. The parameter's name is how it can be referred to throughout the template; its value is the information stored in it. The general idea is to define a parameter in the template document and allow each child page to assign its own unique value.

Using Parameters in Expressions

After a parameter has been defined, it can be called on anywhere in the document by using an expression, like this:

 @@(myParameter)@@

It works like this: Anywhere in the template document that the expression is present, the child page substitutes the parameter's value. So if the template page includes the following expression in its code:

 <td bgcolor="@@(myParameter)@@">

a child page has code like this in its place:

 <td bgcolor="red">

Whatever color is specified in the child page's parameter definition is used here.

For this expression syntax to work properly, your parameter names must not include spaces or other special characters .

Dreamweaver automatically creates parameters and expressions every time you define an editable attribute in your template. But you can also create your own parameters, for use any way you like, using this same syntax. Imagine, for instance, that you have one template governing product display pages for several categories of products. You could define a category parameter by entering the following code in the template head:

 <!-- TemplateParam name="category" type="text" value="default"  -->

You could cause that category name to appear at the top of each page by entering an expression like this:

 <h1>@@(category)@@</h1>

You have to enter the parameter definition by hand using Code view. But you can create the expression in Design view by just typing in @@ (category) @@ and formatting it. When Dreamweaver notices that you've entered an expression here, it displays an expression placeholder where you typed your text, as shown in Figure 20.21.

Figure 20.21. A template parameter as seen in Design view and the Property Inspector.

When you open a child page based on this template, you can change the parameter's value by manually changing the definition statement in Code view or by choosing Modify > Template Properties. The category parameter appears in the dialog box, ready to accept a new value.

Passthrough Parameters

When you're working with nested templates, and you want to define a parameter in the main template that will be controllable by child pages (and not by the nested template), do so by opening the child template and adding a passthrough attribute to the parameter definition with a value of true :

 <!-- TemplateParam name="myParameter" type="text"  value="default"  passthrough="true"  -->

When using a passthrough parameter in an expression in the child template, use this syntax:

 @@@(myParameter)@@@

Any time you tinker with code, there's the possibility that things will go wrong (typos, syntax goofs, and so on). To make sure that your code is error-free after manual editing, choose Modify > Templates > Check Template Syntax. You'll get either an error message or a clean bill of coding health.

Conditional Statements and Optional Regions

In scripting, a conditional statement indicates that something should happen only if a certain condition is met. Conditional statements generally involve testing the value of variables or parameters. Every time you work with optional regions in your Dreamweaver templates, you're working with conditional statements. As soon as you know your way around conditional syntax in template language, you can start creating advanced optional regions.

Conditional Syntax

The syntax for a conditional statement in template language looks like this:

 <!-- TemplateBeginIf cond="  [true or false code]  " -->

The cond attribute must have as its value an expression that evaluates to true or false. For instance, if the head section of the template defines a parameter like this:

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

the conditional statement can test this parameter:

 <!-- TemplateBeginIf cond="myParameter" -->

If the head section defines a parameter that isn't itself a Boolean, the conditional statement can use various comparison operators to determine if the optional content should display:

 <!-- TemplateParam name="myParameter" type="text" value="HATS" --> <!-- TemplateBeginIf cond="myParameter=='HATS'" -->

Table 20.2 lists common comparison operators that can be used in conditional statements.

Table 20.2. Comparison Operators for Use in Conditional Statements

Operator	Description	Examples
==	Equality	`myText == 'HATS'` myNumber == 3
!=	Inequality	myText !='HATS'
>	Greater than	myNumber > 3
>=	Greater than or equal to	myNumber >= 3
<	Less than	myNumber < 10
<=	Less than or equal to	myNumber <= 10
&&	Two expressions, both of which are true	myNumber > 3 && myNumber < 10
	Two expressions, at least one of which is true	`myText == 'HATS'` `myText == 'SHOES'`

The Code Behind Optional Regions

As discussed earlier in the chapter, when you create a basic optional region using the Optional Region object, Dreamweaver defines a template parameter of the Boolean type and then uses a conditional statement that tests this parameter to determine whether the optional region should show:

 <!-- TemplateParam name="myBoolean" type="boolean" value=  "true" --> <!-- TemplateBeginIf cond="myBoolean" -->

But you can create more advanced optional regions using other kinds of parameters and conditionals:

 <!-- TemplateParam name="category" type="text" value="HATS" --> <!-- TemplateBeginIf cond="category=='HATS'" -->

You'd have to work in Code view to define the parameter shown here. But you can create the optional region without working in Code view by using the advanced settings for the Optional Region object. Do it this way:

In Design view, select whatever page content should be part of the optional region.
From the Insert bar, choose the Optional Region object.
When the dialog box opens, bring the Advanced tab to the front, and choose Enter expression. For the expression, type the conditional statement you want to use (see Figure 20.22):

Figure 20.22. Entering an expression to determine if an optional region should display.

 category=='JEWELRY'

Click OK to close the dialog box.

MultipleIf Statements

Standard conditionals lend themselves to things that either are or aren't true (is the category equal to JEWELRY?). But sometimes, you might have a parameter that can have any of several values, and you want to display different page content for each value (if the category is JEWELRY, do this; if the category is HATS, do this; and so on). For such occasions, the template language has a special kind of conditional called a MultipleIf statement. The syntax looks like this:

 <!-- TemplateBeginMultipleIf -->   <!-- TemplateBeginIfClause cond="  [test 1]  " -->     optional content 1   <!-- TemplateEndIfClause -->   <!-- TemplateBeginIfClause cond="  [test 2]  " -->     optional content 2   <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf -->

For the first conditional, you might enter category=='HATS' and display a statement about hats or a picture of a hat as your optional content. For the second, you might enter category=='SHOES' and display some comparable shoe- related content. You can add as many conditional clauses as you like, each with its own set of optional content. The only downside is that the entire code must be entered in Code view because Dreamweaver doesn't provide an object for it.

Shorthand Conditional Code

You can also use conditional statements within editable attributes by using abbreviated one-line syntax (just like that found in JavaScript):

  condition ? true  :  false

For instance, if a sale is going on, you might want the prices to appear highlighted in yellow. You could create a template parameter like this:

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

You could create the table cell that holds each price like this:

 <td bgcolor="@@(sale ? 'red' : 'white')@@">

You can enter the expression in Code view by typing the code shown here, or in Design view by entering the expression only (starting and ending with @@ ) in the appropriate input field of the Property Inspector.

Advanced Coding for Repeating Regions

When you're working with repeating regions, your expressions can take advantage of the template language's _repeat object and its properties to create some sophisticated results. Table 20.3 lists _repeat properties and the syntax for accessing them.

Table 20.3. Properties of the _repeat Object for Working with Repeating Regions in Templates

Property	Value Type	Description
`_index`	Integer	The numerical index of the current iteration, starting at 0
`_numRows`	Integer	The total number of iterations in this child page
`_isFirst`	Boolean	Specifies whether the current iteration is the first
`_isLast`	Boolean	Specifies whether the current iteration is the last
`_prevRecord`	Object	The `_repeat` object for the previous iteration (or an error if there is none)
`_nextRecord`	Object	The `_repeat` object for the next iteration (or an error if there is none)
`_parent`	Object	The `_repeat` object for the enclosing repeating region (use this only when one repeating region is nested inside another)

What can you do with the _repeat object properties? By using them in expressions, you can construct conditional statements to hide or show optional content. For instance, what if you have a repeating region that consists of a subheading and paragraph, and you want to insert a horizontal rule between each subheading-paragraph combination, but no rule after the last one? To accomplish this, you put an hr tag after each repetition except the last one. You need a conditional statement that tests each time the region repeats, to see if this is the last iterationand if it is, that inserts an hr tag. The code for your repeating region would look like this:

 <!-- TemplateBeginRepeat name="product_list" -->   <h2> <!-- TemplateBeginEditable name="product_name" --> Product name goes here <!-- TemplateEndEditable -->   </h2>   <p> <!-- TemplateBeginEditable name="product_desc" --> Product description goes here <!-- TemplateEndEditable -->   </p>  <!-- TemplateBeginIf cond="!(_repeat._isLast)" -->   <hr>   <!-- TemplateEndIf -->  <!-- TemplateEndRepeat -->

To create this effect in Design view, you can insert a Repeating Region object, and then, within the repeating area, insert an Optional Region object. In the Optional Region dialog box, bring the Advanced tab to the front, choose Enter expression, and type !(_repeat._isLast) in the input field. This expression uses the not operator (!) to ask if the current iteration is not the last one.

If you want your repeating entries to display numbers (like a numbered list), you can create an expression that displays the _index property:

 @@(_repeat._index + 1)@@

(You add 1 to the _index each time because computer index values start from 0, and it looks a bit strange to have your numbering begin with 0.)

Finally, if you're using a table with repeating rows, you might want every other row in the table to be a different color. Enter the following code for the tr tag:

 <tr bgcolor="@@(_repeat._index%2 ? 'orange' : 'white')@@">

This uses the modulo operator to test whether dividing the _index property by 2 will leave a remainder. If there is a remainder, the row is an odd-numbered row, and it is given an orange background. If not, the row is even-numbered and is given a white background.

If you've worked with data-driven web pages, using the Dreamweaver template language probably feels a lot like constructing pages in ColdFusion or one of the other application server languages. Dreamweaver template language lets you accomplish many of the same tasks as a server-side languageusing page-specific editable regions, repeating regions, optional regions for conditional content, and parameters to construct individual pages on-the-fly from a scripted originalbut without any server involvement. As you'll see in Chapter 23, "Further Dynamic Techniques," templates can also be used in conjunction with data-driven pages.

Snippetizing Your Template Code

Is all this typing and memorizing syntax getting you down? If you hand-code templates frequently, it's a good idea to create snippets for the items you type most often. You can create a snippet folder specifically for template snippets and store block and wrap snippets in it. Figure 20.23 shows a few template snippets being created.

Figure 20.23. Creating a block snippet and a wrap snippet for different pieces of template code.

See the section "Code Snippets" in Chapter 27, "Writing Code in Dreamweaver," for more on this.

Exercise 20.2. Refining the Template-Based Site

This exercise builds on the template site you started in Exercise 20.1, using optional regions and manually entered template parameters and expressions to construct a breadcrumb navigation system.

Start by opening the main template. Insert a new row in the layout table, directly above the row containing the maincontent and navbar editable regions. Using the Tag Selector or the CSS Styles panel, assign the breadcrumbs custom class to the td tag for this table cell (see Figure 20.24). Enter the following text in this row:

Figure 20.24. Creating a breadcrumb navigation row in the TechnoDude main template.

TechnoDude > Section > Page

Select the word TechnoDude, and use the Property Inspector to link it to the main index.html page, at the site's root level. This breadcrumb leads home.

Select the word Section, and use the Property Inspector to link it to #. You'll let child pages change this property later.
You want each child page of this template to be able to specify its own section and page. To do this, you need to define template parameters. Go to Code view and find the end of the head section, where several template parameters have already been defined (the src parameters for the editable attributes in the navigation banner). After the last of these parameters, create a new line and enter the following:
```
    
```
You can type this from scratch or copy and paste one of the other definitions and change the details as needed.
Now you want to display these parameters in the breadcrumbs bar. Go back to Design view, and select the word Section in the breadcrumbs. In its place, type the following:
```
  @@(section)@@  
```
Select the word Page in the breadcrumbs. In its place, type the following:
```
  @@(page)@@  
```
Select the a tag that surrounds the Section breadcrumb. (It's easiest to use the Tag Selector for this.) In the Property Inspector, in the Link field, enter the following:
```
  @@(section_url)@@  
```
Guess what you just did? You manually made the href attribute of the a tag editable. You could have accomplished the same thing using the Make Attribute Editable command.

Before proceeding, choose Modify > Templates > Check Template Syntax, just to make sure you haven't got any typos in there. If Dreamweaver gives you an error message, troubleshoot your parameter and expression code and repeat the syntax check until your code is error-free.

When Dreamweaver notices that these are template expressions, it displays an expression icon in Design view, as shown in Figure 20.25. If this doesn't happen right away, save the template, close it, and reopen it.

Figure 20.25. The breadcrumb bar with parameter expressions in place.
Open the techsupport template. The breadcrumbs are in place, but with their default parameter values:

TechnoDude > sectiondefault > pagedefault

That's because these parameters haven't been set for this child yet! Choose Modify > Template Properties, and in the dialog box that appears, select the section parameter. (See how it appears here, even though you entered the parameter by hand? All correctly formatted parameters show up here.) Set the value for this parameter to Tech Support.

Select the section_url parameter, and set its value to ./techsupport/index.html .

What's the meaning of this URL? It's the relative path from within the Templates folder to the tech support main page. Remember, all URLs must start out relative to the template document itself. Dreamweaver takes care of updating the URL when the template is applied to a child page. Don't close the dialog box yet!
You don't want to set the page parameter here; you want the children of this template to set the parameter, so it needs to pass through this child template to its child pages. To accomplish this, select the page parameter and select Allow nested templates to control this. Note that the value of the parameter changes to passthrough , as shown in Figure 20.26.

Figure 20.26. Turning the page parameter into a passthrough parameter.

Click OK to close the dialog box. Check your document in Code view, and you'll see that a passthrough attribute has been added to the parameter definition (in the head). The page breadcrumb now sports an expression of @@@(page)@@@ . The triple at symbol on either side marks it as a parameter that has been passed down from the parent template.

When you're done, save the template and close it.
Open one of the child pages based on this template. Start with techsupport/forum.html . When this page opens, the section breadcrumb says Tech Support (this was set in the template). The page breadcrumb is still an expression. Use the Template Properties dialog box to set the page parameter to Forum . Save the document and close it.

Repeat this procedure for all other pages in the techsupport folder, except the index file. You'll deal with that next.
So far, the breadcrumb system isn't perfect, because it always displays some sort of page breadcrumb, even if that's not appropriate. For the nutrition, sartorials, and techsupport index pages, there shouldn't be a page indicator, just a section. It's time for an optional region!

Open the main template and select the page breadcrumb, including the > symbol that precedes it. You don't want any of this content to show if there is no need for a page breadcrumb. Choose Insert > Template Objects > Optional Region. Name the region pagecrumb , and set it to hide by default (see Figure 20.27). Most of the sections in the current site don't need this item. Save the template and close it.

Figure 20.27. Setting up an optional region for the page portion of the breadcrumb bar.
Open the nutrition page. The page breadcrumb doesn't show here! That's because it's hidden by default. This page doesn't need any updating, so you can close it.
Open the techsupport template. You need to pass the parameter for hiding and showing the pagecrumb region down to the child pages. Open the Template Properties dialog box, select pagecrumb, and select Allow Nested Templates to Control. The parameter value changes to passthrough . Click OK to close the dialog box. Then save and close the dialog box.
Open the techsupport/forum.html page. Open the Template Properties dialog box, select the pagecrumb parameter, and set it to show . Repeat this procedure for all pages in the techsupport folder except the index page.
Try previewing the site in a browser, and see how the breadcrumbs behave from page to page. They're almost perfect! One little niggle is that, if there is no page breadcrumb, the section breadcrumb doesn't really need to be a link because the main section page must appear. This is an opportunity for a more advanced optional regionone that hides and shows the opening and closing a tag surrounding the section crumb based on the pagecrumb parameter.
Open the main template again. Select the section breadcrumb and go to Code view. Edit the code for the breadcrumb bar so that it looks like this (new code is shown in bold, and line breaks have been added to make the code more readable):
```
 <a href="../index.html">TechnoDude</a> &gt;     <a href="@@(section_url)@@">   @@(section)@@    </a>    &gt;  @@(page)@@   
```
What's happening here? You're adding two optional regionsone around the opening a tag and one around its closing partner. Both are based on the pagecrumb parameter.
Before finishing up, check your syntax (select Modify > Templates > Check Template Syntax) and troubleshoot until you receive no error messages. Then preview the entire site in a browser. Congratulations! Some fancy template work is happening here.