EMS 266 Introduction to Design for the Web
Mon & Wed 2pm-4:30pm room C 309 mac lab
Holyoke Community College
click here for syllabus
Schedule Material covered in class Resources
W
E
E
K

1

Mon
Jan
23

2:00-3:00
First class business
• Introductions, contact information
• Course Syllabus
• Attendance requirements
• Project requirements
• Web resources
• Q&A

3:00-3:10 Break

3:10-4:30 Topic: Website design as art, for artists
• Basics of 2D design in a 4D medium
• Designing media for the interactive age.
• Breaking conventions; Creative directions
• Learning by doing

Resources:

Syllabus for COM 266
view/print course syllabus

Adobe SW trial versions
download 30 day working software


Wed
Jan
25

Assignment for today
Find 2 URLs for 2 Flash-based websites that interest you (copy and paste site addresses into an email- you can copy them right out of the URL field at the top of your browser window when viewing the site in question)

Be prepared to answer the following:

• Is the Flash complimentary to the site's primary focus?
• Does the Flash give polish to the site, or detract from it?
• Does the Flash play smoothly?

 Resources:
Google 'Innovative Flash Sites', 'Creative Flash Sites', or other like search terms to find sites for this assignment.
Remember, it must contain Flash.
Don't talk about any sites that you already know about. You can tell if a site is using Flash if the site is animated in some integrated way, such as scene transitions, moving elements, other special effects
W
E
E
K

2

Mon
Jan
30

2-3:30
Topic: Website construction fundamentals
• The tools and the rules of web publishing
• HTML, CSS, Flash; Differences & Alikes
• Using online resources:

Topic: Using Dreamweaver
• Preparing the Root Folder for the site
• Create a homepage
• Create additional pages
• Modify Page Properties
• Embed images
• Q&A

3:30-3:40 break

3:40-4:30
Guided practice

Resources:

Dreamweaver Basics


Video tutorials at Lynda.com
They support captioning and can be started and stopped while you work along with the video tutor. Click Here

Wed
Feb
1

2:00-3:30
Topic: Cacading Style Sheets 1 - Text
• HTML vs. CSS text
• Using CSS internally and externally to the HTML document

3:30-3:40 break

3:40-4:30
Guided practice
In-class assignment: Download to your desktop and open the files inside the csstext folder with Dreamweaver. Examine how the HTML is controlled by modifying the CSS file. Further instructions are in the HTML file.

Resources:

CSS basics

Lynda.com Video Tuturials regarding CSS use in Dreamweaver CS3. Underlined clips can be viewed without a membership.

More helpful tutorials and references:
w3schools.com CSS primers

W
E
E
K

3

Mon
Feb
6

2:00-3:30
Topic:Cacading Style Sheets 2 - Placement
• Containers, nesting, cascading placement
• Using Left and Right floating
• Q&A

3:40-4:30
Guided practice
CSS positioning & other options View Instructions

Resources:
Click here and view the first five clips in Using Dreamweaver's Starter Pages

Wed
Feb
8

 2:00-3:30
Prepping image files for the web with Photoshop

 Resources:
Assignment for today: You will be given a small site project to assemble using Dreamweaver using these required guidelines. Help will be provided when needed. The purpose is to ascertain your readiness to proceed with more complex material.

Assignments will be turned in to the instructor for evaluation at end of class. Leave your computer on with your root folder open in the finder.
If you've missed class, you can zip up the root folder and attach it to an email to me here		  

W
E
E
K

4

Mon
Feb
13

Group instruction: Introduction to Flash drawing tools, Preparing and importing Photoshop files, creating Graphic symbols Using the Flash timeline, motion tweening, creating Movie symbols.

In-Class Assignment for today: Create a simple animated scene that demonstrates motion tweening (object location, scaling, color)

Resources:
Flash concepts

Online tutorial on building a scene with nested symbols that are animated on a timeline

Wed
Feb
15

Group instruction:
Creating Button Symbols; Animated Flash buttons; Publishing to web

In-Class Assignment for today: Create a Flash button

Resources:

How the Flash stage displays nested symbols for editing
W
E
E
K

5

Mon
Feb
20

 NO CLASS today (President's Day)
NOTE: We will NOT be meeting on Tuesday the 22nd.

Wed
Feb
22

 Group instruction: Flash Behaviors and Actions, part one.
In-Class Assignment for today: Create a simple animated scene that demonstrates button behaviors and frame actions		 Resources:
W
E
E
K

6

Mon
Feb
27

Group instruction:
Flash Behaviors and Actions 2

In-Class Assignment for today: Assemble a simple animated scene, with help from the instructor, that demonstrates preloading, button behaviors and frame actions

Resources:
MIDTERM PRACTICE FILES
These are previously given exam projects. The goal is to re-create an interactive flash banner using graphics that are provided to you.

Sample 1: Babyfloat banner ad
This silly ad demonstrates the use of nested symbols, frame actions, and button behaviors. Download the graphic files and see if you can create the flash you see in the preview using them. Download the FLA file to see how the banner ad is constructed in Flash. This is an actionscript 2.0 project.
Preview Flash • Download files • Download FLA
Sample 2: Pilot Chow banner ad
This is quite similar to sample one. Use the instructions to build this project from scratch. This project requires that you create a new actionscript 2 flash file.
Preview Flash • Download files • Download instructions
Sample 3: UFO shooter
A more complex, yet simple 'shooter' game where a moving button is the target. A correct click on the button wins the game. This project uses sound effects. (Actionscript 2.0)
Preview Flash • Download files • Download FLA
Sample 4: Walk for heart health
This ad uses an imported GIF animation but is fairly similar to sample one and two.
Preview Flash • Download files • Download FLA
Sample 5: Kepler Space Telescope
Preview Flash • Download files

Wed
Feb
29

Midterm Exam Practice
In-Class Assignment for today: Reverse-engineer one of these flash movies, with help from the instructor, using the files provided. Note how the movie works- scrutinize what parts move relative to other parts to determine how graphic, movie, and button symbols should be built, and timeline actions, layering, and frame names are applied.

W
E
E
K

7

Mon
Mar
5

Midterm Exam Practice II

2010 Midterm ROBOT RICKSHAW
Preview Flash • Download Files • Download FLA

Wed
Mar
7

Midterm Examination

Create a new folder for your work in the Student volume.
Title it with your name, plus 'Midterm 2012'.
Create a new Flash project (Actionscript 2.0).

Download files and import into the library of your flash project.

MIDTERM 2012 PREVIEW

Reverse-engineer this movie you see in the preview.
When you have completed the test, leave your computer running, and leave your named folder in plain view so I can copy it to take home for grading.
Midterms will commence promptly at the beginning of the class period.
You will be allowed to use whatever notes or internet assistance you please, but no sharing help with your fellow test-takers.
W
E
E
K

8		 Mar
12

Mar
16 		Spring Recess
W
E
E
K

9

Mon
Mar
19

Midterm review and correction. Final Project concept discussion

  

Wed
Mar
21

Final Project brainstorming session.
Assignment for today: Be prepared to declare your final project idea in an outline format

 
W
E
E
K

1
0

Mon
Mar
26

 Present detailed plans (a storyboard) for your final project to the class.
Assignment for today: Present storyboard/sketches/plans for final project. Be specific about how Flash and Dreamweaver are to be integrated. 		 

Wed
Mar
28

 In-class tutorial: More you can do with Actionscript 2.0  
W
E
E
K

1
1

Mon
Apr
2

 Working with Audio in Flash  

Wed
Apr
4

 Working with Video in Flash  
W
E
E
K

1
2

Mon
Apr
9

 In-class tutorial: Putting it all together, uploading to a hosting service via FTP.  

Wed
Apr
11

 Work on final projects in class with help from the instructor  
W
E
E
K

1
3
 Mon
Apr
16		 No class today (Patriot's Day)
Wed
Apr
18		 No class today (Staff development day) Friday April 22: Last day to withdraw
W
E
E
K

1
4

Mon
Apr
23

 Work on final projects in class  

Wed
Apr
25

 Work on final projects in class  
W
E
E
K

1
5

Mon
Apr
30

 Work on final projects in class  

Wed
May
2

Work on final projects in class  
W
E
E
K

1
6

Mon
May
7

Work on final projects in class  

Wed
May
9

 Last official day of classes- Work on final projects in class  
W
E
E
K

1
7

 

Mon
May
14

Extra class added (2pm-4:30) Work on final projects in class

 'Hosting Help'
Wed
May
16

 

FINAL PROJECT CRITIQUE
ALL FINAL PROJECTS MUST BE ONLINE
All students will present their uploaded work for evaluation and discussion.
BRING YOUR PROJECT ON CD or a Thumb Drive in case the internet goes down, or if you have not uploaded to a hosting service.

Room will be open at 2pm... Critique will commence at 2:15

Email me at dave@handofdave.com with your site URL

 
 
Tues
May
22		 Final grades must be submitted Wed May 24 by noon.
Absolute last minute deadline for uploading changes will be 9am !