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
- Copy all the files in this template to the directory where you want to create your Frame page (for instance, C:\HTML\FRAME).
- FRAME.HTM: This is the parent Frame page for all of the rest of the Frame pages.
Feel free to rename this file to whatever you want to call it.
- Insert a title in the TITLE element.
- Adjust the row dimensions, if you wish. Currently, the setting, "*,65", locks the bottom row in at 65 pixels high, no matter what the screen resolution. Feel free to increase or decrease this value, depending on how much space you'll need for your actual navigation bar Frame.
- 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:
- Adjust the Frame dimensions, currently set at "110,*". To set the left Frame to 130 pixels wide, for instance, change this to "130,*".
- Change SCROLLING="auto" to SCROLLING="no" in the first FRAME tag if your TOC Frame displays unwanted scroll bars.
- 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.
- If you view these pages in Notepad or an HTML editor, you'll see that the Heading tags are preceded by named target links (e.g., <A NAME="first"></A>). These are used by the links in the corresponding TOC pages to jump to different locations in these pages. In your own "content" that you include here, you'll need to insert these target links wherever you want them, matched up to the corresponding TOC links.
- If you choose to rename these pages, you'll have to edit any references to them in any other pages in this template.
- NAV_BAR.HTM: This file functions as a navigation bar, controlling what is displayed in the other two Frames.
- Change the link text ("Go to Frame 2", etc.) so it describes your actual pages (e.g., "What's New," etc.). Also, feel free to create and substitute graphical icon links here.
- Do not change any of the file references, although you can add additional ones, if you wish (e.g., NESTED4.HTM, NESTED5.HTM).
- If you do add extra navigation links here, you'll also need to add extra "cells" (TD tags) to the Table that is used to space them out.
- TOC1.HTM, TOC2.HTM, and TOC3.HTM: These pages function as TOC's (tables of content) to the different PAGE pages.
- The links (A HREF="...) in the TOC pages need to match up with the corresponding link targets in the PAGE pages.
- If you have created any additional "content" pages (e.g., PAGE4.HTM, PAGE5.HTM), you'll need also to create additional TOC pages (e.g., TOC4.HTM, TOC5.HTM).
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