Creating an HTML Layout Grid

Start your site design by creating the overall Layout Grid.

The Layout Grid is simply one or more simple HTML tables that block out the placement of information the page. The table shown here represents the table used by the default HTML layout that comes with the store.

Blocks of dynamic content are very easily plugged into this general table framework. You just include a few lines of code in your HTML and the program will do the rest!

On layout pages, all INCLUDED ColdFusion files are referenced from the location of the layout template (in otherwords, from the yoursite.com/themes/themeName/ folder). The HTML files are refereced from the site root. This can get pretty confusing!

To make things easier, I created a few variables that do the thinking for you:

Javascript -- <script type="text/javascript" src="#javascript#/file.js"> for the THEME javascript folder ( themes/themename/javascript )

CSS -- <link rel="stylesheet" href="#css#/file.css...   for the THEME css folder ( themes/themeName/css )

Includes -- <cfinclude template="#include#/filename.cfm"> for the SITE includes folder.

Modules -- <cfmodule template="#site#"...

Images -- <img src="#images#/spacer.gif"...  for the THEME images folder ( themes/themeName/images )

REMEMBER: The JavaScript, CSS and Images tags must be surrounded by <cfoutput></cfoutput> tags.