Fireworks/Creating a Web Banner with Menuing

From WSU Technology Knowledge Base
Jump to: navigation, search
Fireworks logo.jpg
The videos below will show you the steps to take to design a banner using Fireworks.

They are incomplete instructions, however, you will need to create "hotspots" on the graphic to create hyperlinks for the menu items. The entire object (which may be saved as an image file) will be output using the menu File>Export as HTML or as Dreamweaver Library item to your local/computer web site.

You should not use this method for creating a banner and menu unless you are familiar with these processes.

Note: this method of graphically constructing a web banner with menus can also be performed with Photoshop.

Fireworks Video Tutorials

These video tutorials will walk you through creating a header graphic using Adobe Fireworks. (Videos created by Joan Bernard.)

Video 1
Video 2
Video 3
Video 4

Legal Images to Use on Web Pages

Be aware of copyright laws when you select images to use on your website if they are not your own.

Image Resources


  1. Look for JPG and GIF images to use on your web page. These are the only two image formats that can be uploaded and displayed on a web page.
  2. ALWAYS, ALWAYS, ALWAYS give credit to the source where you find your images. Most images you can use for educational purposes, but they cannot be published and consumed by a large audience without written permission or purchasing the rights to use the image from its owner.

Image Resources

Capture An Image On Your Screen

Screen capture, also called Print Screen, is a feature on computers that allow you to “take a picture” of anything on your screen.

Windows Print Screen

One of the functions of the Print Screen/SysRq key is to take a snapshot or picture of your computer screen and copy it to the clipboard. Its the same thing as if you copied something from a document and it is now on your clipboard waiting to be pasted in its final destination.

  1. To copy/capture the current window, hold down ALT + Print Scrn at the same time. To capture the entire screen, just press Print Scrn.
  2. Open a new document in MS Word, MS Paint, MS Photo Editor, or Adobe PhotoShop.
  3. Paste the screen shot by holding down CTRL and V at the same time.

Snipping Tool can also be used to create a snapshot in Windows Vista and Windows 7.

Mac Print Screen

  • Command-Shift-3: capture screen to file
  • Command-FN-Shift-3: capture screen to clipboard
  • Command-Shift-4: capture selection to file. Note: the cursor changes into a special cross-hairs for drawing a rectangle over the area you want to capture.
    • If you click on the Space-Bar with this special cross-hair over a dialog box or screen object, it will automatically select it; the cursor changes to a "camera" icon; mouse down to "click" it and capture that item.
  • Command-FN-Shift-4: capture selection to clipboard

Our Internal Help Pages for Fireworks Include

Other Resources

For an Official Adobe User Manual: Download this PDF

For online (web) help go to Adobe's own help site: Here!

For tutorials on getting started with FireWorks: Go Here...