Jan's Browser Basics: Frames

One problem with framed sites is that they can load pages from other sites inside their own frames. If that other site is also framed, you can run out of room to see anything but the frames!

If the frame borders are invisible and the page colors and backgrounds are carefully chosen, you may not realize right away that a site is framed.

Step-by-Step: Frames

What you will learn:

to use a navigation frame
to recognize invisible frames

Start with:

Open framed site

You can't tell from the link whether the site it leads to is framed or not.

On the page My Home Page, click the text link to World Travel Inc. The browser loads a set of 3 framed pages for a fictional travel agency.
Resize the window shorter, if necessary, until vertical scrollbars appear in the the bottom two frames.
Scroll down in both frames to see the parts that are off screen. It's not much fun to have to scroll to get to navigation links.
The navigation frame on the left has links to other documents in World Travel's site. It also has links to other sites. (You must be online to see some of these pages.)

Many sites do not make it clear when a link is to a page that is not part of the site. You can find yourself unexpectedly far, far away.

Invisible frames

In the Address Bar change index.html to invisible.htm and then press ENTER.
Resize the window smaller and larger. A scrollbar never appears! What happened?
In this version of the World Travel page, the borders between the frames and the scrollbars are turned off. This does look better. In a small window, however, as in the illustration, some of the links are out of view at the bottom of the left frame. A visitor won't know they are there! Whoops!

A suspicious visitor could use the TAB key to tab through the links to get to the offscreen ones.
In the Address Bar change invisible.htm to invisible2.htm and press ENTER.
This version of the World Travel page includes a scrollbar for the navigation frame when the window size is small. With a scrollbar, the invisible frames do not look as good. At least it is clear that part of the document is not in view.
Use the Back button twice to return to the page with bordered frames.

Opens in another frame

In the left frame click on the link Prices and Packages.
A new page appears in the frame on the right. The link changes color to show that is has been visited. The code for the link controls where the new page appears. It is not random!

Opens in the same frame

In the frame on the right, click on the link Tahiti in the text at the top. (Do not click on the tickets at the bottom yet! That opens a different document.)
A new page appears in the same frame. This is the default behavior for links. Special code must be used to get a link to open a page somewhere besides the current frame.

There is also a link Tahiti in the left navigation frame to this page. This link will not change color, however, until that frame is refreshed.
Click the Refresh button. The whole framed page is refreshed. All visited links turn purple. The links in the Tahiti document will all turn purple at the same time even though you did not click any of them yet. They are links to spots on their own page.
Scroll down to the bottom of the Tahiti document in the right frame .
Move from the top of the page to the bottom and back using the keyboard:
Top of Page: Use the key combo CTRL + HOME to go to the top of the page. (Hold the CTRL key down while pressing the HOME key.)

Bottom of Page: Use the key combo CTRL + END to go to the end of the document.

Spot on the same page

Click on the link Map at the top of the Tahiti page.
It takes you to a different place within this same document. These kinds of links are very useful for long pages containing several topics.
Practice going from the top of the page to the bottom, using links and key combos . [Up and down and up and down. Don't get too dizzy!