Designing the Website's Background Layout with Fireworks

Renaming Layers:

Before you start designing the background and navigation you need to start by making your workspace manageable. One way to do this is by assigning your layers with meaningful name. Double click on Layer 1 and rename it Header and Footer. Then lock the layer so you will not accidentally make edits to this layer since you have it the way you want it. Do this by clicking on the pencil tool in the layers palette and you should now see a lock.

Create another layer by clicking the New/Duplicate layer button at the bottom of the layers palette. Name it Background and Navigation.

Drag Background and Navigation Layer below the Header and Footer Layer by holding down the mouse on either one and dragging it the new location.

On this new layer you will need to draw a rectangle with the dimensions of width: 142 pixels and height: 508 pixels using the Rectangle Tool . Select the rectangle and set its Fill Color as #CC3366 - #2D2DFF (first swatch) and Stroke Color as none. Now, place your rectangle on the left side of the Document Window.

Duplicate the first rectangle (copy-paste or Alt+down arrow) OR draw a second rectangle with the dimensions of width: 32 pixels and height: 508 pixels using the Rectangle Tool . Select the second rectangle and set its Fill Color as #CC3366 - #2D2DFF (first Swatch) and Stroke Color as none. Now, place your rectangle on the right side of the Document Window. The image below shows how the website layout should look like now:

Next you need to similarly place another two rectangles in between the first two rectangles to complete our website background design using Fireworks.

Draw a third rectangle with the dimensions of width: 463 pixels and height: 508 pixels using the Rectangle Tool .

Select the rectangle, and set its Fill Color to #DA89BE - #5E5EFF (4th swatch)and Stroke Color as none. Now, place your rectangle on the left side of the Document Window (Set the XY position to about X: 169 and Y: 16). Note: The W, H, X and Y values can be viewed in the Properties Inspector (Window >> Properties).

Draw a fourth rectangle with the dimensions of width: 169 pixels and height: 508 pixels using the Rectangle Tool . Select the rectangle, choose Fill Color as #F7BBE3 - #A8A8D5 (5th color swatch) and Stroke Color as none. Now, place your rectangle on the left side of the third rectangle as shown below (The XY position should be about X: 593 and Y: 66). The image below shows the resulting layout:

Your page should now look like this: