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

• 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

• 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

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

10
Layout ? Visual Hierarchy Navigation
Page Name
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Text or Thumbnails
11
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.
• Dont quote values.
• Use accepted value (DW helps with this).
• Dont forget closing lt /stylegt tag.
• Make sure linked (X)HTML document to the proper
  CSS file(s).
• Watch the spaces and punctuation between
  selectors.
• Want ltspan classXgtltagtlinklt/agtlt/spangt

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
  dont 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 Element of content (ltdivgt always new line)
• Inline Element displayed in current line (ltspangt)
• 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 dont equal
  size of containing block ? somethings 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 elements 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 gt Convert gt AP Divs to Table
• Issue of overlapping AP Elements
• Modify gt Arrange gt Prevent AP Element Overlaps

24
AP Elements Panel

• AP Elements Panel
• Window gt 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 gt Layout Object gt 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 gt Align gt
  Alignment option
• Create Nested AP Elements
• Place insertion point inside existing AP Element
  and choose Insert gt Layout Objects gt 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 until designated 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
• ltdiv idcontainergt
• ltdiv idmainContentgt
• ltdiv idapDiv1gtHellolt/divgt
• lt/divgt
• lt/divgt
• 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/M
  POnline/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

31
Step 1 Tracing Image

• Tracing Image Example
• File gt New HTML and ltblankgt Layout and
  Transitional
• Modify gt Page Properties select sans serif
  typeface
• Modify gt 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 gt 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 itbut 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
  pariswhere 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
• ltdiv idcontainergt
• ltdiv idmainContentgt
• ltdiv idapDiv1gtHellolt/divgt
• lt/divgt
• lt/divgt
• 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 gt 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 gt Convert gt AP Element to Table
• No overlapping AP Elements
• Cannot create table from overlapping AP Elements,
  because table cells cannot overlap
• Modify gt Arrange gt Prevent AP Element Overlaps
• Dreamweaver does not automatically fix existing
  overlapping AP Elements when you turn on Prevent
  AP Element Overlaps
• Modify gt Convert gt Table to AP Elements
• Can't perform conversion in a template document