1. Always save your emailed assignments on your own computer as a backup. I delete your emails from my computer as soon as I grade them.

Lesson Plan 

Session 2.3, pp. 108-124

• Creating a Thumbnail Picture, p. 108

p. 108, Step 3. To create thumbnails efficiently: Insert the full-sized picture file on the Web page first, then save and name it in the Images folder; create the thumbnail image next by clicking the Auto Thumbnail button on the Pictures toolbar; when you save again, the suggested name for the thumbnail image will be the full-sized picture name plus _small thereby making it easy to associate the two files.

• Changing Picture Characteristics, p. 109

p. 112, Step 6. Text is stored in a separate gif file in the _overlay folder. This might be helpful information when troubleshooting these overlays.

• Creating an Interactive Button, p. 114

p. 117. To see a list of FrontPage applets that you can use for special effects, go to http://www.frontlook.com/default.asp and click Downloads for some free sampler downloads. The Read Me file will have directions for use. I have installed a page effect (falling leaves and bird sounds) and a cursor effect (seed chasing the cursor) to this page. Michele Padilla  in her Final Web site, Chavez Ravine, used some Java script that is very interesting. The confirmation page generated after filling in the form on the Feedback page contains Java Script Date image that changes daily. I've never directed students before to look at the Final page but this is worth the visit! Mouse over the "Hi" hyperlink at the bottom of the page. Click here for interesting sites if you like Java.

p. 117, Step 5. To create a hover button with a custom picture and link to sound file similar to the home page for this Web site: Create and save your sound file (Start, Programs, Accessories, Entertainment, Sound Recorder) and image file first and write down the exact image height and width; click the Web Component button, Dynamic Effects, Hover Button, Finish; in the Link to box, browse to the sound file; in the Width and Height boxes, enter set the exact width and height of the picture; choose the desired Effect and Effect color; click Custom, and under Custom, Button, browse to the image file, OK, OK.

• Using Dynamic HTML, p. 118

p. 121, Step 7. To add a DHTML effect on mouse over: (mouse over this text first to see the sample effect.) Select the desired text; from the DHTML Effects toolbar, click the list arrow for On <Choose an event>, Mouse over;  click the list arrow for Apply<Choose an event>, Formatting; click the list arrow for the <Choose Settings>, click Choose Border; for this example, Borders tab, Settings—click Box, Color—Green; Shading tab, Background color—yellow from theme, Foreground color—maroon to set text color; click the list arrow for the <Choose Settings>, click Choose Font, and make desired changes.

p. 121, Step 7. To add a DHTML effect on click: (Click the red words to the left first to see the sample effect and refresh when you're done.) Select the desired text; from the DHTML Effects toolbar, click the On <Choose an event> list arrow, Click;  click the list arrow for Apply <Choose an event>, Fly out; click the list arrow for the <Choose Settings> box, click To bottom-right by word.

p. 121, Step 7. To add a DHTML effect on mouse over to picture: (click the pointing finger graphic first to see the sample effect.) Select the desired picture; from the DHTML Effects toolbar, click the list arrow for On <Choose an event>, Click;  click the Apply list arrow for <Choose an event>, Swap Picture; click the list arrow for the <Choose Settings> box, click Choose picture and select desired swap picture.

• Examining the HTML for Pages with Special Effects, p. 121

Review Assignments, pp. 125-126. We will make additional changes to the garden Web site together.

Publishing Garden Web Solutions to the Server

garden Web site solution: At the end of each tutorial, I will publish to the garden Web so that you will always have the correct solution for the next tutorial.  You will find it at http://ca112.lacitycollege.edu/ca112axx/garden in which xx will be replaced by your assigned publishing number. You will then be ready to open garden as it should be after the Review Assignment on p. 126 and continue working on it in Tutorial 3. As always, the best way to learn to use FrontPage is to practice; therefore, publish the garden Web site you have been working on in class to http://ca112.lacitycollege.edu/ca112axx/gardenPractice, open gardenPractice, and continue working on it as desired.

Case Problem 2, pp. 129-130, Garden Grill. Start your homework today in class—see the assignment below. It's an excellent time to get individual help—don't be afraid to ask for help. Each time you see this computer icon at the left, you know you can plan on lab time in class.

Note: We will complete Steps 1-6 together.

Step 1: Open the grill Web at http://ca112.lacitycollege.edu/ca112axx/grill.

Note: Data disk files to help you create the Web site at home for these case problem can be found at Z:\CAOT 112\Tutorial.02\Case2, or click here for steps to download to download them from the Internet. All inserted files can be found in the Tutorial.02\Case 2 folder.

Step 2: In Folders view, change the home page title to Garden Grill.

Step 3: Display the Folder List, select the root folder, and import jobs.htm from the Tutorial.02\Case 2 folder. Open jobs.htm in Design view.

Step 4: In the centered paragraph at the top of jobs.htm, insert link_bar.gif. In a new, centered paragraph below the inserted picture, insert garden.gif. Save the page and save picture files in the Images folder.

Step 5: Create two hotspots in the appropriate rectangles in the link bar of the Job Opportunities page so that one opens the home page and the other opens the jobs.htm page. Then create hotspots using the text entries in the picture link bar to open new pages that you create as follows: Menu opens menu.htm; About Us opens about.htm; Franchise opens fran.htm; Feedback opens feedback.htm; and Search opens search.htm.

To create new pages as you create hyperlinks: In the Insert Hyperlink dialog box, click the Create New Document button on the Link to bar; type the filename in the Name of new document box. Click Edit the new document later, OK.

Step 6: Highlight the hotspots, make sure they don't overlap each other, and save the page.

To change the size of a hotspot: Turn off the display of hotspots, click a hotspot to select it, and use a sizing handle ot change its size. Turn off the hotspot highlights.

Homework 

T2WS, 30 pts.: Case Problem 2. On p. 129, read the introductory paragraph only and then follow the steps listed below rather than those in your book.

When you received your grade for T1WS, you should have saved that e-mail message. Open it now and use it as a checklist to be sure that you have made all corrections on the list. I will DEDUCT POINTS AGAIN for any errors you leave uncorrected from the previous tutorial. I will DEDUCT MORE POINTS if you do not paste in my e-mail message showing your previous your grade! When I am forced to look up your grade for you, my valuable time is wasted because you haven't done your job—please cooperate on this. You'll be glad you did.

When you are finished, your pages should have the information arranged and formatted exactly like these screen shots. I check for typos, formatting errors, and attention to detail; so examine your home page carefully.

You will see this Expand to regular size icon appear in the lower right-hand corner of your browser window when you click a large thumbnail like jobs.htm. Click it to enlarge and sharpen the picture.

Step 7: Use Folders view to change the titles of menu.htm, about.htm, fran.htm, feedback.htm, and search.htm to Menu, About Us, Franchise Info, Feedback, and Search respectively.

Step 8: Include your e-mail address in a new paragraph at the bottom of jobs.htm below For additional information, please contact us:

Step 9. Save jobs.htm, and copy the link bar picture and hotspots. (Hint: To copy the picture and the hotspots you created, click the link bar to select it and click the Copy button.) Open the home page, select the text link bar, and paste the picture you copied in its place. After pasting, center the picture if necessary, and point to each text entry in the link bar to make sure you copied all hotspots. If you didn't, repeat the copy/paste steps. Save the home page.

Step 10. Select the root folder in the Folder list and import about.htm, replacing the page you created in step 5. Caution—make sure about.htm is closed before you import it or it will not be replaced! Review the page contents. Move to jobs.htm and copy the link bar picture and hotspots. (Hint: To copy the picture and the hotspots you created, click between the hot spots on the picture itself and click the Copy button—if you click a hotspot instead of the link bar picture, the copy button will be dimmed.) Move back to about.htm, select the link bar picture with the broken link, and paste the picture you copied in its place. After pasting, center the picture, and point to each text entry in the link bar to make sure you copied all hotspots. If you didn't, repeat the copy/paste steps. Save about.htm.

Step 11. A page should never have a link to itself on the link bar. Therefore, on the home page, remove the hotspot over Home on the link bar. On jobs.htm, remove the hotspot over Jobs. On about.htm, remove the hotspot over About Us.

Step 12. Replace the Welcome to Garden Grill heading on the home page with garden.gif. Add the alternative text Garden Grill logo to the picture, and save the home page. Save  garden.gif in the Images folder.

Step 13. Insert a horizontal line above the copyright information on the home page. Change the line properties to 95%, 5 pixels high, and purple.

Step 14. In a new paragraph above the horizontal line, insert a centered, scrolling marquee that is 95% of the window's width with the text See the store manager for information about our new catering services! Change the marquee's text to  Arial, 10-point, bold, white font. 

To change the font in a marquee: Click the Style button in the Marquee Properties dialog box, Format, Font, to change the font color and style. If that doesn't work, click the marquee and change the font from the Font box on the Formatting toolbar.

In the Marquee Properties dialog box, use the Background color list arrow to change the background color of the marquee to purple.

Add a 3-pixel padding to the top, bottom, left, and right border of the marquee. To add internal padding to a marquee: Double-click the marquee; click Style, Modify Style, Format, Border, Borders tab, Padding—Top, 3 (or desired number), Padding—Bottom, 3 (or desired number), OK, OK, OK.

Save the home page. 

Step 15. In the Job Opportunities page, change the e-mail address at the bottom of the page to an interactive button. (Hint: Select the text in the mailto link and then open the Interactive Buttons dialog box. Change the button text to your e-mail address, then click Browse. Click the E-mail address button. Type your full e-mail address in the E-mail address text box or select your e-mail address in the Recently used e-mail addressees list. In the Subject box, type Job Opportunities Page. Click OK.) Change the button's properties to select a button type of your choice, increase the button size as needed so it displays your complete address, change the original, hovered, and pressed font colors to complementary colors of your choice. Save the page and save the image files in the Images folder.

Step 16. Test the hyperlinks in your browser including the interactive button and fix any problems.

Step 17. When you are finished with all steps for grill, open grill in Internet Explorer. Click inside the Address box and press Ctrl-C to copy the URL. Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to your Web site appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T2WS.

• Your URL should be http://ca112.lacitycollege.edu/ca112axx/grill/ with "xx" changed to your directory number.

When you receive your grade for T2WS, open Grill and correct all errors as noted in my e-mail to you before beginning T3WS. Any errors that are not corrected will result in another deduction in T3WS. Reply to my e-mail with the list of corrections as soon as you have fixed all problems. I will make note of it and you are then ready to continue to the next tutorial. I will use the list of corrections as a checklist to be sure you made all changes.

• Test, Tutorials 1-2: Study for a 60-minute, 50-question objective test on Tutorials 1, 2, to be taken next week. The best way to prepare is to study the Quick Checks in the book and the practice tests:

  http://caot.lacitycollege.edu/112/TestsPractice/tutorial_1_practice.htm

  http://caot.lacitycollege.edu/112/TestsPractice/tutorial_2_practice.htm

  There will be a hands on portion of the test also. Similar to your homework assignments

   

  Read through Tutorial 3 and complete the Quick Checks.

Extra Credit 

Extra credit assignments are due no later than Sunday evening.