FW5: Understanding Box Model

After about 5+ re-records and about 3+ hours of rendering time I've completed a roughly 8 minute screen cast introducing a Freeway 5 (and possibly 4) approach to building a website using a box model. I've also previewed a new template I am working on and the screen cast walks through the structure of a box model site using this template. I hope to be releasing the template shortly and make it available as a free download off this website.

Here is the link to the files:
http://www.mediafire.com/?wdjg9nmyadx
password: apple

*Update* - Part 2 is found here:
http://www.mediafire.com/?uztdmmzpd9w
password: apple
(Includes a start-up screen-cast and a sample file)

The hardest part about doing these screen casts is that there's no written script on my end and I tend to ramble and often contradict myself. I've tried to re-record my voice over the screen cast, as suggested, and it makes it harder to do. Bear with me as I get used to this. Overall my goal is to simply plan out what I'm hoping to accomplish and then I end up adding 50+ things along the way that I feel would be beneficial to know. Things that may be simple, but complicated for new users. What I hoped to accomplish in this screen cast is to expose Freeway's feature rich hierarchy of HTML item listing that fit a box model built site. A box model built site involves placing HTML items within other HTML items forming a parent-child relationship in coding terms. For the non-coders out there it's a box-within-a-box-within-a-box sort of deal. It mixes in a handful of "clear" and "float" terms and these are explained in the reference manual on the Softpress site.

If there's anything you get out of the video, watch the screen. I don't go through everything, but pause the video to watch my palette's for different items and look for percentages and pixel amounts for each.

Remember these principals as you're watching:

1. Setting an item's float to "none" and the clear to "both" will prevent any items from being put on that same line. In the screen cast these are the HTML item boxes of top, navbar, wrapper, footer, header, menuspacer, spacer, finalspacer. These are great for setting specific spaces in your project and are beneficial when IE6/IE7 doesn't understand margins.

2. If you're working towards a two column layout, after creating the larger "container," and you've inserted your two HTML items (for the columns) always float the HTML item at the top to float "right" and set the clear to "right." Then set the one that was underneath to float "left" and clear "left."

3. If your HTML items are not lining up properly or they drop down when you insert them after setting the floats and clears properly, you may have fallen victim of setting your leading in your body tag rather than the "p" tag. This happened to me several times, but was able to adjust it and have Freeway understand what I was trying to do.

Other than that, feedback would be great on any of the screen casts as I do these for fun and the benefit of helping others.

Enjoy!