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
–
Web Page / CSS Templates
– Advantages and Challenges of using Templates
– Fixed or Liquid Three Columns Layout
– Guided Tour of Web Page Template
© 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 hierarchy
and 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
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient 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 think
Get rid of question marks
Each item = clear purpose
1 Use Grid System
• Maintain Consistency
Helps 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 & Logically
Users can read info more quickly.
Facilitates understanding and recall.
• Invisible Hand guiding users and creating
sense of place
Stick to what works
• Repetition & Consistency
Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
© Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient 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 think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid 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 Contrast
Use sharp changes in size (headline), light intensity
(bold), color, texture, motion to create contrast.
• Proximity: related things spatially close
Spatial separation = conceptual separation.
Don't mix alignment styles.
• Use Grouping & Nesting to Increase
Information Density
(Short-term Memory = 3-7)
Use bounding shapes.
© Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient 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 think
Get rid of question marks
Each item = clear purpose
Stick to what works
• Repetition & Consistency
Grid 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
© Anselm Spoerri
User Behavior  Design Implications  Design Specifics
Scan pages - don't read them
• Design for Scanning
1
Use Grid System
• Make page work at a glance
• Create Visual Hierarchy
Choose first “reasonable item”
• Make obvious what you can do
Muddle through
2
Create Visual Hierarchy
and Guide Eye
• Don't make users think
Stick to what works
• Repetition & Consistency
3
Typography Heuristics
© 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 Navigation
Secondary Navigation
Page Name
Intro Text
aaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbb
bbbbbbbbbbb
Text or Thumbnails
© 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
•
In CSS, not sure if the problem is with the property or the selector,
use a very simple declaration (color: red).
typos.
© 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
•
Test in multiple browsers
•
Test on different computer than the one used to create the files
spelling of URL = spelling of filename.
© 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 Elements
in 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 & 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
© 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 element
and 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 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 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” image
and 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
© Anselm Spoerri
Web Design Templates
Lots of HTML+CSS templates available for free.
Open relevant HTML and CSS files in Code Editor and customize.
First work out design (page structure and CSS), then add content.
Skeletal Designs
Solve common problem: How to create the basic layout of site.
Commonly has header / banner area, content area, sidebar,
navigation structure, and footer area.
Complete Designs
Skeletal layout plus a pre-fab look and feel -- colors, graphics,
font choices, borders, accent graphics, starter banners, list styles.
Plus: if you can find one close to the look you're going for, you'll
have much less work to do.
Minus: can be hard to find one that feels "just right," and it can
be harder to customize some aspects of these sites than
working up from a lower level.
© Anselm Spoerri
Three Columns – Fixed Widths
Example
<div class="container">
<div class="header" ></div>
<div class="sidebar1">
header
s
i
d
e
b
a
r
1
footer
content
<!-- float = left; -->
s
i
d
e
b
a
r
2
<!-- width = 180px; -->
</div>
<div class="content">
<!-- float = left; -->
<!-- width = 600px; -->
</div>
<div class="sidebar2">
<!-- float = left; -->
<!-- width = 180px; -->
</div>
<div class="footer" >
<!-- clear = both; -->
</div>
</div>
© Anselm Spoerri
Three Columns – Liquid Widths
Example
<div class="container">
<div class="header" ></div>
<div class="sidebar1">
header
s
i
d
e
b
a
r
1
footer
content
<!-- float = left; -->
s
i
d
e
b
a
r
2
<!-- width = 20%; -->
</div>
<div class="content">
<!-- float = left; -->
<!-- width = 60%; -->
</div>
<div class="sidebar2">
<!-- float = left; -->
<!-- width = 20%; -->
</div>
<div class="footer" >
<!-- clear = both; -->
</div>
</div>
© Anselm Spoerri
Knight Digital Media Center – Free Web Design Example
Using Free Web Designs
Assigned Reading
Sample HTML+CSS Template
link
link | example
Layout
– <div class="content"> contains Table Structure
– <div id="innercontent"> floated left and inside of cell
Navigation with Image Rollovers
– Inside of two vertically adjacent cells that have been merged
– Up and Down images need to have same width and height
– Down image = “you are here” indicator
– Uses JavaScript code created by Dreamweaver
Map
– How to Embed Google Map
http://maps.google.com/help/maps/getmaps/plot-one.html
© Anselm Spoerri