D Webskin Templates
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 © 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 © 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 © 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>