(Pages in my example)

New in Fireworks CS3 is the ability to create "Pages". Pages allow designers to create linked mock-ups of what may become web pages or interfaces.

Each page can have their own Layers, Slices and Frames. A Master Page can be created so that whatever you place on the master page will be on all the others. Additionally, changes made to the master page will be reflected across all the pages.

By default you'll find the Pages panel grouped with Layers, Frames and History.

By default, your first page isn't automatically set as the Master Page, you need to set it (or any other page) as the Master Page to designate it as so. Additionally, New Blank Pages or Duplicate Pages can be created.

Linking Pages

Pages can be linked together as html files. All you need to do is create a slice for the link or button and choose the page from the drop down menu in the Properties Panel. (See below.)

Exporting Pages

If you want to export your pages as html files click on File > Export. Make sure that you have "HTML and Images" selected for Export and Uncheck the box next to "Current page only".

I exported to a folder located on my Desktop. If I open up the folder I notice that Fireworks has placed the htm files and image slices inside this folder.

If I double click on Page 1.htm my web browser opens and I can click through the pages.

This has been a quick review of Pages in Fireworks but I'm sure you'll see the possibilities, especially in future versions of Fireworks where hopefully we'll be able to create PDF's and SWF files (Flash movies) from pages created in Fireworks. I don't know if this is going to happen anytime soon but it sure would be nice! It's still a great way to mock up web pages to show to clients or just try different layouts without having to create new PNG files. Mockups could be created in earlier version of Fireworks using Frames but with Pages you also have the ability to link pages, create slices independent from other pages, set a master page, add frames for rollovers/animations and export as html files.

You can download the PNG file for this example by clicking here.