Templates - Dreamweaver CS5: The Missing Manual

by David Sawyer McFarland

Chapter 20. Templates

Some web designers handcraft their sites with loving care, changing layouts, colors, fonts, banners, and navigation page by page. But that approach isn't always practical—or desirable. Consistency is a good thing. Web pages that look and act similarly reassure visitors; they can concentrate on each page's unique content when the navigation bar and left sidebar stay the same. But even more important, a handcrafted approach to web design is often unrealistic when you need to crank out content on a deadline.

Dreamweaver CS5: The Missing Manual book cover

This excerpt is from Dreamweaver CS5: The Missing Manual.

This Missing Manual helps you quickly and painlessly master the latest version of this industry-standard web design and management program. Perfect for beginners who need step-by-step guidance and for longtime Dreamweaver masters who need a handy reference, the 7th edition of this bestselling Missing Manual offers jargon-free language and clear descriptions for designing, organizing, building, and deploying websites. It's the ultimate atlas for Dreamweaver CS5.

buy button

That's where templates come in. Frequently, the underlying design of many website pages is identical (see Figure 20.1, “These three web pages are part of a section of a website dedicated to answering frequently asked questions. The pages each provide the answer to a different question, but are otherwise identical, sharing the same banner, navigation buttons, sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's greatest timesaving features—Templates—which help you quickly build similar-looking pages, and make updating page designs a snap.”). An employee directory at a company site, for instance, may consist of individual pages dedicated to each employee. Each page has the same navigation bar, banner, footer, and layout. Only a few particulars change from page to page, like the employee's name, photograph, and contact information. This is a perfect case for templates. This chapter shows you how templates can make quick work of building pages where most, if not all, the pages use repetitive elements.

Template Basics

Templates let you build pages that share a similar structure and graphic identity, quickly and without having to worry about accidentally deleting or changing elements. Templates come in very handy when you design a site where other, less Dreamweaver-savvy, individuals will build the individual pages. By using a template, you, the godlike Dreamweaver guru, can limit the areas that these underlings can modify in each page.

Note

Adobe Contribute, a simple, word processor–like program for updating websites, works very well with sites built using Dreamweaver templates. If you build sites that people who don't know the first thing about Dreamweaver or building web pages will update, Contribute can help. Contribute even lets novices update pages on their sites through their own web browser. You can learn more about Contribute at Adobe's website: www.adobe.com/products/contribute.

A new page based on a template—also called a template instance, or child page—looks just like the template, except that page authors can edit only designated areas of the page, called, logically enough, editable regions. In the example in Figure 20.1, “These three web pages are part of a section of a website dedicated to answering frequently asked questions. The pages each provide the answer to a different question, but are otherwise identical, sharing the same banner, navigation buttons, sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's greatest timesaving features—Templates—which help you quickly build similar-looking pages, and make updating page designs a snap.”, you can see that the question-and-answer text is an editable region; the rest of the page remains consistent (and is, in fact, locked).

A Dreamweaver template can be very basic: you can create one where a page author can change one or more areas of a page built from the template (the editable regions), but he can't edit other areas (the locked regions). At the same time, Dreamweaver lets you build templates that give page authors an impressive amount of flexibility in the pages they build. Here's an overview of the features you can tap when you create and use templates:

  • Editable regions. These are the basic building blocks of a template. An editable region is that part of a page—a paragraph, the contents of a <div> element, or a headline, for example—that page authors can change as they build template-based pages. Templates can include multiple editable regions—a sidebar and the main content section of a page, for example.

  • Editable tag attributes. There may be times when you want to make a particular tag property editable. For example, say you have a banner ad at the top of a page--the banner ad's just a basic image file, and each page should have a different ad. You want to make sure that no one can delete the image (after all, those ads are paying for your site), but you do want them to be able to swap in a new image file. In other words, no one should mess with the <img> tag; they should only be able to assign a new file by changing the <img> tag's src attribute. To keep someone from deleting the image but still allow them to swap in a new image, just make the src property editable. (You could also make the image's alt property editable, and if the Width and Height properties vary from image to image, you can make those attributes editable as well)"

    Or you might want a unique headline design for each section of your site. To get that, when you build the site template, assign an ID to the <body> tag and make the ID name editable. Then, when you create pages for each section of the site, you add an ID name specific to that section. For example, for a site's "About Us" page, you could set the body's ID to about. Once you do, you can use a descendent selector (like #about h1) to create a custom style for all the headlines on just that page. On template-based pages showcasing your company's products, change the ID to products, and then add a descendent selector style #product h1 to your style sheet and you'll have a unique look for all h1 tags on product pages.

    Figure 20.1. These three web pages are part of a section of a website dedicated to answering frequently asked questions. The pages each provide the answer to a different question, but are otherwise identical, sharing the same banner, navigation buttons, sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's greatest timesaving features—Templates—which help you quickly build similar-looking pages, and make updating page designs a snap.

    These three web pages are part of a section of a website dedicated to answering frequently asked questions. The pages each provide the answer to a different question, but are otherwise identical, sharing the same banner, navigation buttons, sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's greatest timesaving features—Templates—which help you quickly build similar-looking pages, and make updating page designs a snap.

  • Repeating regions and repeating tables. Some web pages, like product catalogs and news sites that post article headlines, include lists of items. For pages like these, Dreamweaver lets you define repeatable regions in your template. For example, your design for a page of product listings might include each product's picture, name, and price, organized using a table with multiple rows (Chapter 7, Tables).

    As the template builder, you may not know in advance how many products the page will eventually list, so you can't fully design the page. However, you can use Dreamweaver to define a row—or any selection of HTML—as a repeating region, so that page authors can add new rows of product information as needed.

  • Optional regions and editable optional regions. Optional regions make templates even more flexible. They let you show or hide content—from a single paragraph to an entire <div> full of tags—on a page-by-page basis.

    Suppose you create a template that displays your company's products. Some products go on sale while others remain full price, so you add an optional region to the product descriptions that displays a big "On Sale!" logo. When you create a new product page, you could show the optional region for products that are on sale and keep it hidden for the others.

    Editable optional regions are similar, but have the added benefit of being editable. Maybe you're creating a template for an employee directory, giving each employee his or her own page with contact information. Some employees also want their picture displayed on the page, while others don't (you know the type). Solution: Add an editable optional region that would let you show the space for a photo and add a different photo for each page. For the shyer types, you'd simply hide the photo area entirely.

Dreamweaver can also create nested templates, which inherit design elements from a master template. Using nested templates, you can create a unified design throughout a site, along with unique (nested) templates for individual sections. You'll find this feature described in detail on the section called “Nested Templates”.

Facilitating page creation is only one of the benefits of templates. You'll also find that templates greatly simplify the process of updating a website's design. Like Library items (Chapter 19, Snippets and Libraries), pages based on templates retain a reference to the original template file. Dreamweaver passes any changes you make to that template to all the pages created from it, which can save you hours of time and trouble when it comes time to update the look or structure of your site. Imagine how much time you'll save when your boss asks you to add "just one more" button to a site's navigation bar. Instead of updating thousands of pages by hand, you need to update only a single template file.

Note

Templates aren't just for building regular, static web pages. You can also create templates for the dynamic, database-driven web pages discussed in Part Six, “Dynamic Dreamweaver” of this book.

Creating a Template

The first step in creating a template is to build a basic web page and tell Dreamweaver that you'd like to use it as a template. You 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.

Turning a Web Page into a Template

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

Once you open the page, choose File→Save As Template or, on the Common category of the Insert panel (see Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), click the Templates button and then select Make Template from the menu. In the Save As Template window (Figure 20.3, “The Save As Template dialog box lets you save your template into any of the local site folders you defined in Dreamweaver. Stick to your current local site to avoid broken links and similar problems.”), 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 20.2. The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.

The Templates menu on the Common category of the Insert panel 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 set up (see Chapter 16, Introducing Site Management for a discussion of local sites), but be careful with this option. If your page contains images, external style sheets, and links, and you save it as a template for another local site, Dreamweaver doesn't copy the images or style sheets from the first site folder into the other one. As a result, the paths to the image files and links don't work correctly, and the page won't show any styling.

If you must use a page from one site as a template for another, copy the web page, graphics and style sheets into the new site's root folder, open the page from there, and then create a template as described here.

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

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

Dreamweaver includes a Description field where you can add a brief note characterizing the template. This description appears when you select a template as the basis for new pages you create. The description is useful when other people build 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, in the "Save as" box, 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, styles from external style sheets won't work, and all the images on the page appear as broken-image icons.

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, a PHP template may have a name like maintemplate.dwt.php.)

Note

Don't get carried away building too many templates for a site. It doesn't make any sense to create 20 templates for a 20-page site. You should only need a handful of templates to cover the different types of pages you have on a site. In fact, you might just need a single template to dictate the look of all the pages on your site.

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 click the Template assets icon (see Figure 20.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: If you just created a template and don't see it listed, click 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.”). Then click the New Template button at the bottom of the Assets panel. Once Dreamweaver adds a new, untitled template to the list, give it a new name. Something descriptive like "Press release" or "Employee page" helps you keep track of your templates.

After you create a blank template, 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 with the unchanging elements of your site—logo, navigation bar, and so on. You'll learn how to add editable regions to your template in the next section.

Defining Editable Regions

Your next task is to specify which parts of your template you want locked and which you want editable. By default, everything on a page is locked. After all, the main reason to use a template is to maintain a consistent, unchanging design and structure among pages. To make a template usable, you must define the area or areas page authors can change.

Figure 20.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: If you just created a template and don't see it listed, click 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.

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: If you just created a template and don't see it listed, click 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.

Adding a Basic Editable Region

To add an editable region to a template, start by selecting the part of the page you want to make changeable. You can designate as editable anything in the document window (that is, any HTML between the <body> tags).

Note

You can always add Cascading Style Sheets, JavaScript code, and meta tag information to the <head> of a template-based page. Any <head> content in the original template files stays put in the page you create from it, however. For example, you can't remove an external style sheet applied to a template from a page based on that template.

For templates you created from scratch, place your cursor at the point where you want to insert an editable region. For templates you built from an existing page, drag across your page to select the elements you wish to make editable, or, for greater precision, use the Tag selector (see the section called “The Insert Panel”) to make sure you select the exact HTML you want.

Now tell Dreamweaver that you want to make the selected elements editable. You can use any of these techniques:

  • In the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), select Editable Region from the Template menu.

  • Choose Insert→Template Objects→Editable Region.

  • Press Ctrl+Alt+V (⌘-Option-V).

  • Right-click (Control-click) the selection and then choose Templates→New Editable Region from the shortcut menu.

When the New Editable Region dialog box appears, type a name for the region (you can't use the same name twice) and then click OK. You return to your template, where the name you gave the region appears in a small blue tab above the editable region, outlined in blue (see Figure 20.5, “This page is based on a template called "tips", as you can tell from the little tab in the document window's upper-right corner. You can modify this page's editable regions, which Dreamweaver labels with small tabs. In this example, one editable region is called "Title". Two additional editable regions (named "question" and "answer") appear within a repeating region (labeled "repeatQuestions") that lets you duplicate editable regions to create a list of questions and answers. Optional regions don't have any clear identifier on a template-based page; you can identify them only in the Template Properties window, as described on page 780. You can also edit the title of any page created from a template. All other parts of the page are locked (circled); you can make changes to these parts only in the original template file.”).

Note

If you use tables to lay out your pages (see Chapter 7, Tables), you'll often assign one table cell as the main area to hold the primary content of the page. For example, in the pages shown in Figure 20.1, “These three web pages are part of a section of a website dedicated to answering frequently asked questions. The pages each provide the answer to a different question, but are otherwise identical, sharing the same banner, navigation buttons, sidebar, and footer. Why rebuild the design for each one? Enter one of Dreamweaver's greatest timesaving features—Templates—which help you quickly build similar-looking pages, and make updating page designs a snap.”, the Frequently Asked Question and its answer appear in a single cell on the page. This cell makes a perfect editable region for a template. In the Tag selector, just click the <td> tag associated with that cell and use any of the techniques discussed here to convert the contents of that cell into an editable region. (By the way, if you're still using tables for layout, please read Chaer 910—CSS layout is by far the preferred method for controlling page design.)

If you use CSS, on the other hand, you can create a separate <div> tag (see the section called “Float Layout Basics”) for the main content area. In this case, select just the contents of the <div> tag, not the tag itself. Here's one instance where you want to avoid the Tag selector (the section called “The Insert Panel”), which selects the entire <div> element, tags and all. If you turn the <div> tag into an editable region, it's possible for someone modifying the page to delete the tag entirely, which could wreak untold havoc on your CSS-based layout.

Fortunately, Dreamweaver has a handy shortcut for selecting just the contents of a <div> tag. Click anywhere inside the <div> tag, and then press Ctrl+A (⌘-A) or choose Edit→Select All. Then, turn this selection into an editable region, and the <div> tags will remain outside the editable region, so no one can inadvertently delete them.

You may find that a single editable region is all you need—for example, when you put text for a product review in just a single area of a page (a section of a page enclosed by a <div> tag, for example). However, if you need to be able to edit multiple areas of a page, just add more editable regions to the template. For instance, when you create a template for an employee page, you can create editable regions for the employee's name, telephone number, and photo. If you change your mind and want to lock a region, select the editable region and then choose Modify→Templates→Remove Template Markup. Dreamweaver removes the code that makes the region editable. You can do the same thing with other types of template regions, like repeating and optional regions.

Warning

You can rename an editable region by clicking the blue tab on the template page and typing a new name into the Property inspector. However, if you've already built pages based on this template, that's not a good idea. Because template-based pages identify regions by their name, Dreamweaver can lose track of where content should go when you rename a region. See Figure 20.18, “When you apply a template to an existing page, you must tell Dreamweaver what to do with the material already on the page. You do that by selecting one of the template's editable regions from a pop-up menu, which takes charge of all editable regions in the page you're converting.” for a workaround.

Adding a Repeating Region

Some web pages have types of content that repeat over and over on a page. For example, a catalog page may display row after row of the same product information—product picture, name, price, and description. An index of Frequently Asked Questions may list questions and the dates visitors posted them. Dreamweaver provides a couple of ways to turn content like that into an editable region in a template.

Figure 20.5. This page is based on a template called "tips", as you can tell from the little tab in the document window's upper-right corner. You can modify this page's editable regions, which Dreamweaver labels with small tabs. In this example, one editable region is called "Title". Two additional editable regions (named "question" and "answer") appear within a repeating region (labeled "repeatQuestions") that lets you duplicate editable regions to create a list of questions and answers. Optional regions don't have any clear identifier on a template-based page; you can identify them only in the Template Properties window, as described on page 780. You can also edit the title of any page created from a template. All other parts of the page are locked (circled); you can make changes to these parts only in the original template file.

This page is based on a template called "tips", as you can tell from the little tab in the document window's upper-right corner. You can modify this page's editable regions, which Dreamweaver labels with small tabs. In this example, one editable region is called "Title". Two additional editable regions (named "question" and "answer") appear within a repeating region (labeled "repeatQuestions") that lets you duplicate editable regions to create a list of questions and answers. Optional regions don't have any clear identifier on a template-based page; you can identify them only in the Template Properties window, as described on page 780. You can also edit the title of any page created from a template. All other parts of the page are locked (circled); you can make changes to these parts only in the original template file.

You could, of course, make the entire area where the repeating content appears editable. For example, you could use one of Dreamweaver's CSS layouts (see Chapter 9, Page Layout) to build a template for a FAQ page. The list of questions and answers go inside the page's main <div> tag. You can turn this div into an editable region. The downside to this approach is that you won't have any ability to enforce (or easily update) the HTML used to lay out the questions and answers, since another designer could edit or delete everything in the div.

Fortunately, Dreamweaver provides a pair of template tools to address the problem: repeating regions and repeating tables. Both let you create areas of a page that include editable (and uneditable) regions that you can repeat any number of times (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating information. Left: In this template, you see a repeating region, labeled "repeatQuestion" (circled).Right: A complete page based on this template includes two repeated editable regions (circled). If another page requires more question/answer pairs, you can easily add additional ones to each list by clicking the + button at the top of the repeating region in the template-based page (right). Even with the ability to dictate how many repeating regions appear on a template-based page, the master template still controls the page's basic design. That means page authors can't change the repeating region's underlying HTML—for example, they can't change the "Q" to "Question or the "A" to "Answer" because both these elements reside in the uneditable part of the template page. If you, however, go into the master template and make these changes, Dreamweaver automatically changes the same elements in all the pages the template created.”).

You add a repeating region the same way you add an editable region. Select the area of the template page where you want to repeat information, which usually contains at least one element that you have made editable. It could be a single list item (the <li> tag), a table row (<tr> tag), or even an entire <div> tag.

Tip

You can make a repeating region that doesn't include an editable region. For example, a template for a movie review web page could include a repeating region that's simply a graphic of a star. A page author adding a new movie review could repeat the star graphic to match the movie's rating—four stars, for example. (There's just one caveat—see the tip on Tip.)

Next, tell Dreamweaver that the elements you selected represent a repeating region. You can use any of these techniques:

  • On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), select the Repeating Region option from the Templates menu.

  • Choose Insert→Template Objects→Repeating Region.

  • Right-click (Control-click) the selection and choose Templates→New Repeating Region from the shortcut menu.

When the New Repeating Region dialog box appears, type a name for the region and then click OK. You return to your template, where the name you gave the region appears in a small blue tab above it (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating information. Left: In this template, you see a repeating region, labeled "repeatQuestion" (circled).Right: A complete page based on this template includes two repeated editable regions (circled). If another page requires more question/answer pairs, you can easily add additional ones to each list by clicking the + button at the top of the repeating region in the template-based page (right). Even with the ability to dictate how many repeating regions appear on a template-based page, the master template still controls the page's basic design. That means page authors can't change the repeating region's underlying HTML—for example, they can't change the "Q" to "Question or the "A" to "Answer" because both these elements reside in the uneditable part of the template page. If you, however, go into the master template and make these changes, Dreamweaver automatically changes the same elements in all the pages the template created.”). (See the section called “Building Pages Based on a Template” for a discussion of using a repeating region when building a new template-based page.)

Warning

Dreamweaver lets you name a repeating region with a name already in use by an editable region. But don't, ahem, repeat names—multiple template areas with the same name make Dreamweaver act unpredictably.

Repeating Tables

Dreamweaver's repeating table tool is essentially a shortcut to creating a table with repeating rows. If you had time on your hands, you could achieve the same effect by adding a table to the page, selecting one or more rows, and applying a repeating region to the selection.

To use the repeating table tool:

  1. Click the in template page where you want to insert the table.

    You can't insert a repeating table into an editable, repeating, or optional region, as explained in the section called “Making a Tag Attribute Editable” coming up on page 764. You must be in an empty, locked area of the template.

    Figure 20.6. A repeating region lets page authors add multiple instances of repeating information. Left: In this template, you see a repeating region, labeled "repeatQuestion" (circled).Right: A complete page based on this template includes two repeated editable regions (circled). If another page requires more question/answer pairs, you can easily add additional ones to each list by clicking the + button at the top of the repeating region in the template-based page (right). Even with the ability to dictate how many repeating regions appear on a template-based page, the master template still controls the page's basic design. That means page authors can't change the repeating region's underlying HTML—for example, they can't change the "Q" to "Question or the "A" to "Answer" because both these elements reside in the uneditable part of the template page. If you, however, go into the master template and make these changes, Dreamweaver automatically changes the same elements in all the pages the template created.

    A repeating region lets page authors add multiple instances of repeating information. Left: In this template, you see a repeating region, labeled "repeatQuestion" (circled).Right: A complete page based on this template includes two repeated editable regions (circled). If another page requires more question/answer pairs, you can easily add additional ones to each list by clicking the + button at the top of the repeating region in the template-based page (right). Even with the ability to dictate how many repeating regions appear on a template-based page, the master template still controls the page's basic design. That means page authors can't change the repeating region's underlying HTML—for example, they can't change the "Q" to "Question or the "A" to "Answer" because both these elements reside in the uneditable part of the template page. If you, however, go into the master template and make these changes, Dreamweaver automatically changes the same elements in all the pages the template created.

  2. On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), select the Repeating Table option from the Templates menu.

    Alternatively, you can choose Insert→Template Objects→Repeating Table. Either way, the Insert Repeating Table window appears (Figure 20.7, “The Insert Repeating Table dialog box lets you kill three birds with one stone: it adds a table to a page, turns one or more rows into a repeating region, and adds editable regions into each table cell inside the repeating region.”).

  3. Fill out the basic properties of the table.

    The top part of the window lets you set up the basic structure of the table: rows, columns, cell padding, cell spacing, width, and border. Basically, it's the same information you provide when you create any table, as described on the section called “Inserting a Table”. You usually start a repeating table with two rows—one for a heading, another to contain the information you want to repeat.

    Figure 20.7. The Insert Repeating Table dialog box lets you kill three birds with one stone: it adds a table to a page, turns one or more rows into a repeating region, and adds editable regions into each table cell inside the repeating region.

    The Insert Repeating Table dialog box lets you kill three birds with one stone: it adds a table to a page, turns one or more rows into a repeating region, and adds editable regions into each table cell inside the repeating region.

  4. In the "Starting row" box, type the number of the row where the repeating region should begin.

    Often 'll have just one repeating row: one row of product information, for example. You may want to use the top row for labels indicating the information contained in the rows below. If that's the case, enter 2 at this step, leaving the first row as an uneditable part of the template.

    It's conceivable, however, that you may want each entry to take up two rows. The first would list Product Name and Description; the second would contain a cell for a photo and a cell for the price. You set up this effect in this step and the next.

  5. In the "Ending row" box, type the number of the last repeating row.

    If you wish to repeat only a single row, enter the same number you provided for step 4. If you want to create a double repeating row, add 1 to the number you provided in step 4. For example, if you need three rows for each repeating entry, add 2 to the number from step 4.

  6. Type a name for this repeating region.

    Don't use the same name as another template region. You'll run the risk of unpredictable results on template-based pages.

  7. Click OK.

    Dreamweaver inserts a table into the page. A blue tab with the name of the repeating region appears (see Figure 20.6, “A repeating region lets page authors add multiple instances of repeating information. Left: In this template, you see a repeating region, labeled "repeatQuestion" (circled).Right: A complete page based on this template includes two repeated editable regions (circled). If another page requires more question/answer pairs, you can easily add additional ones to each list by clicking the + button at the top of the repeating region in the template-based page (right). Even with the ability to dictate how many repeating regions appear on a template-based page, the master template still controls the page's basic design. That means page authors can't change the repeating region's underlying HTML—for example, they can't change the "Q" to "Question or the "A" to "Answer" because both these elements reside in the uneditable part of the template page. If you, however, go into the master template and make these changes, Dreamweaver automatically changes the same elements in all the pages the template created.”), as do blue tabs in each cell of each repeated row. These tabs indicate new editable regions—one per cell.

    Since these new editable regions have uninformative names like EditRegion4, you may want to rename them. Click the blue tab and type a new name in the Property inspector. (But do so before you create any pages based on the template—see the warning on the section called “Adding a Repeating Region”.)

To remove a repeating region, select it by clicking the blue Repeat tab, and then choose Modify→Templates→Remove Template Markup. A more accurate way to select a repeating region is to click anywhere inside the region, and then click <mmtemplate: repeat> in the Tag selector (see the section called “The Insert Panel”). Note that removing a repeating region doesn't remove any editable regions you added inside the repeating region. If you want to rename a repeating region, heed the Warning on the section called “Adding a Repeating Region”.

Making a Tag Attribute Editable

An editable region lets you—or, more likely, page-author jockeys—change areas of HTML, like a paragraph, image, or an entire table, on new pages created from your template. However, when you create a template for others to use, you may want to limit the page authors' editing abilities. For example, you may want to allow budding web designers to change the source of the image used in a banner ad without letting them change the width, height, and class applied to the image. Or you might want to use templates but still let others assign a class or ID to the <body> tag—a move that's normally forbidden on template-based pages. You can use Dreamweaver's Editable Tag Attribute to specify which tag properties your successors can change.

Note

Before you make a tag attribute editable, first set that property to a default value in the template: for example, add an ID to the <body> tag if you want to make the ID editable. Doing so inserts a default value and makes the attribute appear in the Editable Tag Attribute window (see steps 3 and 7 in the following instructions).

To make a tag attribute editable:

  1. Select the tag whose property you want to make editable.

    Using the Tag selector (see the section called “The Insert Panel”) is the most accurate way.

  2. Choose Modify→Templates→Make Attribute Editable.

    The Editable Tag Attributes window opens (Figure 20.8, “Dreamweaver provides detailed control for template pages. To make just a single property of a single tag editable on pages based on your template, turn on the "Make attribute editable" checkbox. In this case, the "id" attribute of the body tag is editable, allowing page designers the freedom to apply different CSS styles to the body of each template-based page. They could change the ID name from page to page, and use descendent selectors to target styles that apply only to elements within pages that have that specific ID.”).

    Figure 20.8. Dreamweaver provides detailed control for template pages. To make just a single property of a single tag editable on pages based on your template, turn on the "Make attribute editable" checkbox. In this case, the "id" attribute of the body tag is editable, allowing page designers the freedom to apply different CSS styles to the body of each template-based page. They could change the ID name from page to page, and use descendent selectors to target styles that apply only to elements within pages that have that specific ID.

    Dreamweaver provides detailed control for template pages. To make just a single property of a single tag editable on pages based on your template, turn on the "Make attribute editable" checkbox. In this case, the "id" attribute of the body tag is editable, allowing page designers the freedom to apply different CSS styles to the body of each template-based page. They could change the ID name from page to page, and use descendent selectors to target styles that apply only to elements within pages that have that specific ID.

  3. Select an attribute from the menu or add a new attribute with the Add button.

    The Attribute menu displays only those properties you already set for the selected tag. In other words, if you select an image, you probably see the Src, Width, and Height properties listed. But unless you set the image's alternative text, the alt property won't appear.

    To add a property, click the Add button. In the window that appears, type in the appropriate property name. For example, to make the alt (alternate text) attribute of a graphic editable, you'd type alt in here. (If you're not sure of the attribute's name, check out Dreamweaver's built-in HTML reference, described in the section called “Reference Panel” on page 448.)

    Note

    If you want page editors to be able to change a CSS class or ID applied to the <body> tag on template-based pages—to apply different fonts, background colors, or any of the many CSS formatting options to each template-based page—you have to make the Class or ID attribute editable. (See the section called “Types of Styles” for more on CSS classes and IDs.)

  4. Make sure you turn on the "Make attribute editable" checkbox.

    If you decide at some point that you no longer want people to be able to edit this property, you can return to this dialog box and turn off editing, as described in a moment.

  5. Type a name in the Label field.

    What you type here should be a simple description of the editable tag and property, which helps page authors correctly identify editable properties. For example, you could use Product Image if you're making a particular image's source (src) property editable.

  6. Choose a value type from the menu.

    Your choices are:

    • Text. Use this option when a property's value is a word. For example, you can change the image tag's Align property to top, middle, baseline, and so on. Or, when using Cascading Style Sheets, you could make a tag's Class property editable to allow page authors to apply a particular custom style to the tag—content, footer, and so URL. Use this option to let page authors edit the path to a file, like an image's src property or a link's href property. Using its site management tools, Dreamweaver keeps track of these paths and updates them when you move pages around your site.

    • Color. If the property requires a web color, like a background color, select this option. It makes Dreamweaver's color box available to people who build pages from the template.

    • True/False. You shouldn't use this option. It's intended for Dreamweaver's Optional Regions feature (discussed below), and it doesn't apply to HTML properties.

    • Number. Use this choice for properties that require a numeric value, like an image's Height and Width properties.

  7. Type a default value into the Default field.

    This step is optional. The default value defines the initial value for this property, when people first create a page based on the template. They can then modify this value for that particular page. If you already set this property in the template, its value automatically appears in this box.

  8. Click OK to close the window.

    Dreamweaver adds code to the template page that allows page authors control of the attribute. To set this attribute on pages created from the template, see the instructions on the section called “Changing Properties of Editable Tag Attributes”.

If you later decide that you don't want a particular tag property to be editable, Dreamweaver can help. Open the template file, select the tag with the editable attribute, and choose Modify→Templates→Make Attribute Editable. In the window that appears, turn off the "Make attribute editable" checkbox (Figure 20.8, “Dreamweaver provides detailed control for template pages. To make just a single property of a single tag editable on pages based on your template, turn on the "Make attribute editable" checkbox. In this case, the "id" attribute of the body tag is editable, allowing page designers the freedom to apply different CSS styles to the body of each template-based page. They could change the ID name from page to page, and use descendent selectors to target styles that apply only to elements within pages that have that specific ID.”). Unfortunately, doing so doesn't remove all of the template code Dreamweaver added. Even after you turn off editing for an attribute, Dreamweaver leaves behind the parameter used to control the tag's property. To eliminate this extra code, see the box on Understanding Template Parameters.

Adding Optional Regions

Templates provide consistent design. While consistency is generally a good thing, it can also get boring. Furthermore, there may be times when you want the flexibility to include information on some template-based pages but not on others.

Dreamweaver provides a fairly foolproof way to vary page design: optional regions. An optional region is simply part of a template you can hide or display on each template-based page (see Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a page-by-page basis. In these examples, the template page (top) has an optional region containing a "Chia Kitten" icon (circled). When you create a page from this template, you can either display the optional region (middle) or hide it (bottom).”). When a page author creates a new page based on the template, she can turn the region on or off.

Creating an optional region is a snap. Just select the HTML code you wish to make optional and do one of the following:

  • On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), select the Optional Region option from the Templates menu.

  • Choose Insert→Template Objects→Optional Region.

  • Right-click (Control-click) the selection and choose Templates→New Optional Region from the shortcut menu.

In the New Optional Region window, type a name (Figure 20.10, “The Optional Regions feature lets you show or hide specific content on template-based pages. Turning on "Show by default" tells Dreamweaver to display the region when a page editor first creates a template-based page. Turn this box on if you want to display the optional region on most pages. You'll save someone the effort of doing so each time she creates a new template-based page.”). Make sure not to use the same name as any other region on the page, and—although Dreamweaver lets you—don't use spaces or other punctuation marks. (Following the rules for naming files as described on the section called “The Structure of a Website” ensures that the optional region works properly.) Click OK to close the window and create the new optional region. Dreamweaver adds a light blue tab with the word "If," followed by the name you gave the region (Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a page-by-page basis. In these examples, the template page (top) has an optional region containing a "Chia Kitten" icon (circled). When you create a page from this template, you can either display the optional region (middle) or hide it (bottom).”).

Figure 20.9. Now you see it, now you don't. Optional regions let you show or hide content on a page-by-page basis. In these examples, the template page (top) has an optional region containing a "Chia Kitten" icon (circled). When you create a page from this template, you can either display the optional region (middle) or hide it (bottom).

Now you see it, now you don't. Optional regions let you show or hide content on a page-by-page basis. In these examples, the template page (top) has an optional region containing a "Chia Kitten" icon (circled). When you create a page from this template, you can either display the optional region (middle) or hide it (bottom).

Locking Optional Regions

An optional region can include editable regions, repeating regions, and locked regions. For example, if you want to allow a page editor to turn on or off a graphic ("This item on sale!!!!"), insert the graphic outside an editable region on the page, and then make it an optional region as described above. Since anything not inside an editable region is locked, a page editor can't change the graphic or ruin its formatting—he can only make it visible or hidden.

Repeating Optional Regions

An optional region can also include repeating regions. For example, suppose you create a repeating region (see the section called “Locking Optional Regions”) that lets a page editor add row after row of links to a list of related articles. You could then turn this repeating region into an optional region, as described above, so that if a particular page had no related articles, the page editor could simply hide the entire "related articles" section of the page.

Figure 20.10. The Optional Regions feature lets you show or hide specific content on template-based pages. Turning on "Show by default" tells Dreamweaver to display the region when a page editor first creates a template-based page. Turn this box on if you want to display the optional region on most pages. You'll save someone the effort of doing so each time she creates a new template-based page.

The Optional Regions feature lets you show or hide specific content on template-based pages. Turning on "Show by default" tells Dreamweaver to display the region when a page editor first creates a template-based page. Turn this box on if you want to display the optional region on most pages. You'll save someone the effort of doing so each time she creates a new template-based page.

Optional Editable Regions

Dreamweaver's Optional Editable Region command inserts an optional region with an editable region inside of it. To use it, click on the spot in the template where you'd like to add it, and then choose Insert→Template Objects→Optional Editable Region (alternatively, you can choose this option from the Templates menu on the Common category of the Insert panel). The New Optional Region window appears; give it a name, and then follow the same steps for adding an optional region (see the section called “Adding Optional Regions”).

This technique doesn't offer a lot of control; it's hard to insert HTML outside the editable region, for example. So if you want an image or table that's optional but not editable, it's usually better to just create the editable region as described on the section called “Building a Template from Scratch”and turn it (and any other HTML you wish to include) into an optional region.

Note

The Optional Editable Region command doesn't let you name the editable region; it automatically assigns a generic name like EditRegion7. You can select the editable region and change its name in the Property inspector, but do so before you build any pages based on this template (see the Warning on the section called “Adding a Repeating Region”).

Advanced Optional Regions

A basic optional region is a rather simple affair: It either appears or it doesn't. But Dreamweaver offers more complex logic for controlling optional regions. For example, you may want several different areas of a page to be either hidden or visible at the same time—perhaps an "On Sale Now!" icon at the top of a page and a "Call 1-800-SHIZZLE to order" message at the bottom of the page. When one appears, so does the other.

Because these objects are in different areas of the page, you have to create two separate optional regions. Fortunately, using Dreamweaver's advanced settings for optional regions, you can easily have a single region control the display of one or more additional areas of a page. Here's how:

  1. Create the first optional region using the steps in the section called “Adding Optional Regions” on page 767.

    Give the region a name using the Basic tab of the New Optional Region window (Figure 20.10, “The Optional Regions feature lets you show or hide specific content on template-based pages. Turning on "Show by default" tells Dreamweaver to display the region when a page editor first creates a template-based page. Turn this box on if you want to display the optional region on most pages. You'll save someone the effort of doing so each time she creates a new template-based page.”).

  2. Select the part of the page—an image, paragraph, or table—you want to turn into a second optional region.

    In this case, you make the display of this region dependent on the optional region added in step 1. If the first region is visible on the page, this second region also shows.

  3. On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), choose the Optional Region item from the Templates menu.

    The New Optional Region window appears.

  4. Click the Advanced tab.

    The optional region's advanced options appear (see Figure 20.11, “The New Optional Region box lets you more precisely control the display of an optional region. You can make the region appear only when another region is visible, or use Dreamweaver's template expression language to create a more complex behavior. In this case, the selected region appears only when another region—named "kittyHead"—is not visible (the ! is the programming equivalent of "is not").”). In this case, you want the first optional region you created to control the display of this new region. So instead of giving this region a name, you simply select the name of the first optional region in the next step.

    Figure 20.11. The New Optional Region box lets you more precisely control the display of an optional region. You can make the region appear only when another region is visible, or use Dreamweaver's template expression language to create a more complex behavior. In this case, the selected region appears only when another region—named "kittyHead"—is not visible (the ! is the programming equivalent of "is not").

    The New Optional Region box lets you more precisely control the display of an optional region. You can make the region appear only when another region is visible, or use Dreamweaver's template expression language to create a more complex behavior. In this case, the selected region appears only when another region—named "kittyHead"—is not visible (the ! is the programming equivalent of "is not").

  5. Click the "Use parameter" button and select the name of the first optional region from the menu.

    This step is what makes the first optional region control this region. If a page displays the first region, it also displays this second region.

  6. Click OK to close the window and create the new optional region.

    You can continue adding optional regions this way, using the Advanced tab and selecting the name of the first optional region from the menu. As a result, the first optional region controls the display of many other areas of the page.

Even fancier tricks

You can use these advanced controls for even more elaborate web page stunts. For example, say your site has several sections. When a visitor is in one section of the site, its navigation button is attractively highlighted and a secondary navigation bar miraculously appears, offering links to other pages in that section.

Using a template, you can add an optional region with the highlighted section button in it. When you add the secondary navigation bar to the page, you make it an optional region controlled by the highlighted navigation button. Then, when you add a page to that section of the site, you simply show the optional region containing the highlighted button, causing the secondary navigation bar to appear as well (see Figure 20.12, “An optional region on the page at left highlights the top navigation button (Electricity Makes It Happen). By turning on a different optional region (right), the navigation system can highlight the site's current section—"What is Electricity?" (the third button from the top).” for a look at how this works).

Figure 20.12. An optional region on the page at left highlights the top navigation button (Electricity Makes It Happen). By turning on a different optional region (right), the navigation system can highlight the site's current section—"What is Electricity?" (the third button from the top).

An optional region on the page at left highlights the top navigation button (Electricity Makes It Happen). By turning on a different optional region (right), the navigation system can highlight the site's current section—"What is Electricity?" (the third button from the top).

Controlling regions with expressions

You can program even more complex behaviors using a basic expression language, loosely based on JavaScript, that Dreamweaver understands. For example, instead of having an optional region appear when another optional region is visible (as in the previous example), suppose you want to have a region appear when another region is invisible. This arrangement can come in handy when you create a navigation bar unique to only one part of your site. For example, if a visitor is in one section of your site, she sees a highlighted, "you are here" navigation button for that section, but if she's in another section, the regular, non-highlighted button appears.

In other words, you can build a single template for all the sections of a site, but control the appearance of the navigation bar separately for pages in each individual section (see Figure 20.12, “An optional region on the page at left highlights the top navigation button (Electricity Makes It Happen). By turning on a different optional region (right), the navigation system can highlight the site's current section—"What is Electricity?" (the third button from the top).”).

Here's how you control the navigation bar:

  1. Click the page where you wish to insert the navigation buttons.

  2. Insert the highlighted ("You are in this section") navigation button.

    This button could be a rollover image (see the section called “Editing a Hotspot's Properties”) or just a single graphic. If you have multiple pages in the section, you probably also want to link this graphic to the main page for that section.

  3. Click next to the highlighted button and insert the plain ("You can go here") navigation button.

    The button could also be a rollover image with a link to the main page for this section (for example, a main Products page).

  4. In the Property inspector, select the highlighted navigation button and its link (if it has one).

    This button appears on any template-based page for this section.

  5. On the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), choose Optional Region from the Template menu.

    The New Optional Region window appears. Make sure you have the Basic tab selected.

  6. Type the name of the section into the Name field. Click OK.

    For example, if this section of your site advertises your company's products, you can call it products. Don't use any spaces or punctuation other than hyphens (–) or underscores (_) for the name. Also, make sure the "Show by default" box is turned off. Since you'll be building template-based pages for all the sections of your site, most pages you build will be in other sections of the site. Your work goes faster if this highlighted button starts out hidden. In the next steps, you make the plain navigation button appear by default.

  7. Use the Property inspector to select the plain button and link, and then click the Optional Region button on the Insert bar.

    The New Optional Region window appears again, but this time you'll use the advanced options.

  8. Click the Advanced tab; select "Enter expression" (Figure 20.11, “The New Optional Region box lets you more precisely control the display of an optional region. You can make the region appear only when another region is visible, or use Dreamweaver's template expression language to create a more complex behavior. In this case, the selected region appears only when another region—named "kittyHead"—is not visible (the ! is the programming equivalent of "is not").”).

    You're going to type an expression in the Expression field. An expression is a programming statement that's either true or false. (For an obvious example, it's true that 2 is always equal to 2, but it's obviously false to say, "2 is equal to 4." In programming, you express equality using a pair of = signs. So 2==2 is true, but 2==4 is false.) The important thing to remember here is that when an expression is true, the optional region is visible; when it's false, it's hidden.

  9. Type an exclamation point (!) followed by the name you entered in step 6—!products, for example.

    Dreamweaver's template expression language is based on the JavaScript programming language. An exclamation mark means "not," so this code means not products. Translation into non-propeller-head language: when the products region (remember, that's the highlighted button) is not displayed, this region (the button) appears on the page.

    The logic gets a little complicated, but have faith. When you add a new page based on this template, the optional region you added in step 6 is not visible (because you turned off the "Show by default" box). In other words, because the region—products in this example—is not showing, this region, the one with the plain navigation button, appears on the page by default. Turning the products region on hides the plain navigation button. In other words, the first optional region works like a light switch, alternately turning on one or the other navigation button.

  10. Click OK to close the window and add the additional optional regions.

    Repeat this process for each button in the navigation bar. Now your template is perfectly suited for displaying customized navigation bars for each section of your site. When you create a new template-based page, simply turn on the region for the particular section in which the page is located. (Hiding and showing optional regions is described on the section called “Hiding and Showing Optional Regions”.)

As you can see, optional regions are very powerful—and potentially confusing. But using even basic optional regions, you can exert a great deal of control over your template-based pages. For more information on template expressions and optional regions, take a look in Dreamweaver's Help sysem. (Choose Help→Dreamweaver Help to open the Adobe Help system; then, in the search box, type template expressions, open the Search Options section, choose Local Help from the Search Location, and then hit Enter (Return). You'll then get a page that lists several articles related to templates and template expressions.

Editing and Removing Optional Regions

After you insert an optional region, you can always return to the New Optional Region dialog box to change the region's name, alter its default settings, or use advanced options. To edit an optional region, first select it using one of these techniques:

  • Click the region's blue tab in the document window (Figure 20.9, “Now you see it, now you don't. Optional regions let you show or hide content on a page-by-page basis. In these examples, the template page (top) has an optional region containing a "Chia Kitten" icon (circled). When you create a page from this template, you can either display the optional region (middle) or hide it (bottom).”).

  • Click anywhere inside the optional region in the document window and then click the <mmtemplate:if> tag in the Tag selector (see the section called “The Insert Panel” for details on the Tag selector).

When you select an optional region, Dreamweaver displays an Edit button in the Property inspector. Click it to reopen the New Optional Region window. You can then change the region's properties.

To remove an optional region, select it by using one of the techniques listed previously and choose Modify→Templates→ Remove Template Markup. Dreamweaver removes most of the code associated with the optional region (but see the box below).

Nested Templates

Large sites may have many different sections or types of pages. Each section or type of page may have its own unique look. A Frequently Asked Questions page may have distinct areas for a question, an answer, and links to further resources, while a product page may have a picture, a product description, and ordering information. You could create different templates for each type of page, but even that may be more work than necessary.

Note

Nested templates are a somewhat advanced and potentially confusing concept. Many people happily use Dreamweaver templates without ever using the nested template feature.

While many pages in a site may have subtle differences, they usually share very basic design features. The overall structure of every page, for example, may be the same: same logo, banner, and navigation bar. Even the basic layout may be the same (sidebar on the left, main content in the middle, for example). And therein lies the problem with creating individual templates for each section of a website: if you need to make a very basic sitewide change, like adding a new button to the navigation bar or altering a sitewide banner, you need to edit each template individually, adding extra time, effort, and the chance of making a mistake.

Good news—Dreamweaver offers a tool to solve just this problem: nested templates. A nested template is one you make from an existing template, which then becomes the master template (see Figure 20.13, “Nested templates (middle row) let you build templates that share common, sitewide design elements while giving you precise control over pages unique to each section of the site. A page built from a nested template (bottom row) contains both elements from your master template (top row)—like a banner and a sitewide navigation bar—in addition to elements specific to the nested template—like a section-specific secondary navigation bar. Dreamweaver passes changes you make to the master template on to all of the site's pages, including those created from the nested templates. Changes you make to a nested template, by contrast, end up on only the pages you build with that nested template.”).

Imagine a basic software company website with three sections: Support, Our Products, and Downloads. Each section has its own kind of information and specific layout needs. However, all three sections share the same banner and navigation bar.

To create a template for this site, you first create a very basic template that includes the site's common elements (including any editable regions)—this is your master template. You can then create nested templates based on this master template. In the nested templates, you can add design refinements and additional editable regions unique to each of the site's sections.

Figure 20.13. Nested templates (middle row) let you build templates that share common, sitewide design elements while giving you precise control over pages unique to each section of the site. A page built from a nested template (bottom row) contains both elements from your master template (top row)—like a banner and a sitewide navigation bar—in addition to elements specific to the nested template—like a section-specific secondary navigation bar. Dreamweaver passes changes you make to the master template on to all of the site's pages, including those created from the nested templates. Changes you make to a nested template, by contrast, end up on only the pages you build with that nested template.

Nested templates (middle row) let you build templates that share common, sitewide design elements while giving you precise control over pages unique to each section of the site. A page built from a nested template (bottom row) contains both elements from your master template (top row)—like a banner and a sitewide navigation bar—in addition to elements specific to the nested template—like a section-specific secondary navigation bar. Dreamweaver passes changes you make to the master template on to all of the site's pages, including those created from the nested templates. Changes you make to a nested template, by contrast, end up on only the pages you build with that nested template.

To create a nested template:

  1. Build a template as described on the section called “Creating a Template”.

    This page acts as your master template and it controls all your nested templates. It should include the elements you want on all of your pages, like your logo and email links. It should also include editable regions that you want to customize for each section of your site, like div tags that hold blocks of text and images. That way, when you create a nested template from this master, you (or a page author) have the flexibility to put unique content in these areas of your pages,

  2. Name and save this template (File→Save as Template), and then close it.

    Your template is safe on our hard drive.

  3. Choose File→New.

    The window for creating new documents and template-based pages opens (see Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal the list of templates it uses. However, if you choose a template stored in a different site, Dreamweaver doesn't copy any of that template's images to your current site, nor does it translate relative links correctly. The result is broken links aplenty.”).

  4. On the left side of the New Document window, click the Page from Template button. In the Site list, select the site on which you're working.

    You can open templates from any site you've defined in Dreamweaver, but this is generally not a good idea, as Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal the list of templates it uses. However, if you choose a template stored in a different site, Dreamweaver doesn't copy any of that template's images to your current site, nor does it translate relative links correctly. The result is broken links aplenty.” explains.

    Figure 20.14. You can use the "Site" list to choose another site you've defined and reveal the list of templates it uses. However, if you choose a template stored in a different site, Dreamweaver doesn't copy any of that template's images to your current site, nor does it translate relative links correctly. The result is broken links aplenty.

    You can use the "Site" list to choose another site you've defined and reveal the list of templates it uses. However, if you choose a template stored in a different site, Dreamweaver doesn't copy any of that template's images to your current site, nor does it translate relative links correctly. The result is broken links aplenty.

  5. From the list of templates, select the name of the master template file you created in step 1.

    Make sure you have the "Update page when template changes" box turned on. Otherwise, your nested templates won't update when you edit the master template.

  6. Click OK.

    Dreamweaver creates a new template-based page. At this point, it's simply a basic web page based on your original template. Next, you'll turn this into a nested template.

  7. Choose File→"Save as Template." Or, on the Common category of the Insert panel (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), select Make Nested Template from the Templates menu.

    The Save As Template window appears (see Figure 20.3, “The Save As Template dialog box lets you save your template into any of the local site folders you defined in Dreamweaver. Stick to your current local site to avoid broken links and similar problems.”).

  8. Type in a name for the template and click the Save button.

    Voilà! A nested template. What? It doesn't look like a nested template? In truth, it isn't. Right now, there's no difference between it and your master template. They share the same design, content, and template regions. You'll turn it into a nested template by following the steps below.

Customizing Nested Templates

After you create a nested template file, the next step is to add the design elements that make the template unique (and a true nested template). For example, you can add a special type of table to display a set of product photos, descriptions, prices, and other information. This table will appear only in pages you build with this nested template, not those you build with the master template or any other nested template.

There are a few things you should keep in mind when planning your template development strategy:

  • When you create pages from templates, you can add content only to editable regions. That's true not only for template-based pages, but for nested templates, too. If the master template has no editable regions, you won't be able to change anything on the nested template you create from it.

  • When you work on a nested template, you can insert an editable region only into an editable region supplied by the master template. For example, say you create a master template to provide a consistent banner and navigation bar on the site, all in a locked region of the master template. Then you add a large empty area at the bottom of the page and turn it into an editable region. After you create a nested template from the master, you can add new, additional editable regions to this open area. In fact, you can add any template region—editable, optional, or repeating—to this area.

  • If, when you work on a nested template, you insert a template region (editable, optional, or repeating) into an editable region supplied by the master template, you can modify only these newly added regions in the pages you create based on that nested template. The rest of the editable region supplied by the master template isn't editable on the pages based on the nested template.

    Using the example in the previous paragraph, if you add a repeating table to your nested template (see the section called “Repeating Tables” for more about repeating tables), you can change only the editable areas of that repeating table on any pages you create based on the nested template. Of course, the other side of the coin is that if you add an editable region to the master template and then refrain from adding any particular template regions when you create the nested template, all the HTML inside that region is editable in the nested template and in all the pages based on that template.

Using Nested Templates

Here's an example of how you can use nested templates. Suppose you want to create a uniform design for your site where every page of the site has a logo as well as a sitewide navigation bar. Each page within one section of the site also has a sidebar containing a secondary navigation bar with navigation buttons for just that section. Finally, every page has a large content area to hold the information specific to that page.

Using nested templates, creating a website like this couldn't be easier (really!). Create a master template that includes the site banner and the navigation bar, and then add editable regions for a sidebar and a main content area.

Next, create a nested template for one section of the site, leaving the content area as it is—as an editable area. Since each page will have unique content in this area, you don't need to do anything to this region (like define optional or repeating regions).

Then add the secondary navigation bar to the nested template's sidebar area. To lock this region so no one can tinker with it (in pages built from the nested template), add an empty editable region, or see the Tip on the next page.

If you want, you can build similar nested templates for the other sections of the site.

Now you're ready to start building the pages of your site. Create a new page based on one of the section templates. Add text or graphics to the editable content area of the page. Should you need to change the site logo or add a button to the sie-wide navigation bar, open the master template, make the changes, save the file, and let Dreamweaver update all the pages of your site with the new look. If you simply need to change the secondary navigation for one section of the site, open the appropriate nested template, change the sidebar, save the template, and let Dreamweaver update all the pages built using that nested template.

Tip

You can lock an editable region passed from a master template to a nested template so that page builders can't change this region in pages based on the nested template. In the nested template, go into Code view, and then locate the beginning of the editable region, which looks something like, <!--InstanceBeginEditable name="regionName" -->. Then insert the text @@("")@@ directly after the -->.

If you find yourself typing this code often, think about creating a snippet (see the section called “Creating Snippets”) containing the text @@("")@@.

Building Pages Based on a Template

Building a template is only a prelude to the actual work of building your site. Once you finish your template, it's time to produce pages.

To create a new document based on a template, choose File→New to open the New Document window (see Figure 20.14, “You can use the "Site" list to choose another site you've defined and reveal the list of templates it uses. However, if you choose a template stored in a different site, Dreamweaver doesn't copy any of that template's images to your current site, nor does it translate relative links correctly. The result is broken links aplenty.”). Click the "Page from Template" button, and then, from the Site list, select the site you're working on. All the templates for the selected site appear in the right-hand column. Select the template you wish to use, and then click Create.

Note

If you don't want your new web page linked to a template (so that future changes to the template won't affect the web page), turn off the "Update page when template changes" checkbox. The result is a new page that looks just like the template, but has no locked regions; you can edit the entire page. This is a useful technique to use when you want to create a new template starting with the general design and structure of an existing template. (Be aware that Dreamweaver remembers this choice the next time you create a new template-based page. In other words, future pages you create from a template will also be unlinked—unless you remember to turn the "Update page" box back on.)

A new web page document opens, based on the template, bearing a tab in the upper-right corner that identifies the underlying template name. Dreamweaver outlines any editable regions in blue; a small blue tab displays each region's name (Figure 20.5, “This page is based on a template called "tips", as you can tell from the little tab in the document window's upper-right corner. You can modify this page's editable regions, which Dreamweaver labels with small tabs. In this example, one editable region is called "Title". Two additional editable regions (named "question" and "answer") appear within a repeating region (labeled "repeatQuestions") that lets you duplicate editable regions to create a list of questions and answers. Optional regions don't have any clear identifier on a template-based page; you can identify them only in the Template Properties window, as described on page 780. You can also edit the title of any page created from a template. All other parts of the page are locked (circled); you can make changes to these parts only in the original template file.”).

Dreamweaver makes it obvious which areas of a page are off-limits; your cursor changes to a "forbidden" symbol (a circle with a line through it) when you venture into a locked area.

To add content to an editable region, click anywhere inside the region. You can type inside it, add graphics, or add any other object or HTML you can normally add to a document. You can also change the document's title and add a Spry Menu bar (Chapter 5, Links), Spry widget (Chapter 13, Spry: Creating Interactive Web Pages), Behavior (Chapter 14, Dreamweaver Behaviors), Cascading Style Sheet (see Chapter 4, Introducing Cascading Style Sheets), and meta tag information (items that go in the <head> of an HTML document).

Working with Repeating Regions

Repeating regions work a bit differently from editable regions. In most cases, a repeating region includes one or more editable regions (which you can edit using the instructions above). However, Dreamweaver provides special controls to let you add, remove, and rearrange repeating entries (see Figure 20.15, “Repeating regions are a great way to quickly add lists to your web pages. On the page displayed here, repeating regions make it easy to add sets of questions and answers. Each repeating entry has two editable regions, labeled "question" and "answer". Clicking the + button adds an additional question/answer pair.”).

These regions let page editors add repeated page elements—like rows of product information in a list of products. To add a repeating entry, click the + button that appears to the right of the Repeat region's blue tab. You can then edit any editable regions within the entry. Click inside an editable region inside a repeating entry and click + again to add a new entry after it.

Deleting a repeating entry is just as easy. Click inside an editable region within the entry you want to delete and click the minus sign button (-).

Tip

You can create repeating regions that don't have any editable regions—for example, you can create a repeating region with a star in it; repeat the region several times to indicate the rating for a product. Although you can use the + button to repeat such regions, you can't delete those regions with the minus sign (–) button. In other words, you're stuck with any extra stars you added. The only workaround is to add an editable region to the repeating region. Then Dreamweaver lets you remove the repeating regions.

To rearrange entries in the list, click inside an entry's editable region. Click the up or down arrows to move the entry up or down in the list (to alphabetize it, for example).

Figure 20.15. Repeating regions are a great way to quickly add lists to your web pages. On the page displayed here, repeating regions make it easy to add sets of questions and answers. Each repeating entry has two editable regions, labeled "question" and "answer". Clicking the + button adds an additional question/answer pair.

Repeating regions are a great way to quickly add lists to your web pages. On the page displayed here, repeating regions make it easy to add sets of questions and answers. Each repeating entry has two editable regions, labeled "question" and "answer". Clicking the + button adds an additional question/answer pair.

Changing Properties of Editable Tag Attributes

Unlike editable or repeating regions, you can't readily see an editable tag attribute on template-based pages. There's no blue tab that identifies them, as there are for editable regions; in fact, nothing appears in Design view to indicate that there are any editable tag properties on the page. The only way to find out is to choose Modify→Template Properties to open the Template Properties dialog box (see Figure 20.16, “The Template Properties window lets you control editable tag attributes and other parameters for optional regions. Depending on which parameter you select, the options at the bottom of the window change. In this case, the src property of an image tag has been made editable. To change the image tag's src property, click Dreamweaver's familiar "Browse for File" button and select a new graphic file.”).

Figure 20.16. The Template Properties window lets you control editable tag attributes and other parameters for optional regions. Depending on which parameter you select, the options at the bottom of the window change. In this case, the src property of an image tag has been made editable. To change the image tag's src property, click Dreamweaver's familiar "Browse for File" button and select a new graphic file.

The Template Properties window lets you control editable tag attributes and other parameters for optional regions. Depending on which parameter you select, the options at the bottom of the window change. In this case, the src property of an image tag has been made editable. To change the image tag's src property, click Dreamweaver's familiar "Browse for File" button and select a new graphic file.

Dreamweaver displays all the editable tag attributes for this page in this window. In addition, it displays all the parameters defined for this page, including optional regions, as discussed in the box on the section called “Nested Templates”.

To change the value of a template property—in other words, to edit the property of an editable tag—select its name from the list and fill out the option that appears at the bottom of the window. For example, in the case of color properties, use the color box to pick a color. If the property is a path (like a link or an image's src property), click the "select a file" folder icon to browse to the file.

Once you finish setting the editable properties for the page, click OK to close the window.

Hiding and Showing Optional Regions

As with Editable Tag Attributes, you use the Template Properties window to control the display of optional regions. On template-based pages, you can show or hide an optional region by choosing Modify→Template Properties to open this dialog box (see Figure 20.17, “The Template Properties window displays optional regions as well as editable tag attributes. Template properties for optional regions—in this example, "kittyHead"—have a value of either true or false. True lets people see the contents of the region on the page, while false hides the region. (The "Allow nested templates to control this" option is described in the box "Controlling the Nest".)”). Next, select the name of the optional region. To make all the page elements in the region visible, turn on the "Show" checkbox at the bottom of the window. To hide all the optional regions, turn off this box.

Figure 20.17. The Template Properties window displays optional regions as well as editable tag attributes. Template properties for optional regions—in this example, "kittyHead"—have a value of either true or false. True lets people see the contents of the region on the page, while false hides the region. (The "Allow nested templates to control this" option is described in the box "Controlling the Nest".)

The Template Properties window displays optional regions as well as editable tag attributes. Template properties for optional regions—in this example, "kittyHead"—have a value of either true or false. True lets people see the contents of the region on the page, while false hides the region. (The "Allow nested templates to control this" option is described in the box "Controlling the Nest".)

Applying Templates to Existing Pages

What happens if you create a web page, and then decide you want it to share the look of a template? No problem. Dreamweaver lets you apply a template to any web page in your site. You can even swap one template for another by applying a new template to a page based on a different template.

To apply a template to a page you already created:

  1. Choose File→Open to open the page you want to alter.

    The page opens.

  2. Choose Window→Assets. Click the Assets panel's Templates button (see Figure 20.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: If you just created a template and don't see it listed, click 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.”).

    The Assets panel appears and reveals a list of your site's templates.

    Note

    You can also apply a template to a page by choosing Modify→Templates→ Apply Template to Page. Select the name of the template from the window that appears and skip to step 5.

  3. Click a template in the list on the Assets panel, and then click Apply.

    The Inconsistent Region Names dialog box opens (Figure 20.18, “When you apply a template to an existing page, you must tell Dreamweaver what to do with the material already on the page. You do that by selecting one of the template's editable regions from a pop-up menu, which takes charge of all editable regions in the page you're converting.”).

  4. In the list under "Editable regions," choose "Documentbody.".

    To the right, in the Resolved column, you see <Not resolved>. This is Dreamweaver's way of saying it doesn't know what to do with the contents of the current page. You need to pick one of the template's editable regions.

  5. From the "Move content to new region" menu, select an editable region.

    If you want to keep the material, select the name of an editable region in which to place it from the list; otherwise, choose Nowhere, which, in effect, creates a new blank page based on the template.

    Unfortunately, you can only select a single editable region. If the original page has several content regions, Dreamweaver pushes them all into a single editable region.

  6. If "Document head" also appears in the window, select it and choose "head" from the "Move content to new region" menu.

    This step preserves any special information you added to the head of your page, like Cascading Style Sheets, meta tags, and custom JavaScript programs. Unfortunately, Dreamweaver always replaces the title of your original page with the default title of the template. You have to reenter the title (see the section called “Creating a Web Page”) after you apply the template.

  7. Click OK.

    Your new page appears.

Figure 20.18. When you apply a template to an existing page, you must tell Dreamweaver what to do with the material already on the page. You do that by selecting one of the template's editable regions from a pop-up menu, which takes charge of all editable regions in the page you're converting.

When you apply a template to an existing page, you must tell Dreamweaver what to do with the material already on the page. You do that by selecting one of the template's editable regions from a pop-up menu, which takes charge of all editable regions in the page you're converting.

Updating a Template

Templates aren't just useful for rapidly building pages; they also make quick work of site updates. Template-based pages maintain a link to the original template; Dreamweaver automatically passes changes you make to the original template along to every page built from it. If you used templates to build your site, you probably won't cry on your keyboard when the boss asks you to add an additional button and a link to the navigation bar. Instead of editing every page, you can simply open the template file, update the navigation bar, and let Dreamweaver apply the update to all the pages.

You update a template (and all the pages based on it) like this:

  1. Choose Window→Assets.

    The Assets panel appears.

  2. Click the Templates button (see Figure 20.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: If you just created a template and don't see it listed, click 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.”).

    A list of the site's templates appears.

  3. Double-click the template's name to open it.

    Alternatively, you can select the template in the Assets panel, and then click the Edit button to open the original template (.dwt) file (see Figure 20.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: If you just created a template and don't see it listed, click 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.”). The template opens.

    Tip

    You can also open a template by double-clicking the appropriate template file (.dwt) in the Templates folder in the Files panel.

  4. Edit the template as you would any web page.

    Since this is the original template file, you can edit any of the HTML in the document, including Cascading Style Sheets, meta tags, and layers. You can also add or remove editable regions.

    Take care, however, to edit only the areas that you did not mark as editable regions. The reason: When you update your pages, any region marked as editable in a template file isn't passed on to pages based on that template. After all, the template dictates only the design of those pages' non-editable regions.

    Note

    Be careful when you remove editable regions from a template. If you already built some pages based on the template, Dreamweaver warns you when you save the template. As described below, you can either delete the content you added to that region in each of the pages you created, or you can move it to another editable region in the page.

  5. Choose File→Save.

    If you already created pages based on this template, Dreamweaver opens the Update Template Files dialog box. It lists all the files that use the template.

  6. Click Update to update all the files based on the template.

    Dreamweaver automatically applies the changes you make to the pages based on the template. Then, the Update Pages dialog box opens. If you want to see a list of all the files Dreamweaver changed, turn on the "Show log" box.

    On a large site, this automatic update feature can be an incredible time-saver, but you may not want to click Update, at least not right now. Perhaps you're just saving some of your hard work on the template but aren't quite finished perfecting it—why waste your time updating all those pages more than once? In such a scenario, click the Don't Update button. Remember, you can always update the pages later (see the box Wait to Update on page 786).

  7. Click Close.

    The Update Pages dialog box closes.

Remember that you need to update all your files, even if you make a simple change to the template, like changing its name.

Updating Nested Templates

When you build a website using nested templates, you often end up with multiple templates. The master template controls the design elements of nested templates, which in turn control the pages based on those nested templates. (You can even make nested templates out of nested templates, but for sanity's sake, you'd better not.) With this level of complexity, updates to nested templates can get confusing fast.

In a nutshell, here's how it works:

  • If you edit a locked region in a master template and then update your site, Dreamweaver updates not only the nested templates, but all pages built from them.

  • If you edit a locked region in a nested template and then update your site, Dreamweaver passes those changes on only to pages built from that nested template.

However, changes you make to an editable region of a master template don't pass on to any page. Neither do changes you make to editable regions of a nested template.

Note

Sometimes, after you make changes to a master template, Dreamweaver doesn't update the pages based on those templates. To safely verify that Dreamweaver updated all the templates, recreate the Site Cache (Site→Advanced→Recreate Site Cache), choose Modify→Template →Update Pages, and then select the "Entire Site" option.

Unlinking a Page from a Template

If you're confident that you won't make any further changes to a page's template and you want to edit a page's locked regions, you can break the link between the page and its template by choosing Modify→Templates→Detach from Template.

You can now edit all the HTML in the page, just as you can on a regular web page—which is, in fact, what it now is. You removed all references to the original template, so changes to the template no longer affect this page.

Note

If you unlink a nested template from its master template, Dreamweaver removes only the code provided by the original master template. Any editable regions you added to the nested template remain.

Exporting a Template-Based Site

The good news about Dreamweaver's sophisticated templating features is that they let you build complex web pages that are easy to create and update. The not-so-good news is that you need some behind-the-scenes code to achieve this ease of use. Dreamweaver's template features rely on HTML comment tags to identify editable, optional, and repeating page regions, as well as nested template and editable tag attributes (see the box on Under the Hood of Templates).

Although this code is only for Dreamweaver's use and has no effect on how a web browser displays the page, it does increase, by a small amount, the size of your pages. That's probably why Dreamweaver includes a feature that lets you export an entire site into a new folder on your computer without any template markup code—to give you the leanest HTML possible. The following steps show you how.

Note

While it's certainly possible to perform this file-slimming procedure, truth be told, it's not really necessary—the code Dreamweaver adds is minimal, so it won't have much affect on the download speed of your site.

  1. Choose Modify→Templates→Export Without Markup.

    Dreamweaver uses the currently active site, so make sure you've selected the site you wish to export in the Files panel. The Export Site Without Template Markup window appears (see Figure 20.19, “Dreamweaver lets you strip out template code from template-based pages with the Export Site Without Template Markup command.”).

    Figure 20.19. Dreamweaver lets you strip out template code from template-based pages with the Export Site Without Template Markup command.

    Dreamweaver lets you strip out template code from template-based pages with the Export Site Without Template Markup command.

  2. Click the Browse button, and then select a destination folder for the exported site.

    Select a folder other than the current local site folder. You always want to keep the original files in the local folder, since they're the ones that retain the template markup, making future updates possible.

  3. Turn on the export options you want.

    The Export window includes two options. The first, "Keep template data files," creates an XML file for each template-based page. In other words, when you export the site, there's one HTML page (without any template code) and an XML file (which includes all the template code as well as the page contents).

    Theoretically, you could then go back and choose the File→Import→"XML into Template" to recreate the page, complete with the original template information. However, in practice, you probably won't. This process creates lots of additional files that you wouldn't want to move to a website for one thing. Also, when you want to work on the site to edit and update it, you should use the original files in the site's local foldr, since they have the useful template code in them.

    The "Extract only changed files" option speeds up the process of exporting a large template-based site. This option forces Dreamweaver to export only pages you changed since the last export. Unfortunately, it doesn't tell you which files it exports until after the fact. So, to make sure you get those newly exported files to your server, you need to keep track of the changed files by hand.

  4. Click OK to export the site.

    Dreamweaver goes through each page of the site, stripping out template code and exporting it to the folder you specified.

    You can use Dreamweaver's FTP feature to upload the files to your server (see the section called “Transferring Files”), but you need to create a new site and define the folder with the exported files as a local root folder. Whenever you need to add or update template-based pages, use the original site files, and then export the changed files. You can then switch to the site containing the exported files and transfer the new or updated files to your server. If that sounds like a lot of work, it is. Every change you make means exporting the site again. You're better off just leaving the template code in your pages, or use this command only if you're absolutely sure that you're done using templates for your site.

Template Tutorial

In this tutorial, you'll create a template for the Chia Vet website. Then you'll build a page based on that template and enjoy an easy sitewide update courtesy of Dreamweaver's templates feature.

Note

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

Once you download the tutorial files and open Dreamweaver, setup a new site as described on the section called “Setting Up a Site”: Name the site Templates, and then select the Chapter20 folder (inside the MM_DWCS5 folder). (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 Chapter20 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 tips.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've just designed this beautiful page.

  3. Choose File→Save As Template.

    The Save As Template dialog box opens.

  4. In the description field, type Use for Chia tips.

    This description appears in the New Template window when you create a page based on this template.

  5. Name the template Tips; click Save. In the Update Links window, click Yes.

    Behind the scenes, Dreamweaver creates a new folder—Templates—in the site's root folder, and saves the file as Tips.dwt inside it. A new template is born. You can see it in the newly created Templates folder in the Files panel and in the Templates page of the Assets panel (see the Note below).

    The template is a model for other pages. But although they'll be based on its design, they won't be identical. The next step is to identify those areas of the design you want to change from page to page—the editable regions.

    Note

    Templates don't always immediately show up in the Templates category of the Assets panel. Sometimes you need to click the Refresh Site List button (the circular arrow in the bottom right of the Assets panel) to see a newly added template.

  6. Select the text from the "T" in the heading "Tips Title" to the right of the "e" for "here" in "Subtitle goes here".

    You just selected the title and subtitle for the page. As people add new tips to the Chia Vet site, you'll want them to add specific titles for each tip, so you should make these two paragraphs editable.

  7. Choose Insert→Template Objects→Editable Region.

    The New Editable Region dialog box appears. Here, as in the following steps, you can also, from the Insert panel's Common category, go to the Templates menu and choose the Editable Region option (Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”), or just press Ctrl+Alt+V (⌘-Option-V).

  8. Type Title; click OK.

    A small blue tab, labeled Title, appears above the headline. You've just added one editable region—the most basic type of template region. You'll make the main text area editable as well.

  9. Select the two paragraphs of text beneath "Title". Repeat steps 7 and 8; name the region Text.

    Another small blue tab, labeled Text, appears above the paragraphs. You might wonder why you did this in two chunks. Why not select the title, subtitle, and paragraphs in one fell swoop and turn them into a single editable region? Because of the "Related Tips" box. That's a bit of HTML that appears between the subtitle and the first paragraph of text. If you created just a single editable region, you also would have been able to edit that tip box (since you would have inadvertently selected its HTML, too).

    However, you've got bigger plans for that box. You want it to list web pages with related information. But what if there are no related tips for a particular page? In that case, you don't want the box to appear at all—a perfect case for an optional region.

  10. Click anywhere inside the "Related Tips" box (inside the bulleted list, for example) and choose Edit→Select All, twice.

    The first time you choose Edit→Select All (Ctl-+A, or ⌘-A works too), you select the contents of the box; the second time you invoke Select All, you grab the <div> tag that creates the box.

    You'll turn this <div> into an optional region so you can hide it on most pages, but display it when you can point visitors to related web pages.

  11. Choose Insert→Template Objects→Optional Region.

    The New Optional Region window appears. (Again, this same option is available in the Common category of the Insert Panel [Figure 20.2, “The Templates menu on the Common category of the Insert panel provides access to tools for creating templates and setting up a variety of Dreamweaver template features.”].)

  12. Type relatedTips in the name field, turn off the "Show by Default" checkbox, and then click OK.

    From now on, when you create a new template-based page, you won't see this box. When you build a page where you can point to related tips, however, you can make the box visible.

    You see a blue tab labeled "If relatedTips" above the "Related Tips" box (see Figure 20.20, “When you create optional, editable, and repeating template regions, the Tag selector is your best friend. Click a tag (<ul> in this case) to accurately select a piece of content. You'll also see Dreamweaver-specific tags listed on template files. Here, <mmtemplate:editable> indicates the editable region you created in step 13. Because the <ul> tag appears to the right of the <mmtemplate:editable> tag, you know that page authors can edit and change the <ul> tag and everything inside it when they create template-based pages.”): this part is the optional region, and represents where the HTML code with the div is located.

    Of course, to let someone add links to related pages, you need to add an editable region as well.

  13. Click anywhere inside the two links—for example in the text "Related Tip 1" or "Related Tip 2". In the Tag selector at the bottom of the document window, click the <ul> tag (circled in Figure 20.20, “When you create optional, editable, and repeating template regions, the Tag selector is your best friend. Click a tag (<ul> in this case) to accurately select a piece of content. You'll also see Dreamweaver-specific tags listed on template files. Here, <mmtemplate:editable> indicates the editable region you created in step 13. Because the <ul> tag appears to the right of the <mmtemplate:editable> tag, you know that page authors can edit and change the <ul> tag and everything inside it when they create template-based pages.”). Choose Insert→Template Objects→Editable Region. Name the new region relatedLinks.

    Now you can edit the links inside the optional region.

    Next, you'll add a repeating region to the right sidebar, so you can add multiple sets of questions and answers. You'll then make the text editable, so you can add story titles and links.

  14. In the right sidebar, click inside the text "Question goes here".

    Both the question and answer are contained inside a <div> tag. You'll turn that entire <div> tag into a repeating region.

  15. At the bottom of the window, in the Tag selector, click the <div.qa> tag to select that div.

    Choosing Edit→Select All twice will also select the div. The .qa part means that you applied a class named qa to that div. You just selected the <div> tag and the two paragraphs inside it. Because you may want to add any number of question/answer pairs, you'll turn this into a repeating region.

  16. Choose Insert→Template Objects→Repeating Region. In the window that appears, type repeatQuestions. Click OK.

    Dreamweaver inserts a new repeating region with the familiar blue tab. The tab reads "Repeat: repeatQuestions," indicating that it isn't any ordinary template region—it's a repeating region. However, turning a part of the page into a repeating region doesn't automatically make it editable. Since you want to edit the text and add new names to each page, you need to add an editable region inside this repeating region.

    Figure 20.20. When you create optional, editable, and repeating template regions, the Tag selector is your best friend. Click a tag (<ul> in this case) to accurately select a piece of content. You'll also see Dreamweaver-specific tags listed on template files. Here, <mmtemplate:editable> indicates the editable region you created in step 13. Because the <ul> tag appears to the right of the <mmtemplate:editable> tag, you know that page authors can edit and change the <ul> tag and everything inside it when they create template-based pages.

    When you create optional, editable, and repeating template regions, the Tag selector is your best friend. Click a tag (<ul> in this case) to accurately select a piece of content. You'll also see Dreamweaver-specific tags listed on template files. Here, <mmtemplate:editable> indicates the editable region you created in step 13. Because the <ul> tag appears to the right of the <mmtemplate:editable> tag, you know that page authors can edit and change the <ul> tag and everything inside it when they create template-based pages.

  17. Select the text "Question goes here". (Don't select the orange "Q." that marks the beginning of the question, however.) Choose Insert→Template Objecs→Editable Region. In the Name field, type question, and then click OK.

    Another blue tab, labeled "question," appears inside the repeating region. On template-based pages, you can now change this text. You don't select the "Q." at the beginning of the paragraph because you don't want that to be editable. That's part of your design, and at some point you might want to change it (for example, you might want to spell it out and add a colon: "Question:"). Because it's not part of an editable region, you can make that change once in the template and have every page based on that template reflect the change.

  18. Choose File→Save.

    A Dreamweaver dialog box appears, saying that the editable region you just created is inside a block tag and that you won't be able to add new blocks in this region. The reason for this dialog box is discussed on the section called “Adding a Repeating Region”, but in a nutshell it simply means that you won't be able to add additional paragraphs inside this area. Since this editable region is only intended for a single-line question and not multiple paragraphs, this is OK. (If you don't see this warning dialog box, you or someone using your computer may have already turned off that type of warning, as described in the next step.)

  19. Put a check inside the "Don't show me this message again" box and click OK.

    You may see another dialog box saying that you've changed a template and asking if you want to update pages on the site. Well, since you haven't yet created any pages from this template, there's nothing to update, so click the No button.

    Dreamweaver saves the file. You'll add another editable region for the answer.

  20. Repeat Step 18 for the text "Answer goes here." Name the editable region, answer.

    The template should now look like Figure 20.21, “A template file. If you don't see the blue boxes representing editable, optional, and repeatable regions, you may have turned them off. To show them, choose View→Visual Aids and make sure you have Invisible Elements checked.”.

  21. Choose File→Save, and close this File.

    Congratulations! You've created your first template.

Creating a Page Based on a Template

Now it's time to get down to business and build some web pages. Look at the Files panel and make sure you selected the site you defined in step 1. Then proceed as follows:

  1. Choose File→New.

    The New Document window opens.

  2. On the window's far left side, click the "Page from Template" button.

    A list of all defined sites appears in the Site list.

    Figure 20.21. A template file. If you don't see the blue boxes representing editable, optional, and repeatable regions, you may have turned them off. To show them, choose View→Visual Aids and make sure you have Invisible Elements checked.

    A template file. If you don't see the blue boxes representing editable, optional, and repeatable regions, you may have turned them off. To show them, choose View→Visual Aids and make sure you have Invisible Elements checked.

  3. Make sure you have the site you set up for this tutorial ("Templates") selected in the Site column; also make sure the "Update page when template changes" checkbox (in the right of the window) is turned on.

    If you don't turn on the "Update page" box, the new page doesn't link to the original template file—and doesn't update when you make changes to the template.

  4. From the templates list, select Tips, and then click Create.

    And lo, a new, untitled web page document appears, one that looks (almost) exactly like the template (Figure 20.22, “In template-based pages, blue tabs identify editable areas, and the yellow tab at the top right lists the template's name. In some cases, template tabs may overlap. Here, the tab for the editable region "question" sits on top of the tab for the repeatable region. Notice that the repeating region has small control buttons (+, -, and up and down arrows) and the optional region—the "Related Tips" box—is invisible. (Remember, you deselected the "Show by Default" option for this region.)”).

  5. Choose File→Save. Click the Site Root button and save the file as tip1.html in the root folder. In the Document toolbar's Title field (at the top of the document window), type Repairing Chipped Terra Cotta.

    To indicate that it's your template's offspring, the document window has a yellow tab in the upper-right corner that reads Template:Tips. You can see your editable and repeating regions indicated by blue tabs. Now it's time to add some content.

  6. Choose File→Open; in the Open file window, click the Site Root button; double-click the file tip1_text.html.

    You can also open this file by double-clicking its name in the Files panel. The tip1_text.html page contains the content for the new template-based page. It's just a matter of copying and pasting the text from one page to the other.

    Figure 20.22. In template-based pages, blue tabs identify editable areas, and the yellow tab at the top right lists the template's name. In some cases, template tabs may overlap. Here, the tab for the editable region "question" sits on top of the tab for the repeatable region. Notice that the repeating region has small control buttons (+, -, and up and down arrows) and the optional region—the "Related Tips" box—is invisible. (Remember, you deselected the "Show by Default" option for this region.)

    In template-based pages, blue tabs identify editable areas, and the yellow tab at the top right lists the template's name. In some cases, template tabs may overlap. Here, the tab for the editable region "question" sits on top of the tab for the repeatable region. Notice that the repeating region has small control buttons (+, -, and up and down arrows) and the optional region—the "Related Tips" box—is invisible. (Remember, you deselected the "Show by Default" option for this region.)

  7. Select the headline and the paragraph immediately following it at the top of the page and choose Edit→Copy. At the top of the document window, click the tip1.html tab to switch to the template-based page.

    Remember that you can add content only to an editable region. If you move your mouse over the banner, navigation, or footer areas of the page, you see a black "forbidden" symbol. You can't insert the cursor anywhere but inside an editable region.

  8. Click the blue tab labeled "Title" (the label is just above the headline "Tips Title Goes Here").

    This selects everything inside that region. Since it's just placeholder text anyway, you'll replace it with the two paragraphs you just copied.

  9. Choose Edit→Paste.

    Dreamweaver replaces the dummy content with the title and subtitle for this Chia Tip page. (If the two lines of text look like plain paragraphs, turn the top line into a Heading 1 using the Format menu in the Property inspector, and add the class tagline to the second paragraph.) Now you'll add the main content of the tip.

  10. Click the tip1_text.html tab at the top of the Document window. Repeat steps7–9, copying the remaining text on the tip1_text.html page and pasting it into the Text editable region on the tip1.html page.

    The main tip is in place. This particular page doesn't have any related tips, so you'll leave the hidden optional region hidden (you'll show it on the next page you build).

    Time for some questions and answers.

    Note

    If, at a later time, Chia-Vet.com does add another page with a tip that's related to this web page, you can make the Related Tips box visible simply by choosing Modify→Template Properties and then turning on the "Show relatedTips" checkbox. You'll see this process in action in step 5 on the section called “Creating Another Template-Based Page”.

  11. In the page's right sidebar, delete the text "Question goes here" and type, "Can I dye my Chia Pet?"

    You've added a question in one editable area, now time for the answer.

  12. Click the "answer" tab and type some suitably silly answer in keeping with the Chia Vet website.

    For example: "You can certainly dye your Chia's body. Since terra cotta is absorbent, any colored liquid will work. However, it's best to use non-toxic dyes like food coloring or beet juice." As it happens, there's another important question for this page. Since you're using a repeating region, it's easy to add another question/answer pair.

  13. Click the + button just to the right of the blue "Repeat: repeatQuestions" tab.

    You've added another pair of question and answer editable regions to the page, as shown in Figure 20.23, “If a page has a lot of elements crowded together—tables, images, text, and so on—Dreamweaver sometimes can't display the small buttons that let you add and remove repeating entries. In this case, you can also use the Modify menu. Click a repeating region, and then choose Modify→Templates→New Entry After Selection to add a new entry after the current one, or New Entry Before Selection to add a new entry before the current one.”.

    Figure 20.23. If a page has a lot of elements crowded together—tables, images, text, and so on—Dreamweaver sometimes can't display the small buttons that let you add and remove repeating entries. In this case, you can also use the Modify menu. Click a repeating region, and then choose Modify→Templates→New Entry After Selection to add a new entry after the current one, or New Entry Before Selection to add a new entry before the current one.

    If a page has a lot of elements crowded together—tables, images, text, and so on—Dreamweaver sometimes can't display the small buttons that let you add and remove repeating entries. In this case, you can also use the Modify menu. Click a repeating region, and then choose Modify→Templates→New Entry After Selection to add a new entry after the current one, or New Entry Before Selection to add a new entry before the current one.

  14. Repeat steps 11 and 12, adding an even sillier question and answer.

    Congratulations, you've just completed a web page for Chia-Vet.com. Save this page and preview it in a Web browser (press F12 [Option-F12]). Return to Dreamweaver and close this page. Now you'll add another page to the site.

Creating Another Template-Based Page

Templates are useful only if you use them to build lots of pages. You'll build one more template-based page for this tutorial, and see how optional template regions let you create very adaptive web pages.

  1. Choose File→New. In the New Document window, click the "Page from Template" button; from the templates list, select Tips, and then click Create.

    Another new web page is born.

  2. Choose File→Save. Save the file as tip2.html in the root folder. In the Title field in the Document toolbar (at the top of the document window), type Trimming Your Chia's Coat.

    You'll add some already created content to this page.

  3. Repeat steps 6–10 on the section called “Creating a Template” in the section called “Creating a Page Based on a Template”. Use the file tip2_text.html located in the root folder.

    Because trimming a Chia Pet's mane with sharp scissors is a recipe for chipped terra cotta, you've decided that you should provide a link from this page to the one you created previously. Fortunately, the optional region you created earlier is ready to be used.

  4. Choose Modify→Template Properties.

    The Template Properties window appears (see Figure 20.24, “The Template Properties window does double duty. It let you hide or show optional regions, and it lets you set values for editable tag attributes.”). It lists the optional region you wish to make visible.

    Figure 20.24. The Template Properties window does double duty. It let you hide or show optional regions, and it lets you set values for editable tag attributes.

    The Template Properties window does double duty. It let you hide or show optional regions, and it lets you set values for editable tag attributes.

  5. Turn on the "Show relatedTips" checkbox and then click OK to close the window.

    The Related Tips box suddenly appears. There's only one related page, so you don't need both bulleted items.

  6. Delete second bullet point ("Related Tip 2") and change the text of the first bullet to "Repairing Chipped Terra Cotta". Link that text to the tip1.html page (use any of the link-creation techniques discussed on the section called “Link from the Scorpio page to the Horoscopes page”).

    This page is nearly complete: just one final item.

  7. Repeat step 14 on the section called “Creating Another Template-Based Page”.

    You're almost done.

  8. Preview the page in a web browser.

    While most of the page looks the same as the first template-based page you created, the optional region let you add special content to this page without having to create another template. Next you'll edit the template file and update the website.

    Close this page and tip1.html when you're ready to move onto the next step.

Updating a Template

Now the fun begins. Remember, this page maintains a reference to the original template. In the final phase, you're going to make a few changes to the template. Choose Window→Assets to open the Assets panel, and then click the Template button to reveal the templates for this site (see Figure 20.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: If you just created a template and don't see it listed, click 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.”):

  1. Return to Dreamweaver, and in the Assets panel, click the Templates button (see Figure 15-11), and double-click the Tips template to open it.

    The original template, the Tips.dwt file, opens. You can also open the .dwt file by double-clicking its name inside the Templates folder in the Files panel.

    There are a couple of things that need changing; first the copyright needs to be updated.

  2. In the footer, locate the Copyright 2008 and change it to the current year.

    If it's still 2008 (you early-adopter you), change the year to 2010 or whatever the current year happens to be. You'll also add a link here.

  3. On the same line in the footer, select the text "Cosmofarmer.com". In the Property inspector's link field type http://www.cosmofarmer.com/.

    You've also decided that you don't like the look of the "Q." and "A." in the right sidebar, so you'll change that as well.

  4. In the right sidebar, delete the period at the end of "Q."; select the letter Q, and from the Class menu in the Property inspector select the class style q.

    The Q changes appearance—the letter gets smaller, turns white, and has an orange box around it.

    Note

    If you don't see a Class menu in the Property inspector, you're in CSS view. Click the HTML button on the left side of the Property inspector to reveal the Class menu.

  5. Repeat step 4, replacing the "A." with just "A" and applying the class a to it.

    The A changes appearance—the letter gets smaller, turns white, and a green box surrounds it. Because both the Q and A are outside of the editable regions (that is, the area with the blue tabs "question" and "answer"), the changes you just made will pass on to template-based pages.

  6. Choose File→Save.

    Dreamweaver displays the Update Template Files window. This is the moment of truth.

  7. Click Update.

    Dreamweaver opens the Update Pages dialog box and updates the appropriate web pages, adding the copyright year, the link, and new Q and A icons to each one. In this case, you based only two pages on the template, so Dreamweaver updates only two pages—as indicated by the list of changes Dreamweaver shows when it's finished.

    Note

    If, after you update pages based on a template, you don't see the number of updated pages listed in the Update Pages window, turn on the Show Log checkbox.

  8. Click Close to close the Update Pages dialog box. Finally, open the files tip1.html and tip2.html.

    Notice that Dreamweaver updated the copyright and question/answer sections in both (see Figure 20.25, “The finished tutorial page, complete with a useful Chia tip, a box with a link to a related web page, and a helpful question and answer.”). This series of events happened because you changed the template to which the page was genetically linked. Ah, the power!

Figure 20.25. The finished tutorial page, complete with a useful Chia tip, a box with a link to a related web page, and a helpful question and answer.

The finished tutorial page, complete with a useful Chia tip, a box with a link to a related web page, and a helpful question and answer.

If you enjoyed this excerpt, buy a copy of Dreamweaver CS5: The Missing Manual.