Creating Dynamic Web Templates

Dynamic Web Templates use editable regions to separate areas that can be edited from areas that are protected. Any content outside of an editable region is protected and cannot be edited. An editable region can be located anywhere on a page, but for the most control over the location of an editable region, you can place it in a table cell.

FrontPage will allow you to save a Dynamic Web Template before any editable regions are added to it, but FrontPage won't let you attach that template to a page until you've created at least one editable region (see Figure 20.1).

Figure 20.1. Before applying a Dynamic Web Template to a page, you must first add one or more editable regions to the Dynamic Web Template.

Design a Layout for the Dynamic Web Template

You begin by creating the layout for your Dynamic Web Template inside of a normal Web page. Your Dynamic Web Template can be formatted using any page elements you choose. In this example, you will use a table to format the template:

1. Create a new blank page and add a table to it.

2. Give the table three columns and two rows.

3. Set the border to 0, but leave all other settings at their default values.

4. Drag the width of the columns so that the center column is wider than the left or right column.

5. Add a graphic of your choice to the top left cell of the table as shown in Figure 20.2.

   Figure 20.2. This table will be used as the basis for your Dynamic Web Template.

   

You'll use this simple table as the layout for a Dynamic Web Template you'll use as you read this chapter.

As shown in Figure 20.3, you are going to allow people editing your site to edit the left column, but you're also going to have some navigation elements there. Therefore, you'll only allow people to edit below the existing navigation buttons. You will also allow people to place main content into the center column, but you'll have some copyright text at the bottom of the column that no one will be able to modify. Finally, you'll allow developers to add content freely into the right column.

Figure 20.3. This page will be saved as a Dynamic Web Template and will control where content can be edited.

Adding Static Elements

To implement this Dynamic Web Template, you will need to enter three editable regions, but first you'll need to add the content that you want to remain static and uneditable. Click inside the left column and add a few Interactive Buttons for your navigation. Press Enter after each button so that each button is on its own line, as shown in Figure 20.4.

Figure 20.4. These Interactive Buttons will be locked inside of an editable region.

Click inside the center column and enter some copyright information. This text will also remain locked when editing this template. Anything inserted at this point is outside of an editable region and will be locked when the Dynamic Web Template is attached to a page.

Creating Editable Regions

Before you create editable regions in the Dynamic Web Template, first save the template.

1. Select File, Save As to display the Save As dialog box.

2. In the Save As Type dropdown, select Dynamic Web Template.

3. Name the Dynamic Web Template Site_Template.dwt and click Save.

4. In the Save Embedded Files dialog box, click OK to accept the default.

5. Right-click the page and select Manage Editable Regions from the menu to display the Editable Regions dialog box as shown in Figure 20.5.

   Figure 20.5. The Editable Regions dialog box allows you to insert, remove, and go to editable regions on your page.

   

6. Enter MainContent in the Region name box.

7. Click Add to add this editable region to the template.

8. Click Close to close the Editable Regions dialog.

9. Place the insertion point inside the left cell below the Interactive buttons.

10. Right-click and select Manage Editable Regions from the menu.

11. Enter LeftContent in the Region name box.

12. Click Add to add the editable region to the template.

13. Click Close to close the Editable Regions dialog.

14. Place the insertion point inside the right cell underneath the colored top border.

15. Right-click and select Manage Editable Regions from the menu.

16. Enter RightContent in the Region name box.

17. Click Add to add the editable region to the template.

18. Click Close to close the Editable Regions dialog.

19. Save the page.

You now have three editable regions in the template. You might have noticed that FrontPage had already created one editable region for this page called doctitle. The doctitle editable region allows developers to change the title of pages to which this Dynamic Web Template is attached.

If you remove the doctitle editable region and don't know how to get it back, or if your page doesn't have a doctitle editable region, see "Developers Cannot Change the Title of Pages" in the "Troubleshooting" section of this chapter.

The borders of the editable regions are indicated by an orange line around them. After you attach this Dynamic Web Template to a Web page, content can only be added inside these editable regions. Anything outside the editable regions will be protected.

TIP

You can also make a section of a paragraph an editable region. For example, you can make the year in your copyright statement an editable region so that it can be changed each year while the rest of the copyright statement stays protected.

The completed Dynamic Web Template is shown in Figure 20.6. Now that you've created a Dynamic Web Template, you are ready to attach it to a Web page.

Figure 20.6. A completed Dynamic Web Template ready to be saved and attached to a page.