Dreamweaver 8 Design and Construction (OReilly Digital Studio)

11.1. Getting Ready

To begin, fire up Dreamweaver, and open your index.html document from Chapter 9 or Chapter 10. This page contains the skeleton layout for your site.

Knowing which content is fixed and which is variable is the secret to designing effective templates, so it's worth reviewing the plan for your site and setting up the template document accordingly. By way of example, Figure 11-1 shows the general mockup for your new client's web site, and Figure 11-2 shows the corresponding tables-based layout that you've created so far and saved as index.html. Now, given this design, which areas (or sections of areas) are fixed, and which are variable?

You decide that the banner is fixed content, because it remains unchanged from page to page. The same goes for the secondary navigation (i.e., the list of links at the bottom of the main content area).

By contrast, the second-level links at the top of the main content area do change from page to page, as does whatever appears in the "Content goes here" section, so these need to sit inside editable regions of the template.

What about the nav bar? Is it fixed or variable? This depends upon the style of nav bar that you plan on building.

Assume that you're planning a nav bar like the one in Figure 11-3, where the buttons of the nav bar don't change their default appearance depending upon the page. In a case like this, the nav bar is fixed content.

A nav bar like the one in Figure 11-4, though, is variable content, because the default style of the button does change depending upon the page. In this design, when the visitor lands on the Meet Bill page, the Meet Bill button in the nav bar becomes a simple text label to reinforce the idea of "You are here." By this logic, on the Coercion page, the Meet Bill button reverts to normal, while the Coercion button becomes a text label; a similar behavior happens on all the pages of the site.

For the sake of argument, say that you're planning a nav bar like the one in Figure 11-3, so add the navigation area to your list of fixed elements. Your mental worksheet looks something like this:

• Fixed content

  Banner area

  Nav area

  Secondary navigation (bottom of content area)

• Variable content

  Links to second-level pages (top of content area)

  "Content goes here" section (middle of content area)

To make the most of your template-building session, you should add a few content placeholders to your Dreamweaver layout. The goal here is to divide the main content area into specific sections so that you can choose which should be editable regions a little later in this process.

From the looks of things, your content area has three sections: the second-level links at the top, the "Content goes here" in the middle, and the secondary navigation at the bottom. So go into Dreamweaver, click inside the Content area of your layout, and add these sections, as Figure 11-5 shows. You don't have to position the secondary navigation at the bottom of the Content area. Remember, the height of the content area depends upon the actual amount of content that goes in it. Right now, as long as the secondary navigation appears below the "Content goes here" section, you're in good shape. Likewise, don't worry about turning the items into links or formatting the text the way you want it. Just get the placeholder text into the layout to represent the three sections.

When you press Enter or Return to separate the lines of placeholder text, Dreamweaver automatically marks up the placeholder elements as paragraphs, as you can see by checking the Format menu on the Property Inspector. This is an important point to remember for when you add editable regions to your template (see "Defining Editable Regions" later in this chapter).

Now compare the items in your fixed/variable mental worksheet with the elements that you've added to your Dreamweaver layout, and you find that they're a one-for-one match, which is exactly how you want it.