SEO Webstore

Search Engine Optomized Webstore

Products by Type

Shop by Brand

Language

Currency

Please Sign In
forgot your password?
Once you open a can of worms, the only way to recan them is to use a bigger can.
- Zymurgy's First Law of Evolving Systems Dynamics

Creating an HTML Layout Grid

features/Layout.gif

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.


by AttentionPlease.com

Complete Site Directory