Summer 2010 Governors School 



Supporting Info/Files Tutorials 
Assignment 1 1) If you haven't already set up a free GoogleSites page. 

2) Create a "freewebs" account (Or an equivalent free hosting account).  


Optional FREE hosting:

Lime Domains



Using Google Sites

Setting up Freewebs account: 

Simulation: Step 1

Simulation: Step 2

Setting up Lime Domains account: 

Simulation: Lime Domains Tutorial 


Assignment 2 Create a basic HTML/XHTML page about yourself. Provide the following information:

1) A picture of something important to you (a pet, place, landmark, building, vehicle, etc). The picture must be your property 
and should not be a person (including yourself). 

2) Create a title for your page (using the title tag)
3) A link to your favorite website.
4) A short description of why you are taking the class and what you hope to learn. 
5) Save as bio.html and upload to your hosting account/space.  

W3C School

W3C website

Bandwidth Calculators 

File Size Calculator

More information about adding an image to an HTML document. 

Simulation: Tutorial 1

Simulation:  Tutorial 2

Simulation:  Tutorial 3

Simulation:  Tutorial 4


Assignment 3 Introduction to Adobe Dreamweaver CS4 

1) Create a basic web page and name it "index.html"
2) Add an image
3) Create an external hyperlink to another site
4) Create an e-mail hyperlink
5) Upload to your hosting site (ex, freewebs)

*Practice Images


Assignment 4 Using Adobe Dreamweaver CS4 to create a website. 
1) Create a link to the bio.html page created earlier (relative link).
2) Create a page and call it mywork.html.
Assignment 5 Looking at Artificial Intelligence and Ambient technologies. 

Computers as social actors (CASA Computers as Social Actors paradigm)


        Avatars on Cleverbot

 Human like robot in Japan

Human like robot in England

Facial expressions with robots

CASA (Computers As Social Actors) Paradigm


Human Computer Interaction

Assignment 6

Using Adobe Dreamweaver CS4 to create a spry dropdown menu.. 
1) Connect to your Google Sites account.
2) Create a page and call it dropmenu.html.
3) Save and create a link on your mywork.html website that connects to the dropmenu.html page.

  PART 1: 

Simulation: Creating menu bar using Spry technology

Creating menu bar using Spry technology Part 2

Assignment 7


Part 1: Creating a banner (using Adobe Photoshop)


1) Creating Static Banners Using Adobe Photoshop

2) Create 5 static banners - goal is to communicate a message via static graphics display (example: a product, theme, cause, etc). Each banner should consists of at least four layers or more.

3) Create a page in Dreamweaver and name it "banners.html" and create a link on the "mywork.html" page and call it "Banners."

4) Save each banner as a .jpg file and name each accordingly (example banner1.jpg, banner2.jpg, etc.).

5) Upload the "banners.html" page, "mywork.html," and the 5 static banners that you created. 

FREE Copyright Free Images

Informational Links:

Making money with banner ads (e-commerce), what are banners and how they works.

Digital Story Telling examples using still images: 

*American Photography: A century of Images (PBS Website)

Seven elements of digital story telling example (Video)

Vincent van Gogh Gallery (Website-still images)

Vincent van Gogh : Starry Night (Video)


*Practice Images

Simulations: Rectangular Marquee tool.

Simulations: Eliptical Marquee tool.

Simulations: Selecting a Color Range. 

Simulations: Magnetic Lasso tool.

Simulations: Magic Wand tool. 

Simulations: Moving selections between images

Assignment 8

Working with Adobe Flash

Part 1: Intro to Adobe Flash

1) Create a Photo Essay - Using Adobe Photoshop and Adobe Flash (via keyframes) create a photo essay slide show about any topic: natural disasters (ex: mountain top removal, oil spill), animal extinction, nature, sporting events (ex: World Cup), people, places, etc). Save the project (from Flash) as "photoessay.fla."

2) Publish (save/export) the slide show as "photoessay.html" to your web folder for upload to

3) Link the "mywork.html" to the "photoessay.html" and upload all associated files to Freewebs account (it is crucial to upload the "photoessay.swf"as well).

Part 2:

Create an Intro page for "mywork.html"name the page "index.html"

Photo Essays (Time Magazine/CNN)

Photo Essays (

Photo Essay (UNICEF)

Photo Essay (U.S. Department of Defense)

Photo Essay (All Africa)

Photo Essay (Magnum Photos)


Assignment 9

Creating Animated Banners Using Adobe Photoshop

1) Create 5 animated banner examples

Copyright Free Music:

FreePlay (

Royalty Free Music (

Incompetech (

Simulation: Importing the partially created static JPG banner

Simulation: Adding a text layer and adding a motion tween effect. 

Simulation: Making animated banner a link.

DOWNLOAD: Gas can image

Animated Banner example 

Assignment 10  

Digital Story Telling: seven tips (Website)

Seven elements of digital story telling example (Video)

Digital Story Telling - what its all about (Video)



Assignment 11  

Working with video clips

Assignment 12      
Assignment 13      
Assignment 14