Project: Create a Layout in Fireworks CS3

You may also be interested in the Fireworks CS4 Tutorial or the Fireworks CS5 Tutorial.

Create layout in Fireworks CS3

Before you start:

  1. If you are a beginner make sure you go through steps 1- 4 of the Fireworks CS3 Tutorial before attempting this project.

  2. Download Project Files (, 1 MB)

  3. Use the images provided for the project. You can get free images like these from Dreamstime (click on the "Free images" tab).

Begin Project:

Your canvas

  1. Open a new document.

Import and edit the picture of the flowers

  1. Import Image. File > Import > Browse and select image of the flower
  2. Resize Image - Select image. Select Scale Tool. Drag the corner of the image to resize it.
  3. 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.
  4. 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

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


  1. Use the text tool to create the logo name – specify font, size and colors

Image #2

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

Texual Content

  1. 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.
  2. 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.


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

Slice Images

  1. 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.
  2. 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.

Go to Fireworks Tips and Tricks >>


Fireworks CS3 Tutorial Menu

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

Fireworks Tips and Tricks

Fireworks CS4 Tutorial

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!


God Loves You! "For God so loved the world that he gave his one and only Son (Lord Jesus Christ),
that whoever believes in him shall not perish but have eternal life." - John 3:16, Bible