Nested Frame Template -- Page Three

Welcome to Page Three of my Nested Frame Template. In order to demonstrate how the Table of Contents on the right works, the remainder of this page is the same as Page One--all except the navigation links for Frameless browsers at the bottom of this page.

This template is based on the same basic layout I use on my web site. The most unusual feature of this Frame layout is the ability to update both of the top Frames from a single link in the lower Frame (the Navigation Bar) -- without having to use any JavaScript!

So, how does it work? No trick, really. It's just a matter of "nesting" one Frame page inside of another Frame page.

Frame Diagram

     _______________________________
     |-----------------------------|
     ||TOC3.|      PAGE3.HTM      ||
     ||HTM  |  (Frame Name=Page)  ||
     ||(TOC)|                     ||
     ||     |                     ||
     ||<--------NESTED3.HTM------>||
     ||    (Frame Name=Nested)    ||
     ||     |                     ||
     ||     |                     ||
     ||_____|_____________________||
     |_____________________________|
     |                             |
     |        NAV_BAR.HTM          |
     |_____________________________|

Clicking the link, "Go to Page 2" in NAV_BAR.HTM, for instance, would call up NESTED2.HTM in the "Nested" Frame, updating both the "TOC" Frame (with TOC2.HTM) and the "Page" Frame (with PAGE2.HTM).

Instructions

  1. Copy all the files in this template to the directory where you want to create your Frame page (for instance, C:\HTML\FRAME).
  2. FRAME.HTM: This is the parent Frame page for all of the rest of the Frame pages.
  3. NESTED1.HTM, NESTED2.HTM, and NESTED3.HTM: These are the "nested" Frames that define the two upper Frames. Do not rename these pages. The only changes you should make to these pages are:
  4. PAGE1.HTM, PAGE2.HTM, and PAGE3.HTM: Substitute the actual "content" you want to have included in your Frame pages in these pages. Use this page, PAGE1.HTM, for instance, as a model for creating your own "front" page.
  5. NAV_BAR.HTM: This file functions as a navigation bar, controlling what is displayed in the other two Frames.
  6. TOC1.HTM, TOC2.HTM, and TOC3.HTM: These pages function as TOC's (tables of content) to the different PAGE pages.

Non-Frames Navigation

This can be a bit tricky. That's because, to include a link to PAGE2.HTM here will only update the Page Frame, but won't update the corresponding TOC Frame. Nor do we want to use TARGET=_top here, in that we don't want to dump any of our Frames users out of our Frames pages. The solution here is to use the Nested Frames as our link targets--to see how this is done, pull this page up in Notepad or an HTML editor.

[Return to Page 1] [Return to Page 2]


(Substitute your own address info here.)

Steve Callhan
E-Mail: callihan@callihan.com URL: http://www.callihan.com