GDES 46 Main Page

Links
Get a copy of the syllabus. Log in to Angel for grades, etc. Get pdf file for reading.
Get a copy of the blank Beta Test Sheet. Go to Rollover Example Go To Javascript Notes

Audio and Video

Get Beta test paper handout Go To Javascript Book Site.

DHTML and CSS for the World Wide Web (Your book): by Cranford Teague. Companion site to book.

Get a blank storyboard here.

 

CSS Notes, Articles and Links
Go to CSS Notes 1:Basics, Properties and Units Go to CSS Notes 2:Positioning Go to CSS Notes 3:Dreamweaver Positioning

A good article about CSS Selectors

A List Apart CSS Topics Practical CSS Layout Tips, Tricks, & Techniques
Sample CSS Page Layouts    
CSS Reference(W3schools) CSS Tutorial(W3Schools) Selectorial/Listamatic
W3C CSS Property Index W3C Selectors W3C CSS 2 Box Model
The SelectOracle: Use to figure out selectors    

Projects and Homework

Fall 2008
Day Subject for the Day Due Next Time
Day 1

Introductions
Look at work
Dreamweaver introduction

  1. Making a site
  2. Site Window
  3. Document Window
Read Ch. 1 and 2 in Dreamweaver CS3 Hands on Training (HOT).
Day 2

Group Exercise

Phases of production.

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. Making a site
  2. Site Window
  3. Document Window
  4. Properties Palette
  5. Insert Palette.
  6. page properties and
  7. preferences
  8. File names
  9. p and br in Dreamweaver

Image Maps

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

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
9-16-08

Finish Group Project

Intro Project 1

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. Page Properties
  2. p and br in Dreamweaver
  3. Preferences
    1. Editors
  4. Insert panel
  5. Properties panel
  6. Tables in dreamweaver
    XHTML
  1. Rounded Tables
  2. Image maps.
  3. Frames.
  4. Frames in Dreamweaver.
  5. Animation

Message about well designed site is due(see week 2 above)

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

Begin Project 1.

Get a blank storyboard here.

Image for imagemaps

Day 4
Sept. 23

Look at websites from emails
    Dreamweaver
  1. Finish Tables in Dreamweaver
  2. Preferences
    1. Editors
  3. Rollovers in Dreamweaver
  4. Image maps
  5. Frames in Dreamweaver
    XHTML
  1. Image maps
  2. Frames
    1. frame tags
    2. nested frameset
    3. inline frame
  3. Animation
Image Optimization
Image file types

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

Continue Project 1

Day 5

Work in Progress check for Assignment 1

Look at websites from emails

    Dreamweaver
  • Finish Tables in Dreamweaver
  • Preferences
    1. Editors
  • Image maps
  • Frames in Dreamweaver
    XHTML
  • Image maps
  • Frames
    • frame tags
    • nested frameset
    • inline frame
  • Animation

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

Continue work on Project 1

Day 6
Oct. 7

Look at websites from emails

    Dreamweaver
  • Finish Tables in Dreamweaver
  • Preferences
    1. Editors
    XHTML
  • Animation
Continue work on Project 1
Day 7
Oct. 14

Look at Project 1

Intro Project 2

Project 1 Due

Project 2:CSS
Create 1 web page 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

To turn in. Print the code from the 2 files and print the page from the browser. Also bring in actual files to turn in.

Day 8

Look at Project 1

Sample CSS Page Layouts

Continue work on CSS Assignment 1

Do Ch. 6 in Dreamweaver CS3 Hands on Training. Save on disk for later review.

Day 9
Oct. 28

Look at Project 1 and/or CSS Assignment

Intro Final Project

    CSS
  • Review selectors
  • The cascade from selectorial
  • Vertical margins collapse
  • Floats from Stylin With CSS
  • CSS Layout files from Stylin With CSS
    Dreamweaver
  • Dreamweaver Drop down Menus

Sample CSS Page Layouts

CSS Assignment 1 Due

Begin Final Project.

Day 10
    CSS
  • Review selectors
  • The cascade from selectorial
  • Vertical margins collapse
  • Floats from Stylin With CSS
  • CSS Layout files from Stylin With CSS
  • Single image css rollover
    Dreamweaver
  • Dreamweaver Drop down Menus
  • Templates
  • Library Items

Sample CSS Page Layouts

Continue work on Final Project

Day 11
Nov. 11

No Class - Holiday No Class - Holiday
Day 12

Present Proposals in class

Image Slicing

    CSS
  • Floats from Stylin With CSS
  • CSS Layout files from Stylin With CSS
    Dreamweaver
  • Templates
  • Library Items
  • Dreamweaver Drop down Menus

Sample CSS Page Layouts

Proposals Due
Bring in Comps and Creative Brief or Proposal.
Day 13
Nov. 25
    CSS
  • Floats from Stylin With CSS
  • CSS Layout files from Stylin With CSS
Work in Progress Check for Final Project.
Day 14
Dec. 2

Beta test websites

Testing version of website due.
Day 15
Dec. 9

Critique Final Project.

Review for final exam.

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. Due by Wednesday Dec. 17.

 

Day 16
Dec. 16
Final Exam

Bring in your Semester Lab Record filled out for the semester.

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. Due by Wednesday Dec. 17.

Final Exam


Fall 2007
Day Subject for the Day Due Next Time
Day 1

Introductions
Look at work
Dreamweaver introduction

  1. Making a site
  2. Site Window
  3. Document Window

Group Exercise

Read Ch. 1 and 2 in Dreamweaver 8 Hands on Training (HOT).
Day 2

Group Exercise

Phases of production.

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. Making a site
  2. Site Window
  3. Document Window
  4. Properties Palette
  5. Insert Palette.
  6. page properties and
  7. preferences
  8. File names
  9. p and br in Dreamweaver

Image Maps

Do Ch. 3,4 and 5 in Dreamweaver 8 Hands on Training (HOT).
Day 3

Intro Project 1

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. Site Window
  2. Page Properties
  3. p and br in Dreamweaver
  4. Preferences
    1. Editors
  5. Tables in dreamweaver
    XHTML
  1. Rounded Tables
  2. Image maps.
  3. Frames.
  4. Frames in Dreamweaver.
  5. Animation

Do Ch. 8 and 12 in Dreamweaver MX 2004 Hands on Training (Hot). Save on disk for later review.

Assignment1:email me at students@garrettmedia.com the URL of a site you think is well designed, and give me 3 reasons why.

Begin Project 1.

Image for imagemaps
image map

Day 4

Look at websites from emails
    Dreamweaver
  1. Preferences
    1. Editors
  2. Rollovers in Dreamweaver
  3. Image maps
  4. Frames in Dreamweaver
    XHTML
  1. Image maps
  2. Frames
    1. frame tags
    2. nested frameset
    3. inline frame
  3. Animation
Image Optimization
Image file types

Email Due

Thumbnails or Comps for Project 1 Due
You can turn in image files or hard copies

Continue Project 1

Day 5
Oct. 1
Look at websites from emails
    Dreamweaver
  • Finish Image maps
  • Frames in Dreamweaver
    XHTML
  • Image maps
  • Frames
    • frame tags
    • nested frameset
    • inline frame
  • Animation

Image Optimization
Image file types

 

Continue work on Project 1
Day 6

Work in progress check for assignment 1.

Image file types
Image Optimization

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

Bring Dreamweaver Hands on Training book to class

Day 7
Oct. 15

Project 1 Due

CSS Assignment 1:
Create 1 web page on the topic of your choice using the 3 types of CSS rules(by location). You must also create the external CSS file. Consult (read) your DHTML book chapter 1 and 2 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

To turn in. Print the code from the 2 files and print the page from the browser. Also bring in actual files to turn in.

Day 8
Oct. 22

Look at Assignment 1

Sample CSS Page Layouts

Continue work on CSS Assignment 1
Day 9
Oct. 29

Look at Assignment 1

Intro Final Project

Sample CSS Page Layouts

CSS Assignment 1 Due

Begin Final Project.

Day 10

Meet with group
Look at Assignment 1

Sample CSS Page Layouts

Continue Work on Final Project

Nov. 12
Holiday(no class)

Day 11
Nov. 19

  • Meet with team
  • Present Proposals
    CSS
  • CSS Positioning
  • CSS Lists
  • CSS Lists as navigation video
  • CSS Layout
  • Single Image CSS Rollover
Proposals Due
Bring in Comps and Creative Brief or Proposal.
Day 12
Nov. 26

Work in Progress Check for Final Project.

Image Slicing

Work in Progress Check for Final Project.
Day 13 Beta test websites Testing version of website due.
Day 14

Critique Final Project.

Review for final exam.

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 15
Dec. 17
Final Exam Final Exam

Spring 2007
Day Subject for the Day Due Next Time
Day 1

Introductions
Look at work
Dreamweaver introduction

  1. Making a site
  2. Site Window
  3. Document Window

Group Exercise

Read Ch. 1 and 2 in Dreamweaver 8 Hands on Training (HOT).
Day 2

Phases of production.

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. Making a site
  2. Site Window
  3. Document Window
  4. Properties Palette
  5. Insert Palette.
  6. page properties and
  7. preferences
  8. File names
  9. p and br in Dreamweaver

Image Maps

Do Ch. 3,4 and 5 in Dreamweaver 8 Hands on Training (HOT).
Day 3
    Dreamweaver
  1. Insert Palette
  2. p and br in Dreamweaver
  3. Properties Palette.
  4. Tables in dreamweaver
  5. Preferences
    1. Editors
  6. File names
    XHTML
  1. Image maps.
  2. Frames.
  3. Frames in Dreamweaver.
  4. Animation

Do Ch. 8 and 12 in Dreamweaver MX 2004 Hands on Training (Hot). Save on disk for later review.

email me at students@garrettmedia.com the URL of a site you think is well designed, and give me 3 reasons why.

Begin Project 1.

Day 4
    XHTML
  1. Image maps.
  2. Frames.
  3. Frames
    1. frame tags
    2. nested frameset
    3. inline frame
    4. Frames in Dreamweaver.
  4. Animation

Rollovers in Dreamweaver.
Image Optimization
Image file types

Continue Project 1
Image for imagemaps
Day 5

email due

Thumbs or Comps are due for Project 1.

Day 6

Look at more websites from email.
Work in progress check for assignment 1.
More CSS.
More selectors
CSS Properties
CSS Notes 1:Basics, Properties and Units.
CSS text.
Text for css 1 for fonts.
Text for css 2 for text.

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

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

CSS Assignment:
Create 1 web page on the topic of your choice using the 3 types of CSS rules(by location). You must also create the external CSS file. Consult (read) your DHTML book chapter 1 and 2 for help.
The 3 types of CSS Rules:

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

Also use 3 different selectors.

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

To turn in. Print the code from the 2 files and print the page from the browser. Also bring in actual files to turn in.

Day 8
    CSS
  • Look at Project 1
  • The cascade
  • CSS Positioning
  • CSS in Dreamweaver
  • CSS Layout
  • CSS Lists

Project 1 Due

Continue work on CSS Assignment

Spring Break
Day 9
April 3
Look at Project 1
Intro Final Project
  • CSS in Dreamweaver
    • Dropdown menus
  • CSS Lists
  • CSS Layout
CSS Assignment Due

Begin Final Project.

Day 10
  • Meet with group
  • CSS Lists as navigation video
  • Finish CSS Layout
    • Floated layouts from CSS Mastery
    • Negative margins from Stylin with CSS
  • Library items and templates in Dreamweaver
Continue work on Final Project and Proposals
Day 11
April 17

Proposals Due
Bring in Comps and Creative Brief or Proposal.

Day 12

Meet with group
Image Slicing

Continue work on Final Project

Day 13
May 1

    Dreamweaver
  • Making styles for print
  • Behaviors in Dreamweaver

Continue work on Final Project

Day 14
May 8

Testing version of website due.
Day 15
May 15

Finish javascript
Critique Final Project.
Review for final exam.

Day 16
May 22
Final Exam Final Exam


Fall 2006
Day Subject for the Day Due Next Time
Day 1

Introductions
Look at work
Dreamweaver introduction

  1. Making a site
  2. Site Window
  3. Document Window

Group Exercise

Read Ch. 1 and 2 in Dreamweaver 8 Hands on Training (HOT).
No class: Labor Day
Day 2

Finish group exercise

Phases of production.

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. Making a site
  2. Site Window
  3. Document Window
  4. Properties Palette
  5. Insert Palette.
  6. page properties and
  7. preferences
  8. File names
  9. p and br in Dreamweaver

Image Maps

Do Ch. 3,4 and 5 in Dreamweaver 8 Hands on Training
(HOT). Save on disk for later review.
Day 3

    Dreamweaver

  1. Tables in dreamweaver
  2. Properties Palette.
  3. Preferences
    1. Editors
  4. File names
  5. p and br in Dreamweaver
Frames.
Frames in Dreamweaver.
Image maps.
Animation

Do Ch. 8 and 12 in Dreamweaver MX 2004 Hands on Training (Hot). Save on disk for later review.

email me at students@garrettmedia.com the URL of a site you think is well designed, and give me 3 reasons why.

Begin Project 1.

Day 4
    Finish Frames
  • frame tags
  • nested frameset
  • inline frame
Animation
Image maps
Rollovers in Dreamweaver.

email to students@garrettmedia.com due. Include the URL of a site you think is well designed, and give me 3 reasons why.

Continue Project 1

Image for imagemaps
Day 5
Look at sites.
Image Optimization.
Rollovers in Dreamweaver
Begin CSS.
Text for CSS placement.

CSS text. Text for css 1 for fonts.
Thumbs or Comps are due for Project 1.
Day 6

Look at more websites from email.
Work in progress check for assignment 1.
More CSS.
More selectors
CSS Properties
CSS Notes 1:Basics, Properties and Units.
CSS text.
Text for css 1 for fonts.
Text for css 2 for text.

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

 

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

CSS Assignment:
Create 1 web page on the topic of your choice using the 3 types of CSS rules(by location). You must also create the external CSS file. Consult (read) your DHTML book chapter 1 and 2 for help.
The 3 types of CSS Rules:

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

Also use 3 different selectors.

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

To turn in. Print the code from the 2 files and print the page from the browser. Also bring in actual files to turn in.

Day 8

Project 1 Due

Continue CSS Assignment

Day 9
Look at Project 1
Intro Final Project
  • CSS in Dreamweaver
    • Dropdown menus
  • CSS Lists
  • CSS Layout

 

CSS Assignment Due

Begin Final Project.

Day 10
  • Finish looking at assignment 3
  • Dreamweaver ID Video
  • Dreamweaver Layout Video
  • Finish Dreamweaver CSS
  • Dropdown menus
  • CSS Lists
  • CSS Layout
Continue work on Final Project and Proposals
Day 11
  • Finish Looking at assignment 1
  • Present Proposals
  • Finish CSS Layout
  • Start javascript
    • Characteristics

Proposals Due
Bring in Comps and Creative Brief or Proposal.

Day 12
Nov. 20

Image Slicing

Templates/Library items in Dreamweaver

Continue work on Final Project
Day 13
Nov. 27

Beta Test Final Project

Testing version of website due

Get a copy of the blank Beta Test Sheet.

Get Beta test paper handout

Day 14

Finish javascript
Critique Final Project.
Review for final exam.

Due:

Day 15
Dec. 11
Final Exam Final Exam

Spring 2006
Day Subject for the Day Due Next Time
Day 1

Introductions

Dreamweaver introduction

  1. Making a site
  2. Site Window
  3. Document Window

Group Exercise

Read Ch. 1 and 2 in Dreamweaver 8 Hands on Training (HOT).
Day 2

Finish group exercise

Phases of production.

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. Insert Palette
Do Ch. 3,4 and 5 in Dreamweaver 8 Hands on Training
(HOT). Save on disk for later review.
Day 3

Phases of production.

    Dreamweaver

  1. Tables in dreamweaver
  2. Properties Palette.
  3. Page properties
  4. Preferences
    1. Editors
  5. File names
  6. p and br in Dreamweaver
Frames.
Frames in Dreamweaver.
Image maps.

Do Ch. 8 and 12 in Dreamweaver MX 2004 Hands on Training (Hot). Save on disk for later review.

email me here the URL of a site you think is well designed, and give me 3 reasons why.

Image for imagemaps

Get More Images.

Day 4 Animation
Intro Project 1.
Look at examples.
Rollovers in Dreamweaver.

email due.

Begin Project 1.

Day 5
Look at sites.
Tables in Dreamweaver.
Image Optimization.
Begin CSS. Text for CSS placement.
CSS text. Text for css 1 for fonts.
Thumbs or Comps are due for Project 1.
Day 6

Look at more websites from email.
Talk about projects.
More CSS.
More selectors
CSS Notes 1:Properties and Units.
CSS text.
Text for css 1 for fonts.
Text for css 2 for text.

Continue Proj 1

Read Ch. 1 in DHTML and CSS for the World Wide Web

Day 7
Project 1 work in progress check.

Library items in Dreamweaver.

 

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

CSS Assignment:
Create 1 web page on the topic of your choice using the 3 types of CSS rules(by location). You must also create the external CSS file. Consult (read) your DHTML book chapter 1 and 2 for help.
The 3 types of CSS Rules:

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

Also use 3 different selectors.

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

To turn in. Print the code from the 2 files and print the page from the browser. Also bring in actual files to turn in.

Day 8

Look at Project 1

Library items in Dreamweaver

Project 1 Due

Continue CSS Assignment

Spring Break
Day 9

Look at Project 1
Intro Final Project
CSS lists
Dropdown menus

CSS Assignment Due

Begin Final Project.

Day 10

Dreamweaver Layout Video

CSS Rollover
CSS Navigation
CSS Rounded Boxes

Templates/Library items in Dreamweaver.

Color

Continue work on Final Project and Proposals
Day 11
4/18/06

Present Proposals

Proposals Due
Bring in Storyboards and Creative Brief or Proposal.

Day 12

Image Slicing

Start javascript

  • Characteristics
Continue Final Project
Day 13
Continue work on Final Project

Day 14

Beta Test Final Project

Testing version of website due

Get a copy of the blank Beta Test Sheet.

Get Beta test paper handout

Day 15

Critique Final Project.
Review for final exam.

Final Version of website due

Get a copy of the blank Beta Test Sheet.
Get Beta test paper handout
Beta Tests and Beta Test Report Due

Day 16
5/23/06
Final Exam Final Exam