Welcome to the seventh and final installment of a series covering fundamental design principles as applied to web layout creation. This series uses numerous code samples to show you how to implement such design concepts as the Golden Ratio and the Rule of Thirds to construct several professional-looking web page designs that will be visually appealing to your visitors.
Using a Background Grid to Assist Web Page Layout - The background grid for a Rule of Thirds web page (Page 2 of 4 )
As I said in the introduction, it’s ridiculously simple to create a background grid that can be used for aligning elements on a web page. This process can be completed quickly with any image editing software. I’m going to build our grid with Photoshop, but naturally you can use the program with which you feel most comfortable.
Essentially, the steps that need to be followed to create this grid are generally the same for any image edition program that you might utilize. Since my grid will stick to the Rule of Thirds, start out by opening a blank document of 900px X 100px and then create the grid by vertically dividing the document in thirds of 300px each. Don't worry about creating horizontal grid lines, since they won’t be utilized in this example.
Finally, paint the image with a color that offers a good contrast with the elements that you’re planning to include in your web page. Once you’ve done this, simply export your graphic as a GIF or PNG to the folder that you’ll be using for storing the web document.
If everything has gone as expected, you should have created a background grid similar to this one:
Now that the grid is ready to be used as a background for the web document, it’s time to see how to assign it to the “<body”> element with a few simple CSS styles. This way it can be displayed across the entire document.
This process will be discussed in depth in the following section. Thus, to learn more, please click on the link that appears below and keep reading.
Style Sheets 
CSS Combinators: Using General Siblings
