Section 17.2. Creating a Template

17.2. Creating a Template

The first step in creating a template requires building a basic Web page and telling Dreamweaver you'd like to use it as a template. You can 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 to it.

17.2.1. Turning a Web Page into a Template

The easiest way to create a template is simply 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 the current local site, you may run into problems with links and paths to images, as described in a moment.

Once you've opened the Web page, just choose File Save As Template or, on the Common tab of the Insert bar (see Figure 17-2), click the Templates button and then select Make Template from the menu. In the Save As Template window (Figure 17-3), 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 17-2. The Templates menu on the Common tab of the Insert bar 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 defined (see Chapter 13 for a discussion of local sites), but be careful with this option. If your page contains images and links and you save it as a template for another local site, Dreamweaver doesn't copy the images from the first site folder into the other one. As a result, the paths to the image files and links don't work correctly.If you must use a page from one site as a template for another, copy the Web page and graphics into the new site's root folder, open the page from there, and then create a template as described here.

---

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

Dreamweaver 8 adds a Description field for adding a brief note describing the template. This description appears when you're selecting a template as the basis for a new page you're creating. The description is very useful when other people are building 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, 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, and all the images on the page appear as broken-image icons.

---

Note: Avoid double hyphens in the names of your templatesfor example, "Store -- Product." Since Dreamweaver uses HTML comments like this <!-- --> (see the box on Section 17.3.1) to identify what template was used on a particular page, the extra hyphens trip up the Firefox Web browser, which mistakes them for other HTML comments.

---

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, an Active Server Page template may have a name like maintemplate.dwt.asp .)

17.2.2. 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 clicking the Template assets icon (see Figure 17-4). Then click the New Template button at the bottom of the Assets panel. Once Dreamweaver adds a new, untitled template to the list, type a new name for it. Something descriptive like "press release or "employee page" helps you keep track of your templates.

Figure 17-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. (In general, Dreamweaver does a very good job of keeping the list up to date, so you'll rarely need 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.

After you've created a blank template for the site, you can 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.