Lesson Plan 

Tutorial 5: Creating Tables and Frames, pp. 265-326

Session 5.1, pp. 266-303

• Understanding Tables, p. 266

p. 266, Default table settings: I purposely changed table defaults to centered, 1 row, 1 column, no borders. Therefore, when you use the Insert Table button, your table will have these settings.
 

• Creating a Table Using the Insert Table Button, p. 267

p. 272. To align a table using the table tag: Click inside the table; on the Quick Tag Selector toolbar, point to the table button <table>, and click Select Tag; click the desired alignment button.
 

• Creating a Table Using the Insert Table Command, p. 281

p. 281, Step 2. To view bottom of Insert Table dialog box: The bottom of the Insert Table dialog box is hidden from view because of our low screen resolution and small monitors. This is a known issue that Microsoft is working on.
Workaround: With the  Insert Table dialog box open press, Alt + space bar; press M; press the up arrow key enough times to move the dialog box up until the bottom of the dialog box is visible, then click the mouse and click as desired. If this doesn't work, press Tab to move to the desired location and enter the desired choice. A checkbox can be selected by moving to the checkbox and pressing the space bar. The OK button is always highlighted and pressing Enter should accept changes made and close the dialog box. You could also right click the Taskbar, click Properties, then check Auto-hide the taskbar.

p. 282, Step 7. To set table defaults: Table, Insert, Table; check Set as default for new tables. Whatever settings you use here will be the default from that point forward. When you click the Insert Table button, the settings last used in the Insert Table dialog box will be in effect. I use Center Alignment, 640-pixel width, and if I use borders, I set 5 pixels for Cell Padding and Cell Spacing.

• Entering Data in a Table, p. 283

p. 285, Figure 5-20: Rather than typing the data manually in the Symptoms and Treatment columns of the table, try copying and pasting from the table below as follows: Drag across this table including the blank red column and row. In the lawn.htm page, press Enter under the existing table to make room to paste the table and paste it in. Select the first 5 rows and the first 2 columns of the pasted table (exclude the empty red column and row); click in the first cell under Symptoms and paste. Click inside the table you first pasted and click Table, Select, Table, Cut.
 

p. 287, Figure 5-21: Rather than typing the data manually in the Causes column of the table, try copying and pasting from the table below as follows: Drag across this table including the blank red column and row. In the lawn.htm page, press Enter under the existing table to make room to paste the table and paste it in. Select the first 5 rows and the first column of the pasted table (exclude the empty red column and row); click in the first cell under Causes and paste. Select all the pasted cells, right-click, and click Cell Properties; under Background, Color, click Automatic; Click inside the table you first pasted and click Table, Select, Table, Cut.
 

• Understanding Frames, p. 304

Q: Why use a frames page?   A: When you have multiple pages in a Web site (like the list of survey forms on the CAOT Surveys page or perhaps a list of items for sale) and screen real estate is not an issue, you might consider a frames page to display them. On our Assignment Sheet page, I chose not to use a frames page because I didn't want to lose screen real estate and because I included the Excel Spreadsheet information on the page so the page included more than just navigation bars.

p. 309, Step 9. To name files in a frames page for easy identification later: Try naming pages like this: Frameset.htm, Frame_Banner.htm, and Frame_Content.htm. Being able to distinguish amongst these files could be important such as in Item 15 of your Final Web site. You could also right-click the file, click Properties, Summary tab, and type a Comment which would be visible in Folders view. It is also a good idea to organize all frameset pages on a given topic into a unique folder.

p. 309, Step 9: Right-click irr.htm, click Properties, Summary tab, and type Frameset for the Comment which would be visible in Folders view.

p. 314. To manually specify a target frame: If you have trouble with the hyperlinks in the Contents frame displaying the target in the main frame, right-click the hyperlink and click Hyperlink Properties; in the Edit Hyperlink window, click the Target Frame button, and type main in the Target setting box. For a home page hyperlink, the target would be Whole Page or type _top in the Target setting box.

p. 319, Step 9. To create link bars in the banner and contents frame for navigation on a frameset page: It is better to use a link bar for navigation in a frameset page than it is to use manual hyperlinks. When pages are added or deleted from child level 1 pages or main pages or link bars, the link bars will be updated automatically. If you created manual hyperlinks, you will have to remember to update them each time and the chance for errors increases. Banner Frame: Drag the banner and contents page into the navigation structure under the frameset page. Unless you take this step, you cannot add link bars on these pages. Because you do not want these pages to show in a link bar, right-click both pages and deselect Included in Link Bars. Open the banner page, and insert a link bar based on the navigation structure in the contents pane using the horizontal style set to display Child pages under home; right-click and click Page Properties; under the General tab, Default target frame, click the Change Target Frame button; in the Target Frame window, click Whole Page, OK, OK. Contents Frame: Drag the main pages into the navigation structure on the same level as or under the contents page. Edit the navigation button names as needed. Insert a link bar based on the navigation structure in the contents pane using the vertical style set to display same level or child level, depending on where you have dragged your main pages.

p. 323: When we have finished Tutorial 5, I will create navigation in the frameset page, irr.htm, for Garden using FrontPage navigation link bars, banners, and shared borders that will mimic the navigation created in this tutorial for this frameset page. Click here to see a handout that summarizes steps to create frameset pages with link bars based on navigation structure. I will be demonstrating this approach in detail in two weeks when you create your frameset pages with me for your Final Web site. Navigation Frameset   http://caot.lacitycollege.edu/112/NavigationFrameset/ (click Lollipop Gifts link) Lollipop Creations   http://caot.lacitycollege.edu/112/FinalF/

Review Assignments, p. 325

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. 325 and continue working on it in Tutorial 6. 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.

Review Exercise pp 325-326 1-8 Only

Homework 

• Read through Tutorial 5 and complete the Quick Checks.

T4WS, 30 points: Follow all steps below .

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. Format the entire Web site with the Watermark theme applied as the default theme. Select the options to use vivid colors, active graphics, and a background theme.

Step 2: Change to Navigation view and create the navigation structure shown below. The Appetizers page, app.htm, Sandwiches page, sand.htm, Entrees page, entrees.htm, and Desserts page, desserts.htm do not exist. Create them in navigation view as new blank pages and assign their respective file names and titles. If you forgot the steps, look them up on pp. 212-215.

Step 3: In Folders view, right-click any blank area in the Contents pane, click New, Blank Page. Change the filename of the new page to specials.htm and title to Specials.

Step 4: Open the Specials page in design view, then create the content shown below. The pictures are found in the Tutorial.04\Case2 folder. Apply the Heading 1 style to "Today's Special" and "And may we suggest...". Match the WordArt for "Extra Hot Chili" as closely as you can in size but have fun with colors, fill, shapes, etc.

You may copy/paste the paragraph, captions, and descriptions below—remember to paste text only so that you don't pick up formatting. Save the Specials page and the pictures in the Images folder.

Step 5: In Navigation view, create a custom link bar named Specials that links to the home page and Menu page using a horizontal alignment and the Web site's theme for the style. Insert a blank line at the top of the Specials page, change the blank line's style to Normal, and insert the Specials custom link bar.

Step 6: Open the home page and add a bottom shared border to all pages in the Web site. Delete the comment text placeholder in the bottom shared border and move the horizontal line and the two lines at the bottom of the home page into the bottom shared border. If necessary, delete any blank paragraphs inn the bottom shard border, then save the home page.

Step 7: Add this sentence to the end of the second paragraph of text on the home page: Be sure to check out our Specials page!. Change the word "Specials" into a hyperlink that opens specials.htm.

Step 8: Save all pages, preview the site in the browser, and test all links.

Here's a look at the finished pages:

index.htm	jobs.htm	specials.htm

Step 9: Save your Web and press F5 to refresh the Folder List view before beginning this step to insure that your folders and files are accurately displayed. Paste a screen shot of your folder list and navigation view as shown here into homework.htm. Your Web should be organized and files named exactly as shown here. Change your navigation view to Portrait so your custom link bar will be displayed.

Step 10: 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 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, T4WS.

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

Step 11: 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.

Review Exercise pp 325-326 1-8 Only

Extra Credit 

None this week.