Lecture 4 – Overview

© Anselm Spoerri

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

© Anselm Spoerri

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.

© Anselm Spoerri

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

© 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

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

• Design for Scanning Make text short - cut words • Make page work at a glance Sufficient left margin, 640x480 = main message• Create Visual Hierarchy

• Make obvious what you can do • Make obvious what is clickable

• Don't make users think Get rid of question marks

Each item = clear purpose

• Repetition & Consistency Grid Layout, Easy Navigation,

Graphics, Color Coding, Typography

User Behavior Design ImplicationsUser Behavior Design Implications Design Specifics

Scan pages - don't read them

Look for anything = Search Interest Decide quickly Choose first “reasonable item”

Muddle through Don't figure out how things work Resist forming models

Stick to what works

© Anselm Spoerri


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.











Stick to what works

© Anselm Spoerri


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











Stick to what works

© Anselm Spoerri


1 Use Grid System

2 Create Visual Hierarchy and Guide Eye

3 Typography Heuristics

• Design for Scanning

• Make page work at a glance • Create Visual Hierarchy

• Make obvious what you can do

• Don't make users think

• Repetition & Consistency



Choose first “reasonable item”

Muddle through

Stick to what works

© Anselm Spoerri

Recap – Web Page Needs to Answer

What can I do here? – Create Layout to Present Info Clearly & Logically

– Use Grid System to Facilitate Understanding & Recall

Where do I start?– Create Visual Hierarchy to Guide Eye

How can I navigate?

– Create Primary & Secondary Navigation– Provide Site ID, Page Name

© Anselm Spoerri

Layout Visual Hierarchy & Navigation

Site ID Primary NavigationS

eco

nd

ary

N

avig

ati

on

Page Name

Intro Textaaaaaaaaaaa

bbbbbbbbbbb

Text or Thumbnails

Intro Textaaaaaaaaaaabbbbbbbbbbb

© Anselm Spoerri

Layout Visual Hierarchy & Navigation

Site ID Primary Navigation

Secondary Navigation

Page Name

Intro Text

Text or Thumbnails

© Anselm Spoerri

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 elements

Use Dreamweaver to create interactive navigation

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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>

© Anselm Spoerri

Check Easy Stuff First – Testing Your Page

1. Validate (X)HTML and CSS.

2. Open in Browser

3. Formatting correct?

4. Hyperlinks work & correct?

5. CSS file referenced properly?

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

7. Upload files to server (and set permissions if needed).

8. View pages in different browsers.

9. Still Stuck check for typos and check easy stuff first :)

© Anselm Spoerri

Mechanics – CSS: DIVs and Linear “Natural Flow”

Recap

• Block Element of content (<div> always new line)

• Inline Element displayed 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.

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

© Anselm Spoerri

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

Create & Manipulate AP Elements

© Anselm Spoerri

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

© Anselm Spoerri

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 until designated side is free.

• Add clear property to elements whose sides you want to be clear of floating elements.

© Anselm Spoerri

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

© Anselm Spoerri

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 */; }

© Anselm Spoerri

Download files and Initialize

Create folder “mplec4”

Download Files and Imageshttp://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 images example

Launch Dreamweaver• Panels open: Properties, Insert, AP Elements• Show Rulers and Grid

Resources Behaviors, Events, Conversion of AP Elements to Table

© Anselm Spoerri

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

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 “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” = 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 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

© Anselm Spoerri

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 */; }

© Anselm Spoerri

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.

© 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

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

Documents

Lecture 4 – Overview