Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© Anselm Spoerri
Lecture 8 – Overview
Interactivity Recap
– Simple and Disjointed Rollovers and Image Map
Navigation Structures
– Rollovers
Create Navigation using Rollovers – Demo
CSS Navigation using Lists
Exercise 2 Demo
– Responsive Layout
– Responsive Navigation
– Animated Navigation
– Simple Navigation using List and CSS
– Image Map with Attached Behavior to Show / Hide Elements
© Anselm Spoerri
Recap – 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
– AP Elements
– Control Visibility
 example
© 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
Demo – Create Navigation using Rollovers
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
Download Files and Images
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec8/Steps
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 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
CSS – Navigation Bar using Lists and CSS
Navigation = Lists of Links
example
<ul>
<li><a href="home.html">Home</a></li>
<li class="here"><a href=“features.html">Features</a></li>
</ul>
CSS property - display: block; and
Hyperlink States:
float: left;
and
clear: both;
a:link | a:visited | a:focus | a:hover | a:active
© Anselm Spoerri
CSS – Navigation Bar using Lists and CSS
(cont.)
Remove Bullets, Eliminate Padding and Margins
#navi ul {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden; }
Display Link as Block (area of link clickable) and Constrain Width
#navi a {
display: block;
width: 100px; }
Horizontal Navigation
Use floated <li> method for uniform look
#navi li { float: left; }
You are Here Indicator
#navi li.here a { text & background properties }
and want CSS rules for different states of hyperlink
© Anselm Spoerri
CSS – Navigation Bar and States of Link Element
Selecting Link Element based on their State
 Navigation Structure
Since a link can be in more than one state at a time,
it is important to define rules in following order:
1.
a:link
2.
a:visited
3.
a:focus
4.
a:hover
5.
a:active
 LVFHA
a:link, a:visited { color: #FFF; }
a:focus, a:hover, a:active { color: #000; }
#navi a:link, #navi a:visited { color: #FFF; }
#navi a:focus, #navi a:hover, #navi a:active { color: #000; }
© Anselm Spoerri
Demo - Exercise 2 Step–by–Step
Builds on what you created in Exercise 1 and you don't need to create new textual content.
1 Create Responsive Layout
– Background image and screenshots not visible in mobile layout
2 Create Responsive Navigation Structure
– Create #animatedNav and #simpleNav divs inside nav element
– Create responsive CSS rules to make visible / invisible and control height
3 Create Animated Navigation using jQuery for Summary
– Understand and Customize code
– Create Images for UP, Over While UP, DOWN and Over While DOWN
4 Create Simple Navigation for Mobile Pages
– Understand and Customize Navigation using List and CSS
– Create “You are Here” Indicator for page
– File > Save As to create primary pages and customize “you are here”
5 Create AP Element that contains Image of Detail
Create Image Map and Attach Show / Hide Behavior
6 Create Structure and CSS for Question / Answer Pairs
– Have Question / Answer surrounded by rounded border
© Anselm Spoerri
Exercise 2 Demo – Responsive Layout
1 Responsive Layout
– Modify > Media Queries …
– Select Checkbox = Force devices to report actual width
– Add query: Mobile and Max Width = 800px
– Create new file: mobile.css
– <link href="CSS/mobile.css" rel="stylesheet" type="text/css"
media="only screen and (max-width:800px)">
– Create relevant CSS rules in mobile.css
– Copy & paste section and header CSS rules to mobile.css
– section: width: 90%, left, right: 5%, no float and no transparency
– header: width: 480px; color: #000;
– background-image: none;
– Hide screenshots
– Create .controlVisibility { visibility: hidden; height: 0px; }
– Reverse rule in mystyles: .controlVisibility { visibility: visible; height: auto; }
– Keep only what is different for mobile layout
– File > Save All
© Anselm Spoerri
Exercise 2 Demo – Responsive Navigation
2 Responsive Navigation
– Create #animatedNav and #simpleNav divs inside nav element
– Create CSS rules to control visibility
mystyles.css
#animatedNav {visibility: visible; height: auto;}
#simpleNav {visibility: hidden; height: 0px; color: #FFF;}
mobile.css
#animatedNav {visibility: hidden; height: 0px;}
#animatedNav ul li a {height: 0px;}
#simpleNav {visibility: visible; height: auto;}
© Anselm Spoerri
Exercise 2 Demo – Animated Navigation
3 Animated Navigation using jQuery
for Summary
– Copy & Paste JavaScript code
– Copy Code in AnimatedNav_JavaScript_toAdd.txt and Paste after
internal CSS in summary.html
– Remove Spry Menu Bar JavaScript before </body>
– Navigation Images stored in images folder
– Images = 320 x 200, Customize, save as “dw_one”, “dw_oneOver” etc.
– Link to External CSS file
– Download External CSS file and link to it: animated_nav.css
– Review & Understand: li#oneNav etc
– Replace Spry Menu Bar with Animated Navigtion Code
list: <li id="oneNav"><a href=“summary.html">Summary</a></li> etc.
– Internal CSS file
– li {list-style-type:inherit;}
– header and section elements: change top property
– nav element: change left property
– mobile.css: change header and nav properties as needed
© Anselm Spoerri
Exercise 2 Demo – Simple Navigation
4 Simple Navigation using List & CSS
– Create List with Navigation Links in #simpleNav on all pages
unordered list:
<li"><a href=“summary.html">Summary</a></li>
etc.
– Link to External CSS file on all pages
– Download External CSS file and link to it: simple_nav.css
– Review and Customize to Create YOUR Look & Feel
– Create “You Are Here” Indicator
– Apply .here to appropriate li item
– mobile.css:
– Add propperty to #animatedNav: overflow: hidden;
© Anselm Spoerri
Exercise 2 Demo – Image Map and Show/Hide AP Element
5 Image Map and Show/Hide AP Element
– Create AP Element that contains Image of Detail
– visibility: hidden;
– Create Image Map for screenshot contains detail
– Select screenshot and Use Polygon Tool in Properties Panel
– Attach “Show / Hide Element” Behavior to Hotsopt
– Select hotspot in image map
– Behaviors panel:
– onMouseOver: Show AP Element with id=“detail”
– onMouseOut: Hide AP Element with id=“detail”
© Anselm Spoerri
Exercise 2 Demo – Style Question / Answer Pairs
6 Style Question / Answer Pairs
– Create Needed Structure
– Create CSS for Question / Answer Pairs
© Anselm Spoerri