Lecture 4

1
Lecture 4 Overview

• Exercise 2
• Meaning
• Web Design Recap and Handout
• Writing for the Web
• Redesign Examples
• Mechanics
• Questions Typography Web Graphics Recap
• Dreamweaver
• Recap
• Table Games

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
• Suggestions
• Create folder project_draft or ? different
  folder than folder for Final Project
• Submit exercise URL with http//scils.rutgers.ed
  u/abcde etc.

4
Recap Web Guiding Principles

• Diversity of Users Rapid Change
• Diverse users, diverse computers, diverse skills,
  diverse
• Rapid evolution of technology and expectations
• Short attention span
• Common Sense
• No right way to design
• 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 Requirements for Web Pages
? Layout Presents Info Clearly
LogicallyFacilitates Understanding Recall

• What can I do here?

? Visual Hierarchy Guides Eye to Important Things

• Where do I start?

• What site is this?

? Site ID logo, image, text

• What page am I on?

? Page name

• Major sections of site?

? Primary Navigation Top Row or Left Column
Simple text hyperlinks, icons, rollovers,
image-maps, pull-downs

• Options at this level?

? Secondary Navigation Below Top Line or Left
Column
? Expanding / Nesting Hierarchies Static or
Dynamic Outlines

• Where I am? Go higher or home?

? Color Coding, BreadcrumbsPrimary / Secondary
Navigation
10
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

11
Layout ? Visual Hierarchy Navigation
Page Name
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Intro Text aaaaaaaaaaa bbbbbbbbbbb
Text or Thumbnails
12
Layout ? Visual Hierarchy Navigation
Page Name
Intro Text
Text or Thumbnails
13
Design Strategy ? Tools

• Create Layout Grid
• Create Master Table with Cells of varying sizes
• Cell can be a table with cells
• 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 Fireworks to create visual navigations
  elements
• Use Dreamweaver to create interactive navigation

14
Basic Design Principles

• Alignment
• Don't Mix Alignment Styles - Simplicity
• 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

15
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

16
Web Site Trunk Test
17
Redesign 1
Source Steve Krug Dont Make Me Think
18
Redesign 2
19
Redesign 3
20
Which Web Graphics Format to Choose?
21
Recap Web Graphics

• Bitmapped vs. Vector-based Graphics
• Web Graphics File Formats
• GIF
• Cross Platform Lossless Compression
• Indexed Colors
• Transparency
• Create Animations
• Best for Solid Color, Simple Illustrations Small
  Photos
• JPEG
• Cross Platform LOSSY Compression
• No transparency
• No Animation
• Best for Photos with Subtle Changes
• Save Image for Web
• RGB Mode
• 72 ppi
• Indexed Color Mode
• Reduced Color Palette (e.g. Adaptive Palette)
• Interlaced

22
Which Web Graphics Format to Choose?
Solid black / white
Many colors
Few colors
Few solid colors
23
Please Answer these Questions (answers provided
at end of lecture)

• 1. What is the best way to create columns on a
  web page?
• Draw guidelines across the page.
• Create tables
• Type the text in short lines, hitting the
  Spacebar between columns.
• Use graphics to contain the text on either side.
• 2. The difference between a Paragraph and a Line
  Break is
• A Paragraph contains a complete thought a Line
  Break doesnt.
• You must have more than one line in a Paragraph
  a Line Break can have only one line.
• A Paragraph cannot change color.
• A paragraph has space following it a Line Break
  have no space following it.
• 3. How can you tell where a link is going before
  you click it?
• You cant.
• Ask your mother.
• Position the pointer over the link and read the
  status bar at the bottom of the browser window.
• Type link? in the location box, then hit
  Return or Enter.

24
Questions (cont.)

• 4. Which one is not a legal file name, and why
  not
• designers.htm
• tall_tales.html
• honey bunny.gif
• gargoyles.jpg
• 5. Why must you title your web page
• The title is what appears in the title bar in the
  browser.
• The title is what spears in a visitors bookmark
  or favorite list.
• The title is used by many search engines to add
  the site to their address.
• All of above.
• 6. If you make graphics, what reason could there
  be for saving the original, high-resolution files
  that wont be used in the web site?
• You might need them for print media.
• You might need to go back and make changes or
  corrections.
• You might need to make more of the same, such as
  buttons.
• All of the above.

25
Questions (cont.)

• 7. If you added a new photo to an existing page
  on your site, how many files would you have to
  upload?
• One graphic file.
• One web page file.
• One graphic file and one web page.
• 8. If you remove 3 pages from your site, what
  else do you have to do to the site?
• Change your address.
• Remove the links from remaining pages and upload
  those changes.
• 9. Which of the following is not an advantage of
  a GIF file?
• Unlimited color
• Lossless compression
• Transparency
• Interlacing
• 10. Which of the following is not an advantage of
  a JPEG file?
• Millions of colors
• Lossless compression
• Variety of compression levels
• Maintains subtle color changes

26
Questions (cont.)

• Never True or Sometimes?
• Choose any typeface on your hard disk and set
  headlines (not graphic ones) with it.
• Let the text stretch the entire width of the web
  page.
• SET LOTS OF TEXT IN ALL CAPS SO PEOPLE WILL BE
  SURE TO SEE IT.
• Put red text on an orange background because the
  subtle yet dazzling color combination looks
  good.
• Make some text very small, but set it in all caps
  to compensate for the small size.

27
Dreamweaver Create Visual Hierarchy

• You can use
• 1 Standard Table
• Standard Mode
• Regular Columns and Rows
• 2 Layout Tables and Layout Cells
• Layout View
• Irregular Columns and Rows
• to create Layout and Visual Hierarchy

28
Dreamweaver Standard Mode

• View gt Table Mode gt select Standard Mode
• Certain changes must be completed in Standard
  mode
• Format Edit Table and its Cells
• Format Table and Cells
• Cut, Copy or Paste Table Cell
• Specify Width Pixels or of Browser Width
• Accordion Effect if specified as of Browser
  Width
• If Table Width unspecified, then column widths
  unconstrained!
• Layers (future lecture)

29
Dreamweaver Layout Mode
Layout Table
30
Format Table in Standard Mode

• W and H fields
• Specify width height of table as pixels or of
  browser window
• If Width unspecified, then column widths are
  unconstrained!
• Usually don't need to set table height
• CellPad
• Amount of space between content of a cell and
  cell boundary
• CellSpace
• Amount of space between each layout cell
• Align
• Default Left
• Border
• Specify in pixels thickness of border

31
Format Table Layout Table in Layout Mode

• 1 Clear Row Heights
• 2 Make Widths Consistent
• Resets widths of each cell to match the content
  within that cell.
• If width set to 400 pixels, then add content with
  width of 450, top bar of table in Layout view
  will display 400" (450). Clicking "Make Widths
  Consistent" removes the 400-pixel setting and
  keeps 450.
• Remove All Spacers
• Remove spacer images inserted when autostretch
  is selected (see next slide)
• 4 Remove Nesting e.g. tables within tables
• Layout cells will become part of parent table

32
Format Table Layout Cell in Layout Mode

• Fixed Width
• Specify width in pixels, where cell width is
  constrained by table width
• Autostretch
• Resizes width automatically to fill browser
  window
• Displayed as wavy line in page display
• With Autostretch, transparent spacer images are
  inserted in fixed width columns to control the
  layout.
• Without spacer images, columns will change size
  or even visually disappear completely if they do
  not contain content.
• Only one column in a layout can be Autostretch.

page display
33
Format Table Layout Cell in Layout Mode
(cont.)

• Bg
• Set Background Color of layout cell
• Horz and Vert Alignment
• Specify width in pixels, where cell width is
  constrained by table width
• No Wrap
• If checked, then Text is not allowed to wrap

34
Table Management

• Tag Bar (bottom border of selected file)
• Use it to select specific layout elements
• Clicking on lttablegt selects table
• Clicking on lttrgt selects row
• Clicking on lttdgt selects cell
• Expanded Mode
• Temporarily adds cell padding and spacing to
  tables and increases the tables borders to make
  editing easier.
• Select View gt Table Mode gt Expanded Tables Mode
• or
• In Layout category of the Insert bar, click
  Expanded Tables button

35
Editing Table in Standard Mode

• Cut / Copy / Paste preserving the cells
  formatting
• Single table cell
• Multiple cells at once
• Contents of the Clipboard must be compatible with
  structure of table or selection in the table in
  which the cells will be pasted.
• Insert Row / Column
• Modify gt Table gt Insert Row or Insert Column
  or Insert Row or Column
• (latter gives you most control)
• Merge Cells
• Modify gt Table gt Merge Cells
• Remove cell content but leave cells intact
• Select one or more cells. (Make sure the
  selection does not consist entirely of complete
  rows or columns.)
• Choose Edit gt Clear or press Delete.
• Delete rows or columns that contain merged cells
  
• Select the row or column to be deleted.
• Modify gt Table gt Delete Row / Column

36
Formatting Precedence Table Rules

• Cell Format overwrites
• Column / Row Format overwrites
• Table Format
• BUT
• Table Width / Height constrains
• Column or Row or Cell Width / Height
• If Table Width unspecified, then column widths
  unconstrained!

37
Dreamweaver Table Troubleshooting

• Make sure Table Width in Layout and Standard Mode
  Agree
• Layout Mode Table Width 500 pixels
• Standard Mode Table Width
• Dreamweaver can suddenly change widths
  specified in pixels to
• Good practice to double check (especially when
  layout behaves strange)

38
Text Misc

• Format Text
• Select Text
• Properties Window changes to Format
• Style, Font, Size, Color etc.
• More Control of Appearance of Text
• Remember to use Sans Serif Typeface
• Preferably set Page Font using Modify gt Page
  Properties
• Useful Features
• Visual Grid
• View gt Grid gt select Show Grid and
  Snap-to-grid
• View gt Grid gt Edit Grid (to edit grid)
• Tracing Image
• Modify gt Page Properties Tracing Image category

39
Dreamweaver Table Games Demo Standard Mode

• See Video Capture File
• New File
• Select Standard Mode
• View gt Table Mode gt select Standard Mode
• or Select Layout in Insert bar and click
  Standard icon
• Insert Table
• Insert gt Table in dialog box specify number of
  columns and rows
• Format Columns / Rows / Cells
• Select columns / rows / cells using dragging
• Edit entries in Property Inspector for selected
  items
• Table CellPad, CellSpace, Align, Border (which
  will apply for all cells)
• Merge Cells
• Select cells to be merged
• Modify gt Table gt Merge Cells
• Insert Row / Column
• Modify gt Table gt Insert Row or Column

40
Dreamweaver Table Games Demo Layout Mode

• See Video Capture File
• Create New File
• Select Layout Mode
• View gt Table Mode gt select Layout Mode
• or Select Layout in Insert window and click
  Layout icon
• Create Layout Table with Layout Cells
• Create Layout Table and inside two columns with
  two Layout Cells each
• Format Layout Table and Cells
• Select Layout Table or Cells
• Edit entries in Property Inspector for selected
  items
• Group Layout Cells using Layout Table
• Select Layout Table icon
• Trace outline of right column of layout cells
• Specify CellPad 10 and Bg color light gray
  for just created Layout Table

41
Download files and Initialize

• Create folder mplec4 in My Documents folder
• 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 My Documents/mplec4 and make sure
  to extract all files
• (Being able to use WinZip is prerequisite for
  this course)

42
Cell Management Cut, Copy, Paste Cells

• You can cut, copy, or paste a single table cell
  or multiple cells at once, preserving the cells
  formatting.
• You can paste cells at insertion point or in
  place of a selection in an existing table.
• Pasting Multiple Table Cells
• Clipboard content must be compatible with
  structure of table or the selection in table in
  which the cells will be pasted.
• ? example
• Open files CopyPasteSource and
  CopyPasteDestination
• Select CopyPasteDestination
• 2 Layout Mode create similar cell structure in
  interior Layout Table as in Source
• Select CopyPasteSource
• 3 Standard Mode copy cells with images and
  paste in interior Layout Table in Destination
• Delete Layout Table or Cell
• Select Layout Table or Cell
• Press Backspace or Delete Key or select
  Edit gt Clear

43
Tracing Image

• Tracing Image Example
• Open new file in Dreamweaver
• 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
• Layout Mode
• Create Layout Table (covering the tracing image)
• Create four Layout Cells (along earth contour)
• Enter text in each cell
• Experiment with type size and bolding to create
  visual flow
• Step-by-Step files tracingimage1, tracingimage2,
  tracingimage3

44
Answers to Questions

• 1. What is the best way to create columns on a
  web page?
• Draw guidelines across the page.
• Create tables
• Type the text in short lines, hitting the
  Spacebar between columns.
• Use graphics to contain the text on either side.
• 2. The difference between a Paragraph and a Line
  Break is
• A Paragraph contains a complete thought a Line
  Break doesnt.
• You must have more than one line in a Paragraph
  a Line Break can have only one line.
• A Paragraph cannot change color.
• A paragraph has space following it a Line Break
  have no space following it.
• 3. How can you tell where a link is going before
  you click it?
• You cant.
• Ask your mother.
• Position the pointer over the link and read the
  status bar at the bottom of the browser window.
• Type link? in the location box, then hit
  Return or Enter.

45
Questions (cont.)

• 4. Which one is not a legal file name, and why
  not
• designers.htm
• tall_tales.html
• honey bunny.gif
• gargoyles.jpg
• 5. Why must you title your web page
• The title is what appears in the title bar in the
  browser.
• The title is what spears in a visitors bookmark
  or favorite list.
• The title is used by many search engines to add
  the site to their address.
• All of above.
• 6. If you make graphics, what reason could there
  be for saving the original, high-resolution files
  that wont be used in the web site?
• You might need them for print media.
• You might need to go back and make changes or
  corrections.
• You might need to make more of the same, such as
  buttons.
• All of the above.

46
Questions (cont.)

• 7. If you added a new photo to an existing page
  on your site, how many files would you have to
  upload?
• One graphic file.
• One web page file.
• One graphic file and one web page.
• 8. If you remove 3 pages from your site, what
  else do you have to do to the site?
• Change your address.
• Remove the links from remaining pages and upload
  those changes.
• 9. Which of the following is not an advantage of
  a GIF file?
• Unlimited color
• Lossless compression
• Transparency
• Interlacing
• 10. Which of the following is not an advantage of
  a JPEG file?
• Millions of colors
• Lossless compression
• Variety of compression levels
• Maintains subtle color changes

47
Questions (cont.)

• Never True or Sometimes?
• Choose any typeface on your hard disk and set
  headlines (not graphic ones) with it.
• Let the text stretch the entire width of the web
  page.
• SET LOTS OF TEXT IN ALL CAPS SO PEOPLE WILL BE
  SURE TO SEE IT.
• Put red text on an orange background because the
  subtle yet dazzling color combination looks
  good.
• Make some text very small, but set it in all caps
  to compensate for the small size.

Never
Never
Never
Never
Never