Lecture 7
Meaning
– Guiding Principles for Term Project
Mechanics
– Interactivity Recap
– Simple and Disjointed Rollovers and Image Map
– Navigation Structures
– Navigation Bar and Rollovers
© Anselm Spoerri
Meaning – Guiding Principles for Term Project
Simple
– “Don't make me think!”
Less is More
– Cut text is half
Easy Navigation
– Where am I?
– How do I get to …?
Tell a Story
Be Creative
© Anselm Spoerri
Interaction Design
Interactivity Choices
– Rollovers
– “Jointed” = interact with page element and it changes its appearance
 example
– “Disjointed” = interact with page element and OTHER elements change
 example
– Image Maps
– Interact with Hotspots = Circle, Rectangle, Polygon
 example
– Navigation Structures
(today)
– Rollovers: “You are here” special case
 example
– “Navigation Bar”: semi–automatic support of “You are here”
© Anselm Spoerri
Recap – Disjointed Rollover
1.
2.
3.
4.
Select Graphic
Select “+” in Behavior Window
Select “Swap Image”
Select Image(s) to swap and browse to
replacement image (* indicator now next to image)
5. Select “Preload Images”
Importance of NAMING your graphic elements
© Anselm Spoerri
Recap – “Behavior Management”
Changing Which Event Triggers Action
– Select Event in “Behaviors” Window
– Press on black triangle
and pull down menu appears
– Select which event triggers behavior
(mouse click or mouse over etc.)
Multiple Behaviors
–Can attach multiple actions to same object
–Action for “MouseOver” (Default)
–Action for “MouseClick”
–Etc.
–Press “+” icon and select
© Anselm Spoerri
Recap – Image Map
Create Hotspot(s)
– Select Image
– Select hotspot tool in “Properties Inspector”
– Make sure all Property Inspector options visible
(if not, click bottom right triangle)
– Rectangle / Circle: draw shape over hotspot region
– Polygon: trace contour of hotspot region by clicking mouse
– Select Hopsot using “hotspot selection arrow”
– Attach Behavior
© Anselm Spoerri
Navigation - Overview
Want to indicate “You are here”
Want interactive navigation elements
– Move over navigation and its elements indicate “responsiveness”
FOUR Possible States:
“Up”
example
Not selected (button up = not pressed)
“Over”
Mouse over button that is not selected
“Down”
Selected (button pressed down)
“Over while down”
Mouse over selected button
© Anselm Spoerri
Navigation Display Options
Color
– White  Red
– Grey  White
– Black  White
Type Style
– Regular  Bold
– Regular  italics
Type Size
Background Color
Image
© Anselm Spoerri
Navigation Structure – Step by Step
Steps So Far
– Interactions & Behaviors
– Created Disjointed Rollovers
– Used of "blank images" that can be swapped
– Assigned "image swaps" using “Behaviors”
– Created Image Map: mouse over
This Week
Navigation Structure in Dreamwaver
– Create Primary & Secondary Navigation Structures
– Use “Rollovers” Why?
– More flexibility
– Can have many rollovers on same page
– Create Primary Navigation: "you are here now"
– Use CS4 Dreamweaver’s “Navigation Bar” structure,
(but can only have one “Navigation Bar” structure on a page)
Navigation Graphics in Fireworks
– How to create text navigation buttons
© Anselm Spoerri
Navigation Bar (in CS4, not available in CS5)
Navigation Bar = Set of images
– Visual appearance changes based on user actions
Navigation Bar Element = Button
– Has different states
– When clicked takes user to another page
Before creating Navigation Bar, need to create set of images for different display
states of each navigation element.
Navigation Bar Element can have FOUR states:
– Up:
image that appears when user hasn’t yet clicked or interacted with element.
– Over:
image that appears when the pointer is moved over the Up image.
Element’s appearance changes to let users know they can interact with it.
– Down:
image that appears after element has been clicked.
– Over While Down:
image that appears when pointer is rolled over the Down
image after the element has been clicked.
Don’t have to specify all four states.
© Anselm Spoerri
Step 0 – Download files and Initialize
Create folder “mplec7”
Download Files and Images
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture7/stepbystep/
Launch Dreamweaver
Initialize
–
–
–
–
File > New
View > select “Design”
View > Rulers > select “Show” and “Pixels”
Windows > select “Properties” and “Behaviors”
© Anselm Spoerri
Step 1a – Create Navigation Bar
(in CS4, not available in CS5)
Open file “home0”
– Select “Navi” AP Element intended for navigation
– Insert > Image Objects > Navigation Bar
– Insert Navigation Bar dialog box appears
– In Element Name field, type “home” for navigation bar element
– Specify “Up”, “Over”, “Down” and “Over While Down” images
– Specify hyperlink: browse to “home” page
– Select “Show ‘Down Image’ Initially” because we’re on “home” page
“Show ‘Down Image’ Initially”
Places
Navigation Bar
in its own
Table
© Anselm Spoerri
Step 1b – Create Navigation Bar
(in CS4, not available in CS5)
Still in Navigation Bar dialog box
– Press “+” button, to add new navigation bar element
– In Element Name field, type “interests” for this navigation bar element
– Specify “Up”, “Over”, “Down” and “Over While Down” images
– Specify hyperlink: browse to “interests” page
– Do NOT Select “Show ‘Down Image’ Initially” because on “home” page
– Make sure “Preload Images” is selected
l
© Anselm Spoerri
Step 1c – Create Navigation Bar
(in CS4, not available in CS5)
Open file “home”
– Select Images that are part of Navigation Bar
– Edit > Copy
Open file “interests0”
– Place Cursor inside in AP Element intended for navigation
– Edit > Paste
You might get an error message, click “OK”
and click inside page and repeat clicking “OK” until error message disappears.
– Modify > Navigation Bar
– In Nav Bar Elements list, select the element you want to edit
– Select “home”
Deselect “Show ‘Down Image’ Initially” because on “interests” page
– Select “interests”
Select “Show ‘Down Image’ Initially” because on “interests” page
Final file “interests”
© Anselm Spoerri
Recap – How to Create Navigation Bar
(in CS4, not available in CS5)
Insert > Images Objects > Navigation Bar
“Navigation Bar” dialog
1.
2.
3.
4.
5.
Add Nav Bar Element by selecting “+”
Name = “category”
Select images for “Up”, “Over”, “Down” and “Over while down”
Set “When clicked …” = browse to file for category
Options
–
–
Select “Preload Images” ALWAYS
Select “Show Down Image initially” only if current category = current page
6. Repeat steps 1-5 for another category
Save file and press F12 to test page
Copy Navigation Bar and paste into other page
–
Make sure “Show Down Image initially” is properly configured
© Anselm Spoerri
Step 1 (CS5) – Create Navigation using Image Rollovers
Insert “UP” Images
– Place Cursor inside DIV / AP Element intended for navigation
– Insert Images and Specify Alternate Text
– Assign ID to Selected Image in Property Panel
Create Rollovers
– Select image and click on “+” in Behaviors Panel
– Select “Swap Image”
– In “Swap Image” dialog, select image to swap in on MouseOver
– Make sure to select both checkboxes (Preload and Restore)
Create “You Are Here” Indicator
– Select image that needs to show “DOWN” image
– Change image to DOWN image
– Update rollover by double-clicking on “Swap Image” behavior
– Change image to be swapped to DOWN image
Consult Also Step 2 Instructions
Final file “home_CS5”
© Anselm Spoerri
Step 2a – Create Navigation Using Rollovers
Why use Rollovers?
– There can be only one “Navigation Bar” per page
– Want Primary and Secondary Navigation on same page
– Easier to copy & paste
Open file “imago0”
– Place Cursor before first image in 2nd navigation
( Final file “imago”)
Select “bar” image and press “left arrow” key
– Insert > Images Objects > Rollover Image
– Image Name = “Imago”
– Original Image = “images/secondarynavi/IMAGOS.gif”
Want “Down” / Selected image because on “imago” page
– Rollover Image = “images/secondarynavi/IMAGOSMO.gif”
– Specify hyperlink: browse to “imago” page
l
© Anselm Spoerri
Step 2b – Create Navigation Using Rollovers
Open file “poem0”
– Need to Change “Up” into “Down for “Poem” category
to indicate that we are on the “poems” page.
– Select “Poem” image
– In Property Window change “Scr” = “PoemsS”
– In Behavior Window select “onMouseOver” and doubleclick
– In Swap Image dialog select Poems image (has * next to it)
and Set Source to = “PoemsSMO”
Final file “poem”
© Anselm Spoerri
Step 3a - Create Images for Navigation
Launch Fireworks
Create file = “navi_categories”
– File > New
– Specify size:
– Height = 30 pixels
– Width = as wide as longest category text = 100
Show Rulers: “View > Rulers”
To ensure that text in the different navigation images is aligned
Create horizontal and vertical guides
1. Click and drag from corresponding ruler
2. Position guide on canvas and release mouse button.
– Reposition: select “Pointer Tool” and move guide to desired location
Move guide to specific position
1. Double-click the guide.
2. Enter new position in the Move Guide dialog box, and click OK.
© Anselm Spoerri
Step 3b - Create Images for Navigation
Open file “navi_categories”
Create text for “UP” button
– Unselected state: select 10-14pt, regular
– Select “Text tool” and type your category
– Automatically creates text object
– To change text: select correct object & select text with “Text Tool”
– To change color: select “Color Picker” and select new color
– To move text: select “Pointer Tool” (you can use arrows)
(move so it is centered)
Need to change image area
– To enlarge: Image > Canvas Size
– To reduce: Use “Crop Tool” (maintain standard height)
© Anselm Spoerri
Step 3c - Create Images for Navigation
Create folder for navigation images
Create images for each state of a navigation category
– “Over”: bold typeface and 10-14pt type size (possibly larger than “Up”)
– “Up”: regular typeface and 10-14pt type size
–
–
–
–
Select object that contains “Over” text
Duplicate object (copy & paste) and Name = “xxx Up”
Select text in object and make it regular or smaller …
Center modified text (use “Pointer Tool”)
– “Down”: regular typeface, 10-14pt type size and color = red or …
– Select object that contains “Up” text
– Duplicate object (copy & paste) and Name = “xxx Down”
– Select text in object and change its color
– “Over while down”: bold typeface, 10-14pt type size
(possibly larger than “Down”) and color = red or …
– Select object that contains “Over” text
– Duplicate object (copy & paste) and Name = “xxx Over While Down”
– Select text in new layer and change its color
– Make sure the appropriate object are (de)selected for each state
– File > Export Preview: select format
– File name reflects state it presents
Repeat above for another category
© Anselm Spoerri