Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Creating Website Pages in Fireworks CS4   


Featured Fireworks & Dreamweaver Template

Real Estate Template 10
Real Estate

Creating Website Pages in Fireworks CS4

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

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage