Project: Create a Layout in Fireworks CS3

Before you start:

If you are a beginner make sure you go through steps 1- 4 of the Fireworks CS3 Tutorial before attempting this project.
Download Project Files (fireworks.zip, 1 MB)
Use the images provided for the project. You can get free images like these from Dreamstime (click on the "Free images" tab).

Your canvas

Import and edit the picture of the flowers

Import Image. File > Import > Browse and select image of the flower
Resize Image - Select image. Select Scale Tool. Drag the corner of the image to resize it.
Rotate Image - Select Image. Select Scale Tool. Place cursor near the edge of the image > When the rotate cursor shows > click and drag clockwise or anti clockwise.
Remove Background - Click the magic wand and click on the background of the image. > it will get selected > press > delete key. Select and deleate any leftover background

Menu Bar

Click the rectangle tool > click and drag to create a rectangle where the menu will be
Select the rectangle. select the eye dropper Tool > Click somwhere on the flower to pick that particular color
Select the text tool > click on the yellow rectangle > type the menu names separated with “ | ” symbol (over enter key).
Select the font and size and color from the properties panel
Position the Text where desired
Select the line tool > create a line below the menu rectangle
Use eye dropper tool to select a green form the leaf in the image

Logo

Image #2

Insert the image of the mother and child > Resize (If too big zoom out soo you can find the corners of the image)
Select rectangle tool to create a rectangle around the image > change the stoke color to green by using the eyedropper tool

Texual Content

Heading - Use the text tool to type the page heading (use a common font such as Arial so that it can be done in html later.
Content - Use the text tool to type the sample text content. If too long select tht right-center node around the text and drag inward. The text will wrap within and go downward.

Footer

Copy and paste the green line below to form a boundary before the footer information.
Use the text tool to type the footer text.

Slice Images

Use the slice tool to create slices over the logo and the mother/ child picture. Select the mother/ child picture and change to jpeg format in the optimize panel.
Export Slices -Right click on each slice and click “export selected slice”. Export the images to an “images” folder within your “project name” folder.

Your layout is ready, now you are ready to create your website. Recreate the layout in HTML with this Dreamweaver CS3 Tutorial.

In order to make you website live you will need to sign up with a hosting server. I recommend Hostgator which I use to host this site.

Step 1: Create a new Fireworks document

Step 2: Insert images and text

Step 3: Create the layout

Step 4: Slice and export the images

Project: Create a simple layout

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.

Fireworks is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!