Lecture 3 - PowerPoint PPT Presentation

About This Presentation
Title:

Lecture 3

Description:

Josef Mueller-Brockmann, 'Grid Systems in graphic design' Anselm Spoerri. Brief History of Graphic Design Education. Pre-Modernism. Focus on Image Associations ... – PowerPoint PPT presentation

Number of Views:116
Avg rating:3.0/5.0
Slides: 70
Provided by: AnselmS
Category:

less

Transcript and Presenter's Notes

Title: 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)
Write a Comment
User Comments (0)
About PowerShow.com