Picking The Right Layout
The ideal template to use for this guide must have a header, a navigation area, a content area and a footer. You'll find that with all web layouts, each always somehow sticks to this rule, or rather, principle.
With CSS design, people tend to focus on the cleaner looks and aspects of design. No, I don't mean the clean "style" of design, I mean the way the content is presented and how much of it is displayed on each page - some examples of this are at CSS Zen Garden.
With CSS design, you have to remember that you can be as creative as you want as long as you think about how the design will be implemented as a webpage as you go along in your design. Some people prefer to design an entire webpage in Photoshop or an equally good graphics program before putting it into a webpage, and others tend to just take each step as it comes. I won't be preaching the former method, but I find it especially useful.
As this guide isn't about designing your layout from the bottom upwards, I had better get on to the useful things.
With the layout we'll be working with in this case however, we'll be adding a third column just for 'fun'. The layout I've chosen to write this guide around is a simple mockup for a fictional company named "Bluesquare Communications". Of course, you'll be slicing for yourself, or for someone else - so don't get too immersed in the concept!
Below is a screenshot of the layout we'll be using. As you can see, it comprises of a header, three columns, and a footer.
As for this short, introductory stage, there isn't much else to it. It's time to prepare to slice in step 2.