Garrettmedia | Mission Main | Mark's Schedule | ART34 | GDES 45 | GDES 46 | GDES 70 | GDES 73 | GDES 74 | GDES 75 | GDES 81 | Links

GDES 46 Main Page
Links
Get a copy of the syllabus. Log in to Angel for grades, etc. Go To Javascript Notes

Get a copy of the blank Beta Test Sheet.
Get Beta test report instructions.

 Go to Rollover Example

Get a hozizontal blank storyboard here.

Get a vertical storyboard here.
CSS Notes 1:Basics, Properties and Units CSS Notes 2:Positioning CSS Notes 3:Dreamweaver Positioning

Audio and Video

  

 

SPRING 2010 Projects and Homework

Skip to the Current Week

Day Subject for the Day Due Next Time
Day 1
  • Introductions, logins, etc.
  • Look at work
  • Day 1 Questions
Read Ch.1 of Dreamweaver CS4 for Windows and Macintosh: Visual QuickStart Guide
Day 2
    Lecture
  • Web Design Websites
  • Opening day survey
  • Dreamweaver introduction
    • Introduction to the interface
    • Making a site
    • Site Window
    • Document Window
      • Views
    • Insert Bar
    Lab
  • Group Exercise
  • Work on Ch.1 of Adobe Dreamweaver CS4 Classroom in a Book.

Work on Ch.1 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide.

Read Ch.2 of Dreamweaver CS4 for Windows and Macintosh: Visual QuickStart Guide
Day 3
    Lab
  • Work on Ch.1 and 2 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide. Save on disc.

Read Ch.3 of Dreamweaver CS4 for Windows and Macintosh: Visual QuickStart Guide

Work on Ch.1 and 3 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide. Save on disc.
Image for imagemaps

Day 4
    Lecture
  • Finish Phases of production.
  • Dreamweaver
    • Finish Insert Bar
    • Page Properties
    • Preferences
      • Editors
    • File names
    • p and br in Dreamweaver
    • Text in Dreamweaver
      • Paragraphs, headings, etc .
      • Lists
    • Ch.4 and Ch.5 from hot files(basics and linking)
    • Linking
    • Asset Panel
      • Drag and Drop
    • Lab
  • Work on Ch.1 and 3 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide. Save on disc.
  • Work on Assignment 1(see right)

Assignment 1:Log into Angel, click on the communications tab and send me a message with the URL of a site you think is well designed, and give me 3 reasons why.

Work on Ch.1 and 3 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide. Save on disc.
Day 5

Lecture

Intro Project 1
Look at Project 1 Samples

Look at some assignment 1 sites

    Dreamweaver
  • Finish Text
  • Image Maps
  • CSS Panel
  • Properties panel
  • Start Tables in dreamweaver

Lab

  • Work on Ch.2 of Adobe Dreamweaver CS4 Classroom in a Book. I will provide. Save on disc.
  • Start on Project 1

Assignment 1 Due:Log into Angel, click on the communications tab and send me a message with the URL of a site you think is well designed, and give me 3 reasons why.

Make sure you have gone through Ch.1 and 3 of Adobe Dreamweaver CS4 Classroom in a Book.

Start on Project 1
Do thumbnails first and then wireframes.

Get a blank horizontal storyboard here.

Get a vertical storyboard here.
Day 6

Lecture

    XHTML
  1. Lists as links(listamatic)
  2. 2 main methods of layout in html(Tables and CSS)
  3. Rounded Tables
  4. Image maps
  5. Frames
  6. Animation

Lab

  • Work on Project 1 Thumbnails and wireframes
  • Work in progress check of thumbs or wireframes at end of class
 Work in progress check at the end of class on project 1: thumbnails and/or wireframes
Week 4
Day 7

Lecture

  • More Hot Studio from lynda.com
  • Look at assignment 1 sites
      • Dreamweaver
    • Rollovers in Dreamweaver
    • Finish Tables in dreamweaver
      • Rounded Tables
    XHTML
  • 2 main methods of layout in html(Tables and CSS)

Lab

Work on Project 1

Work in progress check at the end of class on project 1 if you have not talked to me: thumbnails and/or wireframes
Day 8

Lecture

  • Look at more assignment 1 sites
      • Dreamweaver
    • Frames
    • Layout with tables
    XHTML
  • 2 main methods of layout in html(Tables and CSS)
  • Frames

Lab

  • Work on Project 1
  • Do the tables tutorial from Ch. 7
  • Look at storyboards or comps in class

Work on Project 1
Week 5
Day 9
March 2

Lecture

    Dreamweaver
  • Finish tables
    • Rounded Tables
  • Built in CSS Layouts in Dreamweaver
  • Do CSS 1 Example
    • XHTML
  • 2 main methods of layout in html(Tables and CSS)

 

Lab

Storyboards, wireframes or comps due for Project 1
Get a blank horizontal storyboard here.
Get a vertical storyboard here.You can turn in image files or hard copies.

Read Ch.8 of Dreamweaver CS4 for Windows and Macintosh: Visual QuickStart Guide

Read(or review if you already know the information)Ch.2 in CSS: The Missing Manual, 2nd Edition. It is on CSS basics. Also read Ch.11 in the same ook on CSS Layout.
Day 10

Lecture

    Dreamweaver
  • Do layout example in Dreamweaver
  • USAToday Layout in Dreamweaver

Lab

  • Work in Progress check for Assignment 1
    Look at wireframes, comps, etc.
  • Work on Project 1

Work on Project 1

Work in Progress check for Assignment 1. Look at wireframes, comps, etc.
Week 6
Day 11
March 9

Lecture

Lab

Work on Project 1

 Work on Project 1
Day 12

Lecture

  • CSS Box model
  • USAToday Layout in Dreamweaver
  • Background Images
  • Faux Columns
  • Image Replacement
  • Single Image CSS Rollover

Lab

Work on Project 1

 Work on Project 1
Week 7
Day 13
March 16
  Project 1 Due.
Day 14
    
Week 8
Day 15
    

Day 16

    
Spring Break
Week 9
Day 17
    
Day 18    
Week 10
Day 19		    
Day 20    
Week 11
Day 21		    
Day 22    
Week 12
Day 23		    
Day 24    
Week 13
Day 25		    
Day 26    
Day 27    
Day 28    
Day 29    
Day 30    
Day 31    
Fall 2009

Skip to the Current Week

Day Subject for the Day Due Next Time
Day 1
  • Introductions, logins, etc.
  • Look at work
  • Day 1 Questions

These are the class textbooks. The first book is required. The second book was added, but you may be able to get online access to the second book instead of buying it. We will talk about online access to the books in class.

  1. Dreamweaver CS4: The Missing Manual (Paperback)
    by David McFarland
  2. CSS: The Missing Manual (Paperback)
    by David McFarland
 Read Ch.1 up to page 47 in Dreamweaver CS4: The Missing Manual
Day 2
    Lecture
  • Web Design Websites
  • Opening day survey
  • Dreamweaver introduction
    • Introduction to the interface
    • Making a site
    • Site Window
    • Document Window
      • Views
    • Insert Bar
    Lab
  • Group Exercise
  • Work on The Dreamweaver Test Drive starting on page 47
 Work on The Dreamweaver Test Drive starting on page 47
Day 3
    Lecture
  • Go over group exercise
  • Phases of production.
  • Dreamweaver introduction
    • Finish Document window
    • Insert Bar
    • Page Properties
    • Text in Dreamweaver
    Lab
  • Work on The Dreamweaver Test Drive starting on page 47
  • If you finish the test drive, move on to Ch. 2 and try out some of the text insertion tips there.

Read Chapters 2, 3 and 5 up to page 195 in Dreamweaver CS4: The Missing Manual

If you finish the test drive, move on to Ch. 2 and try out some of the text insertion tips there.
Image for imagemaps

Day 4
    Lecture
  • Phases of production.
  • Dreamweaver
    • Finish Insert Bar
    • Drag and Drop
    • Page Properties
    • Preferences
      • Editors
    • File names
    • p and br in Dreamweaver
    • Text in Dreamweaver
    Lab
  • Work on The Dreamweaver Test Drive starting on page 47
  • If you finish the test drive, move on to Ch. 2 and try out some of the text insertion tips there, and Ch. 3 on text formatting
  • Work on Assignment 1(see right)
 Assignment 1:Log into Angel, click on the communications tab and send me a message with the URL of a site you think is well designed, and give me 3 reasons why.
Day 5
Sept. 15

Lecture

Intro Project 1

    Dreamweaver
  • More text formatting
  • Links
  • Image Maps
  • Properties panel
  • Start Tables in dreamweaver

Lab

  • Finish reading and trying text formatting in Ch. 2 and 3
  • Do the links tutorial in Ch. 5
  • Start on Project 1

Make sure you have gone throught the Dreamweaver test drive in the book, as well as Ch. 2 and 3 on text in Dreamweaver.

Do the links tutorial in Ch. 5

Start on Project 1

Get a blank horizontal storyboard here.

Get a vertical storyboard here.
Day 6

Lecture

Meta Tags.
How to Use HTML Meta Tags(For search engines)

    Dreamweaver
  • Spry Menu Bar
  • Image Maps
  • Properties panel
  • Start Tables in dreamweaver
  • Frames in Dreamweaver
    XHTML
  1. Lists as links(listamatic)
  2. 2 main methods of layout in html(Tables and CSS)
  3. Rounded Tables
  4. Image maps
  5. Frames
  6. Animation

Lab

  • Work on Project 1 comps or Thumbnails
  • Work in progress check of comps on thumbs at end of class
 Work in pregress check at the end of class on project 1 comps or thumbnails
Week 4
Day 7
Sept. 22

Lecture

  • Look at assignment 1 sites
      • Dreamweaver
    • Rollovers in Dreamweaver
    • Start Tables in dreamweaver
    XHTML
  • 2 main methods of layout in html(Tables and CSS)

Lab

 Storyboards or comps due for Project 1
Get a blank horizontal storyboard here.
Get a vertical storyboard here.You can turn in image files or hard copies.
Day 8

Lecture

  • Look at more assignment 1 sites
      • Dreamweaver
    • More tables
    • Rounded Tables
    • Sorting tables
    • Layout with tables
    • Frames
    XHTML
  • 2 main methods of layout in html(Tables and CSS)
  • Frames

Lab

  • Work on Project 1
  • Do the tables tutorial from Ch. 7
  • Look at storyboards or comps in class
 Work on Project 1
Week 5
Day 9
Sept. 29

Lecture

Lab

Work on Project 1

Read Ch. 9 in Dreamweaver CS4: The Missing Manual on Page Layout
Day 10

Lecture

Work in Progress check for Assignment 1

    XHTML
  • Review methods of layout in html(Tables and CSS)
  • CSS layout (Ch. 9 in the book)
    Dreamweaver
  • Do layout example in Dreamweaver
  • Built in CSS Layouts in Dreamweaver
  • CNN Layout in Dreamweaver
  • Do CSS 1 Example

Lab

 Work in Progress check for Assignment 1
Week 6
Day 11
Oct. 6

Lecture

    Dreamweaver
  • CNN Layout in Dreamweaver
  • CSS Palette in Dreamweaver
  • Do CSS 1 Example

Lab

Work on Project 1

 Work on Project 1
Day 12

Lecture

  • Background Images
  • Faux Columns
  • Image Replacement
  • Single Image CSS Rollover

Lab

Work on Project 1

  
Week 7
Day 13
Oct. 13

Lecture

  • Background Images
  • Faux Columns
  • Image Replacement
  • Single Image CSS Rollover
  • CSS Palette in Dreamweaver

Lab

  • Do CSS tutorial in Chapter 4
  • Work on Project 2

 

Project 1 due.

Review Ch. 4 on CSS in your book.

Project 2:CSS
Create 2 web pages on the topic of your choice using the 3 types of CSS rules(by location). Use CSS for layout. You must also create the external CSS file. Consult chapters 4, 8 and 9 of your book for help.
The 3 types of CSS Rules by location:

  1. inline/local
  2. internal/embedded
  3. external/linked/imported

Also use 3 different selectors.

  1. html selector
  2. class selector
  3. ID selector

Bring in actual files to turn in. You will be graded on whether you fullfilled the requirements, as well as the design.

 
Day 14

Lecture

  • Critique Project 1
  • Single Image CSS Rollover

Lab

  • Do CSS tutorial in Chapter 4
  • Work on Project 2
 Work on Project 2
Week 8
Day 15

Lecture

  • More Project 1 Critiques
  • More CSS text styles
  • CSS Layout
    • Floats
    • Positioning
  • Lists as navigation

Lab

  • Do CSS tutorial in Chapter 4
  • Work on Project 2
 Work on Project 2

Day 16

Lecture

  • More Project 1 Critiques
  • Absolute Positioning
  • CSS Layout(from stylin code)
  • Lists as navigation

Lab

  • Work on Project 2
 Work in Progress check for Project 2
Week 9
Day 17
Oct. 27

Lecture

  • Finish Project 1 Critiques
  • Intro Final Project
  • Image Optimization
  • Image file types

Lab

  • Work on Project 2

Project 2 Due

Begin Final Project.
Day 18

Lecture

  • Project 2 Critiques
  • Styled CSS boxes

Lab

  • Work on Final Proj
  
Day 19
Week 10

Lecture

  • Project 2 Critiques
  • Look at Sample Project Proposals
  • More selectors

Lab

  • Work on Final Proj
  
Day 20

Lecture

  • Project 2 Critiques
    Dreamweaver
  • Snippets
  • Templates
  • Library Items

Lab

  • Work on Final Proj
  
Day 21
Week 11
Nov. 10

Lecture

  • Present Proposals in class

Lab

  • Work on Final Proj
 Proposals Due
Bring in Comps and Creative Brief or Proposal.
Day 22

Lecture

  • Finish Proposals
  • Finish selectors
    • Attribute Selectors
  • Image Slicing
  • Menu backgrounds
  • CSS Layout(from stylin code)

Lab

  • Work on Final Proj
  
Day 23
Week 12
Nov. 17

Lecture

  • Project 2 Critiques
  • Finish selectors
    • Attribute Selectors

Lab

  • Work on Final Proj
  
Day 24  
Day 25
Week 13

Lecture

Lab

  • Work on Final Proj
  
Nov. 26 Thanksgiving/No class  
Day 26
Week 14
Dec. 1

Lecture

Lab

  • Work on Final Proj
  
Day 27
Dec. 3

Lecture

Lab

  • Test Final Project

Testing version of website due.

Get a copy of the blank Beta Test Sheet.
Get Beta test report instructions.

 
Day 28
Week 15

Get a copy of the blank Beta Test Sheet.
Get Beta test report instructions.

Extra Credit:
Create a page using the source code from http://www.csszengarden.com/. You must use the html as is. Write new CSS styles to create a new design.
Day 29

Final Critique

    Javascript
  • Javascript notes pages 4,5, 6 and 7.
  • Javascript Functions.
  • Built in functions
  • Methods
  • Event Handlers
  • Variables
  • Operators
  • Javascript calculator
  • Variables, Operators and Expressions.
  • Strings and Conditional statement
  • Examples
    • Window Opener
    • Final Rollover

 

Final Version of website due

Extra Credit Due

2 Beta Tests per person due

1 Beta Test Report per group due
Day 30
Week 16
Dec. 15		 No Class Tuesday  
Day 31
Dec. 17		 Final Exam 4:10-6:10PM  
Spring 2009
Day Subject for the Day Due Next Time
Day 1
  • Introductions, logins, etc.
  • Opening day survey
  • Day 1 Questions
  • Look at work
  • Dreamweaver introduction
    1. Introduction to the interface
    2. Making a site
    3. Site Window
    4. Document Window
      1. Views
    5. Insert Bar
 Read Ch.1, 2 and Do Ch.3 in Dreamweaver CS3 Hands on Training (HOT).
Day 2

Group Exercise

Phases of production.

Wireframes

Doctype Definitions.
ALA Article
w3schools.com listing
W3C Article on standards:
My Web site is standard! And yours?

Meta Tags.
How to Use HTML Meta Tags(For search engines)

Dreamweaver

  1. Review making a site
  2. Finish Insert Bar
  3. Managing files
  4. Drag and Drop
  5. Page properties
  6. Preferences
    1. Editors
  7. File names
  8. p and br in Dreamweaver

Image Maps

Do Ch. 4 and 5 in Dreamweaver CS3 Hands on Training (HOT).

Assignment 1:Log into Angel, click on the communications tab and send me a message with the URL of a site you think is well designed, and give me 3 reasons why.

 
Day 3

Finish Group Project

Intro Project 1

Meta Tags.
How to Use HTML Meta Tags(For search engines)

    Dreamweaver
  1. Page Properties
  2. p and br in Dreamweaver
  3. Preferences
    1. Editors
  4. Insert panel
  5. Properties panel
  6. Tables in dreamweaver
    XHTML
  1. 2 main methods of layout in html(Tables and CSS)
  2. Rounded Tables
  3. Image maps
  4. Frames
  5. Frames in Dreamweaver
  6. Animation

Assignment 1 Due:
Message about well designed site is due(see week 2 above)

For next week:
Do Ch. 6 in Dreamweaver CS3 Hands on Training. Save on disk for later review.

Begin Project 1.

Get a blank horizontal storyboard here.

Get a vertical storyboard here.
Image for imagemaps

Day 4
Feb. 26

Look at websites from emails

    Dreamweaver
  1. Finish Tables in Dreamweaver
    1. Do CNN Layout
  2. Rollovers in Dreamweaver
  3. CSS Styles Pallete(Chapter 6 in HOT book)
  4. Image maps

Image Optimization
Image file types

    XHTML
  1. Review methods of layout in html(Tables and CSS)
  2. Image maps
  3. Frames
    1. frame tags
    2. nested frameset
    3. inline frame

Storyboards or comps due for Project 1
Get a blank horizontal storyboard here.
Get a vertical storyboard here.You can turn in image files or hard copies.

Continue Project 1
Day 5

Work in Progress check for Assignment 1

    Dreamweaver
  1. Finish Tables in Dreamweaver
    1. Do CNN Layout
  2. CSS Styles Pallete(Chapter 6 in HOT book)
  3. Text formatting in Dreamweaver
  4. Frames in Dreamweaver

Animation

    XHTML
  1. Review methods of layout in html(Tables and CSS)
  2. Frames
    1. frame tags
    2. nested frameset
    3. inline frames

Image Optimization
Image file types

Bring in what you have for Project 1 work in progress check.

Bring your HOT book to class.

Continue work on Project 1
Day 6
March 12

Finish Work in Progress check

Show CNN CSS Layout

Look at websites from emails

Bring in what you have for Project 1 work in progress check.

Bring your HOT book to class.

Continue work on Project 1
Day 7

Look at Project 1

Intro Project 2

Project 1 Due

Project 2:CSS
Create 2 web pages on the topic of your choice using the 3 types of CSS rules(by location). You must also create the external CSS file. Consult chapters 2-5 of Stylin' With CSS for help.
The 3 types of CSS Rules by location:

  1. inline/local
  2. internal/embedded
  3. external/linked/imported

Also use 3 different selectors.

  1. html selector
  2. class selector
  3. ID selector

Bring in actual files to turn in. You will be graded on whether you fullfilled the requirements, as well as the design.
Day 8
March 26

No Class

Take a Quiz(See right)
  1. Before taking the quiz, make sure you have gone through Chapters 1-6 and 11-12 in Dreamweaver CS3 Hands on Training.
  2. Watch this video.
  3. Take a quiz on Angel. It will be under the lessons tab. It will only be available from 7PM-9PM on Thursday Night, March 26.
April 2 • No School • Spring Break
Day 9

Look at Project 1 and/or CSS Assignment

Intro Final Project

Sample CSS Page Layouts

Project 2 Due

Begin Final Project.
Day 10
Apr. 16
 Meet with groups
    Dreamweaver
  • Templates
  • Library Items
  • Dreamweaver Drop down Menus
  
Day 11

Present Proposals in class

    Dreamweaver
  • Dreamweaver Drop down Menus

Image Slicing

Forms in Dreamweaver

 Proposals Due
Bring in Comps and Creative Brief or Proposal.
Day 12
Apr. 30
  • Finish CSS Layout
  • Image Slicing
    Dreamweaver
  • Dreamweaver Drop Down Menus and other Spry effects
  • Forms

Continue Final Project

Extra Credit:
Create a page using the source code from http://www.csszengarden.com/. You must use the html as is. Write new CSS styles to create a new design.
Day 13 Work in Progress Check for Final Project.
    Dreamweaver
  • Forms
Work in Progress Check for Final Project.
Day 14
May 14

Beta Test Websites
A testing(complete or nearly complete) version is due.
Beta Test Form
Beta Test Paper Help

Testing version of website due.

Extra Credit Due.
Day 15

Final Project Critique

Review for Final Exam

Day 16
May 28

Final Exam from 7:30 to 9:30 Final Exam

Garrettmedia | Mission Main | Mark's Schedule | ART34 | GDES 45 | GDES 46 | GDES 70 | GDES 73 | GDES 74 | GDES 75 | GDES 81 | Links