Information Visualization Course
© Anselm Spoerri

Lecture 7 – Overview
– Recap: Web Design Matrix
– Presentation Pyramid
– AP Element Recap
– AP Element and Elastic Layout
– Interaction Design: Rollovers
– Dreamweaver Step-by-Step Demos
– Interactivity: Rollovers | Image Maps | AP Elements
– Fireworks
– Recap
– New Features: Import Image, Text as Mask
© Anselm Spoerri

Recap – Web Guiding Principles
Common Sense
– No right way to design, but there are better ways :)
Make it short
– More likely to be used and remembered
– Cut in ½ and cut in ½ again
Don't make me think
– Get rid of question marks - each item has clear purpose
Make it work at a glance
– People have little time
Support intented task - manage expectations
© Anselm Spoerri

User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
• Make page work at a glance
• Create Visual Hierarchy
1
Use Grid System
Choose first “reasonable item”
• Make obvious what you can do
Muddle through
• Don't make users think
Stick to what works
• Repetition & Consistency
2
Create Visual Hierarchy and Guide Eye
3
Typography Heuristics
© Anselm Spoerri

Presentation Pyramid: Summary  Paragraph  Page
Summary
Two to Three Paragraphs
More detailed information
© Anselm Spoerri

Recap – CSS: AP Element = AP Div
AP Element = Absolutely Positioned Element = AP Div
Specify exact coordinates with respect to:
• Body / AP parent element (position: absolute)
• Browser window (position: fixed)
[not all browsers support it] then set top, right, bottom and/or left: value;
 takes element out of “natural/normal flow”
• More Layout Control & Flexibility
• Layout flexibility like in print design
• Change visibility of AP Elements
• Nesting AP Elements
• Inherit properties from parent AP Element such as visibility
AP elements can overlap  specify a stacking order
(z-index) to position elements in 3D.
Vertical-align: baseline/ middle / sub / super / top / bottom / text-top / text-bottom
© Anselm Spoerri

AP Elements and Elastic Layout
– AP Elements takes “div” out of the “linear flow” of page position: relative
– Add position: relative to ancestor element to which you want your absolutely positioned element to be offset; otherwise element will be offset with respect to body or AP parent.
– relative element will not show up in AP Panel in DW
© Anselm Spoerri

AP Elements and Elastic Layout
(cont.)
#container { /* width: 80%; margin: 0 auto; */}
#mainContent {/* properties */ }
#apDiv1 { position: absolute; left: 25px; top: 25px; }
<div id=“container”>
<div id=“mainContent”>
<div id=“apDiv1”>Hello</div>
</div>
</div>
 apDiv1 will NOT move with #container when browser width is changed
How to change this?
 Add position: relative to #container declaration
#container {position: relative; /* elastic properties */; }
© Anselm Spoerri

Interaction Design
– 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
– AP Elements
– Control Visibility
 example
© Anselm Spoerri

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
© Anselm Spoerri

“Behavior Management”
– 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.)
–Can attach multiple actions to same object
–Action for “MouseOver” (Default)
–Action for “MouseClick”
–Etc.
–Press “+” icon and select
© Anselm Spoerri

“Behavior Management” – Show Events for …
Only “onMouseOver” event visible?
Or
Most of Behaviors grayed out?
Select this to have more
EVENT and
BEHAVIOR options
© Anselm Spoerri

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

Dreamweaver – Example – Step by Step
– Create layout for navigation and multiple images
– Work with Animated GIFs
– Create Disjointed Rollovers
– Use of "blank images" that can be swapped
– Assign "image swaps"
– Orchestration of multiple Animated GIFs
– Create Image Map: move over, single click, double click
© Anselm Spoerri

Step 0 – Download files and Initialize
Initialize
– File > New
– View > select “Design”
– View > Rulers > select “Show” and “Pixels”
– Windows > select “Properties” and “Behaviors”
© Anselm Spoerri

Step 1a – Create AP Elements
Create AP Element
– Standard Mode + Layout View
– Insert > Layout Object > AP Div or
Click “Draw AP Div” button in “Insert” panel, then drag to draw
ID = “Main”; Width = 700; Height = 500; L = 0; T = 0;
Nested AP Elements in “Main” AP Element
1. ID = “Left”; Width = 100; Height = 50; L = 300; T = 50;
2. ID = “Right”; Width = 100; Height = 50; L = 500; T = 50;
3. ID = “Center”; Width = 300; Height = 300; L = 300; T = 150;
4. ID = “ImageMap”; Width = 200; Height = 200; L = 50; T = 200;
© Anselm Spoerri

Step 1b – Create Tables Inside AP Element
Open file “layout1a” to continue
– Place Cursor inside “Center” AP Element
– Insert > Table 3 Columns x 3 Rows
– Select all Nine Cells
– Property Inspector : Width = Height = 100
© Anselm Spoerri

Step 1c – Insert Images and Assign Names
Open file “layout1b” to continue
Insert Images
– Place Cursor inside “Left” AP Element
– Insert > Image
– “Select Image Source” dialog opens
– Select “images” folder
– Select “bilbao_L”
Name Image
– Select image (you want to name)
– “Properties Inspector” changes to “Image” and its thumbnail shows
– Enter name “bilbao” next to thumbnail
Why name image?
– Want to be able to refer to image (and select in a list) e.g. so that we swap it with another image in rollover
© Anselm Spoerri

Step 1d – Insert Images and Assign Names
– Place Cursor inside AP Element / Table Cell
(if cell is selected you can not insert)
– Insert > Image
– “Right” AP Element = “dancebutton” and name it “dance”
– 9 Cells of 3x3 Table:
– Cell1and1 = “whiteCell” and name “cell1and1”
– Cell1and2 = “whiteCell” and name “cell1and2”
…
– Cell3and2 = “whiteCell” and name “cell3and2”
– Cell3and3 = “whiteCell” and name “cell3and3”
– Will be used for “disjointed rollover” e.g. when we move mouse across “dance” image the placeholders will be exchanged with dance images
© Anselm Spoerri

Step 2a – Create Simple Rollover Using Behaviors
Open file “layout2” to continue (press F12 to view in Browser)
Attach Behavior to Image
– Select image = “dance”
(BTW: similar for text)
– In “Properties” window, enter dummy hyperlink = # into hyperlink field
– In “Behaviors” window, select “+” icon
– Select “Swap Image” in pull down menu
– Specify which of listed images should swapped with which another image (using “Browse” and “Select”)
1. Select “dance”
2. Browse to & select “dance_text”
(a star symbol will be placed to image being swapped)
Always select “Preload Images”
If want initial images restored on MouseOut, select check box
For now do not select it.
© Anselm Spoerri

Step 2b – Create Simple Rollover Using Behaviors
Done so far (Open file “layout2a” to continue)
Attached Simple Rollover to “dance” so mouse-over changes it to “dance_text”
 Use F12 to test it
Next
Attached Simple Rollover to “bilbao” so mouse-over changes it to “bilbao_text”
Attach Behavior to Image = “bilbao”
– Select image = “bilbao”
– In “Behaviors” window, select “+” icon
– Select “Swap Image” in pull down menu
– Select “bilbao” and Browse to & select “bilbao_text”
– “Restore Images on MouseOut” not selected
What is missing?
– When moving mouse over “dance” we want “bilbao” to change as well
 We want to create a Disjointed Rollover, where not only image we move mouse over is changed
© Anselm Spoerri

Step 2c – Create Disjointed Rollover Using Behaviors
Done so far (Open file “layout2b” to continue)
Attached Simple Rollovers to “dance” and “bilbao”
Next
Attach Disjointed Rollover to “dance” so “bilbao” changes to “ bilbao_L ”
Attach Disjointed Rollover to “bilbao” so “dance” changes to “dancebutton”
Attach Behavior to Image
Select image = “dance”
– In “Behaviors” window, double click on “Swap Image” behavior
– In “Behavior - Swap Image dialog” for “dance” image
– Select “bilbao” and Browse to & select “bilbao_L”
– “Restore Images on MouseOut” not selected
Select image = “bilbao”
– In “Behaviors” window, double click on “Swap Image” behavior
– In “Behavior - Swap Image dialog” for “bilbao” image
– Select “dance” and Browse to & select “dancebutton”
– “Restore Images on MouseOut” not selected
Use F12 to test it
© Anselm Spoerri

Step 2d – Add Disjointed Rollovers Using Behaviors
Add further Disjointed Rollovers to “dance” image (Open file “layout2c” to continue)
Select “dance” image
In “Behaviors” window, double click on “Swap Image” behavior
Still in “Behavior - Swap Image dialog” for “dance” image
– Select “cell1and1” and browse & select “dance1_1”
– Select “cell1and2” and browse & select “dance1_2”
…
– Select “cell3and3” and browse & select “dance3_3”
– Make sure “Preload Images” selected
“Restore Images on MouseOut” not selected
Press F12 to test page in Browser
© Anselm Spoerri

Step 2e – Add Disjointed Rollovers Using Behaviors
Add further Disjointed Rollovers to “bilbao” image (Open file “layout2d” to continue)
Select “bilbao” image
In “Behaviors” window, double click on “Swap Image” behavior
“Behavior - Swap Image dialog” for “bilbao” image
– Select “cell1and1” and browse & select “bilbao1_1”
– Select “cell1and2” and browse & select “bilbao1_2”
…
– Select “cell3and3” and browse & select “bilbao3_3”
– Make sure “Preload Images” selected
“Restore Images on MouseOut” not selected
The “bilbaox_x” images are Animated GIFs
– Open in Fireworks if you want to examine them
© Anselm Spoerri

Coordinating Animated GIFs
Example
Corners Middle Center
State 1
State 2
State 3
State 4
© Anselm Spoerri

Step 3 – Creating Image Map
Open file “layout3” to continue
Insert Images
– “lmageMap” AP Element = “imagemap” and name it “imagemap”
Open file “layout3plus”
Create Hotspot
– Select “imagemap” image
– Select “Polygon” hotspot tool in “Properties” window
– Trace contour of dancer by clicking mouse along contour
– Select Hopsot that was created
– Attach “Swap Image” behavior and make same swaps as with “dance” image but “Restore Images on MouseOut” selected
– Swapped on mouse click = “onClick”
Final file “layout4”
© Anselm Spoerri

AP Elements – Interactivity Demo
Download Files and Images
Demo
Use Tracing Image to Guide Placement of AP Elements
Use AP Elements to create “disjointed” rollover without need to use GIF or JPEG images example
Launch Dreamweaver
Panels open: Properties, Insert, AP Elements
Show Rulers and Grid
© Anselm Spoerri

Step 1 – Tracing Image
– File > New: HTML and <blank> Layout and Transitional
– Modify > Page Properties : select sans serif typeface
– Modify > Page Properties : select “Tracing Image” category
– Browse for tracing image = “i-R_Opening_Page” and set transparency = 50%
– Standard Mode:
– Create main AP Element that will hold other elements
L = 0px; T = 0px; W = 600px; H = 600px  view in Split View
– Create four AP Elements (along earth contour) nested in main AP Element
– Enter text : experiment with size / bolding to create “visual flow”
– Experiment with visibility setting of main and/or “children” AP Elements
Step-by-Step files: tracingimage1, tracingimage2, tracingimage3
© Anselm Spoerri

Step 2a – Create AP Elements with Images
– Click “Draw AP Div” button in “Insert” panel, then drag to draw
– AP Element0: W = 800; H = 800; ID = Main;
– AP Element1: W = 160; H = 120; ID = Paris; Overflow = hidden;
– AP Element2: W = 160; H = 120; ID = Furcup; Overflow = hidden;
– Select AP Elements
(using SHIFT select) and apply “Modify > Align = Left”
– “Paris” AP Element: Insert image “paris” …
Preview in Browser (press F12 for IE): notice overflow hidden
Select image and resize to 160 x 120 and ID = paris
Press F12: whole image now visible
– “Furcup” AP Element: Insert image “furcup” and resize to 160 x 120 and ID = furcup
© Anselm Spoerri

Step 2b – Create Text AP Elements and Manage Visibility
Open file “layers1”
Create AP Elements with Text
– Click “Draw AP Div” (AP Element) button in “Layout” toolbar, then drag to draw
– AP Element3: W = 250, H = 150, ID = IntroText, Visibility = Hidden
– AP Element4: select and copy “IntroText” AP Element,
deselect and paste; rename it “ParisText” in AP Elements Panel
(notice: new AP element is in exact same position as “IntroText” as we want it; but it is not nested inside “Main” AP Element)
hold Control key as you drag “ParisText” below “Main”
– AP Element5: copy & paste “IntroText” and rename “FurcupText”
Perform same steps as for “ParisText”
Enter text into AP Elements
– Select AP Element in “AP Element” Panel and enter text
AP Elements / AP Element Visibility Management
– “AP Elements” Window: click in “eye” column to make “IntoText” = visible and drag “IntroText” to top of stack
– Make “ParisText” and “FurcupText” = invisible
© Anselm Spoerri

Step 2c – Use AP Elements to create “disjointed” rollover
Open file “layers2”
Attach “Show-Hide Elements” Behavior
– Select “paris” image (can also select AP div that contains image)
– “Behavior” Window: click “+” and select “Show-Hide Elements”
– “Show Hide Elements” Dialog: select “IntroText” and “hide”
– “ParisText” = show and “”FurcupText” = hide
– “Behavior” Window: select event associated with “paris” image and click on pull-down menu to select “(onMouseOver)”
– Attach behavior for “(onMouseOut)” to image “paris”
(can also select AP div that contains image) where now “IntroText” = show and “ParisText” & “FurcupText” = hide
© Anselm Spoerri

Resources: Behaviors - General
– Can not attach a behavior to plain text.
– Easiest way is to add a null link (#) to the text, then attach a behavior to the null link.
– Window > Behaviors
– Press (+) to attach action.
Press (-) to remove selected action.
– Actions for a given event are executed in specified order.
Use (up) and (down) arrow buttons move the selected action.
– Order of execution of actions can be changed only for a particular event, e.g. onLoad or onClick event.
– Different events appear depending on the object selected.
Make sure the correct page element or tag is selected.
– To select a specific tag, use the tag selector at the bottom left of the Document window.
– “Show Events For” specifies the browsers in which the current behavior should work.
© Anselm Spoerri

Resources: Events – Useful Subset onClick
– User clicks element and releases mouse onDblClick
– User double-clicks the specified element onLoad
– Generated when an image or page is loaded onMouseDown
– User presses the mouse button onMouseOver
– Mouse first moves over specified element onMouseUp
– Generated when a pressed mouse button is released
© Anselm Spoerri

Recap – Fireworks: Simple Image Manipulation
Goal
– Create or manipulate image to create Visual Focus & Hierarchy
– Create imagery for Navigation Bar, Rollovers or Image Map
– Create frames for Animated GIF
Create Smaller Image
– Modify > Canvas > Image Size
– Specify Width / Height
– Make sure width & height linked (check “Constrain Proportions” box)
– File > Image Preview > Export
(do not overwrite original)
Create Image of Specific Size
– Select “Crop” tool
– Specify Crop Area by holding mouse down and moving cursor
– Change size of crop area by interacting with its corner handles
– Move crop area by selecting inside crop area
– Double–click or enter Enter
– File > Image Preview > Export
© Anselm Spoerri

Recap – Fireworks: Selection
Goal
– Want to combine part of image with other images to create collage
How?
– Create Selection
– Select object you want select (parts of) or trace
– Select “Selection” or “Lasso” tool
– Perform Selection or Lasso Action
– Edit > Copy
– Edit > Paste (new object is created)
– Control Layer Visibility and Stacking Order in “Layers” Panel
– (De)select EYE icon and select & drag layer to desired stack position
– Control Object Properties
– Select Object and use Properties Inspector
Selection / Lasso Tool
– Rectangular or Rounded, Circle, Ellipse
– Click Tool icon, hold mouse and choose shape of selection
– Square or Circle - hold down shift key while drag mouse
– Lasso, Polygon Lasso
– Lasso: Hold down mouse and draw shape - release of mouse closes shape
– Polygon: Mouse click creates corner - double click closes polygon
© Anselm Spoerri

Recap – Fireworks: Create Text and Images for Animation
Goal: Create Text
– Text for buttons in Navigation Bar
– Text for links or captions in Image Map
– Add text to frame of Animated GIF
How?
– Select “Text” tool
– Move Cursor & Click Mouse where you want text to start
– Text Property Inspector: type face & size, anti-aliasing, color, effects
– Type
(text layer is created – make sure layer towards top of stack)
– Select “Pointer” Tool to move text
– Select “Text” Tool and select (part of) text to change its properties
Create Images for Animated GIF
1. Select “Crop” tool
2. Specify Width & Height
3. Create Cropped Image Area and double–click
4. File > Image Preview > Export as GIF
5. Apply “Edit > Undo” to go back to state before “crop” action and return to step 3.
© Anselm Spoerri

Fireworks - Import Image
(navigate to image you want)
with upper left corner of canvas or location of your choice.
– If you hold & drag mouse, then you can specify size of inserted image.
– Select object
– Specify transparency in Property Inspector
See “Lec6InsertImage.png” file
© Anselm Spoerri

Fireworks - Using Text as a Mask
Create or Select Text Object
Position Text Object so that so that it overlaps object or group of objects to be masked
Edit > Cut Text Object
Select Object(s) to Mask
– If masking multiple objects, they must be grouped
Edit > Paste as Mask or Modify > Mask > Paste as Mask
See “Lec6TextMask.png” file
© Anselm Spoerri