Main | Online Books »

February 13, 2007

CSS Box Model

I recently revised the Intermediate Dreamweaver CaseLearns workshop I teach. I moved the course from a table-based structure (using CSS for design) to a full CSS model that uses DIVs for the page/site structure. If you have taken my Intermediate Dreamweaver course in the past, I would recommend taking a look at the newly designed material for the wonderful flexibility that the CSS Box Model offers.

In re-designing the course, I relied quite a bit on the approach used by Betsy Bruce. Bruce is certified in several Adobe products, including Dreamweaver, and it was through an Adobe e-seminar that I learned of the Box Model’s comprehensive approach to site design.

Now, the CSS Box Model is nothing new, of course. In fact, I frequently point participants in the Intermediate Dreamweaver workshop to CSS Zen Garden for a fine example of what can be accomplished using CSS and DIVs. I have also created websites that take advantage of the visibility and hide attributes of DIVs in combination with javascript mouseover functions: Web Resources. But until I designed a workshop that centered around the use of the Box Model for a page structure I never fully realized how quickly pages could be laid out, nor how completely all aspects of the page could be controlled. And, of course, Dreamweaver makes it very easy to access the full functionality and power that DIVs offer web developers through the CSS Panel.

If you're interested in web design and haven’t taken advantage of what DIVs have to offer, please take a look at the CaseLearns material I have provided on my site or the material that Betsy Bruce offers on her own (link at my site). Additionally, if you are interested in more advanced features, including designing your own xml files and rss feeds, I encourage you to take advantage of Adobe’s online events and on-demand seminars.

Let me know what you think!

Posted by twh7 at February 13, 2007 04:58 PM

Comments

Post a comment




Remember Me?

(you may use HTML tags for style)