Contribute Article

Modifying Page Layouts with Template Conditional Statements and Multiple CSS Files

You may have tried to use Contribute 3 but decided that there were limitations on how your clients could use it. I've heard various complaints, from "I can't apply templates to pre-exisiting pages" to "I can't apply CSS to this page."

To put Contribute to good use, you need to figure out first what you want your clients to do with their pages. Do you want to give them the option of modifying the layout of their pages or bringing in a new style depending on content regions? If so, you can do this by taking advantage of Dreamweaver 8 and Contribute 3 support for standards as well as handy Dreamweaver template files (DWTs).

The idea here is to keep things as simple as possible. No tricky CSS, no inscrutable JavaScript, no server-side includes—just clean XHTML and CSS. You can even give the people who use templates a way to customize them or finish them off—something that is very easy to do in Dreamweaver 8.

In this article I will go through the steps of creating a simple DWT for Contribute users, including deployment strategies and what you should watch for. The CSS is by no means advanced, so anyone who is new to CSS will be able to understand what is going on. There is no design either; just a simple way to harness the power of CSS and DWTs to give your users a way of modifying the layout of their web pages without knowing any CSS whatsoever.

Requirements

To complete this tutorial you will need to install the following software and files:

Contribute 3

• Try
• Buy

Dreamweaver 8

• Try
• Buy

Studio 8 would be ideal but you can get away with just Dreamweaver 8 and Contribute 3.

Tutorials and sample files:

• css_xhtml.zip (ZIP, 9K)

Prerequisite Knowledge

Some familiarity with CSS and Dreamweaver templates. It would help a lot if you spent some time in the Dreamweaver CSS and Dreamweaver Templates sections of the Developer Center.

Let's Talk Basic Design

There are more books out there on web design than anyone could possibly read in a lifetime. The design for this article follows a pretty basic "institutional" site modeled after what I call a brochure. You have a header, body, and footer. In the body you have one column for your navigation and a second one for your content. You could add a third column either to complement the navigation or feature other content (see Figure 1).

Figure 1. Basic regions highlighted

(+) View larger

Although graphical refinements to this page would be crucial to enhance your site, it's not necessary for the purpose of this article. This design is a skeleton only.

The XHTML

The structure of the XHTML is extremely important. Why? The order in which your content appears (without CSS) is how most handheld devices, text browsers, and screen readers read your content. Plus you want to try to avoid the ever-dangerous "divitis"—a phenomenon where the web designer uses too many div tags and ends up creating more markup than if he or she did the layout the old-fashioned way with tables.

There are two ways to code this in Dreamweaver:

• Use the Code view and place your divs in the proper order
• Do this with the panels and the Design view

Personally I find the first option the easiest. I wouldn't recommend using the Design view in Dreamweaver 8 for this task. To become familiar with CSS layouts in Dreaweaver, read Adrian Senior's six-part series, Designing with CSS.

Now set up the XHTML. The first thing to do after creating a new XHTML 1.0 transitional page is to insert the following div tag right below the body tag:

<div id="pagecontainer">

Close it by inserting a </div> right before the closing </body> tag. Why do this? Because that container will allow you to do a lot in the future.

Next enter the following:

<div id="header">
</div>
<div id="primarycontarea">
</div>
<div id="footer">
</div>

What other div's should you include? You need some specific navigation tags, secondary navigation, and primary content. Plus a couple more for good measure:

<div id="header">
</div>
<div id="primarycontarea">
   <div id="primarynavarea">
      <div class="primarynav">
      </div>
   </div>
   <div id="secondnavarea">
      <div class="secondnav">
      </div>
   </div>
   <div class="primarycontent">
   </div>
</div>
<div id="footer">
</div>

Note how I don't use "left", "right", "top", or "bottom" in any of those id names. Why? Because you may want one to appear in a different place in the future, and the naming could get confusing if "leftnav" is located on the right. The other thing to notice is the order of the regions. First you get header, then navigation, then content, and then footer.

Overall, though, that is pretty basic. In the interest of time, take a look at the sample page (index.html) in the article's sample file download and grab the source from the file. That is what your page should look like. Comments in the code explain what other parts of the page are about.

The CSS

Have you read the CSS articles in the Developer Center? If so, you can breeze through this part. Here I create a three-column layout in which all three columns can push the footer down so that nothing overflows (see Figure 2).

Figure 2. Three-column layout

(+) View larger

Again, in the interest of time—and because there are a zillion multicolumn tutorials out there—go ahead and borrow the CSS from the article's sample files. Three files are required:

• GeneralLayout.css: General layout of page except for structure; the fonts, sizes, margins, and so on are here.
• TwoCol.css: CSS to ensure a two-column layout
• ThreeCol.css: CSS required for a three-column layout

These three files are necessary to give people the option of two columns or three columns. Note the comments in the code—and the lack of browser hacks, so that the design will render properly in the Design view (something like Microsoft Internet Explorer but more standards-friendly) and Mozilla Firefox.

Inserting Template Regions in Dreamweaver

Does it seem like I'm getting away with doing less by sending you off to yet another Developer Center article? This time it's a Breeze seminar by Bill Wierenga called Introducing Templates for Contribute Users, and it's well worth your time. If you are already familiar with Dreameaver templates, however, then move on.

I am going to take advantage of the "optional regions" in Dreamweaver templates. I am also going to use a conditional statement so that if a two-column layout is selected then certain XHTML if left out of the page and another CSS file called. Here are the general steps to make this happen:

1. Turn the index.html page into a template file.
2. Insert an editable region for the primary content and call it PrimaryContent.
3. Make sure you call all three CSS files.

I prefer to hand-code but you can add the following code using the tools in the Template options (click the second-from-the-right button in the Common category of the Insert bar in Dreamweaver). Go into the Code view and insert the following lines:

<link href="../css/GeneralLayout.css" rel="stylesheet" type="text/css" media="screen" />
<!-- TemplateBeginIf cond="ThreeColumns" -->
   <link href="../css/ThreeCol.css" rel="stylesheet" type="text/css" media="screen" />
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="ThreeColumns==false" -->
   <link href="../css/TwoCol.css" rel="stylesheet" type="text/css" media="screen" />
<!-- TemplateEndIf -->
<!-- TemplateParam name="ThreeColumns" type="boolean" value="true" -->

The last line of code is assigned the value of "true", which means that a default page created from this template will have three columns. The conditions give you the ability to change the layout of the page simply by changing the template properties.

With the Template Properties dialog box open in Dreamweaver, the template conditions in action look something like Figure 3.

Figure 3. Template properties

(+) View larger

If you set the ThreeColumns template parameter value to "false", you get a page like Figure 4.

Figure 4. Template parameter set to render two columns

(+) View larger

There you go! In Dreamweaver you don't have to touch the CSS anymore to get a new layout. What about Contribute users?

Testing Templates in Contribute

Contribute users are really whom this template is for. Contribute users won't be able to include CSS files or delete them, or even apply templates to pages, but they can modify the optional regions in templates. In Contribute, access the ThreeColumns property just as you would in Dreamweaver 8 by selecting Format > Template Properties. Then set the value to "true" or "false" to show (or not to show) the selected region (see Figure 5).

Figure 5. Template properties in Contribute

(+) View larger

What to Watch For

Because Contribute 3 and Dreamweaver 8 employ different levels of CSS rendering according to web standards, you can run into some oddities. It's a good idea to stick to floating and relative layouts because they both seem to behave really well. You get into problems with position:absolute and its position relative to other margins and padding on the page.

Also be mindful of browser bugs. Read up on your CSS bugs, be aware that they may appear, and know how to work around them.

Where to Go from Here

You can do a lot with conditional DWT statements. Normally you would use them just to bring in pieces of a site that are relevant to one particular area or page. The content could be maintained in the DWT or could come from a server-side include. There are other possibilities. You might offer people different templates for different designs because your design is tied so closely to the HTML.

Using DWTs to call in different CSS designs allows you go give your clients completely different layouts without creating a different template for each. That means you need to worry about only one template file for what could be many microsites. It's like a style switcher without the JavaScript.

Here at the University of Waterloo, I designed a set of templates to mimic an older, table-based design that was riddled with graphics and difficulties in duplicating page design. This template has since become a campus standard and helped UW move over 90% of its thousands of sites to XHTML/CSS layout with minimal support required. It was so easy for people to use that it spread very quickly.

The framework I am offering you a year later is much better. Have fun with it and build some complex conditional templates.

About the author