380 likes | 471 Views
Information Visualization Course. Web Design. Prof. Anselm Spoerri aspoerri@rutgers.edu. Lecture 7 – Overview. Meaning Recap: Web Design Matrix Presentation Pyramid Mechanics AP Element Recap AP Element and Elastic Layout Interaction Design: Rollovers Dreamweaver Step-by-Step Demos
E N D
Information Visualization Course Web Design Prof. Anselm Spoerri aspoerri@rutgers.edu
Lecture 7– Overview • Meaning • Recap: Web Design Matrix • Presentation Pyramid • Mechanics • 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
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
User Behavior Design Implications Design Specifics User BehaviorDesign Implications User BehaviorDesign Implications Design Specifics Scan pages - don't read them • Design for Scanning • Make page work at a glance • Create Visual Hierarchy Choose first “reasonable item” • Make obvious what you can do Muddle through • Don't make users think • Stick to what works • Repetition & Consistency 1 Use Grid System 2 Create Visual Hierarchy and Guide Eye 3 Typography Heuristics
Summary Two to Three Paragraphs More detailed information Presentation Pyramid: Summary Paragraph Page
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
AP Elements and Elastic Layout • Incorporate AP Elements into 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
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 */; }
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
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
“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
“Behavior Management” – Show Events for … Only “onMouseOver” event visible? Or Most of Behaviors grayed out? Select thisto have moreEVENT and BEHAVIOR options
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
Dreamweaver – Example – Step by Step • Layout & Interactions • 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
Step 0 – Download files and Initialize • Download Files and Images • Launch Dreamweaver • Initialize • File > New • View > select “Design” • View > Rulers > select “Show” and “Pixels” • Windows > select “Properties” and “Behaviors”
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 • ID = “Left”; Width = 100; Height = 50; L = 300; T = 50; • ID = “Right”; Width = 100; Height = 50; L = 500; T = 50; • ID = “Center”; Width = 300; Height = 300; L = 300; T = 150; • ID = “ImageMap”; Width = 200; Height = 200; L = 50; T = 200;
Step 1b – Create Tables Inside AP Element • Open file “layout1a” to continue • Create Table inside of AP Element • Place Cursor inside “Center” AP Element • Insert > Table 3 Columns x 3 Rows • Select all Nine Cells • Property Inspector : Width = Height = 100
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
Step 1d – Insert Images and Assign Names • Insert & Name Images • 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” • Why white placeholder images? • Will be used for “disjointed rollover” e.g. when we move mouse across “dance” imagethe placeholders will be exchanged with dance images
1. Select “dance” 2. Browse to & select “dance_text” (a star symbol will be placed toimage being swapped) Always select “Preload Images” If want initial images restoredon MouseOut, select check box For now do not select it. 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”)
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
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
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
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
Corners Middle Center State 1 State 2 State 3 State 4 Coordinating Animated GIFs Example
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” imagebut “Restore Images on MouseOut” selected • Swapped on mouse click = “onClick” • Final file “layout4”
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 imagesexample • Launch Dreamweaver • Panels open: Properties, Insert, AP Elements • Show Rulers and Grid
Step 1 – Tracing Image • Tracing Image Example • 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 elementsL = 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
Step 2a – Create AP Elements with Images • 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
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” = visibleand drag “IntroText” to top of stack • Make “ParisText” and “FurcupText” = invisible
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” imageand 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
Resources: Behaviors - General • How to Attach Behavior to Text • 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. • Behaviors Window • 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.
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
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
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
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 • Select “Crop” tool • Specify Width & Height • Create Cropped Image Area and double–click • File > Image Preview > Export as GIF • Apply “Edit > Undo” to go back to state before “crop” actionand return to step 3.
Fireworks - Import Image • File > Import … (navigate to image you want) • Align Insertion Pointer and Clickwith upper left corner of canvas or location of your choice. • If you hold & drag mouse, then you can specify size of inserted image. • Specify Transparency • Select object • Specify transparency in Property Inspector See “Lec6InsertImage.png” file
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