So, now anyone following along has had plenty of time to come up with a few items they might include in a page template, variables that might change but layout consistent. Let's take a look at how we might apply the same layout from several different programming perspectives.

First I think we'll start off with basic includes. This is a technique used over and over again, and something that might apply in many different web development languages, but we'll just use trusty old ColdFusion. Let me point out something you don't want to do. Do not place your header and footer includes inside your Application.cfm (or cfc) or OnRequestEnd.cfm. Doing so would strip you of higher levels of control of your output and leave you in the wind if you require alternate displays on different pages, plus could cause you issues should you begin to use AJAX in your applications.

So, we'll start off with our files from our previous tutorial, building upon the template we already have started. First, look carefully at the index.cfm and you will notice that we can easily spot where our primary page content is going to be. Knowing this is the first part of the battle, giving you a pretty good definitive line of where to split your header and your footer. So, break it up into these two files.


view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
2<html xmlns="">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5        <title>Untitled Document</title>
6        <link href="css/default.css" rel="stylesheet" type="text/css" media="screen" lang="en" title="Default Site Stylesheet" />
7    </head>
9    <body>
11        <div id="totalBody">
12         <div id="headerBlock">
13         <div id="headerText">
14         <h2>This is my header block</h2>
15         </div>
16         <div id="headerMenu">
17         <p>Header Menu will go here</p>
18         </div>
19         </div>
20         <div id="mainContent">
21                 <div id="navMenu">
23                </div>


view plain print about
2        </div>
4    </body>

A few things you should begin to notice here. First (and this might not be evident with the styles of BlogCFC, but you should notice it in the code downloads) you might notice the indentation of code. Exactly what should and should not be indented is an individual preference, but I find it makes life much easier in the long run when trying to track something down and improves readability. Second thing you should notice is that each tag either has a closing tag or is a self closing tag, with the space and slash prior to the closing bracket. This is because XHTML is a transitional format language, helping you adjust to the strictly formatted document syntax you will later use when you work with XML and XSLT documents.

Next we'll param some variables that might be passed into our header template. I asked in a previous tutorial that you think of items within your template that would change page per page, such as the title, stylesheets, included scripts, etc., so let's set up our template to accept these items. I'm going to use local variables for this, although you could just as easily use the request scope, since these variables would be used only for this page request. You want to place these items at the beginning of your document, prior to your doctype declaration.


view plain print about
1<cfparam name="variables.pageTitle" default="My Site" />
2<cfparam name="variables.pageKeywords" default="Page specific keywords for SEO" />
3<cfparam name="variables.pageDescription" default="Page specific description for SEO" />
4<cfparam name="variables.pageMetaTags" default="" />
5<cfparam name="variables.additionalStylesheets" default="" />
6<cfparam name="variables.additionalScripts" default="" />
7<!--- Navigation Menu variables are paramed to prevent errors --->
8<cfparam name="variables.mainMenu" default="" />
9<cfparam name="variables.sideNav" default="" />
10<!--- Used by navigation menus --->
11<cfparam name="variables.siteSection" default="" />

Next you want to setup these dynamic values within your template. We'll start off with those items I have precursed with 'page', as they are simple include values.


view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
2<html xmlns="">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5        <!--- Dynamic Page Title --->
6        <title>#variables.pageTitle#</title>
7        <!--- Dynamic MetaTags --->
8        <meta name="description" content="#variables.pageDescription#" />
9        <meta name="keywords" content="#variables.pageKeywords#" />
10        <cfif len(trim(variables.pageMetaTags))>
11            #variables.pageMetaTags#
12        </cfif>

Now we're getting somewhere! Our next step is adding in for possible multi value variables. In this example we'll take a comma delimited list of style sheet names or script names, but you could just as easily set this up for arrays, or an array of structs, it's up to you.


view plain print about
1<!--- Default, site-wide style sheet --->
2        <link href="css/default.css" rel="stylesheet" type="text/css" media="screen" lang="en" title="Default Site Stylesheet" />
3        <!---
4        //    Loop through additional stylesheets (passed as a list).
5        //    Note the lack of 'media', 'lang', or 'title' attributes.
6        //    To include those attributes will cause Firefox to not load the stylesheet
7        // (as of 1.5, I haven't tested this lack of functionality in 2.0 yet)
8         --->

9        <cfif len(trim(variables.additionalStylesheets))>
10            <cfloop list="#variables.additionalStylesheets#" index="variables.stylesheetName">
11                <link href="css/#variables.stylesheetName#" rel="stylesheet" type="text/css" />
12            </cfloop>
13        </cfif>
14        <!--- Global functions javascript file --->
15        <script src="scripts/glFunctions.js" language="javascript" type="text/javascript"></script>
16        <!--- Loop through a list of file names to include additional javascript files --->
17        <cfif len(trim(variables.additionalScripts))>
18            <cfloop list="#variables.additionalScripts#" index="variables.scriptName">
19                <script src="scripts/#variables.scriptName#" language="javascript" type="text/javascript"></script>
20            </cfloop>
21        </cfif>
22    </head>

I typically use a sitewide default stylesheet for common style formatting (fonts, sizes, common element widths), and page specific stylesheets for elements specifically within the main content of the page, or overrides to default declarations. I also use a common global functions javascript library for roll over effects, pop-up dialogs, show/hide style changes, etc., while including specific javascript libraries only on pages that need them (like those that might use AJAX).

Next we'll include the necessary elements of our body content.


view plain print about
2        <!--- div containing the entire body of the document --->
3        <div id="totalBody">
4         <!--- div containing the entire header --->
5         <div id="headerBlock">
6         <div id="headerText">
7         <h2>This is my header block</h2>
8         </div>
9         <div id="headerMenu">
10         #variables.mainMenu#
11         </div>
12         </div>
13         <div id="mainContent">
14                 <div id="navMenu">
15                    #variables.sideNav#
16                </div>

And that is it for our include files, we'll leave our footer as we stated above (for now). Next is pretty simple, how to include our header and footer.


view plain print about
2    variables.pageTitle = "My Site - Home Page";
3    variables.pageKeywords = "My Site, Home Page, coldfusion, programming, XHTML, javascript, css";
4    variables.pageDescription = "The My Site Home Page is the gateway into My Site, where many interesting things are bound to be discovered.";
6<cfsavecontent variable="variables.pageMetaTags">
7    <cfoutput>
8        <meta name="robots" content="index,follow" />
9        <meta name="revised" content="Cutter, 11/6/06" />
10    </cfoutput>
13    variables.additionalStylesheet = "home.css";
14    variables.additionalScripts = "myajax.js,calcfunct.js";
15    variables.siteSection = "Home";
18<!--- Later we'll use the following:
19<cfinclude template="mainMenu.cfm" />
20<cfinclude template="sideNav.cfm" /> --->

22<cfinclude template="incHeader.cfm" />
24<!--- Here we will now include page content --->
25Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sagittis condimentum mi. Aenean convallis ultrices sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
27Nunc a erat. Etiam nonummy suscipit pede. Mauris at nisl. Integer sed nibh. Sed auctor volutpat risus. Nulla purus. Suspendisse neque lacus, blandit eget, tincidunt id, pulvinar et, sapien. Quisque vulputate sodales orci.
28<!--- Here is the end of the main page content --->
30<cfinclude template="incFooter.cfm" />

That's it, pretty basic stuff. Just one of the ways we've been doing this in ColdFusion for a long time. Don't forget to grab your parting gifts at the door (the Download link below) on the way out. Next time out we'll take this from a different, though similar, perspective. Always more than one way to skin a cat. Til next time...