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).
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.
|
|
6.
|
Adjust the X and Y
positions
of the rectangle
to
and
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.
|
|
10.
|
Save the page to your local hard drive and
name
the file
retros_cycle_template.png
.
|
