Creating the Base Document

The first step in creating the site template is to build a base document with the appropriate size and background color. This base document serves as the canvas and, after it is created, you can begin adding the elements that define your web page.

1.	Open Fireworks.
2.	Choose File, New from the menu bar to create a new document. Choose to create a canvas that has a width of 775 pixels and a height of 575 pixels and set the canvas color to gray by clicking the Custom radio button, clicking the Color Picker, and choosing the gray value of #CCCCCC (see Figure 7.1). Figure 7.1. Create a new document and adjust the canvas color. Note When designing a web page in Fireworks, you need to have a pretty good idea what page size you're going to be using. When you export the images to HTML, Fireworks creates a set of tables and these tables have fixed widths. This means that your tables do not grow or shrink to fit the monitor resolution of each individual visitor. If you want your site to do this, you have to take some extra steps while working with the HTML pages in Dreamweaver to convert the pixel-based table sizes to percentage-based.
3.	Next, select the Rectangle tool and draw a rectangle on the canvas. It doesn't matter how big or small or where it is positioned, because you'll adjust those aspects in the following steps.
4.	With the rectangle selected, set the fill color to black by selecting the Color Picker and choosing a black box or by typing #000000 in the upper field.
5.	Set the stroke color of the rectangle to #0000FF by selecting the stroke Color Picker and typing the value. As shown in Figure 7.2, you should now have a rectangle with a blue outline on your canvas. Figure 7.2. The rectangle has been added to your page.
6.	Adjust the X and Y positions of the rectangle to 0 and 0 by typing those values in the Property inspector. Note When adjusting the values of a rectangle numerically, be sure to position X and Y values of the rectangle at 0 and 0 before adjusting the height and width properties. If you don't position the rectangle at 0 and 0, Fireworks automatically adjusts the height and width to be the height and width of the canvas.
7.	Set the Rectangle width to 700 and the height to 550 by typing those values in the W and H fields in the Property inspector.
8.	Adjust the X and Y positions to 130 and 130 by typing those values and set the rectangle roundness to 20 by adjusting the slider on the Property inspector.
9.	Finally, set the stroke width of the rectangle to 2 and adjust the stroke category to Soft Rounded in the Basic set. You should now have a rounded, blue divider on your page that looks like Figure 7.3. Figure 7.3. The page now has a divider.
10.	Save the page to your local hard drive and name the file retros_cycle_template.png.