Learning how to theme in Drupal when you aren't used to creating sites with CSS layouts can be quite a jump. It is a little like trying to jump up four steps, doable but a strenuous. I needed a way to make the leap a little less strenuous.
Instead of jumping between CSS files, php templates, Firebug, and the Drupal interface trying to image how the page will look if you change some code or CSS, I decided to put CSS and code together. So, I opened up the Zen page.tpl.php file and started studying the div tags to see what the page was doing. Long story short, the code creates a bunch of boxes within boxes.
In case you are not aware, div tags create virtual boxes or containers in a page. This makes sense because historically, web page layouts were created using tables (e.g., a bunch of boxes). With a WYSIWYG editor, you can create a table with a bunch of columns and rows and easily imagine the site title in one table cell and the site menu in another table cell and so on. It gets harder to imagine what a layout would look like when you create the table code by hand. Now jump to creating a CMS theme layout with HTML, PHP, and CSS in code view. It gets even harder.
So, back to the Zen theme. What is the relationship between the code and the CSS? It is a bunch of boxes with CSS inside. Take a look at the HTML page (attached below) to see the divs as boxes and the applicable default Zen CSS for each div. Now look at the boxes as they appear on the screen of this demo site. By taking all the CSS information used to shape the layout of the page and placing it inside the div framework, you can quickly see what is being used to create the layout, how many instances that div tag can be influenced, and what CSS values are being used to create the default layout.
For me, this was the first step towards visualizing the layout of a page with code. The next step was to use the div boxes as my visual aids and manipulate them into a screen layout. This is the subject for the next article.