Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Cutting up the html

Now we have to cut up the HTML and separate parts into header, footer and content. You will have to open up other html templates supplied to compare with and find what parts are common to all so we can separate the header and the footer. For the Daemon Home page I have marked out what my header, footer and content will be. See Figure 2.3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Daemon: serious web solutions</title>
<style type="text/css" title="default" media="screen">@import url(css/main.css);</style>
<link rel="stylesheet" type="text/css" href="css/sIFR-print.css" media="print" />
<script src="sifr/sifr.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">

	<div id="header">
	<a href="homepage.html"><img src="images/daemon_logo.gif" 
		id="logo" alt="Daemon - Serious web solutions" /></a>
	</div>

	<div id="nav">
		<ul>
		<li id="nav-1"><a href="homepage.html"><strong>Home</strong></a></li>
		<li id="nav-2"><a href="solutions.html"><strong>Solutions</strong></a></li>
		<li id="nav-3"><a href="services.html" class="active"><strong>Services</strong></a></li>
		<li id="nav-4"><a href="casestudies.html"><strong>Case studies</strong></a></li>
		<li id="nav-5" class="last"><a href="aboutus.html"><strong>About us</strong></a></li>
		</ul>
	</div>
	
	<div id="content">
		

<div id="main">

<h1><span>Services Daemon offer</span></h1>
			
	<div class="superlist">
		<h2><span><a href="devtodo">Training</a></span></h2>
		<p>
		This combination of skills means that whether you are updating an 
		existing web-based business application to take advantage of the 
		latest products and technologies, or are planning a completely new 
		expertise and real-world experience you are looking for.
		<br />
		<strong>More information:</strong> <a href="devtodo">Macromedia</a> | 
		<a href="devtodo">FarCry Training</a>
		</p>
		<h2><span><a href="devtodo">Support</a></span></h2>
		<p>
		This combination of skills means that whether you are updating an 
		existing web-based business application to take advantage of the latest 
		products and technologies, or are planning a completely new project
		<br />
		<strong>More information:</strong> <a href="devtodo">FarCry support</a> | 
		<a href="devtodo">WebTeam</a> | <a href="devtodo">Custom agreements</a>
		</p>
		<h2><span><a href="devtodo">Products</a></span></h2>
		<p>
		Daemon can provide the professional guidance, technical expertise and 
		real-world experience you are looking for.Daemon can provide experience 
		you are looking for.
		<br />
		<strong>More information:</strong> <a href="devtodo">MLVP</a>
		</p>
	</div>
</div>
<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
			
		<div class="featurebox search">
			<form action="devtodo">
			<label for="searchbox"><b>Search</b></label>
			<input id="searchbox" name="searchbox" type="text" />
			<input type="submit" value="Go" />
			</form>	
		</div>	
		<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
		<h4 class="date">January 26TH 2005</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>	
		<h4 class="date">December 16TH 2004</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>

</div>
</body>
</html>

Figure 2.3

You can see the separate areas of the website. We have a clear header, footer and content area. We now have to separate them into different templates. You will put them into the header and footer files under the includes directory under the web skin directory of the farcy project.

Create two new files in the include directory one called project_header.cfm and another called project_footer.cfm depending on what the project is called project will be the name of your project. In my case I use daemon_header.cfm and daemon_footer.cfm. You will notice that there is all ready dm_header.cfm and dm_footer.cfm if this is a brand new project. I would keep them there for now so you can reference them as a guide as you go. The content section will be put into the dmHTML (and other content types) directory at a later stage. Copy and paste the header and footer sections into the in new header and footer files. At this point my daemon_header.cfm file looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Daemon: serious web solutions</title>
<style type="text/css" title="default" media="screen">@import url(css/main.css);</style>
<link rel="stylesheet" type="text/css" href="css/sIFR-print.css" media="print" />
<script src="sifr/sifr.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">

	<div id="header">
	<a href="homepage.html"><img src="images/daemon_logo.gif" 
		id="logo" alt="Daemon - Serious web solutions" /></a>
	</div>

	<div id="nav">
		<ul>
		<li id="nav-1"><a href="homepage.html"><strong>Home</strong></a></li>
		<li id="nav-2"><a href="solutions.html"><strong>Solutions</strong></a></li>
		<li id="nav-3"><a href="services.html" class="active"><strong>Services</strong></a></li>
		<li id="nav-4"><a href="casestudies.html"><strong>Case studies</strong></a></li>
		<li id="nav-5" class="last"><a href="aboutus.html"><strong>About us</strong></a></li>
		</ul>
	</div>
	
	<div id="content">

Figure 2.4

And my daemon_footer.cfm looks like this

</div>
</body>
</html>

Figure 2.5
For this design I am going to create another file in the includes directory called sidebar.cfm. Obviously you will not need to do this if your web page design does not have sidebarsâ˜ș. Copy the sidebar part of the content area and paste it into the sidebar.cfm file.

At this point my sidebar.cfm looks like this

<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
			
		<div class="featurebox search">
			<form action="devtodo">
			<label for="searchbox"><b>Search</b></label>
			<input id="searchbox" name="searchbox" type="text" />
			<input type="submit" value="Go" />
			</form>	
		</div>	
		<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
		<h4 class="date">January 26TH 2005</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>	
		<h4 class="date">December 16TH 2004</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>

Figure 2.6

Lets modify this example further and separate the search form. This way we will be able to include the form into any other template. For example you might have different sidebars one for the homepage and one for standard page displays. Create another file in the includes directory called searchForm.cfm. Once again this may not be applicable for your designs if there is not a search form.

My Sidebar.cfm now looks like this.

<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
			
		<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
		<h4 class="date">January 26TH 2005</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>	
		<h4 class="date">December 16TH 2004</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>

Figure 2.7

And the searchForm.cfm now looks like this.

<div class="featurebox search">
	<form action="devtodo">
	<label for="searchbox"><b>Search</b></label>
	<input id="searchbox" name="searchbox" type="text" />
	<input type="submit" value="Go" />
	</form>	
</div>

Putting farcry magic into your header and footer and other includes

So far we have our html cut up and can now start putting farcry magic into the header. First we have to implement white space control. We do this by adding <cfsetting enableoutputonly ='true'> at the top of the page and <cfsetting enableoutputonly ='false'> at the bottom of the page. Anything in between that needs to be displayed must be within cfoutput tags. Next lets make the navigation generic and dynamically generated from farcry by including _genericNav.cfm.

We also should change the title so it picks up relevant farcry content by adding this code

 <title>#application.config.general.sitetitle#: #request.stObj.label#</title>.

My daemon_Header.cfm now looks like this.

<cfsetting enablecfoutputonly="yes">
<cfoutput>
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>#application.config.general.sitetitle#: #attributes.pageTitle#</title>
<style type="text/css" title="default" media="screen">@import url(css/main.css);</style>
<link rel="stylesheet" type="text/css" href="css/sIFR-print.css" media="print" />
<script src="sifr/sifr.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">

	<div id="header">
	<a href="homepage.html"><img src="images/daemon_logo.gif" 
		id="logo" alt="Daemon - Serious web solutions" /></a>
	</div>

	<!--- include primary navigation --->
		</cfoutput>
			<skin:genericNav navID="#application.navid.home#" 
id="nav" depth="1" bActive="true" bIncludeHome="true" bLast=1>
		<cfoutput>
	
	<div id="content">
<cfsetting enablecfoutputonly="no">

Figure 3.1

We don't have to do much to the footer except for the white space control. My daemon_footer.cfm now looks like this.

<cfsetting enablecfoutputonly="yes">	
</div>
</body>
</html>	
<cfsetting enablecfoutputonly="no">

Figure 3.2

Lets do the same for our sidebar and search form. The sidebar now looks like this. 

<cfsetting enablecfoutputonly="yes">	
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfoutput>
<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
		<!--- include search form --->
		</cfoutput><cfinclude template="searchForm.cfm"><cfoutput>
		<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
		<h4 class="date">January 26TH 2005</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>	
		<h4 class="date">December 16TH 2004</h4>
		<p>
		Daemon's application development services are underpinned by 
		best-practice coding standards and formal production methodologies 
		to ensure the effective delivery of complex, 
		<a href="devtodo">read more</a>
		</p>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>
</cfoutput>

Figure 3.4

Notice search form is being included. This gives flexibility to the search form so we can include it in any template. Also notice that I have closed and reopened the output tags around the include. This is to preserve white space control If we include the include in our cfoutput we effectively output the white space inside the include.

Including Containers

A containers can be thought of as a place holder for listing rules for displaying content types such as news, facts etc.

We want to get rid of all the hard coded area so we can give the user a choice of what they want to put into the area. I think a container would be perfect in this example.

My side bar looks like this.

<cfsetting enablecfoutputonly="yes">	
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfoutput>
<div id="sidebar">
		
	<div id="subnav">
		<h4>Services</h4>
		<ul>
			<li><a href="devtodo">Training</a></li>
			<li><a href="devtodo">Support</a></li>
			<li><a href="devtodo" class="last">Products</a></li>
			</ul>
		</div>
		<!--- include search form --->
		</cfoutput><cfinclude template="searchForm.cfm">
		<con:container label="#attributes.object.objectID#_sideBar"><cfoutput>
	</div>
	<div id="footer">Copyright &#169; 2005 Daemon Pty Ltd</div>	
</div>
</cfoutput>
<cfsetting enablecfoutputonly="no">

Figure 3.5

Notice how we labelled the container #stObj.ObjectID#_sidebar. This is to give the sidebar a unique name so the user can change this rule on different pages. Warning: If we were to label the conatainer just "sidebar" then the same rule and same display would appear on every page that uses this side bar. This is old school farcry- do not do this, you want shared containers.

We should modify the form search template so it has white space control and so the form works. 

<cfsetting enablecfoutputonly="yes">
<div class="featurebox search">
	<form action="#application.url.conjurer#?objectid=#application.navid.search#">
	<label for="criteria"><b>Search</b></label>
	<input id="criteria" name="criteria" type="text" />
	<input type="submit" value="Go" />
	</form>	
</div>	
<cfsetting enablecfoutputonly="no">

Figure 3.6

Putting farcy into a template

Templates are stored under the webskin directory and under the different object types. In this example we will be using a dmHtml content type. The template we will modify is the displayPageStandard.cfm. The first stage in this process is to include the header and the footer. My displayPageStandarde.cfm. looks like this at this stage.

<!--- @@displayname: Standard Page --->
<!--- @@author: code:GAVIN STEWART (gavin@daemon.com.au) styles:Peter Ottery (pottery@daemon.com.au)--->
<cfsetting enablecfoutputonly="yes">
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">

<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonHeader.cfm" 
		  pagetitle="#stObj.title#">
<cfoutput>
<h1>Conent goes here</h1>
</cfoutput>
<!--- include standard Sidebar, we have to pass through the object structure cause it is needed in the sidebar--->
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/standardSidebar.cfm" object="#stObj#">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonFooter.cfm"> 
<cfsetting enablecfoutputonly="no">

Figure 4.1

Lets test if things are working. Log into farcry and assign the home page content item a template of "Standard Page" and test to see if the home page is now rendering the header and footer and displaying "Content goes here" in big letters. If the page doesn't look write check the following
*Check to see if coldfusion has thrown an error by appending &debug=1 to end of the URL. If there is an error then debug accordingly

*Make sure the header and footer files are in the correct location i.e. the includes directory under the webskin directory
*Recheck all your output tags. You might want to remove all white space control to make sure you are getting the page and implement again once the problem has been found

The next stage is to copy and paste some mark-up from a html page into the content area. My displayPageStandard.cfm now looks like this

<!--- @@displayname: Standard Page --->
<!--- @@author: code:GAVIN STEWART (gavin@daemon.com.au) styles:Peter Ottery (pottery@daemon.com.au)--->
<cfsetting enablecfoutputonly="yes">
<cfimport taglib="/farcry/farcry_core/tags/container" prefix="con">
<cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin">

<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonHeader.cfm" 
		  pagetitle="#stObj.title#">
<cfoutput>
<div id="main">
		
			<h1><span>End to end online solutions</span></h1>
			
			<p>Daemon has extensive experience in all aspects of technical web application 
			development utilising the Macromedia range of server and development products.  
			Our professional services team has extensive experience across ColdFusion, Flash MX, 
			Flash Remoting, Flash Communications Server, Java, XML, Linux, Windows and Unix systems, 
			SQL and Oracle databases.
			<span class="linkset-moreinfo"><strong>More information:</strong> 
			<a href="devtodo">Web Development</a> | <a href="devtodo">Design</a> | 
			<a href="devtodo">Content Management</a></span>
			</p>
			
			<h2><span>Outsource training &amp; services</span></h2>
			<p>This combination of skills means that whether you are updating an 
			existing web-based business application to take advantage of the latest 
			products and technologies, or are planning a completely new project, 
			Daemon can provide the professional guidance, technical expertise and real-world 
			experience you are looking for.
			<span class="linkset-moreinfo"><strong>More information:</strong> 
			<a href="devtodo">Website support</a> | <a href="devtodo">Training</a> | 
			<a href="devtodo">Products</a></span>
			</p>
			
			<hr />
			
			<h2><span>All Services:</span></h2>
			
			<ul class="splitlist">
			<li><a href="devtodo">Website Development</a></li>
			<li><a href="devtodo">Content Management</a></li>
			<li><a href="devtodo">Case Studies</a></li>
			<li><a href="devtodo">Custom Development</a></li>
			<li><a href="devtodo">Code Reviews</a></li>
			<li><a href="devtodo">Usability Reviews</a></li>
			</ul>
			<ul class="splitlist">
			<li><a href="devtodo">Graphic Design</a></li>
			<li><a href="devtodo">Information Architecture</a></li>
			<li><a href="devtodo">Database Development</a></li>
			<li><a href="devtodo">E-Commerce Solutions</a></li>
			<li><a href="devtodo">Flash Development</a></li>
			<li><a href="devtodo">Game Design</a></li>
			</ul>
			<br class="clear" />
			
			<hr />
			
			<h2><span><a href="devtodo">Recent Daemon News</a></span></h2>
			
			<h4 class="date">January 26TH 2005</h4>
			<p>
			Daemon's application development services are underpinned by best-practice 
			coding standards and formal production methodologies to ensure the effective 
			delivery of complex, <a href="devtodo">read more</a>
			</p>
			
			<h4 class="date">December 16TH 2004</h4>
			<p>
			Daemon's application development services are underpinned by best-practice 
			coding standards and formal production methodologies to ensure the effective 
			delivery of complex, <a href="devtodo">read more</a>
			</p>

		</div>
</cfoutput>
<!--- include standard Sidebar, we have to pass through the object structure cause it is needed in the sidebar--->
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/standardSidebar.cfm" object="#stObj#">
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/daemonFooter.cfm"> 
<cfsetting enablecfoutputonly="no">
  • No labels