© Anselm Spoerri

Lecture 7

Meaning– Guiding Principles for Term Project

Mechanics– Interactivity Recap

– Simple and Disjointed Rollovers and Image Map

– Navigation Structures– 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

© Anselm Spoerri

Recap – Disjointed Rollover

1. Select Graphic2. Select “+” in Behavior Window3. 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

© Anselm Spoerri

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

© 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: 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

© 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 WeekNavigation 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

© 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 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” ( Final file “imago”)– Place Cursor before first image in 2nd navigation

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 guides1. 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 position1. 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