Instructor's Lesson Plan for Weekend Course

1. Distribute materials: Course guide, Resume codes, folders, etc.
2. Students introduce themselves
3. Skim through course guide.
4. Give homework due Sunday, beginning of class: (a) Have answered in two-column format the Question Bank Questions in the Course Guide. Final exam test questions will be selected from Question Bank. (b) Read and take 1/2 page of notes on the article Handy Hints for Web Designers.
5. Pass around grade-choice (Audit/Pass) sheet.
6. Show how to answer Question Bank Questions. Revise questions 26, 33, 34, 44.
7. Overview of textbook
8. Overview of resources website. Refer students to notes for the June 2-4, 2000 class.
9. Stress organization of harddrive folders and files for websites should reflect same organization on the server.
10. Point out to students that throughout the weekend, we will be creating webpages using HTML, and then we will be repeating many of the steps by using Netscape Composer.
11. Show a simple template giving the basics of any HTML document. Point out that to see the codes, students must use the source/code view in their browser. (Similar template is in this file on the student diskette: HTMLprimerAll.)
12. Point out the importance of learning how to do your own sites by evaluating and viewing the source codes of good sites. See, for example, the Eden Pines Inn site in Rockport, MA. Note especially the links at the top and bottom of each page making navigation easy throughout the site. Also, note the webmaster used a table, only 525 pixels wide, to embrace all the text and graphics on the site, insuring that horizontal scrolling would not be needed regardless of the size monitor or the display settings. Also check out the code that combines a list and a table.
13. Show how to use the HTML codes present in two resumes to help in creating their own webpages. Refer to two different resumes -- first and second.
14. Now show the first and the HTML codes with line numbers. Print both the resume and codes out to use as a guide for entering HTML codes in the exercises.
15. Show and print out Crystal Clear Optical Web page that shows webpage with the HTML displayed right underneath.
16. Refer students to WebMonkey HTML Cheatsheet.
17. Optional: Have students create an http://www.asminor.info/lucky506/fall2000/index.html page giving links to all the webpages they create for this class and upload to their Geocities site. Refer students to the model index page I have created for them. Have them view the HTML code, copy it and save it to their website folder on the harddrive, and later upload this file to their Geocities site.
18. Go step by step through pages 32 to 42, guiding students in completing Exercise 1 on Barcelona in Course Guide.
19. For each exercise, print the source codes in Word, numbering the lines. Distribute to the class.
20. Have students redo Exercise 1 using Netscape Composer.
21. Show NCSA HTML Primer saved on the diskette given to students and also online.
22. Have students sign up for Geocities account so that they can upload HTML files created in class to their Geocities account. Guide students in doing Exercise 18. Also, see ftp below.
23. Refer students to the SmartComputing magazine's article on the top six free website hosting services.
24. Do Exercise 2 in Course Guide, applying codes in Resume to Barcelona page done in Exercise 1.
25. Review content of Chapter 3. Applying what is in this chapter, do Exercise 3 in Course Guide.
26. Referring to Chapter 8 in textbook, show students how to create various kinds of lists, and then have them do Exercise 17.
27. Have students re-create the same lists by using Netscape Composer.
28. Introduce students to Cascading Style Sheets. Skim over chapters 13 to 16 in their textbooks. Show students how to do Exercise 15. Show other resources in this website for Cascading Style Sheets including template for Style Sheet. (Must view source code to see style sheet coding.)
29. Point out another source from WebMonkey for information on Style Sheets.
30. Continue work on Style Sheets. Students will look at the style sheet codes behind this Excerpt from the Course Guide and then will do Exercise 20, changing the styles and noting how the changes are reflected throughout the webpage.
31. Have students view and change the style sheet tags for the Course Guide. Refer students to Exercise 22 in the Course Guide.
32. Point out the difference between external and internal style sheets. The file ss1.htm makes use of an internal style sheet while the Owl site uses an external style sheet. To view the external style sheet for the Owl site.
33. See Exercise 21 for work on linking files to an external style sheet. Show the students the three webpages on the Owls Team which are all linked to a style sheet named owlstyle.css. Use WordPad to open the owlstyle.css in the Styles folder on the harddrive or diskette. Note in the style sheet that there are no <STYLE> tag or any other HTML tag. See your notes. Refer to Creating a Web Page, by Paul McFedries, page 187. Also, our HTML text, pages 246-247.
34. Go onto Exercise 4. Students should resave chapter3.htm as chap3a.htm. Be sure to point out how you can use some colors (red, blue, purple, green) without codes. See Sixteen Predefined Colors in the inside back cover of your textbook. Also show WWI site with hidden comments. WWI site also is good example of marquee.
35. Review Chapter 4. Then guide students as they do Exercise 5 in the Course Guide. Show where you got the graphics for your own webpages. Have students copy in a harddrive folder the graphics you have on the Internet -- the duck, boathouse, storm clouds, kayak, and tree. All these graphics on jpg format. Show the students where they can find on their harddrive a gif graphic duck2.gif they will also copy to their harddrive folder graphics folder. This gif file at 449 kb is much too big for a webpage, but students will be using Photoshop to make it smaller.
    • Have students copy several other graphics from other webpages you have created including the dolphins, dancing clown, dividing bar, and the swinging bat.
    • Copy and modify my original photos stored on Yahoo's free photo album service.
36. Go onto Exercise 6 to have students apply Photoshop tools to the duck2.gif file. Begin with making images smaller on page 62. Show students they will end up creating a webpage showing a thumbnail duck image
37. Next to Exercise 7 where students will be required to add another copy of the duck thumbnail, but this time they will turn it into a link.
38. Make sure students are familiar with Chapters 4 and 5. Then go onto Exercise 8 in the course guide which requires students to compress a GIF graphic into JPG format. You have created a coffee website to illustrate how this exercise is be done. Note how jpg graphic does not make smoke as the larger gif format does.
39. To give students more practice in working with graphics, you can have them substitute the duck2.gif file for the coffee.gif file. They can find a jpg version of duck graphic. For all my photos for class use, click here.
40. Show four versions of the duck graphic, each having a smaller KB size. Ask students to contrast the quality, and point out the importance of balancing quality and loading-time.
41. Use the dancing apple website to illustrate the codes to align and scale graphics For graphic alignment, see page 93 in your text, and for scaling graphic size, see p 92.
42. Refer to Exercise 12 in the Course Guide, and also referring to page 84 in the text, have the students load the interlaced GIF89a graphic of the Canadian goose. Point out fast connection at the college may not allow them to see interlaced image loading gradually.
43. Have students repeat inserting, sizing graphics in webpages, but this time by using Netscape Composer.
44. Now turn to Exercise 13 where students will create a webpage that requires using a variety of HTML tags from various pages in the textbook.
45. Repeat Exercise 13, but this time have students use Netscape Composer. Refer to Chapter 19, beginning on page 271 of McFedries text Creating a WebPage. Some Netscape Composer items to cover -- templates, wizards, page titles, inserting images, and formatting.
46. Introduce forms by helping students do Exercise 16. Show them the Forms resource page having forms tutorials.
47. Discuss FTP. Show uploading webpage. Also show what the configuration set up should be for Dreamweaver to upload to Geocities. Next, show how Dreamweaver makes file management easy, juxtaposing what is on your harddrive and what is on the server.
48. Show various examples of sites using frames. Guide students in doing Exercise 19.
49. Help students complete the Class Project by using Netscape Composer.
50. Show students how to duplicate various section of the Course Guide by using Netscape Composer.
51. Give overview of promoting a website. Especially call attention to meta tags used to attrack search engines. Use View/Source to see meta tags in this excellent Rockport, MA site.
52. Devote most of Sunday's class to using Netscape Composer to create a site with multiple pages.
53. Final Exam, Class Evaluations, Question-Bank Questions, and submission of class-folders with all the exercises done during the weekend.
54. Optional, miscellaneous material -- from here to the end, cover this material only if time permits:
1. Uploading and displaying digital photos to the Internet using Yahoo free service.
2. Combining a list with a table. Have students copy the HTML code and substitute their own text.