June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
Table of Contents
A frame is a sub window inside an active browser. It is possible to have more than two frames in a Web page, and therefore more than two sub windows can be viewed at the same time.
Frames were introduced in order to aid navigation through complex Web pages. For example, one frame could hold a menu of links, while their associated Web pages are displayed in another frame.
This use of frames is demonstrated in the following example. Note, that this will open a new browser window and you will need to close the window to return to this unit.
Have a look at frame example. You will see that there are two sections on the page. There are, in fact, two separate pages displayed side-by-side. Try clicking on the different links on the left hand page.
The use of frames does not come without its disadvantages, which will be discussed later in this unit.
This Activity begins the work on Example 1 by setting up a Web page that consists of two separate files in two frames.
Open a text editor, such as Notepad, and enter the <HEAD> and <TITLE> portions of an HTML page.
No <BODY> tags are used in Web pages employing frames. Instead, the initial frame layout is set up using the <FRAMESET> tag. The dimensions of the frame layout can be relative, and measured in percentages, or they can be absolute, and be measured in pixels. Use the HTML code below to lay out the page with two frames:
<FRAMESET COLS="20%,80%">
<FRAME src=left.html>
<FRAME src=right.html>
</FRAMESET>
This sets up the frameset to consist of two frames in two columns. The first frame takes 20% of the browser window and the second 80%. A file called left.html will appear in one frame and a file called right.html in the other. In order to view the framed page in your browser you will need to create these two pages. But first of all, save this page as frame1.html
Start a new document in your text editor and enter the following code:
<BODY>This is the left frame</BODY>
Save this file as left.html.
Begin another document and enter the following code. Save this as right.html.
<BODY BGCOLOR="blue" TEXT="white">This is the right frame with a blue background and white text.</BODY>
Now, load frame1.html in your Web browser. You should see that both frames, with the two files loaded in them as appropriate.
Read about FRAMESET structure in your textbooks.
This Activity continues the framed Web page begun in Activity 1, and includes the HTML code linking the frames together.
Re-open left.html in a text editor and add the links to display different HTML pages in the right-hand frame. Enter the following HTML code:
<BODY> This is the left frame <P> <a href="red.html">red</a> <br> <a href="yellow.html">yellow</a> <br> <a href="pink.html">pink </a> <br> <a href="purple.html">purple</a> <br> <a href="right.html">blue</a> </BODY>
Create five further files: red.html, green.html, yellow.html, pink.html and purple.html. right.html was created in the previous activity. Use the following HTML code for red.html, and amend the attributes shown in bold as required for the other files.
<BODY bgcolor="red" text="white"> This is the right frame </BODY>
Re-load frame1.html and try out the links. What happens?
The HTML Web page initially appears as expected. However, the links are not loaded in the right hand frame as desired, and are instead loaded in the left frame. This is an important consideration with frames. By default all frames are self referenced: unless stated otherwise, link open in their originating frame. It is therefore important to include the target frame in the link tag.
To do this, each frame must be given a unique name, and each link must use this name in order to specify the frame in which to open. The modifications needed to implement this are made in two files.
Re-open frame1.html and amend the code as shown below. This effectively gives the two frames the names "left" and "right". Save the file.
<FRAMESET COLS = "20%,80%"> <FRAME src = "left.html" name="left" > <FRAME src = "right.html" name="right"> </FRAMESET>
Open left.html, which is the file containing the links. Include the target frame in each link, as shown in bold below. Save the file.
Re-load frame1.html in the Web browser and try the links. The documents should now successfully load in the right frame.
Note that the target for each link is the same: the "right" frame. If the majority of the targets are the same, or indeed all the targets are the same, then a default value for the target frame can be set. To do this, re-open left.html and make the modifications as indicated in bold below.
<HTML> <HEAD> <TITLE>Example Framed page</TITLE> <BASE target="right"> </HEAD> <BODY> This is the left frame <P> <a href="red.htm">red</a> <br> <a href="green.htm">green</a> <br> <a href="yellow.htm">yellow</a> <br> <a href="pink.htm">pink</a> <br> <a href="purple.htm">purple</a> <br> <a href="right.htm">blue</a> <br> </BODY>
When you have saved left.html, re-load frame1.html in a Web browser and test the page. The links should work as previously, but the HTML code is now neater.
Read about frame targeting in your textbooks.
This Activity extends the framed page (begun in Activities 2 and 3) to include a further frame as well as external links.
Amend the main frame page so that it establishes a frame on the left and two on the right. On the right, both frames should be the same size, one above the other. The blue file should appear in the top right-hand frame and the red file in the bottom right-hand frame. The other remaining files should link into either one or the other frames. (Note: you may want to refer to textbooks for "Establishing Rows and Columns" and "Nesting frames".)
Add two external links to the left hand frame, such as to O'Reilly's site at www.oreilly.com and the UCT Computer Science site at www.cs.uct.ac.za. One should load in the top-right frame, and the other into the bottom-right frame.
View the page in your browser and test the external links. Can you bookmark the links?