Lecture 4 – Overview

1. Lecture 4 – Overview • Exercise 2 • Meaning • Web Design Recap • Writing for the Web • Mechanics • Testing & Debugging Web Pages  Check Easy Stuff First • CSS • DIVs and Linear “Natural Flow” • Box Model • AP Elements  more flexible page layouts • Dreamweaver • Step-by-step demo using AP Elements

2. Exercises 2 • Create a draft of "Why be a Librarian in the 21st Century?" in outline form. • Describe your Vision of "Librarian in the 21st Century" (value / skills etc.) • Provide an outline of your relevant Interests and Passions. • Break down your site into categories. Create organization and associated file hierarchy. • Each web page contains primary navigation structure.

3. Exercises 2 (cont.) • Each web page has a clear layout and visual hierarchyand reflecting what have learned so far (margins, typography etc.) • Each page has a brief sentence describing its goal and an outline of ideas to be covered or linked to. • If possible create hyperlinks to other pages that expand an idea. • Create page that contains links to site whose layout / design you would like to emulate. • Create at least one web page that contains a table, where at least three cells contain an image

4. 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

5. User Behavior  Design Implications  Design Specifics User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. • Create Visual Hierarchy & Rhythm • Present Information Clearly & LogicallyUsers can read info more quickly.Facilitates understanding and recall. • Invisible Hand guiding users and creating sense of place

6. User Behavior  Design Implications  Design Specifics User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 2 Create Visual Hierarchy & Guide Eye • Important Things = Visually Prominent(More Important = Larger / Sharp Contrast)Use headlines to guide the eye • Visual ContrastUse sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. • Proximity: related things spatially closeSpatial separation = conceptual separation.Don't mix alignment styles. • Use Grouping & Nesting to Increase Information Density(Short-term Memory = 3-7)Use bounding shapes.

7. User Behavior  Design Implications  Design Specifics User Behavior  Design Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 3 Typography Heuristics • Sans Serif type is easier to read on screen • Type size 10 -14 points • 7 - 10 words per line • Column width proportional to type size • Bold and italic for small blocks of text • Enough contrast between type & background

8. User Behavior  Design Implications  Design Specifics User Behavior  Design Implications User Behavior  Design 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

9. Recap – Web Page Needs to Answer • What can I do here? • Create LayouttoPresent Info Clearly & Logically • Use Grid System to Facilitate Understanding & Recall • Where do I start? • Create Visual HierarchytoGuide Eye • How can I navigate? • Create Primary & Secondary Navigation • Provide Site ID, Page Name

10. Primary Navigation Site ID Secondary Navigation Layout  Visual Hierarchy & Navigation Page Name Intro Text aaaaaaaaaaa bbbbbbbbbbb Intro Text aaaaaaaaaaa bbbbbbbbbbb Text or Thumbnails

11. Secondary Navigation Primary Navigation Site ID Layout  Visual Hierarchy & Navigation Page Name Intro Text Text or Thumbnails

12. Design Strategy  Tools • Create Layout Grid • Create Master DIV with DIVs of varying sizes • DIV can contain a table with cells … • DIV = AP Element • Use Dreamweaver to create layout/grid tables • Use Fireworks to crop images to desired size • Create Visual Hierarchy • More Important = Larger / Sharp Contrast • Use Fireworks to create and edit distinct imagery • Create Navigation Structure • Designate specific areas for Primary / Secondary Navigation • Use CSS to create interactive navigation structure • Use Fireworks to create visual navigations elementsUse Dreamweaver to create interactive navigation

13. Basic Design Principles • Alignment • Don't Mix Alignment Styles – Simplicity and Left-Aligned • Create Sufficient Left Margin • Constrain Total Width of Page • Proximity • Related Things Close Together • Spatial Separation = Conceptual Separation • Repetition & Consistency • Grid Layout, Navigation, Graphics Color Coding, Typeface • Creates Ease of Use • Contrast • Bigger, Bolder, Color, Spatial Distance • Guide the Eye and Create Visual Hierarchy

14. Writing for the Web • Concise, SCANABLE and Objective • By Jacob Nielsen • People scan page • Study: 79% always scanned + only 16 % read word-by-word. • Make pages “scanable” • Start with conclusion • One idea per paragraph • Half the word count (or less) than conventional writing • Highlighted keywords • Meaningful sub-headings (not "clever" ones) • Bulleted lists • Credibility important and increased by: • High-quality graphics • Good writing • Use of outbound hyperlinks

15. Testing & Debugging Web Pages • Before looking for a big problem, check common little problems :) • Work incrementally • Use process of elimination (use comments to make code active / inactive). • Be careful about typos. • In CSS, not sure if the problem is with the property or the selector, use a very simple declaration (color: red).

16. Check Easy Stuff First - General • Refresh browser so that latest file is shown • Upload actual file and refresh browser so that latest file is shown • Upload file in the correct location • Make sure you save file • Upload any related files: CSS, images, SWF etc. • Make sure spelling of URL = spelling of filename. • Test in multiple browsers • Test on different computer than the one used to create the files

17. Check Easy Stuff First – HTML & XHTML • HTML • Make sure you used correct spelling of tags (DW should help with this) • Be careful about nesting and make sure you have closing tags • Use HTML Transitional • XHTML • Make sure all attribute value enclosed in straight, not curly, quotes (DW helps with this) • All elements have opening and closing tags (always put space before /). • XHTML is case-sensitive. • Include # when specifying hexadecimal colors (DW helps with this).

18. Check Easy Stuff First – CSS • Use colon (:) to separate your properties from value (color: red;). • Complete each property-value pair with semicolon (;) • No spaces between number and their units (16px). • Close brackets. • Don’t quote values. • Use accepted value (DW helps with this). • Don’t forget closing < /style> tag. • Make sure linked (X)HTML document to the proper CSS file(s). • Watch the spaces and punctuation between selectors. • Want <span class=“X”><a>link</a></span>

19. Check Easy Stuff First – Testing Your Page • Validate (X)HTML and CSS. • Open in Browser • Formatting correct? • Hyperlinks work & correct? • CSS file referenced properly? • All images appear?If not, check the easy stuff first, especially spelling of filenames and don’t use spaces in filenames and saved as GIF or JPEG. • Upload files to server (and set permissions if needed). • View pages in different browsers. • Still Stuck check for typos and check easy stuff first :)

20. Mechanics – CSS: DIVs and Linear “Natural Flow” • Recap • Block Elementof content (<div> always new line) • Inline Elementdisplayed in current line (<span>) • Parents and Children = Hierarchy of Tags • elements contain other elements; • each element must be properly nested and have closing tags. • Structure Your Pages • Divide logical sections of document into div elements  Linear sequence of divs • Use header elements (h1, h2 …) • Use comments/* comments help */ • Linear “Natural Flow” by default • Elements displayed as (X)HTML flows from top to bottom with line breaks at beginning and end of each block-level element.

21. Mechanics – CSS: Box Model • Box Model = every element is enclosed in Invisible Box • Width and Height can be specified • Padding = space surrounding content inside of box (all four sides can be specified separately) • Border : can specify all four borders separately also specify border-style: type; border-width: n; border-color: color; • Margin = invisible space around border of box (-top, -bottom,-left, -right, auto) • Overflow : elements are not always contained in their boxes; can be: visible; hidden, scroll; auto (scroll appears when needed). • If width, margin, border and padding don’t equal size of containing block something’s got to give :)

22. Mechanics – 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

23. Mechanics – CSS: AP Element = AP Div (cont.) • position: relative • If desired, 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 positioning refers to element’s original position, not the surrounding elements • relative AP element will not show up in AP Panel in DW • Renaming AP Elements • Change ID name in Property Inspector or AP Elements Panel • Create Layout using AP Elements, then convert to Tables • Modify > Convert > AP Divs to Table … • Issue of “overlapping AP Elements” • Modify > Arrange > Prevent AP Element Overlaps

24. AP Elements Panel • AP Elements Panel • Window > AP Elementsin Standard Mode + Layout View • Visibility • open eye = visible; closed eye = hidden; no eye = inherits • Stacking Order • The greater the z-index, the higher up in the stack • Rename ID name • Nesting AP Elements • Prevent overlaps checkbox

25. Create & Manipulate 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 • Manipulate AP Elements • Must select AP Element before you can move, resize, or align it • Resize and move AP Element via its Handles • Align AP Element • Select AP Elements, then Modify > Align > Alignment option • Create Nested AP Elements • Place insertion point inside existing AP Element and choose Insert > Layout Objects > AP Div • Drag Draw AP Element button from Insert panel and drop inside AP Element • Hold Control key and drag AP Element to target AP Element in AP Elements Panel

26. AP Div Properties • CSS-P Element = ID name (can change here and CSS code gets updated) • Position - L and T (left and top) • Relative to top left corner of page or parent AP Element (if nested) • Size - W and H specify the width and height of AP Element • Overridden if the content of the AP Element exceeds the specified size • Possible Dimensions – px, pt, in, mm, cm, % • Abbreviations must follow the value without a space • Z-Index - determines stacking order of the AP Element • Higher-numbered AP Elements appear above lower-numbered AP Elements • Visibility - visible, hidden, inherit • Use a scripting language, such as JavaScript, to control the visibility • Overflow– what to do if contents of AP Element exceed its set size • Visible (increases AP Element size) Hidden (clips content) Scroll (adds scroll bars) Auto (scroll bars only if excess).

27. Mechanics – CSS: Floating Elements • Making Elements Float so that they float in a sea of text • float: left / right  element is on left / right  text flows on right / left. • Controlling Where Elements Float • Control on which sides elements can float next to for an elementand which sides they cannot by using the clear property. • clear: left / right / both / none to keep elements from floating on left / right / both sides and none lets elements float on either side. • clear property stops affected element from displaying untildesignated side is free. • Add clear property to elements whose sides you want to be clear of floating elements.

28. 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

29. AP Elements and Elastic Layout (cont.) • #container { /* elastic properties */} • #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 */; }

30. Download files and Initialize • Create folder “mplec4” • Download Files and Images • http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture4/stepbystep/ • Select ZIP file = “stepbystep.zip” • File Download Dialog: select “Open” • Extract into “mplec4” and make sure to extract all files (Being able to use WinZip is prerequisite for this course) • 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 • ResourcesBehaviors, Events, Conversion of AP Elements to Table

31. 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

32. 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

33. 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 “Insert” panel, 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

34. Step 2c – Use AP Elements to create “disjointed” rollover • Open file “layers2” • Attach “Show-Hide Elements” Behavior to Images • Select “paris” 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”where now “IntroText” = show and “ParisText” & “FurcupText” = hide

35. Step 3 – AP Elements and Elastic Layout • #container { /* elastic properties */} • #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 */; }

36. 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.

37. 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

38. Resources: Conversion – AP Element & Tables • Modify > Convert > AP Element to Table • No overlapping AP Elements • Cannot create table from overlapping AP Elements, because table cells cannot overlap • Modify > Arrange > Prevent AP Element Overlaps • Dreamweaver does not automatically fix existing overlapping AP Elements when you turn on “Prevent AP Element Overlaps” • Modify > Convert > Table to AP Elements • Can't perform conversion in a template document