GDES 46 - Intermediate Web Design

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 Audio for the Web Embedding Video on a Web Page. Audio and Video file types and links HTML Scripting Link HTML Scripting Guide for QuickTime	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 Making a site Site Window 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 Making a site Site Window Document Window Properties Palette Insert Palette. page properties and preferences File names 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 Page Properties p and br in Dreamweaver Preferences Editors Insert panel Properties panel Tables in dreamweaver XHTML Rounded Tables Image maps. Frames. Frames in Dreamweaver. 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 Finish Tables in Dreamweaver Preferences Editors Rollovers in Dreamweaver Image maps Frames in Dreamweaver XHTML Image maps Frames frame tags nested frameset inline frame 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 Editors Image maps Frames in Dreamweaver XHTML Image maps Frames frame tags nested frameset inline frame Animation CSS Begin CSS. Text for CSS placement. CSS text Text for css 1 for fonts.	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 Editors XHTML Animation CSS Begin CSS. Selectorial/Listamatic CSS Tutorial CSS Properties Text for CSS placement. CSS text Text for css 1 for fonts. Text for css 2 for text.	Continue work on Project 1
Day 7 Oct. 14	Look at Project 1 Intro Project 2 CSS Begin CSS. Selectorial/Listamatic CSS Tutorial CSS Properties Text for CSS placement. CSS text Text for css 1 for fonts. Text for css 2 for text.	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: inline/local internal/embedded external/linked/imported Also use 3 different selectors. html selector class selector 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 CSS Text for css 2 for text CSS 2 Box Model from the W3C Text for css 3 for boxes. CSS Layout from Stylin With CSS CSS Positioning The cascade CSS in Dreamweaver 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 Links Listomatic Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman 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 Links Listomatic Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman 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 Links Listomatic Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman 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 Javascript Javascript notes pages 1 and 2 Places to put it	Work in Progress Check for Final Project.
Day 14 Dec. 2	Beta test websites Javascript Javascript notes pages 1, 2, 4,5, 6 and 7. Places to put it Methods Event Handlers Simple Rollover. Javascript Functions. Built in functions. Javascript calculator	Testing version of website due.
Day 15 Dec. 9	Javascript Javascript Notes pages 8 and 9 Methods Event Handlers Variables, Operators and Expressions. Strings and Conditional statement Critique Final Project. Review for final exam.	Final Version of website due 2 Beta Tests per person due 1 Beta Test Report per group due 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 Making a site Site Window 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 Making a site Site Window Document Window Properties Palette Insert Palette. page properties and preferences File names 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 Site Window Page Properties p and br in Dreamweaver Preferences Editors Tables in dreamweaver XHTML Rounded Tables Image maps. Frames. Frames in Dreamweaver. 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
Day 4	Look at websites from emails Dreamweaver Preferences Editors Rollovers in Dreamweaver Image maps Frames in Dreamweaver XHTML Image maps Frames frame tags nested frameset inline frame 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 CSS Begin CSS. Text for CSS placement. CSS text Text for css 1 for fonts.	Continue work on Project 1
Day 6	Work in progress check for assignment 1. Image file types Image Optimization CSS Begin CSS. Selectorial/Listamatic CSS Tutorial CSS Properties Text for CSS placement. 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. Bring Dreamweaver Hands on Training book to class
Day 7 Oct. 15	CSS Begin CSS. Selectorial/Listamatic CSS Tutorial CSS Properties Text for CSS placement. CSS text Text for css 1 for fonts. Text for css 2 for text.	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: inline/local internal/embedded external/linked/imported Also use 3 different selectors. html selector class selector 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 CSS CSS text Text for css 1 for fonts. Text for css 2 for text The cascade CSS in Dreamweaver CSS Positioning CSS Layout CSS Lists Sample CSS Page Layouts	Continue work on CSS Assignment 1
Day 9 Oct. 29	Look at Assignment 1 Intro Final Project CSS CSS classes CSS 2 Box Model from the W3C Text for css 3 for boxes. Links Listomatic Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman Sample CSS Page Layouts	CSS Assignment 1 Due Begin Final Project.
Day 10	Meet with group Look at Assignment 1 CSS Dreamweaver Dropdown menus The cascade CSS classes CSS 2 Box Model from the W3C Text for css 3 for boxes. CSS Positioning CSS Lists CSS Lists as navigation video CSS Layout Single Image CSS Rollover Links Listomatic Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman 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 Start javascript Characteristics	Proposals Due Bring in Comps and Creative Brief or Proposal.
Day 12 Nov. 26	Work in Progress Check for Final Project. Image Slicing Javascript Javascript notes pages 1, 2, 4,5 and 6. Places to put it Methods Event Handlers Simple Rollover. Javascript Functions. Built in functions. Javascript calculator	Work in Progress Check for Final Project.
Day 13	Beta test websites Javascript Javascript notes pages 1, 2, 4,5 and 6. Places to put it Methods Event Handlers Simple Rollover. Javascript Functions. Built in functions. Javascript calculator	Testing version of website due.
Day 14	Javascript Javascript Notes pages 7,8 and 9 Methods Event Handlers Variables, Operators and Expressions. Strings and Conditional statements Critique Final Project. Review for final exam.	Final Version of website due 2 Beta Tests per person due 1 Beta Test Report per group due 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 Making a site Site Window 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 Making a site Site Window Document Window Properties Palette Insert Palette. page properties and preferences File names p and br in Dreamweaver Image Maps	Do Ch. 3,4 and 5 in Dreamweaver 8 Hands on Training (HOT).
Day 3	Dreamweaver Insert Palette p and br in Dreamweaver Properties Palette. Tables in dreamweaver Preferences Editors File names XHTML Image maps. Frames. Frames in Dreamweaver. 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 Image maps. Frames. Frames frame tags nested frameset inline frame Frames in Dreamweaver. Animation Rollovers in Dreamweaver. Image Optimization Image file types	Continue Project 1
Image for imagemaps
Day 5	Inline Frames Image Optimization Gif Animation Look at sites. Begin CSS. Text for CSS placement. CSS text. Text for css 1 for fonts.	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. CSS Finish CSS selectors from book. CSS Selectorial Text for css 1 for fonts. Text for css 2 for text. pseudo classes CSS links CSS 2 Box Model from the W3C Text for css 3 for boxes.	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: inline/local internal/embedded external/linked Also use 3 different selectors. html selector class selector 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 Links Pure CSS menus from Eric Meyer CSS Links Still throwing tables by Doug Bowman Beautiful Interfaces with CSS by Doug Bowman	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	Meet with team Present Proposals Dreamweaver Layout Video Start javascript Characteristics	Proposals Due Bring in Comps and Creative Brief or Proposal.
Day 12	Meet with group Image Slicing Javascript Places to put it Methods Event Handlers Javascript notes pages 1, 2, 4,5 and 6. Simple Rollover. Javascript Functions. Built in functions. Javascript calculator	Continue work on Final Project
Day 13 May 1	Dreamweaver Making styles for print Behaviors in Dreamweaver Javascript Javascript Notes pages 7 and 8 Methods Event Handlers Variables, Operators and Expressions.	Continue work on Final Project
Day 14 May 8	Javascript Javascript Notes pages 8 and 9. Variables, Operators and Expressions. Strings and Conditional statements	Testing version of website due.
Day 15 May 15	Finish javascript Critique Final Project. Review for final exam.	Final Version of website due 2 Beta Tests per person due 1 Beta Test Report per group due
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 Making a site Site Window 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 Making a site Site Window Document Window Properties Palette Insert Palette. page properties and preferences File names 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 Tables in dreamweaver Properties Palette. Preferences Editors File names 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. Image Optimization Image file types	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. CSS Finish CSS selectors from book. CSS Selectorial Text for css 1 for fonts. Text for css 2 for text. pseudo classes CSS links CSS 2 Box Model from the W3C	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: inline/local internal/embedded external/linked Also use 3 different selectors. html selector class selector 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 The cascade CSS Selectorial Boxes in CSS CSS 2 Box Model from the W3C Text for css 3 for boxes. CSS Positioning CSS in Dreamweaver CSS Lists CSS Layout	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 Javascript Places to put it Methods Event Handlers Javascript notes pages 1, 2, 4,5 and 7. Simple Rollover. Javascript Functions. Built in functions. Javascript calculator	Continue work on Final Project
Day 13 Nov. 27	Javascript Javascript Notes pages 6,8 and 9. Variables, Operators and Expressions. Strings and Conditional statements 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: Final Version of website due 2 Beta Tests per person due 1 Beta Test Report per group due
Day 15 Dec. 11	Final Exam	Final Exam

Spring 2006
Day	Subject for the Day	Due Next Time
Day 1	Introductions Dreamweaver introduction Making a site Site Window 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 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 Tables in dreamweaver Properties Palette. Page properties Preferences Editors File names 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. CSS CSS Selectorial CSS in Dreamweaver CSS controls CSS links CSS Lists CSS Layout CSS 2 Box Model from the W3C Text for css 3 for boxes. 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: inline/local internal/embedded external/linked Also use 3 different selectors. html selector class selector 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 CSS CSS Selectorial CSS controls CSS Lists CSS Layout 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	Javascript Places to put it Methods Event Handlers Javascript notes pages 1, 2, 4,5 and 7. Simple Rollover. Javascript Functions. Built in functions. Javascript calculator.	Continue work on Final Project
Day 14	Javascript Javascript Notes pages 6,8 and 9. Variables, Operators and Expressions. Strings and Conditional statements 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