Dynamic Templates

[ LiB ]

Dreamweaver templates can also be used with dynamic pages. This lets you create an overall look for the site using templates and still dynamically generate individual pages.

This discussion assumes that you're familiar with template basics. If you're not, check out Chapter 20, "Site-Wide Content with Templates and Libraries."

Creating Dynamic Templates

To create a dynamic template, choose File > New. In the New Document dialog box, shown in Figure 23.1, choose Template page and any of the dynamic document types listed. What's the difference between a dynamic and a normal HTML template? If you're using a server model that requires any directives to be added to the top of the page (such as the language declaration in ASP or ASP.NET), the code is added for you. Dreamweaver also saves dynamic template files with two file extensionssuch as main.cfm.dwt to indicate their status.

Figure 23.1. Creating a new dynamic template from the New Document dialog box.

You can also create a dynamic template by opening an existing dynamic page and choosing File > Save as Template.

How Dynamic Templates Work

When a page is generated from a template, all areas are locked except for editable regions that have been specifically defined. Dynamic pages usually include server-side content that's defined outside the html tags. To accommodate this code, Dreamweaver templates consider the area outside the html tags to be editable by child pages. You can tell that this is happening by looking at the head area of any template child page, where you'll find this statement immediately following the html tag:

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

This means that you can add recordsets and other server-side instructions to documents based on templates.

You can still add server-side instructions to the template page itself, but if any code is placed outside the HTML tag, it is treated just like content in any editable region: It isn't copied to existing child pages, and although it will be added to any new child pages created from now on, those pages can overwrite it. Dreamweaver warns you that this will happen, as shown in Figure 23.2.

Figure 23.2. Dreamweaver warns you if you add code to a template that must go outside the HTML tags.

If you want to keep the area outside the HTML tag lockedwhich means you want all child pages to use the same recordsets that the template usesyou can do so. By default, template files don't include a code-locking statement (this statement is added to the child pages only as they're created). But you can add one. In the template file, switch to Code view, and type the following code into the head section:

 <!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

Exercise 23.1. Creating a Dynamic Site Based on Templates

In this chapter's exercises, you'll work on an alternative version of the Antiques Barn site you worked with in the previous chapter. You don't need to have done any of those exercises to do these. But you do need to set up your workstation for dynamic development, using ColdFusion, PHP, or ASP.NET. You need to install the more_antiques database, in MySQL or Access format (it's in the chapter_23 folder on the book's website at www.peachpit.com), and, depending on your technology choice, you might need to define a driver. Read the instructions in Chapter 21, "Building Dynamic Sites with Dreamweaver," if you need refreshing on this.

Before beginning the exercise, from within the chapter_23 folder on the book's website, find the folder that matches your server model and language. Copy that folder to your hard drive, and define a site called Chapter 23, using it as the local root folder. Also set up a testing server for the site. You also must define a connection to the more_antiques database.

See Chapter 21 for a full discussion of setting up the testing server and defining a database connection.

Start by opening the layout file ( layout.cfm, layout.php, layout.aspx ). This file contains the framework elements that will be the same throughout the site. Choose File > Save as Template, or, from the Insert bar (Common), choose the Make Template object. When the dialog box appears, name your template main , and click Save. When asked to update links, click Yes.

When you've done that, examine the title bar of the Document window. Note that the template's name includes both the file extension for your server model and the .dwt extension.
Select the text in the central area of the page. Delete it and insert an editable region there called maincontent . (Use the Editable Region object from the Template objects in the Common Insert bar, or choose Insert > Template Objects > Editable Region).
Save and close the template.
Open the catalog page ( catalog.cfm and so on), and apply the main template to the page (drag the main template from the Assets panel to the Document window, and put all body contents in the maincontent region, or whatever method you prefer for applying templates).

This is your master page. The design framework is now in place, including placeholders for the dynamic elements.
Using the Bindings panel, create a recordset for this page. From the stockitems table, collect id, itemname, description, price , and basename , as shown in Figure 23.3.

Figure 23.3. Creating the catalog page recordset for the Antiques Barn catalog.
Substitute dynamic text for the itemname, description, and price placeholders.

Delete the image, and replace it by inserting a dynamic image. Do this by using the Image object and, when the dialog box opens, clicking the Data Sources button.

When the Data Source dialog box opens, you'll notice that it has no field specifying the image file. You'll use basename instead. The basename system works like this: Each antique has two images, one large and one small. The bookcase , for example, has bookcase.jpg and bookcase_sm.jpg . The basename for the bookcase is bookcase . You can construct the image paths for both images from this basename. (See the following sidebar for more information on the more_antiques database.)

In the Data Source dialog box, choose basename. When the code appears at the bottom of the dialog box, place the insertion point before the code, and type images /. Then place the insertion point after the code and type _ sm.jpg . You're creating a file path like this:

 images/  bookcase  _sm.jpg

but substituting the basename for the central portion of the address.

When you're done constructing the file path, click OK as many times as you need to to close all the dialog boxes.

This method of workingusing a basename to generate image pathsworks only if the image files and database fields are set up this way. Otherwise, thumbnail and full-size images are specified in separate database fields. For creating catalog pages, either method works.

Select the table containing your dynamic elements, and turn it into a repeating region by choosing the Repeated Region object from the Insert bar. Choose to display all records so that you don't have to bother with recordset paging for this exercise. Figure 23.4 shows what the finished page should look like.

Figure 23.4. The finished Antiques Barn catalog page as it appears in the browser.

Save this file! You'll need it for another exercise later in this chapter.

What's in the more_antiques Database?

The database used for the exercises in this chapter is a more sophisticated version of the antiques database used in the previous chapters. It contains more interrelated tables to create more of a real-world experience working with fully functional databases. Figure 23.5 shows the table structure as it appears in the Microsoft Access interface, with primary keys and table relationships diagrammed.

Figure 23.5. The table structure of the more_antiques database.