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

 

Featured Fireworks & Dreamweaver Template

Business Template 22
Business
$49.95

 


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.

cs4website

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


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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