Creating interactive web pages using Fireworks

Creating a 5 page mock up

Fireworks• Fireworks is similar to Photoshop but makes it easier to

produce optimised web graphics (or network graphics) which can be optimised for the screen). The draw tools are easy to use

• A Fireworks file is saved a PNG format image with information such as layers, slices, links, etc.

• The PNG can be exported to other formats such as GIF, JPG, PNG8, and HTML.

• A complete web page/site can be created or just one image.

• It is good for mock up sites (or even completed sites) however fuller sites need to be edited comprehensively using Dreamweaver

Use draw tools to create “Models”• Experiment with some of the tools. • Create 3 - 7 pages (with “models”) (use

the Pages window), i.e. one Fireworks file with 7 pages

• Save the file as example drawings.png• Create a PDF. Save as pdf, File > Export

> select PDF• Upload the PDF to

the VLE

Create creative interactive pages• Use fireworks to create

interactive pages.• Using the pages you

have modelled, create web pages that can interact easily.

• Use the buttons out of the common library

Using Symbols from Library• Drag button (symbols) onto page, position

Create links for each button• Click each button, select page from link menu

Create links and saving• Copy and paste the menu onto the other pages

then save the pages (File > Export)

Convert buttons to symbols• Select a button.• Right click > convert to

symbol. Name as button 1 or link 1

• Repeat for others• Delete the existing

buttons.• Use the symbols to

create a navigation bar on all the pages.

• Save as menu 2 exporting to HTML.

• Does this reduce the number of image?