Lecture 3

1
Lecture 3 Overview

• Meaning
• Graphic Design
• User Behavior ? Design Implications ? Design
  Specifics
• Colors Magazine
• Mechanics
• CSS
• Cascade
• External Internal Style Sheets
• Selectors
• Predesigned CSS Layouts in DW
• Dreamweaver Demo
• Exercise 1 StepbyStep

2
User Behavior
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
3
Design Implications
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 on a page
• 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

4
Meaning

• Graphic Design
• Education History
• Practical Foundation
• Swiss Design School Grid System
• Sources
• Katherine McCoy, Education in an Adolescent
  Profession
• Josef Mueller-Brockmann, Grid Systems in graphic
  design

5
Brief History of Graphic Design Education

• Pre-Modernism
• Focus on Image Associations
• Lack of Formalized Method early luminaries
  self-taught
• Premium on Creativity BIG IDEA
• Learn from Samples and Examples
• Functional Modernism
• "Swiss School" of Graphic Design
• Based on Bauhaus
• Focus on Formal Purity rather than Content
• Post-Modernism
• Influenced by French Literary Theory
• Variety of Cultural Contexts and Personal
  Experiences
• Possibility of Multiple Interpretations
• Question Rigidity, Minimalism of Graphic
  Modernism
• Subjective, Personal Layers of Meaning
  Complexity

6
Communication Model - Sender
7
Communication Model - Transmitter
8
Communication Model - Receiver
9
Communication Model
10
Future of Graphic Design

• Digital Communications Design
• Different Design Strategy than Perfectionist
  Graphic Design
• Less Control, More Conceptual, More Interaction
• Users Co-Creators
• Requires Deeper Understanding of the
  Communications Process
• Combines Art, Science and Language
• Needed Expertise
• Multimedia Design Visual Art, Music, Film
• Communications Theory
• Cognitive Perceptual Psychology
• Social Sciences Cultural Anthropology
• Computer Science

11
Practical Graphic Design

• Graphic Design Organic Process
• Cultural, Contextual, Personal
• Client Designer Interaction
• Good Design is Stolen
• Emulate what speaks to you
• Need Practical Foundation
• Functional Swiss Design School
• Grid Systems

12
Swiss Design School

• Based on Bauhaus
• Form follows Function
• Minimalism, Universality, Rationality,
  Abstraction and Structure
• Focus on Formal Purity rather than Content
• Grid System
• Divide 2-D plane or 3-D space into Smaller Fields
• Intermediate Space so that Captions and Pictures
  Dont Touch

13
Grid System 8 Fields Example
14
Grid System 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and 1960s
can be seen as representing the classic phase of
modernism, the heirs to Bauhaus graphic design
and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic
graphic method that shared the Bauhaus values of
minimalism, universality, rationality,
abstraction and structural expressionism. This
fresh and highly professional graphic design was
first transmitted beyond Switzerland to the rest
of Europe and the U.S. through Swiss design
magazines and a few books, notably Graphis and
the "Swiss" bibles by Muller-Brockmann, Gertsner,
Hoffmann and Ruder. Then, in the late 1960s,
several professional offices began to practice
these ideas to solve the needs of large corporate
clients in Holland, Great Britain, Canada and the
U.S.
Caption Text
The method, symbolized by the typeface Helvetica,
was enthusiastically adopted by several corporate
and institutional design groups, including
Container Corporation, Ciba-Geigy, Herman Miller,
IBM and Massachusetts Institute of Technology.
Montreal's Expo '67 was a feast of Helvetica and
systematic environmental signage, as well as
advanced architecture. Eventually, American
corporate culture embraced "Swiss" school graphic
design as the ideal corporate style. Although
"Swiss" graphic design was first adopted in U.S.
by professionals in their design practices, soon
several leading U.S. graphic design schools
followed suit, going directly to the source.
15
Grid System 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and 1960s
can be seen as representing the classic phase of
modernism, the heirs to Bauhaus graphic design
and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic
graphic method that shared the Bauhaus values of
minimalism, universality, rationality,
abstraction and structural expressionism. This
fresh and highly professional graphic design was
first transmitted beyond Switzerland to the rest
of Europe and the U.S. through Swiss design
magazines and a few books, notably Graphis and
the "Swiss" bibles by Muller-Brockmann, Gertsner,
Hoffmann and Ruder. Then, in the late 1960s,
several professional offices began to practice
these ideas to solve the needs of large corporate
clients in Holland, Great Britain, Canada and the
U.S.
Caption Text
The method, symbolized by the typeface Helvetica,
was enthusiastically adopted by several corporate
and institutional design groups, including
Container Corporation, Ciba-Geigy, Herman Miller,
IBM and Massachusetts Institute of Technology.
Montreal's Expo '67 was a feast of Helvetica and
systematic environmental signage, as well as
advanced architecture. Eventually, American
corporate culture embraced "Swiss" school graphic
design as the ideal corporate style. Although
"Swiss" graphic design was first adopted in U.S.
by professionals in their design practices, soon
several leading U.S. graphic design schools
followed suit, going directly to the source.
16
Grid System - Motivation

• Solve Visual Problems with Greater Speed
  Confidence
• Maintain Consistency
• Title Location
• Navigation Location
• Image Rhythm
• Create Visual Hierarchy Rhythm
• Invisible Guiding Hand
• Information Presented Clearly Logically
• Read More Quickly
• Understood Better
• Better Recall

17
Grid Construction

• Need to Know How Much Text and How Many Images
  to Be Placed
• Each Work Raises Many Questions
• How Many Columns?
• White Space and Margins Have Visual Function?
• Annotations, Footnotes, Captions?
• Large and Small Images? How Many?
• Each Work Requires its Own Specific Grid
• Create Small Sketch
• Number of Columns Depends on Type Size
• Wider Columns Need Larger Type Size than Narrow
  Columns

18
Grid System 8 Fields
19
Grid System 8 Fields
20
8 Fields Grid - Image Size Options
21
8 Fields Grid - Image Size Options
22
8 Fields Grid - Image Size Options
23
Grid System 20 Fields
24
Grid System 20 Fields
25
20 Fields Grid - Example 1
Swiss Design School
Although "Swiss" graphic design was first adopted
in U.S. by professionals in their design
practices, soon several leading U.S. graphic
design schools followed suit, going directly to
the source. A number of Swiss teachers and their
graduates, from Armin Hoffman's Basel school in
particular, put down roots in schools including
Philadelphia College of Art, University of
Cincinnati and Yale. (The Swiss influence seems
to have been particularly strong in U.S. and
Canadian schools Europeans have often expressed
a certain mystification at this North American
reverence for the Basel method.) Manfred Maier's
book, Basic Principles of Design, on the Basel
foundation program, was finally available in the
U.S. in 1977, spreading this method farther.
Under the influence of this highly structured
educational method and its emphasis on the
prolonged study of abstract design and
typographic form, these American schools began to
carefully structure their curricula. Based on
objectivity and rationalism, this educational
system produced a codified method that was easy
to communicate to students, giving them a
foundation for a visual design process and
composition ..
This classic modernist graphic aesthetic is
distinctly different from the predominantly
semantic imagery of the "big idea". It stresses
the grammar of design and is rather neutral to
content. Regrettably, this language of structural
geometry has often resulted in a sameness of form
that is more the look of function than truly
communicative function-- an emphasis on formal
purity rather than content. As this aesthetic
spread, however, a number of Europeans,
particularly in conjunction with the Ulm school
in West Germany, began to apply semiotics to
visual communications problems. Related
explorations in the science of signs were taking
place in structuralist philosophy, linguistics,
literature and film theory. Other efforts to
develop scientific design processes through
communication theory and computer design method
began in Great Britain and at the Illinois
Institute of Technology during this period.
Although the Swiss never embraced these
communication theories, some of the sounder
graphic design schools outside Switzerland have
gradually begun to incorporate theory into their
curricula
26
20 Fields Grid - Example 2
Swiss Design School
Poster Designs by Josef Muller-Brockmann Caption
describing the poster designs. When they were
created. Who the client was and their
effectiveness.
Although "Swiss" graphic design was first adopted
in U.S. by professionals in their design
practices, soon several leading U.S. graphic
design schools followed suit, going directly to
the source. A number of Swiss teachers and their
graduates, from Armin Hoffman's Basel school in
particular, put down roots in schools including
Philadelphia College of Art, University of
Cincinnati and Yale.
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian schools
Europeans have often expressed a certain
mystification at this North American reverence
for the Basel method.) Manfred Maier's book,
Basic Principles of Design, on the Basel
foundation program, was finally available in the
U.S. in 1977, spreading this method farther.
Under the influence of this highly structured
educational method and its emphasis on the
prolonged study of abstract design and
typographic form, these American schools began to
carefully structure their curricula. Based on
objectivity and rationalism, this educational
system produced a codified method that was easy
to communicate to students, giving them a
foundation for a
visual design process and composition that went
far beyond the superficial emulation of their
heroes. This classic modernist graphic aesthetic
is distinctly different from the predominantly
semantic imagery of the "big idea". It stresses
the grammar of design and is rather neutral to
content.
27
20 Fields Grid - Example 2a
Swiss Design School
Poster Designs by Josef Muller-Brockmann Caption
describing the poster designs. When they were
created. Who the client was and their
effectiveness.
Although "Swiss" graphic design was first adopted
in U.S. by professionals in their design
practices, soon several leading U.S. graphic
design schools followed suit, going directly to
the source. A number of Swiss teachers and their
graduates, from Armin Hoffman's Basel school in
particular, put down roots in schools including
Philadelphia College of Art, University of
Cincinnati and Yale.
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian schools
Europeans have often expressed a certain
mystification at this North American reverence
for the Basel method.) Manfred Maier's book,
Basic Principles of Design, on the Basel
foundation program, was finally available in the
U.S. in 1977, spreading this method farther.
Under the influence of this highly structured
educational method and its emphasis on the
prolonged study of abstract design and
typographic form, these American schools began to
carefully structure their curricula. Based on
objectivity and rationalism, this educational
system produced a codified method that was easy
to communicate to students, giving them a
foundation for a
visual design process and composition that went
far beyond the superficial emulation of their
heroes. This classic modernist graphic aesthetic
is distinctly different from the predominantly
semantic imagery of the "big idea". It stresses
the grammar of design and is rather neutral to
content.
28
Grid System Heuristics

• One Column
• Little Freedom for Pictures in Small, Medium and
  Large Size
• Two Columns
• Text can go in First Column
• Illustrations, Images in the Second Column
• Text and Images can be Placed in Same Column
• Three Columns
• Variety of Ways of Placing Text and Graphics
• Four Columns
• If a lot of Text or Images Need to be Placed
• Statistics with Copious Figures and Graphs
• Can be Subdivided into 8 or 16 columns

29
Typography

• Good Typography depends on Visual Contrast
• between one font and another
• between text blocks and the surrounding empty
  space.

? Read by recognizing overall shape of words
Avoid all-uppercase headlines ? monotonous
rectangles ? few distinctive shapes to catch
reader's eye
? Legibility depends on the tops of words
Choice of uppercase or lowercase letters can have
dramatic effect on legibility.
Use Downstyle (capitalize only the first letter,
and any proper nouns) for your headlines and
subheads
30
Typography (cont.)

• Readability - how easy it is to read a lot of
  text
• Serif Typeface Better if a Lot of Text
• Type Size 10 14pt
• Line Length
• Leading or Space between Lines
• Legibility - how easy it is to recognize short
  bursts of text
• Sans Serif Typeface is Easier to Read on Screen
• 7 - 10 Words Per Line
• Overlong or Overshort Lines Tire
• Column Width Proportional to Type Size
• Bold and italic used for small blocks of text
• If you make everything bold, then nothing stands
  out
• If you cram every page with dense text, users see
  a wall of gray
• Enough Contrast between Type and Background

31
Typography (cont.)

• Text Graphic
• Only Way to Control Appearance
• Type Displayed in Relation to Browser's Default
  Font Size
• No way to know browser defaults
• Standard Default Times New Roman
• Arial (PC) and Geneva (Mac) Always Installed
• Verdana is Available on Both (newer Macs)
• Rules
• "Paragraph" "Normal" in browser's default font
  size
• Heading size in relation to default browser
  typesize
• Special text displayed smaller or larger than
  browser typesize
• Specify Font in CSS/HTML Generally Overrides
  Default

32
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

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

34
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

35
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

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

• 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 used for small blocks of text
• Enough contrast between type and background

36
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
37
Colors Magazine
38
Color Magazine
39
Colors Magazine 1
40
Colors Magazine 2
41
Colors Magazine 3
42
Colors Magazine 4
43
Colors Magazine 5
44
Colors Magazine 6
45
Colors Magazine 7
46
Colors Magazine 8
47
Colors Magazine 9
48
Colors Magazine 10
49
Mechanics CSS Cascade

• Cascade Inheritance, Specificity and Location.
• Inheritance
• Html Hierarchical Structure of the content
• Elements are contained / appear with other
  elements (h1 resides inside a table).
• Many properties, but not all, inherited by
  descendants of elements
• h1 is blue and has red border blue is inherited
  but not red border by elements residing inside h1
  element.
• Inherited rules are considered the most general
  of all and are overruled by any other rule.
• Specificity
• The more specific the selector, the stronger the
  rule
• h1 with class X rule will overrule h1 rule.
• The id attribute is considered the most specific.

50
Mechanics CSS Cascade

• Cascade Inheritance, Specificity and Location.
• Location
• Rules that appear later have more weight.
• You can declare a rule to be more important than
  others by adding !important at the end of the
  rule.
• Summary
• In the absence of a rule, many styles are
  inherited from parent element to child. With two
  competing rules, the more specific the rule, the
  more weight or importance it has regardless of
  its location. With two rules of equal
  specificity, the one that appears later wins.
• Some CSS properties allow you to specify the URL
  of another file if it is a relative URL, then it
  needs to relative to the external style sheet.

51
Mechanics CSS External Internal Style Sheets

• Linking to External Style Sheet
• Dreamweaver places ltlink /gt code inside ltheadgt
  tag.
• Linking to several external style sheets the
  later ones take precedence over earlier ones
  (location principle).
• Creating Internal Style Sheet
• ltstyle typetext/cssgt lt/stylegt
• which can be exported in Dreamweaver.
• Internal style sheet overrides external style
  sheets if and only if style tag comes after link
  tag.
• Applying styles locally is not recommended.
• To view other designers CSS code view source
  code of Web page and look at internal style sheet
  and load URLs for external style sheets.

52
Mechanics CSS Selectors

• Selector determines which elements the formatting
  will be applied to.
• Declarations define the formatting.
• Constructing Complex Selectors that apply
  formatting based on
• type or name of element (e.g. tag)
• h1 color red
• context element is found
• h1 em color red h1.news color red
• divgaudi p any p element that is contained in
  the div whose id is equal to gaudi
• class (.name) or id (name) of an element
• em.news color red divgaudi color red
• pseudo-class
• alink color red only link tag a is
  supported in all current browsers
• certain attributes and values of element
• divattribute(value) color red

53
Mechanics CSS Selectors (cont.)

• Selecting Part of Element
• tagfirst-line
• tagfirst-letter
• Selecting Link Element based on their State ?
  Navigation Structure
• Since a link can be in more than one state at a
  time, it is important to define rules in
  following order
• alink
• avisited
• afocus
• ahover
• aactive
• ? LVFHA
• Specifying Groups of Elements h1, h2 color
  red

54
Mechanics CSS Selectors Summary

• Combining Selectors
• 1. Define Context
• 2. Spell out Elements Name
• 3. Specify Class or Id of desired element
• 4. Specify Pseudo-class or Pseudo-element
• 5. Specify Attributes and Values
• div.works p emfirst-letter color red

55
Mechanics Predesigned CSS Layouts in DW

• Select File gt New.
• Predesigned CSS layouts available via in the
  Layout column
• Fixed Column width is specified in pixels. The
  column does not resize based on the size of the
  browser or the site visitors text settings.
• Elastic (not available in CS5)Column width is
  specified in a unit of measurement (ems) relative
  to the size of the text. The design adapts if the
  site visitor changes text settings, but does not
  change based on the size of the browser window.
• Liquid Column width is specified as a percentage
  of the site visitors browser width. The design
  adapts if the site visitor makes the browser
  wider or narrower, but does not change based on
  the site visitors text settings.
• Hybrid (not available in CS5) Columns are a
  combination of any of the previous three options.
  For example, in the two-column hybrid, the right
  sidebar layout has a liquid main column that
  scales to the size of the browser, and an elastic
  column on the right that scales to the size of
  the site visitors text settings.

56
Mechanics Predesigned CSS Layouts in DW (cont.)

• Need to select location for the layouts CSS
• Add To Head Adds CSS for the layout to the head
  of the page youre creating.
• Create New File Adds CSS for the layout to a new
  external CSS file and attaches the new style
  sheet to the page youre creating.
• Link To Existing File Lets you specify an
  existing CSS file that already contains the CSS
  rules needed for the layout. This option is
  particularly useful when you want to use the same
  CSS layout (the CSS rules for which are contained
  in a single file) across multiple documents.

57
Dreamweaver - Exercise 1 Stepbystep

• Set up Local / Remote Site
• Select Predefined CSS Layout
• Good Housekeeping
• Initialize Dreamweaver Files Names lowercase
  Title Web Pages
• 4 Create Simple Navigation Structure
• Customize CSS of predefined design and Add
  Classes
• Specify Navigation Categories
• Create CSS code for different states of
  hyperlinks (LVFHA)
• Validate Markup Check Browser Compatibility
• Export CSS into Linked External CSS file.
• Establish Navigation Hyperlinks Create Files
  for different categories
• Create You are Here Indicator for each page
• 6 Add Format Text
• 6 Capture, Edit Insert Screenshots
• Use Fireworks to edit screenshots
• Insert Image in Dreamweaver file
• 7 Upload Files to Remote Site

58
Dreamweaver Set up Local / Remote Site

• Local Folders
• Create folder mpcourse (if does not exist)
• Open mpcourse folder
• Create folders ex1 ex5 (if do not exist)
• Launch Dreamweaver
• Creating Folders in Dreamweaver (local or
  remote)
• Site gt Site View
• Select Folder (into which you want to insert a
  folder)
• File gt New Folder
• public_html folder
• Contains all files that can be viewed by Internet
  Browser

59
Step 1 Set up Local / Remote Site in CS4

• Site gt New Site
• Select Advanced Tab
• Select Local Info Category
• Local Info gt Site Name MPcourse for this demo
• Local Info gt Local Root Folder MPcourse in
  My Documents
• Select "Remote Info" Category in New Site Dialog
• Select "FTP" in pull-down Access menu
• FTP Dialog
• FTP Host eden.rutgers.edu
• Host Directory public_html
• Login yourusername
• Password yourpassword
• Make sure to check the Use Secure FTP box
• Connect to the Server
• Select "Connect to Remote" icon or "Site gt
  Connect"
• Transfer files to server
• Manually
• File drop onto file OR drop into folder
  that contains file you want to up/download
• Folders drop into folder that contains folder
  you want to up/download

60
Step 1 Set up Local / Remote Site in CS5

• Site gt New Site
• Select Site
• Site gt Site Name MPcourse for this demo
• Site gt Local Site Folder MPcourse in My
  Documents
• Select Servers" Category in New Site Dialog
• Click on (Add new server)
• Specify Server Name
• Select SFTP" in pull-down Connect using menu
• SFTP Host eden.rutgers.edu
• Login yourusername
• Password yourpassword
• Root Directory public_html
• Test and if successful Save
• Connect to Server
• Select "Connect to Remote" icon
• Transfer files to server
• Manually
• File drop onto file OR drop into
  folder that contains file you want to up/download
• Folders drop into folder that contains folder
  you want to up/download

61
Step 2 Select Predefined CSS Layout

• File gt New
• Page Type HTML
• Page Layout 1 column elastic, centered, header,
  footerin CS5Page Layout 1 column liquid,
  centered, header, footer
• Will customize CSS code, such as header and
  remove footer etc.
• Will use CSS Style Panel and Split Code View to
  explore modify CSS.
• DocType XHTML 1.0 Transitional
• Layout CSS Add to Head(will later export CSS
  into linked external css file)
• Click Create

62
Step 3 Good Housekeeping

• Initialize Dreamweaver
• View gt select Design
• View gt Rulers gt select Show and Pixels
• View gt Grid gt select Show Grid, Snap to Grid
  and specify Grid Settings
• Windows gt select Insert, Properties and CSS
  Styles
• Filename lowercase and no spaces
• Title Page
• Modify gt Page Properties
• Page font sans serif type, such as Verdana,
  Ariel, Helvetica
• Size 100 or 10 14 px (usually)
• Text color black
• Background color White
• Margin fields set all to zero (if you dont want
  any margins)

63
Step 4a Customize CSS

• Customize CSS
• Remove footer div
• Remove background for body and header (using CSS
  Style Panel)
• Remove CSS rules for header and footer not
  needed
• Change format text in header
• Change padding in header
• Create Rule for h1 and h2 in mainContent
• Create CSS Classes
• .naviUP color 000 text-decoration
  underline
• .naviDown color F00 text-decoration
  underline
• Create Simple Navigation Structure
• Place Cursor inside header into which you want
  to enter text
• Type Summary Audience Task Navigation
  Functionality
• Apply classnaviUP to each navigation category
  name
• (you need to do this before linking word to
  hyperlink !)

64
Step 4b Create CSS for Navigation Hyperlinks

• Create CSS code for Navigation (LVFHA)
• Since a link can be in more than one state at a
  time, it is important to define rules in
  following order
• .naviUP alink color 000
• .naviUP avisited color 000
• .naviUP afocus color F00
• .naviUP ahover color 000 background-color
  FFFF80
• .naviUP aactive color F00
• .naviDOWN alink color F00
• .naviDOWN avisited color F00
• .naviDOWN afocus color F00
• .naviDOWN ahover color F00
  background-color FFFF80
• .naviDOWN aactive color F00
• Validate Markup Check Browser Compatibility
• Export CSS into Linked External CSS file
• Select all rules in CSS Style Panel
• Right click on selected rules and select Move CSS
  Rules
• New Style Sheet mystyles.css

65
Step 4c Create Navigation Structure Other
Pages

• Create Navigation Hyperlinks
• Place Cursor inside header into which you want
  to enter text
• Type Summary Audience Task Navigation
  Functionality
• Select category text (e.g. Summary)
• In Link slot in Property Inspector, type file
  name (same as category text and all lower case)
  that you want to link to and make sure to add
  .html at the end of file name.
• Target field leave blank (page loads in same
  browser window)
• Repeat for all the categories for the Navigation
  Structure
• Create Files for All the Categories
• Use File gt Save As and name appropriately (same
  name as entered in hyperlink slot)
• Create You are Here Indicator
• Change class of category text from naviUP to
  naviDOWN
• Make sure that not word, but whole span is
  selected !

66
Step 5 Create Format Text

• Create Text
• Place Cursor inside mainContent and enter text
  and Type
• Press Enter to create new paragraph
• Use SHIFT Enter to insert line break
• Format Text using Property Inspector
• Select Text
• Use HTML in Property Inspector for simple bold
  etc
• Use CSS in Property Inspector to create new
  formatting rule

67
Step 6a Capture, Edit Screenshots

• Capture Screenshot
• Whole Screen Press "Prt Sc Sys Rq" in top row
  of keyboard
• Selected Application Press "Alt" "Prt Sc Sys
  Rq" keys
• Launch Fireworks
• Start gt Programs gt Macromedia gt Fireworks
• Edit Screenshot
• Open new file in in Fireworks File gt New File
  (and set image area to 1000 x 1000 pixels)
• Edit gt Paste" from Clipboard into Fireworks
• Select Cropping Tool in Fireworks
• Select area of interest
• Double-click to make cropping final
• Save cropped area as a separate file using
  File gt Export and in dialog select Images
  Only and save in ex1 folder

68
Step 6b Insert Screenshots

• Insert Screenshot
• Select Location in Dreamweaver file to insert
  screenshot
• Insert gt Image
• or click Image Icon in Common option in
  Insert window
• Select image file (in ex1 folder) to insert
• Specify alternate text (shown if image can not be
  displayed)
• Reduce Size of Image in Dreamweaver
• Select image
• Select image corner handle, while holding down
  SHIFT key, and drag to desired size
• Image dimensions will be displayed in bold in
  Property Inspectorto indicate displayed size not
  equal actual size

69
Step 7 Upload Files to Remote Site

• Make Site Files visible
• Window gt Files (if window is not visible)
• Click Expand/Collapse icon
• to see both Local and Remote files
• Connect to Remote Server
• Select "Connect to remote host " icon
• Transfer Files to Remote Site
• Manually Drag Drop ex1 folder to Remote
  Server(remember to drop ex1 folder into
  mpcourse folderand not into ex1 folder on
  remote server)