There is a two-part tutorial at www.webreference.com/html/tutorial14 and www.webreference.com/html/tutorial15/ that addresses these topics: Historical review of Frames. Framesets. The Frameset DTD. Defining Frames. Providing alternate content. Using frame targets. Frame problems. Frames and links. Frames and search engines. Frames and bookmarks. Frames and document fragments. Frames and document titles. Getting stuck in framesets. Methods to overcome frame problems.
The author does not like frames, so his perspective is useful to consider when considering, designing and implementing frames.
Read this: Using Javascript with Frames and Windows
See if you can find the "magic words": one will open a frame in a new window, and one will replace the current frame with the linked frame (there are two more in addition to these). [answer] Then visit :
http://www.ct-sv.com/family/coin062/week4/ and look at the source code after seeing it in action. Can you understand it? Do you have questions?
Also review the source code of the SPAUG home page, and test it to see how it works. You should be able to understand how it works.
Try to create a Frame layout on your home site, if you haven't already.
There is even an alternative to frames: Fixing Frames with Fixed Positioning tells how to use CSS2 fixed positioning to create framed pages that gracefully degrade (not very many browsers support CSS2, however).
Frameset documents use a special DTD, and the Document Type Declaration to use for them is the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
to make the validator happy (the second line with the URL seems optional).
Read the tutorial at www.webreference.com/html/tutorial14/ and www.webreference.com/html/tutorial15/
SPAUG's FRAMESET looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Stanford-Palo Alto Users Group for PC (SPAUG) Home Page</title>
</head>
<frameset cols="190,75%,*">
<frame name="toc" src="toc.htm" title="Table of Contents (TOC)" marginwidth="0" marginheight="0" scrolling="auto">
<frame name="main" src="main.htm" title="main page, target of links" marginwidth="1" marginheight="0" scrolling="auto">
<frame name="wallpaper" src="wallpapr.htm" title="background wallpaper, no content" marginwidth="1" marginheight="0" scrolling="no">
<noframes>
<body>
<p>You are not using Frames, so the site presentation is not as "pretty" as it would be. However, you can link to the following pages. To return to this page, use your Browser Back command or button (Alt-LeftArrow works as Back in Netscape and IE).</p>
<p><a href="main.htm">Main Page</a></p>
<p><a href="activities.htm">SPAUG Announcements</a></p>
(etc for the rest of the menu items)
</body>
</noframes>
</frameset>
</html>
Note the FRAMESET command starts right after </head> and contains the BODY tag only between the optional NOFRAMES tags, which is enclosed by FRAMESET tags. FRAMESET sets up three columns: one of 190 pixels (for the TOC), one 75% of the screen width (for the main content), and one for all the rest (the wildcard *, fills in any space left over after rendering the first two columns). Then each FRAME is NAMEd and given an original source document. marginwidth="1" allows the frames to be manually adjusted for width -- users with more screen area or resolution can expand the main area by clicking and dragging the border between frames. marginheight="0" keeps borders from appearing between rows, and scrolling="auto" puts in a scroll bar only if the page width exceeds the display width.
The SPAUG TOC, which is loaded into the left column, has a control area that looks like this:
<a href="activities.htm" target="main">Announcements</a>
<a href="WhatIs.htm" target="main">About SPAUG</a>
<a href="Contacts.htm" target="main">Whom to Contact</a>
<a href="main.htm#newmember" target="main">Join SPAUG!</a>
<a href="activities.htm#deals" target="main">Special Deals</a><br>
<a href="srchsite.htm" target="_blank">Search SPAUG</a>
<a href="srchgoogle.htm" target="_blank">Google Search</a>
Note each URL has a target "main" or "_blank". Main replaces the current page in MAIN with the linked page (or image). _blank creates a new unnamed page with the linked page.
There are four special frame TARGETS that correspond to specific frames or windows. All of these start with an underscore (_).
The most important one is _top. This target refers to the top frame (i.e. the entire viewing area) of the current window. Links that point to a document that is not part of your frameset should have a target of _top, or else the document will be displayed inside your frameset (of course, that may be what you want!). The Back button will return the user to the previous page, as expected.
The _blank target is used to load the document into a new (unnamed) window. Following the link again will open yet another unnamed window. (If you had given the window a name, following the link again would load the document into the same named window.) Using _blank excessively will crowd a user's display with many open windows, so it is best used with discretion. The Back button does not work; there is nothing to which to go Back, since it was a new window. A user can manually close the window when they have finished, and return to the original document.
_parent is similar to _top, but instead of loading the new document into the top frame, it loads into the frameset that contains the current frame. That is, it loads into frameset parent, but defaults to _self if there is no parent
Finally, _self loads the linked URL into the frame of the link followed (this is the default). You can use this for links that must be followed in the same frame, like a Table of Contents that expands and contracts if you click for a more-detailed view.
(excerpt from NetMechanic Webmaster Tips Newsletter Vol. 3, No. 11)
Search engine robots have a hard time navigating through Web sites that use frames unless the site designers have been careful to include the proper tags and site navigation tools.
Robots are designed to crawl through Web sites by following links. Think about how a frameset is organized though: the file contains instructions for the browser about which files to include in the frames and how to lay out those frames. If that is the only information contained in the file, the robot doesn't go any deeper into the site because there is no navigation information.
The solution is to include site information (including your keywords!) and alternate site links in the <noframes> tag. Too often, this tag contains the useless statement: "This site uses frames, but your browser doesn't support them." Astute Web designers include more friendly - and useful comments such as:
<frameset>
<frame ... (as many frame tags as needed) >
<noframes>
<body>
<h1>Welcome to Gentle Giants: The Maine Coon Cat Home Page!</h1>
<p>We provide a complete reference for people interested in breeding Maine Coon Cats. Browse our photographs, cat show schedules, breeder and medical updates.</p>
<p>If you are viewing this page, then your browser doesn't support frames. However, all our pages can be viewed from our Site Contents page.</p>
<p>Please come inside!</p>
<p> <a href="SiteContents.htm">Enter</a> </p>
</body>
</noframes>
</frameset>
Note the noframes ... /noframes is enclosed in body ... /body and at the end of the frames, but before the /frameset tags.
The noframe information helps a robot score the page content and gives it a link to follow through the rest of the site.
(end of excerpt)
For a class exercise, we'd like to modify the SPAUG web page to include a similar message. Also, we'd like to construct a "site map" accessible from the TOC that would allow quick and easy navigation outside the frame structure for people who want to display pages full-screen, and who want to bookmark specific pages.
Consider how your site will appear on a PDA, to a blind person's browser, to a cell phone, etc. Accessibility needs to be considered and coded into your site, especially when you use frames.