Basic
Web Design
Phase One
Layout and Design Using Fireworks
- Draw a rectangle 150px X 100px.
Make sure it is aligned to the top and left. To set
the size exactly, take a look at the dimensions in
the Properties Manager at the bottom of the Fireworks
page.
After you draw your rectangle select it with the Pointer
Tool to make it active. Then highlight the number
to the right of the W (width) and
type 150 to overwrite the existing
number. Do the same for the H (height)
by typing 100. Hit ENTER
on your keyboard. Notice your rectangle has now changed
to the sizes you entered in the Properties Manager.
- Use the Pointer Tool to drag the
rectangle into position in the upper left hand corner
of your canvas.
 Now
let's change the color of our rectangle.
Use the Pointer Tool and select the
rectangle. Open the Fill palette from the properties
manager. And select color #999966
from the palette as shown by the white arrow in the
image on the right.
Notice that when you select the new color from the
palette the color of your rectangle immediately changes
to match it.
You can also change the font color by opening
the color palette and typing in the the above hexadecimal
value instead of selecting the color from the palette
with the arrow tool.
- Now that we've created the background for our logo
let's add the background for the header. Draw a rectangle
to the right of the logo rectangle and aligned to
the top of the canvas. The finished size will be 600px
X 150px.
- Change the color to #996600.
- Now let's add the left navigation background just
below the logo. Draw a rectangle 150px X 300px.
- Change the color to #CCCC99.
- Your canvas should look exactly like the one below.
 |
page 2 of 10 |
 |
|
