Dreamweaver CS6: The Missing Manual

Template Tutorial

In this tutorial, you’ll create a template for the Cafe Soylent Green website. Then you’ll build a page based on that template and enjoy an easy site-wide update courtesy of Dreamweaver’s templates feature.

Note

You need to download the tutorial files from www.sawmac.com to complete this tutorial. See the Note on Note for more details.

Once you download the tutorial files and open Dreamweaver, set up a new site as described in Setting Up a Site on page 40; when you do, name the site Templates, and then select the Chapter19 folder (inside the MM_DWCS6 folder). (Here’s how you set up a site in a nutshell: Choose Site→New Site. In the Site Setup window, type Templates into the Site Name field, click the folder icon next to the Local Site Folder field, navigate to and select the Chapter19 folder, and then click Choose or Select. Finally, click OK.)

Creating a Template

1. Open the Files panel by pressing the F8 key (Shift-⌘-F).

   Of course, if it was already open, you just closed it. Press F8 (Shift-⌘-F) again.

2. In the Files panel, find and double-click the page design.html.

   It’s usually easier to create a template from an existing web page rather than from scratch, which you then save as a template. For the purpose of getting to bed before midnight tonight, pretend that you just designed this beautiful page.

3. Choose File→Save As Template.

   The Save As Template dialog box opens (see Figure 19-17).

   Figure 19-17. The first step in creating a template from a regular web page is to choose ...