First, review the CSS and HTML standards under the Standards section of this site. We want to keep all of our build outs as standardized as possible to prevent cross browser incompatibility and to help with future revisions/edits of the site. 

Throughout the build out process, test in different browsers. Make sure everything looks the same and works the same. If there are any major issues, start troubleshooting and testing. This should be done throughout the whole site build out process to head off any cross-browser issues before they get buried underneath a lot of other code. Catching the problems early can save a lot of searching time (i.e. if it worked before you added the last 3 divs, then there's something within those divs that is throwing something off in that browser).

Building Layout Files

Open up the template home page layout files _layout_1.cfm, _globals.css and _home.css files and start to create/modify and position all your divs. Add background colors first to test and make sure they look similar to your sketch when you brainstormed the design. After you get them all in place, start adding in your background images. 

Do the same with the sub page layout files _layout.cfm and _subpage.css.

At the top of the layout file, after you include your css files for styling add this line:

<style>
    /* overall content container */     /* styles you can use to override things */ 
    div.cb-header /* div around headers */ { } 
    h3.cb-header /* h3 surrounding the header text */ { } 
    div.cb-body /* div around body text */ { } 
    div.cb-body p /* paragraph tags in body text */{ }
</style>

You can put global CSS styling to fix any known issues. Generally global styling is frowned upon and should be used on a per div basis. some are needed though if all content needs to have a certain attribute. For example, the padding-top of 1px is needed for a known issue of content boxes adding a break of the <p> tag margin between the content header and content wrapper.

Perpetua Content Area

On the home page layout, move the <cfoutput>#fusebox.layout#</cfoutput> to below the main container so that if they add any content to the home page, it simply overflows to the bottom of the page and the client will delete it.

On the sub page layout, put the <cfoutput>#fusebox.layout#</cfoutput> wherever your content will be going. This is where the client will be adding Perpetua created content to the page.

Build the Email

Open up the email template file _layout_email.cfm. Double check the proof to make sure that the concept contains only a header image and footer image that can be cut to be the same width as the content area, a content area with a solid background color that is 600px wide and a solid body background color. 

Emails can only contain one non-repeating image each for the header and footer because some email programs (such as outlook) do not align multiple images properly. The body background cannot be a repeating image and it must be a solid background color. The same goes for the content area.

Update your widths and heights and image paths within the tables of the layout file.

Style Subpage Module

See the Subpage Module section of Site Add Ons on this site.

Create Content Box Styles

If concepted, create content box styles by modifying the _cb-styles.xml file and cutting the images from the .psd file. For more information, see the Content Box Styles section of Site Add Ons on this site.

Create Page Content

Create page content areas in your configuration file, then upload that file to the server. Save page content on the site. Add in your page content variables to the layout files. For further instruction, see the Page Content section of Site Add Ons on this site.