Creating a Dynamic Web Template

Creating a Dynamic Web Template involves three steps: Build the template itself, define the editable regions inside the template, and then save the template. The following sections walk you through each part of the process.

Building the template

To create a Dynamic Web Template, take a look at your site's design and identify the elements that remain the same in several pages in your site. These elements are the ones you want to place inside the Dynamic Web Template. Figure 11-1 illustrates elements that a typical Dynamic Web Template might contain.

Figure 11-1: The beginning of a typical Dynamic Web Template.

To build a Dynamic Web Template, follow these steps:

1. Create a new, blank Web page.

   Create the page as though you're creating a regular page.

2. In the new page, add the elements that you want to appear inside your Dynamic Web Template.

   For example, insert the logo, page banner, navigation, copyright information-anything you want to appear in each of your content pages later on.

   You can create styles for positioning and formatting the various elements right in the template or attach an external style sheet, just as with any other Web page.

3. Save the page as a Dynamic Web Template by choosing File Save As.

   The Save As dialog box appears.

4. In the dialog box's Save As Type list box, choose Dynamic Web Template.

5. In the dialog box's File Name list box, enter a one-word filename.

   Expression Web automatically adds the .dwt filename extension to the end of the filename after you save the page.

6. In the dialog box, click the Save button.

   The Save As dialog box closes, and Expression Web saves the Dynamic Web Template.

Tip 

If you already have a page in your site that contains all the elements that you want to appear inside your Dynamic Web Template, a quicker course of action may be to create a new page based on that existing page, and, in that new page, to delete whatever content you don't want to appear inside the template. We explain in Chapter 2 how to create a new page based on an existing page.

Defining editable regions inside the template

After you build your Dynamic Web Template, you must tell Expression Web which areas inside the template are editable. That is, you must define spaces in the template into which you (or other site authors) can later plop content after the template is attached to a regular Web page.

To define the Dynamic Web Template's editable regions, follow these steps:

1. With the Dynamic Web Template open in Design view, place the cursor in the page where you want the editable region to appear.

2. Right-click the page, and from the pop-up menu that appears, choose Manage Editable Regions.

   The Editable Regions dialog box appears (see Figure 11-2).

   
   Figure 11-2: The Editable Regions dialog box.

3. In the dialog box's Region Name text box, enter an identifying label for that region.

   Tip 

   Give the region a logical name that prompts the page's author to fill the region with the appropriate content. Good examples are Page Content and Product Image.

4. In the dialog box, click the Add button.

   The region name appears inside the Other Regions on This Page box. The region also appears in the template as a rectangular box with a small name label attached to its upper-left corner and a text placeholder inside it.

5. In the dialog box, click the Close button.

   The dialog box closes. Figure 11-3 shows what a Dynamic Web Template with one editable region named Page Content looks like.

Figure 11-3: Adding an editable region to a Dynamic Web Template.

Insert as many editable regions as you like into your Dynamic Web Template. To add another editable region, click elsewhere in the page and follow the steps in this section again.

REMEMBER 

If you're not sure where the editable region should be placed, just remember that these areas eventually become the places where you add new stuff to a page formatted with this template. Place the editable region wherever you want the unique content to appear. It's as easy as that.

Tip 

Editable regions contain a basic text placeholder: the region name inside parentheses (refer to Figure 11-3). You can replace the placeholder with standard content (so that the page looks good whether or not it's edited), or you can add your own placeholder text to indicate to page authors what type of content you expect. Chapter 2 offers tips about placeholder text you might put into a template.

Saving the template

After you add editable regions to your Dynamic Web Template, save the page as you normally would (press Ctrl+S). If you created the Dynamic Web Template by using an existing Web page, when you attempt to save the page, Expression Web pops open a dialog box reminding you that you're saving the page as a Dynamic Web Template. That's okay: Just click OK to close the dialog box, and then proceed as usual to save the page.

After you save the template, you're not stuck with it-you can edit Dynamic Web Templates just as you edit regular Web pages. Just make whatever changes you want, and then save the file again.

GLANCE AT THE CODE 

Take a look at the code for editable regions in a Dynamic Web Template:

 <!-- #BeginEditable "Page%20Content" -->(Page Content)<!--           #EndEditable --> 

When you define a region in your Web page as editable, Expression Web surrounds it with HTML comments that show where the editable region begins and ends. In this case, the comment <!-- #BeginEditable “Page%20Content” --> defines the start of the editable region Page Content, and the comment <!-- #EndEditable --> defines where it stops. The placeholder text (Page Content) appears on the page in the editable region. (%20 indicates a space between words, in this case, between Page and Content).

Comments are special HTML tags that you can insert anywhere in your code as notes to yourself or other authors; Web browsers know not to display the comments on the screen. We talk more about comments and how to insert your own comments in Chapter 14.