Creating a web page mockup
In this recipe we will create a simple a web page mockup using the 960 Grid System with the help of the template we created in the previous recipe and the button design from the CSS sliding doors recipe.
How to do it...
The following steps will demonstrate a web page mockup:
1. Open the
960GridTemplate.svgaccompanying this chapter and save it under a different name (Shift + Ctrl + S). Grids and guides should already be enabled.2. Select the Rectangle tool (F4 or R) and create a 960x5 px rectangle at the top of the page. Zoom in on the right edge so it's easier to snap to the invisible grid, check the H: box on the toolbar to make sure you have the correct height. Set its fill to
#8b5c3dand remove stroke.3. Create another rectangle just below the first one but make it 960x115 px, set its fill to
#f0e4dd. Select the Gradient tool (Ctrl + F1 or G) and create a vertical linear gradient in the rectangle fill, and position the end stop just below the rectangle middle...
