Banner for Disjointed Rollovers Tutorial
Button One Part of Disjointed Rollover that contains the Swap Image area
Button Two
Button Three
Button Four
Intro| Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources

Pre-Tutorial Tips

These are the main tools used for part one of the tutorial plus some general tips that will make doing the tutorial easier. I, too, am a student with only one lifetime scrambling to associate with every software that will aid me in being a better graphic designer. As you work through this tutorial, please e-mail me if there is a problem area I might be able to clarify or improve.

  1. Pointer Tool
  2. Shape Tool
  3. Type Tool
  4. General Tips (right column)
  5. General Tips Fireworks Specific (left colum
Image of Tool Box/Bar with the most used tools in part 1 of this tutorial highlighted.

Pointer Tool: Any object must be selected before you can edit an object meaning change its color, size, stroke, etc. The Pointer Tool selects the object/objects you are working on or editing.Tip: Marquee Selecting: The pointer tool can be used in a sweeping manner. Try clicking on your workspace, holding and dragging across one single object or several. Any object that the sweeping barely touches will be selected. Practice this method as it is great for selecting multiple objects or editing with greater speed. Objects that you don't want in the selection can be removed easily by clicking on the unwanted object pressing Shift + Pointer. This is a good method for selecting difficult to see smaller objects nested in larger ones.
Sweep them all and then Shift Select the larger object/objects out! Trouble Shooting: If nothing is happening in your workspace, you probably do not have anything selected!
to top of page


Image of Shape Tool location

Shape Tool: The Shape Tool contains geometric shapes that are commonly the beginnings of most buttons. i.e., square, rectangle, circle, polygon, star.

Image illustrating some of the shape variations offered by the Shape Tool

You have the option of choosing which shape and size to use. In this tutorial we have chosen to use circlular buttons. (Samples of other shapes and sizes created by other students may be found by exploring the links on the Resource page). You simply click on the Shape Tool option you want and draw the object onto your workspace. Usually, buttons should be small, but ledgible. Tip: When making buttons, make one exactly as you want it first (apply color, get size just right, add Effects like beveling or a shadow) and then copy and paste all additional buttons you need from the perfect button.
to top of page

Image of Text Editor Dialog/Settings box

Type/Text Tool: The Type Tool is used by clicking on the Type Tool icon first and then clicking anywhere in your workspace. It will open the Text Editor Box where you will type your text and apply various attributes to your text. Play with these features to get familiar with what they do. Changes made to the type in the Text Editor Box can be seen being applied to your type in your workspace as you do it. However, the new changes will not apply until you press OK or APPLY in the Type Editor Dialog Box.Tip: Any editing you do to the type thereafter, simply double click on the text you want to change and the Text Editor Box will reopen. Remember to highlight the text or parts of text you want to edit as shown or it won't accept any changes.
to top of page

General Tips For Fireworks:

Image illustrating how workspace is framed with a rope to indicate that it is in the Image Edit Mode (Pixels) and shows the red circle with white x in it that you click on to return to vector mode (drawing objects)
Image showing the vector mode with the rope gone

If you see a ropelike border around your workspace, you have entered the Image Edit Mode (where pixels reign) and must click on the red circle with the X in it to return to the Vector Mode (where drawing reigns). This tutorial operates in the Vector Mode that helps to create line art.
to top of page

Image illustrating how Fireworks lets you know you are directly over an object that can be selected by showing you the RED line  
Image showing how Fireworks changes the RED line into a BLUE line once it is selected. Nothing can be changed without first being in the select state.

Look for Visual Aids! In Fireworks, when you roll over an object a red line shows you the object can be selected. Click when the red is on and it will turn to Blue (Blue) to show that it is selected

General Tips For Both Dreamweaver and Fireworks:
  • Ctrl + Z = Undo
    You can almost always undo what you did in Fireworks so don't fear making a mistake. Ctrl+Z to undo the last action or repeat and it will undo sequentially until you get back to where you want to start again. This is a quick way to get out of trouble fast!
  • Create and Use Cheat Sheets
    When you find a certain process confusing to follow because it is new, has several steps, or is used infrequently, create your own cheat sheet and use it as a guide to remind you of basic steps until you get it down pat.
    This tutorial offers its own version of a cheat sheet called the Sharpie Sheet.
  • Learn Shortcut Keys
    Make yourself learn the shortcut keys to features you use frequently. It is worth the effort because it will save you tons of time and make you feel like a Sharpie!
    Tip: You will discover that many shortcut keys are the same from one software to another so your efforts to learn one Shortcut Key like Ctrl+N (new document) will generally perform the same function in most other softwares you venture into!
to top of page
Steps Covered on this Page: Pre-Tutorial Tips List | Pointer Tool | Shape Tool | Type Tool | General Tips Fireworks Specific | General Tips | Back to Top

Intro| Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources
To Sharpie SheetBack to Intro PageTo Page 2To Sharpie SheetTo Sharpie Sheet
Revised 05.04.01
Contact Ginny LeBleu
cis 212, Cuyamaca College

Copyright 2001 © Ginny LeBleu