Week 10, November 6 & 8


  Announcements

 
  • Note: You should be creating backup Web sites for Final each day you work on it.

Lesson Plan 

Planning Analysis Sheet. It's time to start building the pages, shared borders, and content of your Final Web site. The goal of the PAS is to guide you to finalize the organization and pages for your Final Web site without focusing on the details of the content of each page. We will finish part of this in class together this week and you will finish the rest for homework. Click here for an example of your PAS at this point.
 

Navigation in a Frameset Page:

I will open my Lollipop Gifts practice final on the server, and you will open your Final Web with me as we create the frameset, main, banner, and content pages. Your Final Web site should include a home page that is almost finished, PAS.doc (Heading, Objective, and References sections completed),  and Final.htm (a page with the Final table copied/pasted). You should have already created your Child 1 pages and a Guest Book page and you should have decided upon the content of your frameset page and at least three of your main pages. Your navigation structure should look similar to my Lollipop Creations navigation at this point. Click here to see my Lollipop Gifts practice final before I create the frameset pages.

Today, we'll create the main pages, frameset page, banner page, and contents page. Click here to see my Lollipop Gifts practice final after I create the frameset pages. Your navigation structure should look similar to my Lollipop Creations navigation by the end of class today.

Note: The Frames Banner button will be renamed "Lollipop Creations" so that the banner name will display the Web site name.

Click here to see a handout that summarizes all the steps to create frameset pages.

 

Create the main pages:
  • Create and save Frame_Main1_description.htm. Insert a 1-cell, 640-pixel borderless table. (Click here for steps if you can't see the bottom of the Insert Table dialog box.) Type a brief word or two describing the contents of this page. I will name my first main page Frames_Main1_Gift_Jars.htm.
  • Remove the top shared border from this page; keep the bottom shared border.
  • The main pages should be unified in design; for example, If you use headings and backgrounds, keep them consistent. The best way to accomplish this is to create your first main page, get it exactly right, and save it. Then click File, Save As, and create your second frameset main page changing the filename, title, and content as needed. Continue until all main pages (Frame_Main2_description.htm, Frame_Main3_description.htm, etc.) have been created. I will name my second main page Frames_Main1_Gift_Pails.htm. I will name my third main page Frames_Main1_Gift_Tins.htm.
Create the frameset page:
  • Create a frameset page named Frameset_description.htm (File, New, More page templates, Frames Pages tab, Banner and Contents).
  • Assign a title to the frameset page that generically describes the content of the frames page so that it will make sense as a hyperlink button in the navigation link bar. Lollipop Gifts is a title that makes sense in this Web since the main pages display Lollipop Gifts. I will name my frameset page Frameset_Lollipop_Gifts.htm and title it Lollipop Gifts.
  • Drag Frameset_desctiption.htm into the appropriate position in the navigation structure of your Web site, and delete any frameset placeholder page you might have added from the Web entirely.
Create the banner page with a banner and link bar:
  • Create a new page named Frame_Banner.htm. Remove any shared borders from this page.
  • Insert a page banner (Insert, Page Banner) on the first line. Change the banner title to the title of the frameset page. I will title my banner Lollipop Gifts.
  • Switch to Navigation View, right-click on the navigation screen, and click Portrait/Landscape; drag and drop Frame_Banner.htm from the Folder List to Navigation View as a child page of your frameset page.
  • Insert a link bar: Insert, Web Component; Component Type—Link Bars, Bar based on navigation structure, Next; Choose a bar style, Next; Choose an orientation, Finish; add navigation to point to Child pages under Home and Home page. Do not place the link bar inside a table because you want it to spread across the entire top of the frameset page. In Navigation View, right-click the page icon for Frame_Banner.htm and uncheck Included in Link Bars.
  • Open the frameset page, and set Frames_Banner.htm as the initial page in the banner frame.
  • If the banner frame is taking up too much screen real estate, double-click the custom link bar and change the style to a simple one like a dot style or change the banner to text rather than picture. Or remove the banner frame altogether. Click here for steps.
  • Preview and test the banner frame links. In order for the custom link bar in Frames_ Banner.htm to display the linked pages in a whole page, do this: From the frameset page, right-click Frames_ Banner.htm, and click Page Properties. Under the General tab, Default target frame, click the Change Target Frame button; in the Target Frame window, under Common Targets, click Whole Page, OK, OK.

Create the contents page with a link bar:

  • Create a new file named Frame_Contents.htm. Remove all shared borders from the current page.
  • Switch to Navigation View, right-click on the navigation screen, and click Portrait/Landscape; drag and drop Frame_Contents.htm from the Folder List to Navigation View as a child page of your frameset page next to Frame_Banner.htm.
  • Drag your main pages in order from the Folder List to Navigation View as child pages of Frame_Contents.htm.
  • Insert a link bar: Insert, Web Component; Component Type—Link Bars, Bar based on navigation structure, Next; Choose a bar style, Next; Choose an orientation, Finish; add navigation to point to Child level and Home page.
  • The home page is already a link in the banner frame and so should not be duplicated here. However, if you decide not to use a banner frame, you should create a manual hyperlink that opens the home page in a new window. Do not add a home link to the link bar because the home page would open in the main frame instead of a whole window. Do not place this link bar inside a table.
  • Open the frameset page, and set Frames_Contents.htm as the initial page in the contents frame.

  • Preview and test the contents frame links. In order for the custom link bar in Frames_ Contents.htm to display the linked pages in a whole page, do this: From the frameset page, right-click Frames_ Contents.htm, and click Page Properties. Under the General tab, Default target frame, click the Change Target Frame button; in the Target Frame window, under Current frames page, click the main frame window in the diagram on the right.

    Trouble? If that doesn't work, do this: Open Frames_ Contents.htm, right-click, and click Page Properties. Click the Change Target Frame button; under Common targets, click Whole Page, OK. Then return to the frameset page to the contents frame and repeat setting the target of Frames_ Contents.htm to the main page as shown below.

If desired, delete the banner frame and add a home page link to the contents page:

  • If your banner frame is taking up too much screen real estate, you are free to remove it. To remove the banner frame, open the frameset page and click the banner frame. Click Frames, Delete Frame. Next, you will need to add a home page hyperlink to the contents frame.
  • Open the contents page, create a 2-row borderless left-aligned table and drag and drop your the link bar into Row 2.
  • Click in Row 1 and create a manual hyperlink to the home page and set the hyperlink Target Frame to open in a Whole Page. You cannot simply modify the custom link bar and add the home page as a link because it will open the home page in the main frame, which you do not want.
    Note: If you want to create a custom button using pictures from your theme with matching text and a hotspot hyperlink, try this:
    Insert the Picture: Tools, Site Settings, Advanced tab, check Show hidden files and folders; Insert Picture From File button; in the Look In box, browse to _themes/ThemeName; click the View button and select Preview; point to each picture to preview and double-click the desired picture to insert it. You might want to use a different picture to represent the home page since it has a different behavior than the buttons on the link bar below it.
    Determine the font for the button text: Format, Theme; in the Theme task pane, point to the thumbnail for the current theme, click the list arrow, Customize; in the Customize Theme window, click, Graphics button; Item box—select Horizontal Navigation; click Font tab, and write down the font Style and Size; cancel out of all windows. Select the inserted picture in Row 1; from the PIctures toolbar, click the Text button to Insert a text label; use the same font style, size, and position of the buttons as was used on the Contents page link bar.

If desired, eliminate the frameset borders:

  • With frameset page open, Frames, Frame Properties, Frames Page, Frames tab, uncheck Show Borders.
Discuss T4WS, Garden Gill, and FinalHP.
 
Session 5.2, pp. 304-324
  • 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.

Week 11, Case Problem 2. This is next week's homework, but we will start it this week if time allows.

 

Homework 

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.  
T5PT, up to 10 points:  The URL for Tutorial 5 Practice Test is http://caot.lacitycollege.edu/112/TestsPractice/tutorial_5_practice.htm. When you click this URL, the Tutorial 5 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, T5PT.

  90-100%  = 10 pts.
    80-89%  = 5 pts.
Below 80%  = 0 pts.
Final Web Site: Continue working on your PAS and your Final Web site. In particular, finish your home page content and add all Child Level 1 pages with titles if you have not already done so to your Final Web site. See the Final Exampage for details. You should try to include all features to your Final Web site that we have covered in class to this point.
Continue to work on your Planning Analysis Sheet. See the Final Exam page for details. 

Extra Credit 

Extra credit assignments are due no later than Sunday evening.

Last revised Monday, November 05, 2007 11:55 AM.


 

Hit Counter

  • This Web site and its entire contents are © 2007 [Amy Sirott] and may not be reproduced in any form without prior written permission. All rights reserved. Best viewed in Microsoft Internet Explorer, 1024 x 768 resolution. Revised October 12, 2008.