Week 7

Home • Up • Assignment Dates • Site Map • Week 1 • Week 2 • Week 3 • Week 4 • Week 5 • Week 6 • Week 7 • Week 8 • Week 9 • Week 10 • Week 11 • Week 12 • Week 13 • Week 14 • Week 15 • Week 16 • Final

Week 7, March 18 & 20

Announcements

Lesson Plan

Homework

Extra Credit
We will spend three weeks on Tutorial 4, so relax. It is a difficult tutorial, but you will have plenty of time to absorb and practice the concepts. You're ready to start using your "Front Page muscle" and become a power user.

Lesson Plan 

Discuss T3WS, Garden Gill, and FinalHP.

Tutorial 4: Using Shared Borders and Themes, pp. 193-225 of 256

Session 4.1, pp. 193-225

  • Understanding Shared Borders and Link Bars, p. 194
  • Adding Pages to the Site's Navigation Structure, p. 195

p. 195, Step 2. Make sure to close the file to be replaced before importing the page with the same name.

p. 197. If a page has been saved without a title and then dragged into Navigation view, the file name will appear as the button title in navigation view.

  • Creating Shared Borders in a Web Site, p. 199

p. 199. If you add a top shared borders with navigation, a banner with the page title automatically appears. You can edit the banner name, so theoretically, you could have different names for the page title in the browser, the title in the link bar button, the title in the banner, and the file name itself. When you are in Navigation View and right-click a page icon to rename it, you are changing the page Banner name, not necessarily the page title. If a page is brand new, you are also changing the page title only because the page is brand new! The only way to be sure you are changing a page's title is to select the page in the Folder List, right-click, and choose Properties; look in the Title box and that is the page title that will appear in the title bar in the browser.

  • Making changes in Navigation View, p. 209

p. 200, Step 3. When you add navigation to the top shared border, a page banner with the page title is also added by default. You can delete the banner if desired.

p. 213. If Shared Borders is dimmed on the Format menu, do this: Click Tools, Page Options, Authoring tab, and check Shared Borders.

  • Disabling Shared Borders in a Page, p. 215
  • Adding a Link Bar Component to a Page, p. 216
  • Adding a Page Banner to a Page, p. 217
  • Creating a Custom Link Bar, p. 219

Demonstration— Navigation Web 

  • Navigation Web is a sample Web I created to illustrate the concepts of Web creation, navigation structure, shared borders, link bars, page banners, and themes. I will explain each page in this Web and open this Web in FrontPage as I explain the concepts. 
  • I created Navigation Practice following the steps below. I will open Navigation Practice in FrontPage next and explain each page. Then I will create as a new 1-page Web named Navigation following the steps below. You can try to create your Navigation Web with me as I go, or wait until the demonstration is over, and create it on your own. Be fearless with the Navigation Web site—experiment, question, and try out any ideas you might have.

  1. Create a new 1-page Web named Navigation. Open the Navigation home page and apply a theme of your choice. Insert a 1-row, 640-pixel, borderless, centered table with a background fill color that coordinates with the theme so you can distinguish the body of the page from the top and bottom shared borders. (Click here for steps if you can't see the bottom of the Insert Table dialog box.) Type a sentence centered in the table to identify the page—for example, This is the body of the home page. Add a few blank lines below it to open the table up slightly, and save the page.
  2. Create five pages named Child 1-1.htm, Child 1-2.htm, Child 1-3.htm, Child 2-1.htm, Orphan 2-2.htm. (Orphan 2-2.htm will be a unique page in the Web site that will use a different theme, different shared borders, etc.) To create these pages quickly, I suggest that you first create and save the home page, then do a Save As and change the filename and content of the body to create the additional five new pages. Do not change page titles at this time.
  3. Drag the five new pages into place in Navigation View to create a navigational structure. Change the navigation button names for all pages (including the home page) in Navigation View by gently clicking the page icons and editing the name. Check the page titles to be sure they match the button names. Title the home page Navigation.
  4. Open the home page and add a top shared border to include navigation buttons and a bottom shared border to all pages (Format, Shared Borders, All pages; check Top, Include navigation buttons; check Bottom; OK).
  5. Edit the link bar properties to set navigation to Child pages under home and Home page, then click the Style tab, and select a style and orientation for the buttons.
  6. In the top shared border, insert a 1-cell, 640-pixel centered table. Drag and drop the banner and link bar into the table and center the banner and link bar. Insert a horizontal line under the link bar in the top shared border to help you see where the top shared border ends and the body of the page begins.
  7. In the bottom shared border, delete the comment and insert a 2-row, 640-pixel, borderless, centered table. Insert a horizontal line in the first row to help you see where the body of the page ends and the bottom shared border begins.  Insert a date and time field in the next row to show the day of the week and the date. Preview the page and notice that you need to add some white space above the horizontal line. Do this by adding an additional blank row above the horizontal line with a hard space (Ctrl+Shift+Space) in the blank row.
  8. Go to each page and see how the shared borders are working. When you get to Child 1-1, you will notice that you don't have navigation to Child 2-1 or Orphan 2-2. To fix this, insert a centered link bar at the top of the body of the page just below the top shared border (not inside the top shared border) with navigation set to Child level. Click the Style tab, and select a style and orientation for the buttons that is different from the link bar above it. Try something from the bottom of the Choose a style list so that a visitor can see that this is a less important page in the Web hierarchy. Simpler styles are the best here.


  9. When you go to Child 2-1 and Orphan 2-2, you will notice that shared borders are used on this page so that you can navigate to child level 1 and the home page. However, you still need navigation across to the second child level. Therefore, add another Link bar just below the top shared border (not inside the top shared border) at the top of the page centered outside the table structure with navigation set to Same level, then click the Style tab, and select a style and orientation for the buttons that is different from the link bar above it.
  10. Open Orphan 2-2 and format this page using a different theme being sure to change the theme for this page only. Remove the top shared border and keep the bottom one for this page only. Insert a picture page banner in the body just above this table. Add a link bar in the body just above the table. Set the link bar properties to Child pages under home, Home page. Add a second link bar in the body just below the first one. Set it to Same level.

 

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

  90-100%  = 10 pts.
    80-89%  = 5 pts.
Below 80%  = 0 pts.
  • Read through Tutorial 4 and complete the Quick Checks.
Final Web Site: Continue working on your PAS and your Final Web site. In particular, finish your home page content. See the Final Exam page for details. You should try to include all features to your Final Web site that we have covered in class to this point.

Extra Credit 

Extra credit assignments are due no later than Saturday evening of the current week. None this week.

Last revised Thursday, March 20, 2008 09:04 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.