This Frameset Composition

The text in the table cell below was used to make a frame page. Study it carefully to learn its vocabulary.
 
<html>
<head>
<title>Test Frameset Page</title>
</head>

<frameset rows="120,*" frameborder="NO" border="0" framespacing="0">
<frameset cols="180,*" frameborder="NO" border="0" framespacing="0">
<frame name="cornerFrame" scrolling="no" src="greencorner2.html" >
<frame name="topFrame" scrolling="auto" src="logotop2.html" >
</frameset>

<frameset cols="180,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="auto" src="whiteleft2.html">
<frame name="mainFrame" scrolling="auto" src="essay.html">
</frameset>

</frameset>

<noframes><body>
</body></noframes>
</html>


A frameset or frame page organizes a collection of web pages. This enables comparison or parallel reading of text and multimedia elements. A web page within the frame is also often used as table of contents and sequencer of a larger set of web pages that are brought into the frame or displayed over the top of the web page, a kind of pop-over.

Editing A Frameset Composition

Copy these five files by right clicking on these links and using the Save Link As.. or Save Target As.. command to put each of them in a separate folder on a USB drive or diskette.
  1. frames.html
  2. greencorner2.html
  3. logotop2.html
  4. whiteleft2.html
  5. essay.html
Open a web browser and have it open the frames.html file to see how the four other files are called and organized by this file to fill in the frames. Note that this frameset is slightly different than the frameset used for this chapter. Next, minimize or close the browser window.

Next, launch a text editor such as Notepad. Notepad comes with all versions of Windows operating systems and is generally found in the Accessories folder. Have Notepad open the frames.html file and make some changes to see what they do. Experiment with changes to the frameset. For example, change the numbers 120 and 180 to bigger or smaller values; save the file and then open in a browser to see what happened. Keep going. Change the words no and auto to different combinations of yes, no and auto. For example, change the numbers which set the initial size of the frames. Save the changes with different file names, such as framesV1.html, framesV2.html, etc. Open each new file as it is created in a web browser.

What is the impact of changing yes, no and auto in the look of the web page?

What does the * symbol mean in area where the row and column width data is set? What happens if this is changed to a number?

Note the file names that are opened into the frameset. To put content into the individual web pages that make up each frame, different approaches will work. One can use Netscape Composer or other web editor to edit each of the four remaining files in the frames folder and add content, for example, images or pictures. Instead, one could drag into the frameset folder other files. The new files could have the same name and replace files in the frames folder. Or, the names of the files in the frameset could be changed to match the names of the new files added to the folder.

Making Other Pages Appear in a Frameset - the Target Command

Once a frameset opens its first set of web pages, how are different web pages brought into the multiple ring circus? Note that this work has not provided detailed explanation of how a set of links can put different web pages into the same frame or different frames because this assignment does not make knowing that necessary. However, doing so requires just one more command and concept, the "target" command.

You will have to use Advanced Edit buttons in your web page editors such as Netscape and SeaMonkey Composer to use the target command. Other web page editors include it in the link editor.

The target command allows you to create a link so that the linked file goes to the name of a certain frame. Re-examine the frameset code above and note the specific names of the 4 frames. If you target a new file for the "cornerframe", then it will appear in the top left of our example frameset, replacing the existing file that is displaying in that space. Of course, it would be important that the content of the web page actually fit into the space that is allowed. The page that you .are reading now was targeted to the mainFrame location. In basic HTML code, a link that places a new page in a frameset might look like this.

Click to <a href="http://news.google.com/" target="mainFrame">
read Google News </a>

Click to <a href="swimming.html" target="mainFrame">
read my own thoughts on swimming </a>

To make a web page out of the frameset or appear over the top of the page that is currently being read, the links might look like this.

Click to <a href="http://news.google.com/" target="_blank">
read Google News</a>

Click to <a href="swimming.html" target="_blank">
read my own thoughts on swimming </a>

If you've never worked with HTML code before, the above examples might seem a little scary. There is where web page editors come in, to hide the complexity of the angle brackets and special punctuation. The web page editor tools that enable this look different in the different editors, but the function is the same. Here are examples of how the link editing functions of different web page editors enable the use of the target command.

Dreamweaver

SeaMonkey

FrontPage

As is shown, the procedure varies. With each web page editor application, click the link editing function and look around for the word target. Sometimes this is further hidden under a pull-down menu.

Next Step

When these activities are completed, return to the reading of the overview article

Assignments related to what you have learned will be found there.


Parent Frame | Page author: Houghton | Original 2002: Updated January 14, 2007