Week 14

Lesson Plan

Finish T5WS, Case Problem 2. Finish as much of this in class as possible since I am there to help you the entire class period.

E-mail assignments with this e-mail icon to me no later than Sunday at noon unless otherwise announced. No assignments are accepted late. In all e-mail messages, the subject line should be Your Name, last 4 numbers of your student ID, project ID.

T5WS, 30 points: Case Problem 2. follow the steps listed below rather than those in your book.

Meghan Elliott wants to replace the existing menu.htm page with a frames page that will open four pages in its main frame to list specials in four menu categories: Appetizers, Sandwiches, Entrees, and Desserts. Information will be organized on these pages in a table.

Step 1: Open the Grill Web site. Make sure you have made all the changes I indicated when I graded your Web site before beginning this case problem.

Step 2: In Folders view, select the app.htm, desserts, htm, entrees.htm, and sand.htm pages, and turn off the bottom shared border for these selected pages ony. (Hint: To select multiple files, click the first file, press and hold Ctrl, select the remaining files, and then release Ctrl.)

Step 3: Rename these pages as follows and update any hyperlinks.

Rename menu.htm to frameset_menu.htm.
Rename app.htm to frame_main1_app.htm.
Rename entrees.htm to frame_main2_entrees.htm.
Rename sand.htm to frame_main3_sand.htm.
Rename desserts.htm to frame_main4_desserts.htm.

Step 4: Study the screen shot of the frameset page you will create before beginning. Use the Contents frames page template to create a frames page. Save the page with the filename frameset_menu.htm and the title Menu. Overwrite the existing frameset_menu.htm page when you save it and update any hyperlinks.

Step 5: Create a new page in the contents frame (the frame on the left) with the filename frame_contents.htm and the title Contents. Rather than creating manual hyperlinks from the contents frame to open pages in the main frame, you will insert a link bar.

Change to navigation view and verify that the main pages (Appetizers, Sandwiches, Entrees, and Desserts) are child pages of Menu. Edit the navigation button names as needed. Insert a link bar based on the navigation structure in the contents pane with the last bar style (underlined links), vertical orientation, style set to display Same level.

Drag frame_contents.htm into the navigation structure on the same level with the main pages (Appetizers, Sandwiches, etc.). Right-click it in navigation view and deselect Included in Link Bars.

Insert a blank line above the link bar and type Home. Add a hyperlink to the home page and set the target frame to Whole Page to display the home page in a whole window. Test all links to be sure they work and display properly.

Step 6: Set the Appetizers page as the initial page in the main frame.

Step 7: Create the table for the Appetizer page shown below using these table settings:

		Appetizers

Type (or copy/paste) this information in the tables as shown in the screen shots, and right-align Column C and left-align the Columns A and B.

Appetizers
Menu Item, Description, Price
Buffalo Wings, Hot and spicy chicken wings, $3.25
Cheddar Peppers, Stuffed jalapenos with cheddar cheese, $2.95
Chips and Salsa, Lots of freshly-baked chips and hot sauce, $1.50

Apply a Table AutoFormat using the Classic 4 style in the Table AutoFormat window. Set the width of the table to 70 percent.

Step 8: With the insertion point inside the Appetizers table, click Table, Select, Table, and copy the table. Open the Entrees page and paste the table. Do the same with the Sandwiches and Desserts pages. Edit the table content as indicated below. Your tables should look like those in the screen shots below when you are finished.

Sandwiches	Entrees	Desserts

Type (or copy/paste) this information in the tables as shown in the screen shots, and right-align Column C and left-align the Columns A and B.

Sandwiches
Menu Item, Description, Price
Club Sandwich, A triple-decker sandwich with ham, turkey, and bacon and served with potato salad, $5.95
Cheeseburger, Cooked to your specifications, and served with home-style fries, $5.50
Vegetarian Sandwich, A delicious vegetarian choice served on wheat bread with steamed vegetables, $4.25

Entrees
Menu Item, Description, Price
Pasta primavera, A light pasta dish with fresh vegetables, $5.95

Spaghetti and Meatballs, An old favorite, served with lots of sauce and garlic bread, $5.75
Chicken Salad, A delicious meal—broiled chicken with salad greens, ham, egg, and your choice of dressing, $4.95

Desserts
Menu Item, Description, Price
Chocolate Cake, Double-decker cake with chocolate cream cheese icing, $3.95
Key Lime Pie, Made with fresh limes, $2.95
Vanilla Pudding, Made with skim milk for a low-fat alternative, $1.95

Step 9: Create a new frame in the Menu page by splitting the contents frame. Hold Ctrl and drag the bottom border of the contents frame up about 2 inches to create the new frame. Next, create a new Web page in the new frame with the filename frame_contact.htm and the title Contact Us. In the new frame, type Didn't find your favorites? Specials change each week! Increase the size of the new frame to best fit the text. See the screen shots.

Step 10: Test the frameset page in a browser. Increase the height and width of the contents and contact frames as needed so they do not contain any scroll bars.

Step 11: Paste a screen shot of your folder list and navigation view as shown here into homework.htm. Your Web should be organized and files and titles named exactly as shown here.

Step 12: Paste a screen shot of your navigation view and frameset page as shown here into homework.htm.

Step 13: inside the Address box and press Ctrl-C to copy the URL to grill. 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, T5WS.

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

Step 14: Next, open homework.htm in Internet Explorer by clicking the Preview button. Click inside the Address box and press Ctrl-C to copy the URL to homework.htm. Paste the URL into the body of the message on a new line below the grill URL. You should see a hyperlink to homework.htm page appear.

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

Tutorial 6: Publishing a Web Site, pp. 335-402

Session 6.1, pp. 336-356

Creating a Page That Searches a Web Site, p. 336

p. 342. To use Google to search your Web site or the WWW, go to http://www.google.com.au/searchcode.html#both. This one searches either the web, or your own site just like our own Google Search page.

Creating a Page That Contains a Form, p. 342

This is a great Web site to get tips and tutorials on form creation. Go to http://frontpageforms.com/.

Session 6.2, pp. 357-372

Validating a Form Field, p. 357
Adding a Check Box to a Form, p. 359
Working With Push Buttons, p. 361
Using a Form Handler, p. 363

p. 365, Step 3, added steps. Save Results form handler. Right-click the form, Form Properties, Options, File Results tab. Save the form results in a second *.htm file named Feedback.htm in the _private directory. An *.htm file is easier to read than a *.csv file, but the *.csv file is the format you need to manage the information in a spreadsheet or database; therefore, you should use both. Include field names in the *.csv file so that Row 1 in Excel will have the field names as column headings. Uncheck Latest results at end so that the most recent entry appears first in the *.htm file and check Include field names to identify the fields.

p. 365, Step 5, added steps. Save Results form handler. Save these form results to your LACC e-mail account by filling in your LACC student e-mail address in the E-mail address box. You must send your form results to your LACC e-mail address to avoid permissions issues with our server. See steps below.

Note: Your LACC e-mail address begins with your userID (also known as your alias) followed by @email2.lacitycollege.edu. The userID is composed of:

First 2 letters of your first name;
First 2 letters of your last name;
Last 5 digits of your student identification number.

Accordingly, a student named John Smith with a student identification number of 123-45-6789 would have a userID of josm56789. His e-mail address would be josm56789@email2.lacitycollege.edu You might want to copy and paste @email2.lacitycollege.edu into the Email Address field and then add your user ID in front. Your 4-digit password is composed of two numbers representing the month and two numbers representing the day of your birthday. For example, if John Smith was born on January 2, his initial password would be 0102.

To check your LACC Student e-mail, click here to go to the LACC Web site. Click Student Services in the left panel. On the Services page, click Student E-Mail Service--Log-In.
		In the User name box, type *lacc_uia\* followed directly by your user name just like you do to open your Web sites (for example, **lacc_uia\josm56789**). Fill in the password (your birthday) in the Password box, and you should gain access.

p. 365, Step 5, added steps. Save Results form handler. Right-click the form, Form Properties, Options, E-mail Results tab. Under E-mail format, check Include field names so the results are easy to understand. Leave the Subject line box empty so that the subject line defaults to Data posted to form 1 of . . . In the Reply-to-line box, include the E-mail Text box name of UserEmail so that when you click Reply to write to the visitor, that visitor's e-mail address as submitted on the form appears automatically in the To box.

p. 365, Step 7, added steps. Save Results form handler. Right-click the form, Form Properties, Options, Saved Fields tab. Under the Saved Fields tab in the Form fields to save list, delete the Submit form field. Add Date format and Time format fields so that these fields are returned with the form results so you will know which record is the most recent. If you edit the form later, you must return here and click Save All to add the new fields to the confirmation page.

p. 366. To add a file upload control to a form so visitors can upload files to be stored on your Web site: Insert, Form, File Upload. Edit the form as desired. Create a new folder to store uploaded files (perhaps /Upload). Right-click the form, Form Properties, Options, File Upload tab; under Destination, browse to folder you created to store uploaded files, OK. Double-click the file upload text box; in the Name box, type a name to identify this form field (perhaps FileUpload) on the confirmation page. If you want text to appear in the text box when a visitor first opens the form, type the text in the Initial value box. In the Width in characters box, type the desired width and publish to the server. Live on the server, right-click the new folder you created to store uploaded files, Properties; clear Allow scripts to be run so that the following two options will be available: check Allow anonymous upload to this directory and check Allow uploaded files to overwrite existing file names if you want existing files to be overwritten; OK. To download the files, go to the URL followed by the name of the upload directory. The uploaded files will be listed there for opening or downloading. The upload control form looks like this:

p. 366. To add included content from a page with a form: Steve Sakai, a former student, has used a web component feature in his form in an ingenious way on his Guest Book page of his Final Web site. You first create a form and set it to save it to a separate file as described above. Below your form use the included content page feature where the content of one page is appended into another: Insert, Web Component, Included Content, Page, Finish, and browse to the form results page. When a visitor clicks Submit, returns to the page, and then refreshes the browser, the visitors' current comments will be displayed.

Testing a Form on a Client, p. 366
Opening an Office Document from a Web Site, p. 367

p. 367, Step 10. When you click Submit, the form should go through fine because we are on a server and you have typed in your LACC e-mail address.

p. 369. To add a Word and Excel viewer so visitors can open files from your Web site even if they don't have Office installed:

If you don’t have Excel installed, click here to install the Excel Viewer. With Excel Viewer 2003, you can open, view, and print Excel workbooks, even if you don't have Excel installed.
If you don’t have Word installed, click here install the Word Viewer. Word Viewer 2003 lets you open Word 2003 documents even if you don’t have Word installed.
Viewing the HTML Tags That Create a Form, p. 370

Tutorial 6: Publishing a Web Site (cont'd), pp. 372-402 (372-383 skipped)

Session 6.3, pp. 372-400

Using a Web Server, p. 372-375 (skip)

We will skip pp. 372-375. It doesn't apply in our classroom.

p. 372. To determine Windows version to see if your computer at home can function as a Web server: Right-click My Computer, Properties, and the version of Windows you are using will be displayed. Windows XP Professional must be in use for IIS to be installed.

Publishing a Web Site, p. 376 (skip)

We will skip Publishing a Web Site, pp. 376-383, was covered at the end of Tutorial 1 in the second week of class.

p. 377, Step 4. To publish a Web site to a disk-based Web: From the Remote Web Site tab, click File System. Click Browse and browse to a folder you created previously with the desired Web site name, and click OK. if your Web won't publish, go to the target destination outside of FrontPage and create a regular folder with the same name as the Web site first then try publishing again.

p. 379, Step 8. Remote Web Site Properties: the next time you publish this Web, FrontPage will default to these settings including the destination; review these settings when publishing to be sure they're the ones you want.

Processing Web Pages on a Server, p. 384 (start here)
Using a Hit Counter, p. 389

p. 389. To edit a form and the form results file after data has been submitted by visitors: Sometimes after you have created a form, you will want to delete, add, or change form fields. You must take special steps to do this.

Edit the form on the disk-based Web as desired and save it.
Right-click the form and choose Form Properties, Options, Saved Fields tab; click Save All to update all fields and delete any unwanted fields such as Submit.
In the _private folder, right-click the *.csv file and click Don't Publish so that when you publish to the server, you will not overwrite the *.csv file on the server that already has data entered.
Open the Web live on the server, open *.csv file in the _private folder, and insert or delete any columns as needed to match the edits you made in the form; use the exact names for the column headings that you used to name the form fields.
Close the edited *.csv file; click Yes to save changes to the *.csv file; click OK if you are prompted that the file could not be accessed; click Yes when you are prompted to save changes; click Save in the Save As window; click Yes when prompted to replace the existing *.csv file; click Overwrite and OK when prompted to overwrite the changed *.csv file; click Yes when prompted that the *.csv file may contain incompatible features.

p. 391. To create a custom hit counter: If you don't like the appearance of the default hit counter graphics as shown on p. 6.50, you can customize the hit counter. Create a custom picture in gif format, which must include the numbers zero (0) to nine (9), evenly spaced and should resemble the images shown in the Hit Counter Properties window. Make sure the width of the image is divisible by 10. You can also draw a picture, scan it, and save it as a gif image. You can create WordArt in Word (Impact, 14-pt. bold is a good choice for a font) and paste WordArt into FrontPage as an Image Tag (click the Paste Options smart tag arrow and click Paste as an Image Tag) so you can save the WordArt as a gif file. Save this gif file in your Images directory and remember what you name it—you might want to name it custom.gif. (Note: if a red X displays in the browser after you're done, try going into the Custom Picture box and changing the path in the Hit Counter Properties window to _borders/images/custom.gif. Also, be sure you are previewing page in browser rather than local drive.) Click the Web Component button; under under Component type, click Hit Counter, Finish; in the Hit Counter Properties window, click Custom Picture and type the exact path including the folder to the gif file you saved—for example, /images/custom.gif; click OK. Next, you should create another gif file with a matching font to serve an the introductory text.

Here is an example of a custom hit counter gif image created by a former student who needed a hit counter for an elementary school Web site. It was hand-drawn and then scanned:

Here is an example of the gif image scanned in to serve as the introductory text:

Here is what the hit counter looks like in FrontPage in Page View:

Here is what the hit counter looks like published:

Here is an example of the same gif images created in Word using WordArt with the font Impact 14 Bold pasted as an Image Tag in FrontPage:

IntroText.gif Hit Counter custom.gif Published

Recalculating and Verifying Hyperlinks, p. 391

p. 392, Steps 1 and 2. Click the Web site tab; click the Reports button at the bottom, then click the Verifies hyperlinks in the current web button in the upper-right hand corner.

Setting Permissions for a Web Site, p. 394
Going Live, p. 399

p. 399. Alpha Ware KISSfp Add-on for FrontPage that provides an enhanced way of publishing FrontPage-created Web sites to Web servers that do not support the Microsoft Office or FrontPage Server Extensions. KISSfp is ideally suited to publish your Web pages on multimedia CD-ROMs, and for using FrontPage with free hosts, which generally do not have Server Extensions loaded.

Review Assignments, p. 401. We will skip the review exercise this week.

Homework

Test, Tutorials 4-6: Study for a 60-minute, 94-question objective test on Tutorials 4, 5, and 6 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_4_practice.htm

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

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

If you go back and change a name, a group name, or a value in any of your form fields, remember to go to Form Properties, Options, Saved Fields tab, and click the Save All button to update your fields so that changes will be reflected in your Confirmation page, etc.

Note: This assignment was started last week but is due the end of this week along with T6PT. Planning Analysis Sheet (PAS), 20 pts.

T6PT, up to 10 points: The URL for Tutorial 6 Practice Test is http://caot.lacitycollege.edu/112/TestsPractice/tutorial_6_practice.htm. When you click this URL, the Tutorial 6 Practice test will open in your browser. Type your name in the Name box, answer each question, then click Check Your Work. You may retake the test as many times as you want until you earn the desired score.

When you are satisfied with the score, paste a print screen into homework.htm that shows your name and the score. Paste the print screen at the top of the page so your most recent test is always shown first. When you are finished, open homework.htm in Internet Explorer by clicking the Preview button. Click inside the Address box and press Ctrl-C to copy the URL to homework.htm. Open your e-mail client and paste the URL into the body of the message. You should see a hyperlink to homework.htm appear. The e-mail subject line should be Your Name, last 4 digits of your student ID, T6PT.

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

90-100%	=	10 pts.
80-89%	=	5 pts.
Below 80%	=	0 pts.

Continue working on the Final Web site. See the Final Exam page for due dates and details.

Extra Credit

None this week.

Last revised Monday, May 05, 2008 08:39 PM.

Week 14, May 6 and 8

Lesson Plan

Homework

Review Assignments, p. 401. We will skip the review exercise this week.

Extra Credit