Lecture 3 overview
Download
1 / 80

Lecture 3 - PowerPoint PPT Presentation


  • 397 Views
  • Updated On :

Lecture 3 – Overview. Meaning Graphic Design User Behavior  Design Implications  Design Specifics Colors Magazine Mechanics Color & Image Formats Dreamweaver Demo Exercise 1 Step–by–step. User Behavior. Scan pages - don't read them. Look for anything = Search Interest

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 3 ' - Sharon_Dale


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Lecture 3 overview l.jpg
Lecture 3 – Overview

  • Meaning

    • Graphic Design

    • User Behavior  Design Implications  Design Specifics

    • Colors Magazine

  • Mechanics

    • Color & Image Formats

    • Dreamweaver Demo

      • Exercise 1 Step–by–step


User behavior l.jpg
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


Design implications l.jpg
Design Implications

Scan pages - don't read them

  • Design for ScanningMake text short - cut words

  • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose

  • Stick to what works

  • Repetition & ConsistencyGrid Layout, Easy Navigation, Graphics,

  • Color Coding, Typography


Meaning l.jpg
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”


Brief history of graphic design education l.jpg
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






Future of graphic design l.jpg
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


Practical graphic design l.jpg
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


Swiss design school l.jpg
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 Don’t Touch



Grid system 8 fields example14 l.jpg
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.


Grid system 8 fields example15 l.jpg
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.


Grid system motivation l.jpg
Grid System - Motivation

  • Solve Visual Problems with Greater Speed & Confidence

  • Maintain Consistency

    • Title Location

    • Annotations Location

    • Image Rhythm

  • Create Visual Hierarchy & Rhythm

  • Invisible Guiding Hand

  • Information Presented Clearly & Logically

    • Read More Quickly

    • Understood Better

    • Better Recall


Grid construction l.jpg
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














20 fields grid example 1 l.jpg
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 …


20 fields grid example 2 l.jpg
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.


20 fields grid example 2a l.jpg
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.


Grid system heuristics l.jpg
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


Typography l.jpg
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 word, and any proper nouns)for your headlines and subheads


Typography cont l.jpg
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 burstsof 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 anditalic 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


Typography cont36 l.jpg
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 HTML: Generally Overrides Default


User behavior design implications design specifics l.jpg
User Behavior  Design Implications  Design Specifics

User Behavior

User Behavior  Design Implications

User Behavior  Design Implications  Design Specifics

Scan pages - don't read them

  • Design for ScanningMake text short - cut words

  • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose

  • Stick to what works

  • Repetition & ConsistencyGrid Layout, Easy Navigation,

  • Graphics,Color Coding, Typography

  • 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


User behavior design implications design specifics38 l.jpg
User Behavior  Design Implications  Design Specifics

User Behavior

User Behavior  Design Implications

User Behavior  Design Implications  Design Specifics

Scan pages - don't read them

  • Design for ScanningMake text short - cut words

  • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose

  • Stick to what works

  • Repetition & ConsistencyGrid 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 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.


User behavior design implications design specifics39 l.jpg
User Behavior  Design Implications  Design Specifics

User Behavior

User Behavior  Design Implications

User Behavior  Design Implications  Design Specifics

Scan pages - don't read them

  • Design for ScanningMake text short - cut words

  • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose

  • Stick to what works

  • Repetition & ConsistencyGrid 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


User behavior design implications design specifics40 l.jpg
User Behavior  Design Implications  Design Specifics

User Behavior

User Behavior  Design Implications

User Behavior  Design Implications  Design Specifics

Scan pages - don't read them

  • Design for ScanningMake text short - cut words

  • Make page work at a glanceSufficient 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 thinkGet rid of question marksEach item = clear purpose

  • Stick to what works

  • Repetition & ConsistencyGrid Layout, Easy Navigation,

  • Graphics,Color Coding, Typography

  • 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


Requirements for web pages l.jpg
Requirements for Web Pages

Web Page needs to easily answer

Web Navigation needs to easily answer

  • What can I do here?

 Layout Presents Info Clearly & LogicallyFacilitates Understanding & Recall

  • Where do I start?

 Visual Hierarchy Guides Eye to Important Things

  • 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

















Mechanics l.jpg
Mechanics

  • Color & Image Formats

  • Dreamweaver

    • Exercise 1 Step–by–step


Color l.jpg
Color

  • Large areas = Low saturation = Subtle color

    • Background / minor elements = Subtle pastel colors

  • Small areas = High saturation = Bold color

    • Maximum emphasis = Bold, saturated primary colors


Color cont l.jpg
Color (cont.)

Same rules apply to colored text. Small areas use high saturation colors.

Large background areas are colored with low saturation colors.


Color cont60 l.jpg
Color (cont.)

  • RGB Color used by Monitor

    • Direct Light, Not Reflected

  • Indexed Color

    • Limited Selection of Colors: up to 256 colors

    • To Reduce File Size

    • Color not in the Palette is Approximated and “Dithered”

  • Creating Web-Safe Colors

    • All combinations of 0%, 20%, 40%, 60%, 80%, 100% for Red, Green and Blue

    • 6to3 = 216 colors

    • Affects Illustrations, Drawings more than Photographs

    • Photoshop has Web-safe Palette


Web graphics l.jpg
Web Graphics

  • Bitmapped or Raster Graphics

    • Paint and Photo Programs

  • Object or Vector-based Graphics

    • Draw and Illustration Programs

    • Use Mathematical Representation for Shapes

    • Used to Create Original Artwork

  • Artwork Converted into Bitmap using Fireworks

  • Anti-aliasing (smoothing)

    • Increases file size


Web graphics file formats l.jpg
Web Graphics File Formats

  • GIF

    • Cross Platform & Lossless Compression

    • Indexed Colors: few GIFs need all colors, reduce it manually

    • Transparency (so no white box around graphic)

    • Interlacing & Progressive Download

    • Create Animations

    • Best for

      • Images with Large Areas of Solid Color, Simple Illustrations

      • Small Photos or thumbnails

  • JPEG

    • Cross Platform & LOSSY Compression

    • Progressive JPEG

    • No transparency

    • No Animation

    • Best for

      • Photos: Millions of Colors and Subtle Changes


Save image for web l.jpg
Save Image for Web

  • RGB Mode

  • 72 ppi

  • Indexed Color Mode

  • Reduced Color Palette

    • Adaptive Palette

  • Interlaced


Dreamweaver exercise 1 step by step l.jpg
Dreamweaver - Exercise 1 Step–by–step

  • 1 Set up Local / Remote Site

  • 2 Good Housekeeping

    • Initialize Dreamweaver

    • Files Names = lowercase and Title Web Pages

  • 3 Create Visual Hierarchy

    • Use Layout Tables & Cells to break page into clearly defined areas

  • 4 Create Simple Navigation Structure

    • Specify Navigation Categories

    • Establish Navigation Hyperlinks

    • Create Files for different navigation categories

    • Create “You are Here” Indicator for each page

  • 5 Create & Format Text

  • 6 Capture, Edit & Insert Screenshots

    • Use Fireworks to edit screenshots

    • Insert Image in Dreamwaver file

  • 7 Upload Files to Remote Site


Dreamweaver set up local remote site l.jpg
Dreamweaver – Set up Local / Remote Site

Host Directory

Local Root Folder


Dreamweaver set up local remote site cont l.jpg
Dreamweaver – Set up Local / Remote Site(cont.)

  • Open “Windows Explorer”

    Start > Programs > Accessories > Windows Explorer

    • Create folder “mplec3” in “My Documents” folder

    • Open “mplec3” folder

      • Create folder “exercise1”

  • Launch Dreamweaver

    • Start > Programs > Macromedia > Dreamweaver

  • Creating Folders (local or remote)

    • Site > Site View

    • Select Folder (into which you want to insert a folder) = “mplec3” local folder

    • File > New Folder = “exercise1”

  • public_html folder

    • Contains all files that can be viewed by Internet Browser


Step 1 set up local remote site l.jpg
Step 1 – Set up Local / Remote Site

  • Site > New Site

  • Select “Advanced” Tab

  • Select “Local Info” Category

    • Local Info > Site Name = “MPLec3” for this demo

    • Local Info > Local Root Folder = “MPLec3” 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 > 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


Step 2a good housekeeping l.jpg
Step 2a – Good Housekeeping

  • Initialize Dreamweaver

    • File > New … Category = “Basic Page” and Basic Page = “HTML”

    • View > select “Design”

    • View > Rulers > select “Show” and “Pixels”

    • View > Grid > select “Show Grid”, “Snap to Grid” and specify “Grid Settings”

    • Windows > select “Insert”, “Properties” and “Behaviors”

  • Filename = lowercase and no spaces

  • Title Page


Step 2b good housekeeping l.jpg
Step 2b – Good Housekeeping

  • Set Page Properties

    • Modify > Page Properties

      • Page font = sans serif type, such as Verdana, Ariel, Helvetica

      • Size = 10 – 14 (usually)

      • Text color = black

      • Background color = White

      • Margin fields: set all to zero if you don’t want any margins


Step 3a create layout table in cs3 l.jpg
Step 3a – Create Layout Table – in CS3

  • Layout Mode

    • View > Table Mode > Layout Mode

      Or

    • Alt + F6

  • Create Layout Table

    • Select green “Layout Table” icon; draw layout table in top left corner

    • Specify Width & Height

      • Select tab of “layout table” object

      • “Properties Window” changes to “Layout table”

      • Select “Fixed” in Properties Window and enter Width = 700 and Height = 1000


Step 3a create layout table studio 8 l.jpg
Step 3a – Create Layout Table – Studio 8

  • Layout Mode

    • Select “Layout” in Pull Down menu of rectangular Insert windowand then click “Layout” button (does not appear in CS3 ! )

      Or

    • View > Table Mode > Layout Mode or Alt + F6

  • Create Layout Table

    • Select green “Layout Table” icon; draw layout table in top left corner

    • Specify Width & Height

      • Select tab of “layout table” object

      • “Properties Window” changes to “Layout table”

      • Select “Fixed” in Properties Window and enter Width = 700 and Height = 1000

UndockedProperties Panel


Step 3b create layout cells l.jpg
Step 3b – Create Layout Cells

  • Create Layout Cell

    • Select blue “Layout Cell” icon and draw layout cell close to in top left corner (for Navigation Bar)

    • Specify Width & Height

      • Select bounding box of “layout cell” object

      • “Properties Window” changes to “Layout Cell”

      • Select “Fixed” in Properties Window and enter Width = 500 and Height = 25

  • Create Layout Cell (forText & Image)

    • Draw cell for text & image below cell for Navigation Bar with Width = 500 and Height = 800

      Could also have created separate layout cells for text and images

       More Work + More Control (more about this in future classes)


Step 3c add format text l.jpg
Step 3c – Add & Format Text

  • Select “Navigation” Cell (at the top of the page)

  • Create Simple Navigation Structure

    • Place Cursor inside cell into which you want to enter text

    • Type “Summary | Audience | Task | Navigation | Functionality”

  • Format Text and Create Text Style

    • Select what you have typed

    • Create Text Style in the Property Inspector by making these selections:

      • Format = “Paragraph”,

      • Font = “Verdana, Arial …”

      • Size = “12”

      • Color = “Black” (#000000)

      • Style = “Rename” and name it “Navigation”


Step 4a create simple navigation structure l.jpg
Step 4a – Create Simple Navigation Structure

  • Create Hyperlinks for Categories

    • Select a category text (e.g. “Summary”) in the Navigation cell

    • In “Link” slot, 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. [Dreamweaver MX (2004): add “.htm”]

      or click “Browse for File” icon if file exists

    • Target field = leave blank (which causes page to load in same browser window)

      Repeat for all the categories for the Navigation Structure


Step 4b create simple navigation structure l.jpg
Step 4b – Create Simple Navigation Structure

  • Create Files for All the Categories

    • Use File > Save As and name appropriately (same name as entered in hyperlink slot)

  • Create “You are Here” Indicator

    • Select file for a specific category

    • Select text for this category in Navigation Bar

    • In “Properties” Window, select “Color” icon and change color to “red”

    • Select “Bold” icon to show text in bold typeface

    • Notice: the Style name has changed and we could rename it

    • Optional: Remove hyperlink for selected category

      Also title your page


Step 5 create format text l.jpg
Step 5 – Create & Format Text

  • Create Text

    • Place Cursor inside cell into which you want to enter text and Type

  • Format Text using Property Inspector

    • Select Text “Properties” Window changes to “Format”

    • Make Selections

      • Format (usually “Paragraph”)

      • Font (has to be a sans serif font such as Arial or Verdana)

      • Size (usually 10 – 14 … but can be larger)

      • Color

      • Bold / Italics

      • Alignment (usually “left”)

    • If you want, you Create Style based on the selections using “Rename”


Step 5 create format text cont l.jpg
Step 5 – Create & Format Text (cont.)

  • Format Text using Text Pulldown Menu

  • Format Text using “Text” option in rectangular Insert window

    • Select “Text” in Pull Down menu of rectangular Insert window


Step 6a capture edit screenshots l.jpg
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 > Programs > Macromedia > Fireworks

  • Edit Screenshot

    • Open new file in in Fireworks “File > New File” (and set image area to 2000 x 2000 pixels)

    • “Edit > 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 > Export” and in dialog select “Images Only” and save in “exercise1” folder


Step 6b insert screenshots l.jpg
Step 6b – Insert Screenshots

  • Insert Screenshot

    • Select Layout Cell in Dreamweaver file to insert screenshot

    • “Insert > Image”

      or click “Image Icon” in “Common” option in Insert window

    • Select image file (in “exercise1” 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


Step 7 upload files to remote site l.jpg
Step 7 – Upload Files to Remote Site

  • Make Site Files visible

    • Window > 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” “exercise1” folder to Remote Server(remember to drop “exercise1” folder into “mpcourse” folderand not into “exercise1” folder on remote server)


ad