Home arrow Style Sheets arrow Using a Background Grid to Assist Web Page Layout

Using a Background Grid to Assist Web Page Layout

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
August 06, 2009
  1. · Using a Background Grid to Assist Web Page Layout
  2. · The background grid for a Rule of Thirds web page
  3. · Displaying the background grid on the web page
  4. · Completing the sample web page layout

print this article

Using a Background Grid to Assist Web Page Layout
(Page 1 of 4 )

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! 

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials