If a web site has a lot to say, it is hard to get it onto a short page. But long pages can take longer to load than the viewers want to wait. In large sites people can get lost while wandering from page to page.
One way of breaking the information into smaller pieces and of keeping navigation links always in view is to use frames. A master document divides the screen into rectangular areas. Each area is called a frame. Each frame displays a different document. Commonly a frame at the top or side contains links to navigate the site. A larger frame is used to show the information pages of the site.
Where you are:
Lessons > Web
Before you start...
Project 1: Browser Basics Connecting
Project 2: HTML Basics
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.
What you will learn:
to use a navigation
to recognize invisible
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.
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.
- 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.
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
- 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:
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
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!