![Page 1: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/1.jpg)
Creating interactive web pages using Fireworks
Creating a 5 page mock up
![Page 2: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/2.jpg)
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
![Page 3: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/3.jpg)
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
![Page 4: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/4.jpg)
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
![Page 5: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/5.jpg)
Using Symbols from Library• Drag button (symbols) onto page, position
![Page 6: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/6.jpg)
Create links for each button• Click each button, select page from link menu
![Page 7: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/7.jpg)
Create links and saving• Copy and paste the menu onto the other pages
then save the pages (File > Export)
![Page 8: Creating interactive web pages using Fireworks Creating a 5 page mock up](https://reader036.vdocuments.mx/reader036/viewer/2022082820/5697bf9b1a28abf838c92986/html5/thumbnails/8.jpg)
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?