Meaning

1
Lecture 7

• Meaning
• Guiding Principles for Term Project
• Mechanics
• Interactivity Recap
• Simple and Disjointed Rollovers and Image Map
• Navigation Structures
• Rollovers

2
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

3
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

4
Recap Disjointed Rollover
1. Select Graphic 2. Select in Behavior
Window 3. Select Swap Image 4. 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
5
Recap Behavior Management

• Changing Which Event Triggers Action
• Select Event in Behaviors Window
• Press on black triangleand 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

6
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

7
Navigation - Overview

• Want to indicate You are here
• Want interactive navigation elements
• Move over navigation and its elements indicate
  responsiveness
• FOUR Possible States example
• Up 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

8
Navigation Display Options

• Color
• White ? Red
• Grey ? White
• Black ? White
• Type Style
• Regular ? Bold
• Regular ? italics
• Type Size
• Background Color
• Image

9
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
• Navigation Graphics in Fireworks
• How to create text navigation buttons

10
Step 0 Download files and Initialize

• Create folder mplec7
• Download Files and Images
• http//www.scils.rutgers.edu/aspoerri/Teaching/M
  POnline/Lectures/Lecture7/stepbystep/
• Launch Dreamweaver
• Initialize
• File gt New
• View gt select Design
• View gt Rulers gt select Show and Pixels
• Windows gt select Properties and Behaviors

11
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

12
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
  ( Final file
  imago)
• Place Cursor before first image in 2nd
  navigationSelect bar image and press left
  arrow key
• Insert gt Images Objects gt Rollover Image
• Image Name Imago
• Original Image images/secondarynavi/IMAGOS.gif
  Want Down / Selected image because on imago
  page
• Rollover Image images/secondarynavi/IMAGOSMO.gi
  f
• Specify hyperlink browse to imago page

l
13
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

14
Step 3a - Create Images for Navigation

• Launch Fireworks
• Create file navi_categories
• File gt New
• Specify size
• Height 30 pixels
• Width as wide as longest category text 100
• Show Rulers View gt Rulers
• To ensure that text in the different navigation
  images is aligned
• Create horizontal and vertical guides
• Click and drag from corresponding ruler
• Position guide on canvas and release mouse
  button.
• Reposition select Pointer Tool and move guide
  to desired location
• Move guide to specific position
• Double-click the guide.
• Enter new position in the Move Guide dialog box,
  and click OK.

15
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 gt Canvas Size
• To reduce Use Crop Tool (maintain standard
  height)

16
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 gt Export Preview select format
• File name reflects state it presents