Creating Slices, Linking Pages and Creating a PDF File of the Full Website using 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

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

In the previous tutorials we designed our base layout and created the website pages. Now we will link the pages together using slices and export it as a PDF layout.

Choose the Master Page. Select The slice tool in the Tools Panel and create 4 slices over the 4 links on top. The slice tool basically creates images. Each slice will be exported as an image and behaviors like rollovers, link, drop down menus etc. can be added to a slice.

Now we need to add links to the slices. In the Properties Inspection give the name of the slice, alt tag and from the drop down choose the file name. Do this for all the 4 slices.

Now you can export it as a PDF file which you can use to show your clients the website prototype before converting it to html or css. To do this all you need to do is click on File/Export and choose Adobe PDF (.pdf) from the Export drop down menu. It's as simple as that! You can password protect the PDF file if needed by clicking on the option button. You can also export as html or CSS!

Here is the completed PDF. Click on the links and you will see all the links go the specific page.

Step 4 : Exporting the layout as CSS and Images

---