Creating a 960 Grid System template
The 960 Grid System is a well-known and frequently used layout for web pages. It provides a blueprint that helps the developer in building a layout that is optimized for most commonly used screen resolutions. '960' refers to the width in pixels of the outer page wrapper.
In this recipe we will create a template set up for such a design, based on the 12-column layout, so it can be easily reused.
How to do it...
The following steps will demonstrate the creation of a 960 Grid System tempate:
1. Open the Document Properties (Shift + Ctrl + D) dialog and under Page tab set Width: to 960 px and Height: to 1000.
2. On the Grids tab create a new Rectangular grid, set Spacing X: and Spacing Y: to 10 and Major grid line every: to 8. In the 12-column system column width is 60 px and each column has a 10 px margin on the left and right so major grid lines will fall down the gutter centers.
3. Select the Pen (Bezier) tool (Shift + F6 or B) and create a line 10 px from the...
