Web Page Lesson Plan

Goal: Students will create web pages that provide a service for people or visitors in Palo Alto. They will use an html editor, Adobe PageMill, and include the following: an imagemap, sized text, background colors, horizontal rules, icons, list or table, and links.

Anticipatory Set: Discuss goals of the project a week in advance so that students can begin to formulate a theme and take or collect pictures. Students turn in a tentative plan at the end of the week.

Day One Objectives: Discuss goals of the project again

Uses of web pages in general
History of the internet-power point slide presentation
Design standards for web publishing-power point slide presentation of the elements and principles of art
Learning to search the web-demonstration and play game (contest to see who can find a specific piece of information first)
Evaluation of web sites-students use a spreadsheet form to evaluate websites

Day Two Objectives: Learn how to use Adobe PageMill

Review web site ratings of prior lesson and finish-ask why this exercise is important
Review saving procedures, desktop, create text folder and image folder
Go over the Menu basics
Using a theme that has already been chosen, students will create two practice pages and link them together.
Type some text at the top and center it, open inspector from the view section, change font, color and size
Change background color (gray is default-white is a good choice)
Make bullets and a list-go to Format>List>Choose One
Make another page that you can link to from one of the bullets
Show how to make a link to another page in PageMill
Test link in browser mode

Day Three-Five Objectives: Making a layout on paper of the web pages and creating an image for an imagemap

Discuss copyright issues
Review searching the internet on Altavista
Students have photos to scan or images from the web
Remind students to get starr locker numbers and passwords

Make a composite picture and manipulate images in Adobe Photo Deluxe

1. Open Photo Deluxe

2. Go to File>New File>double click on the saved image

3. Go to On your Own>Modify>choose trace tool in the rectangle bar

4. Select a portion of the image by option/shift/click method

5. Invert selection and delete

6. Invert selection again and use tools or special effects to change the image

7. Name and save the image

8. Close the window and go to File>New>double click on the other image

9. Select the new image and copy it to the clipboard

10. Close the second image and don't save

11. Open first image, resize the canvas if it is not big enough to accommodate the second image

12. Add a new layer>paste the second image in the new layer

13. Modify and move the images

14. Add text for an image map if necessary

Teacher show Adobe Photo Deluxe sample composite image

Day Six Objectives: Create layout of web pages

Discuss Header, Body, and Footer of a web page and what should be in each section
Turn in an outline on paper of the proposed web pages, including text and images
Review principles of design-how well are students following rules and tenets of good design
Discuss navigational tools-icons and internal text links
Work in PageMill on development of final project

Day Seven Objectives: Learn how to export image as a transparent gif and how to create an imagemap

Save>Export as Gif89 to image folder>select options>choose transparency
Demonstrate how to create an imagemap in Adobe PageMIll
Continue working on project

Day Eight-Twelve: Completion of Project

Discuss assessment rubric at the highest level
Compare rubric to the evaluation of web site form
Students save all work on starr and on disk
Students save an icon and one sentence on disk that will be used as a link to their web page