Creating Website Pages in Fireworks CS4

Written by Rachna

In this tutorial you will learn how to use a Master Page and how to create Sub Pages in Fireworks CS4.

This is part of the tutorial on designing the below layout using Fireworks CS4.

Requirements : Adobe Fireworks CS4

Step 1 - Design the Base Layout

Step 2 : Creating Website Pages in Fireworks CS4

In the previous page we designed our base layout. All these elements are common elements that will be used in all the pages i.e. background image, main graphic, site name, navigation and footer. So we will set this as the Master Page. Right click on Page 1 the Page Panel and choose Set as Master Page. It will look like this. I have renamed it to Layout.

I love this new feature in Fireworks CS4. The Master Page will automatically share all the elements to all the new pages we add. Every time you make a change to the layout, you just need to do it in the Master Page and it will change it in all the pages. It works something like how tech Dreamweaver template works if you are familiar with that.

Now that we have created our Master Page, it is really easy to create new pages. Right Click on the Pages Panel and Select New Page to create new pages. Create 4 new pages. Double Click on the Page name to rename the pages to Home, About, Services and Contact. It will look like this. This is a great new feature in Adobe Fireworks CS4!

Notice how none of the elements in the Master Page are editable in any of the other pages. They are locked. To edit you need to choose the Master Page. Now you only need to concentrate on what is unique on each page which is the content. Choose the Page and type in your content in the blank space.

Step 3 : Creating Slices, Linking Pages and Exporting the Layout as a PDF File with Links using Fireworks CS4