Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Use Grid System Layouts on Your Website

To help you lay out your website, set up a grid that you can use to align graphics, text, and HTML elements. A grid can be anything you like — a three-column layout, two horizontal sections, or a page broken into multiple sections.

image0.jpg

Print design can still do some tricks that HTML and CSS can’t do as efficiently. For instance, an angled grid is easily possible with print design, but if you use HTML and CSS, their very nature limits your web-page grid to horizontal and vertical lines. Also, while it’s possible to rotate website elements using CSS, not all browsers will reliably render such effects.

image1.jpg

One way to get around the horizontal and vertical alignment is to place a Flash movie on the web page that has an angled layout. Unlike HTML, Flash gives you a lot more design flexibility in your layouts. The Flash movie is simply embedded in the HTML page just like a graphic — and like a graphic, it’s ultimately aligned by your grid system.

The grid is unavoidable, and that’s a good thing. Grid systems are intended to impose a logical order on your web-page layout. Rather than randomly carving out a spot for everything that is to go on the page, aligning the elements with each other makes the page easier to read, easier to build, and more professional in appearance. Compare the two web-page layout sketches in the example. On the left, the elements look thrown on the page. On the right, the same number of elements is neatly presented.

image2.jpg
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!