This past summer I decided that my courseware site needed a complete overhaul. It was, in fact, a bit of an embarrassment. As a teacher, writer, and lecturer I had been sticking my courseware and lectures notes up on a site that was designed more for convenience than anything else. After quietly suffering through the jabs of my students and my colleagues, I decided the time had arrived to bring order to the chaos.

In August 2003, I sat down with a very talented Toronto graphic designer, Shawn Butchart, and asked him, as I succinctly put it, "to give my site an enema." After a lot of the usual discussion we settled on a rather interesting design and I went to work exploring the joys and the frustrations of the world of CSS-Positioning, or CSS-p. When the redesign went live in November, it met with the approval of my students and peers and, as is normal, I thought I would live with the design for the next couple of years (see Image I). Then the wheels started to wobble.

One-third of the site was devoted to a series of tutorials and Studio MX-related articles I have written. They can be found at www.tomontheweb2.ca/MXtras/Tips_techniques.htm.

Image II shows a redesigned page - this area will grow, and I hadn't incorporated this rather important fact into the design of the site. In November of 2003 there were about a dozen tutorials. Today, a few months later, the number is approaching 30 and will most likely crack the 50 mark by the end of this year. Rather than solve a problem, I had created a bigger one.

The problem had two aspects to it. The first was the entry page listing the tutorials. There was no real organization to it. I would prepare a tutorial for the students and tack its description to the bottom of the list. This is workable if you have only a handful of tutorials. It falls apart when the number grows. Trying to find a specific tutorial, "Color Correction in Fireworks," for example, requires the user to hunt through the page. I needed to rethink this page and make it more accessible to my visitors.

The second problem was the actual process of adding a tutorial. Though I was using a "template" the actual creation of the page was a time-consuming process. The text would have to be flowed into the page; the images would have to be added; the links, if there were any, would get tossed in; and the page would be saved to the directory. The listing page would then be opened, the description and link created, and then it would be uploaded to the server. It was inefficient and, if allowed to continue, would become an administrative and site management horror show.

The time had arrived for me, to borrow a phrase from my latest book, "to get dynamic or get dead."

This two-part article will take you through how I did it. It most likely won't be pretty because Web design based upon a dynamic paradigm is an inexact science. Planning data, data flow, database choice, middleware choice, and so on are all subjective, not objective, decisions. The whole field of dynamic Web site creation is relatively new. It's only over the past few years that dynamic sites have moved into the mainstream of the industry, and the introduction of Studio MX 2004 and Macromedia's embracing of "rich Internet applications" only served to accelerate acceptance of this discipline.

I didn't try to do it by myself. My area of specialization - how Studio MX tools work together to provide a comprehensive workflow solution - is already quite large. Early in the game I made a conscious decision to understand how databases and ColdFusion work and interact with the tools in Studio MX. Still, rolling up my sleeves, digging into the code, and getting my arms "dirty" with electrons was something I chose not to do. Ours is an industry where teams of specialists bring their unique skills to bear on the task at hand. It is an industry where two polar opposites - geeks and freaks - have to learn to not only work intimately with each other, but also to speak each other's unique language.

Designers, to coin a phrase from the '60s, "the freaks," simply can't be expected to be coders. They aren't hardwired into logic. Coders, "the geeks," live in a sequential and logical universe. This is not to belittle or stereotype anyone. It is simply describing how the two groups think and approach the problem-solving process.

If a freak wants to get a cup of coffee he or she will point in the general direction of the café and say, "I am going over there for a cup of coffee." The geek will map out the route with a focus on the most efficient and logical method of arriving at the café. In the dynamic way of doing things, the most successful organizations are those in which the geeks and the freaks harmonize their unique skill sets to meet clients' needs.

This brings me to James Cullin - James is a geek. I have known James for more than a decade and, next to my book's coauthor Jordan Chilcott, he is one of the best coders I have encountered. More important, like Jordan, James understands the creative process intimately.

James and I have worked together for more than a decade teaching digital media technologies at our college's school of media studies. Our two programs - interactive multimedia and Internet management - complement each other, and three years ago we came to the conclusion that his Internet management students needed to know what I do and that my multimedia students needed to know what he does. This wasn't done for political or turf reasons. It was more pragmatic than that. Our two groups were graduating into an industry in which they would eventually have to work closely with each other, and it only made sense that they learn how to communicate and work together before they graduated.

Getting Out of the Box
When I discovered I had boxed myself in with my new design, I started looking at how to get out of the box. Over Christmas, I came to the conclusion that the only solution was to make the tutorials section dynamic. When I returned to work in January of this year, I plunked myself down in a chair in James's office and said, "I have a problem and need your help to solve it."

As is so typical of James, he listened to my problem, asked a few very pointed questions, whipped out a lined pad of paper, and said, "Let's get to work."

At this stage of the process, there is very little, if any, design work to be done. The key issue is how to incorporate the movement of dynamic data into a page composed solely of <div> tags. If you look at the structure of the page in Dreamweaver MX 2004's design view, rolling over a <div> is indicated by a red outline, as shown in Image III, around the perimeter of the <div> area. If you are used to creating pages with tables, a <div> replaces either the table or the cell of a table. This means, theoretically, a CSS-p page can actually be turned into a Dreamweaver template. The <div> tags can be placed in the Optional regions of the template and the content can flow into the editable regions of a Dreamweaver MX 2004 template that are commonly used in dynamic pages.

Though the theory is sound, I wanted to be absolutely sure I could do this. I went to Murray Summers, coauthor of the definitive book on the use of templates in Dreamweaver MX, for a second opinion. His response was rather interesting: "I like it when I look at the page's source and all I see is <body>. This tells me that I am either dealing with a rank amateur, or an experienced master!" As you can see, there is a razor-thin margin for error in this project.

When James pulled out his lined pad, he was assuming control of the first part of the process: planning the data.

Planning the Data
This step involves a lot more than simply pointing to a text area on a page and saying. "Well, the text goes here." When planning the data you have to "think like a computer" and create the database in a logical manner. This is the area where the geeks should take control. Databases are not created on the fly. They are carefully designed and planned to meet both immediate and future needs.

When planning the data consider these points:

• Image1
• Image2
• Image3
• Image4
• Image5