I wrote a series of three articles on how you can use a ColdFusion custom tag to supply the design of every page in your site. Since that time, Community MX has released several Jumpstarts -- page designs using the latest HTML and CSS techniques to create starting points for your own designs. The Jumpstart is also a perfect fit for the use of a ColdFusion custom tag. Heidi Bautista wrote an article about using Jumpstarts with ASP.NET master pages -- Convert an Existing Site to Use ASP.NET Master Pages and Themes. The ASP.NET master page is very similar in concept to the technique I presented in my series on CF, so this tutorial will cover the same ground for ColdFusion users. The ASP.NET functionality is built in; the CF functionality is not, but easily mimicked.

I use this technique on every site I build in CF, including Flash-Remoting.com, Tom-Muck.com, and EZGram.com.

To follow along with this part of the tutorial, you will need to complete the previous parts, as they lay the foundation:

• Part 1
• Part 2
• Part 3

I will be using the North Pole Jumpstart, as it is a free download for non-subscribers. The North Pole Jumpstart was also used as the basis for the TODCON site, so you can get a good idea of the flexibility of Jumpstarts. The technique can be applied to any Community MX Jumpstart, or any other page design for that matter.

North Pole

The North Pole Jumpstart consists of an index.html file, an images folder, and a CssFiles folder. We will use the index.html file as the basis of the design template. As in the last part of the series, the template will be saved in a folder called mycustomtags. Assuming you've set up the local folder structure as was outlined in the first three parts of this series, the first step is to copy the index.html file to the mycustomtags directory using the name northpole.cfm.

At this point, the page design is already a working custom tag template. Verify it by creating a page at your site root called northpoleindex.cfm and putting this code in the page:

<cfimport prefix="mytag" taglib="mycustomtags">
<mytag:northpole>
</mytag:northpole>

If you browse this page in a browser, you will see the North Pole design, fully implemented as designed.

In the previous parts of this tutorial, we built simple designs from scratch. When modifying an existing design to become a ColdFusion custom tag, you have to make a couple decisions:

1. What parts, if any, are going to be include files or custom tags?
2. What part is going to be designated as the main content?

For the North Pole design, I've decided to move the navigation into an include file, and the footer into another include file. The nav section is contained in a <div> with an id of navigation. You could remove the entire div into the include file, or just the contents of the div. I've elected to move the contents of the div:

<ul>
<li><a href="#" tabindex="1" class="first">Link One</a></li>
<li><a href="#" tabindex="2">Link Two</a></li>
<li><a href="#" tabindex="3">Link Three</a></li>
<li><a href="#" tabindex="4">Link Four</a></li>
<li><a href="#" tabindex="5">Link Five</a></li>
<li><a href="#" tabindex="6">Link Six</a></li>
</ul>

Save this into a folder called includes under the name nav.cfm. Now, substitute the <cfinclude> in the page design template, inside the <div>:

<div id="navigation">
<cfinclude template="../includes/nav.cfm">
<!-- Closes the navigation div -->
</div>

The same steps should be followed for the footer. Move this into an include called footer.cfm:

<p>company info </p>
<ul>
<li><a href="#">WAI</a></li>
<li><a href="#">508</a></li>
<li><a href="#">valid xhtml</a></li>
<li><a href="#">valid CSS</a></li>
<li><a href="#">site design by your company</a></li>
</ul>

Then add the <cfinclude> line to the northpole.cfm template:

<!-- Opens the footer div -->
<div id="footer">
<cfinclude template="../includes/footer.cfm">
<!-- Closes the footer div -->
</div>

With those two includes in place, you should once again test your design by browsing again to northpoleindex.cfm and making sure everything is working.

Adding the Main Content

As you saw in the previous parts of the series, the main design was separated into two parts -- the open tag and the close tag. The North Pole design has a main section with a <div> tag using the id of content. This is where our split will be -- everything up to and including the <div id="content"> will be supplied by the start tag:

<mytag:northpole>

The dummy content should be removed, and everything from the closing tag to the end of the file will be supplied by the close tag:

</mytag:northpole>

To do this, we'll use the <cfif> statements like we used in the previous part of the tutorial -- the first line in the file will check the execution mode to determine if the tag is a start or end tag:

<cfif thistag.executionmode EQ "start">

Now, right after the opening of the content div, we'll supply a <cfelse> tag: everything after the <cfelse> will be supplied by the end tag:

<!-- Opens the content div -->
<div id="content"><cfelse>

And at the very end of the file -- after the </html> closing tag -- place the end of the </cfif>

</html></cfif>

Once again, test the northpoleindex.cfm file in the browser to see if it is working. It should show the page design, but this time with no content.

Figure 1: The basic template with no content

You can see where this is heading: every page in your site can now use this design. The content area is the only thing that you need to supply:

<cfimport prefix="mytag" taglib="mycustomtags">
<mytag:northpole>

<h1>Welcome!</h1>
<p>This is my new site, featuring the North Pole page design from Community MX!</p>

</mytag:northpole>

The advantages of this method are plain to see:

• One page supplies all pages with design -- a global change can be implemented by changing one file and never having to update any other pages in your site.
• The clutter is gone from code view. Even the most intricately designed HTML gets in the way of content. Code view now shows only 3 lines of code that is not content.
• Using include files for shared content (menus, footers, etc) makes it even more flexible by allowing global design changes without affecting some standard features of your site.

Building a Dreamweaver default page

Now that your design is finished and the page is simplified, you'll want to use this page as the basis for all pages in your site. Simply create a blank file and add your code that is the basis of all pages:

<cfimport prefix="mytag" taglib="mycustomtags">
<mytag:northpole>
</mytag:northpole>

Save the file in the \Configuration\Builtin\CMX JumpStarts folder as northpole.htm. After saving the file, it will show up in the New Document dialog box along with the other CMX JumpStarts. Now, whenever you need to create a new file for your site, use the New Document dialog box and choose the northpole.htm file.

Note: You'll find the \Builtin\CMX JumpStarts in your local configuration folder. For a hint on where to find the local configuration folder, if you don't know where it is, check Danilo's blog entry on the subject.

Supplying the Dynamic Title

One thing that we did in the previous parts of the tutorial was to supply a dynamic title, so that each page in the site can have a different title tag. Again, this was as simple as supplying a <cfparam> in the custom tag, and using a title attribute when calling the tag. Place this in the northpole.cfm custom tag:

<cfparam name="attributes.title" default="Community MX">

Change the title to use the dynamic title:

<title><cfoutput>#attributes.title#</cfoutput></title>

and finally, add a title attribute to the calling page:

<cfimport prefix="mytag" taglib="mycustomtags">
<mytag:northpole title="Welcome to the new site!" >

<h1>Welcome!</h1>
<p>This is my new site, featuring the North Pole page design from Community MX!</p>

</mytag:northpole>

Conclusion

This tutorial showed how a page design like a Community MX Jumpstart can be used as a site template for your entire site.