Using a Background Grid to Assist Web Page Layout
(Page 1 of 4 )
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.
Provided that you've already read all of the tutorials that preceded this one, I should assume that at this point you have pretty clear idea of how to apply both the Golden Proportion and the Rule of Thirds to build different kinds of web page layouts, ranging from the classic three-column designs to those composed of only two columns.
As you learned before, assigning the proper dimensions to certain areas of a web document, either by using the Divine Proportion or the Rule of Thirds, helps to distribute the contents of web sites in a more harmonious way, simply because this distribution emulates a pattern that’s already present in nature.
However, it’s also fair to stress one important thing regarding the implementation of these two specific principles when creating web page designs: unless you have a calculator at hand or use some online tools like the Phiculator (http://www.thismanslife.co.uk/phiculator), you may find it quite hard to position elements on a web page without having a visual guide behind them.
Fortunately, this issue can be easily resolved by using a background grid. But you might be wondering how it works. Well, it’s possible, for instance, to design such a background grid in Photoshop, and then assign this image to the “<body>" element of the web document via CSS, thus displaying a handy visual guide that can be used for quickly aligning web page elements according to the Golden Ratio and the Rule of Thirds.
So, in the next few lines I’m going to demonstrate how to use this approach, in this case for building a fixed design in accordance with the Rule of Thirds. Want to see how this will be accomplished? Then start reading now!
Next: The background grid for a Rule of Thirds web page >>
More Style Sheets Articles
More By Alejandro Gervasio
