ITRC Creating a Webpage with Frames

mySaintMary's ➤

Creating a Webpage with Frames

 

Why Frames?

The purpose of implementing frames on a Web page is to provide the user of your page with an easy, clear way to access your information. This can be done in a number of ways - the most common of which is to divide the screen into two parts (i.e. two rows or two columns). One of the divisions will remain the same and serve as a table of contents, while the other portion of the screen will change according to what information is chosen from the permanent division of the screen.

 

What's the Format of a Frames Page?

To set up your Web page in a frames format you need a combination of three pages. The first page to create is the layout of the frames your page will contain. This page uses a frameset tag instead of a body tag. Inside the frameset tag, the number and sizes of the rows and columns are defined. Within the opening and closing frameset tags are frame tags. The frame tags define what document will be in the rows and columns defined in the frameset tag. Unlike the frameset tag, the frame tag does not have a closing tag.

The other two pages needed to complete a frame document are the pages called x.html and yz.html in the example. These pages are constructed just as you would construct any other HTML document.

Follow this example:

<head> 
   <title>A</title>
</head> 

<frameset rows="*,*"> 
   <frame src="x.html"> <frame src="yz.html" name="bottom"> 
</frameset>

 

How Does it Work?

The frame src tag actually creates a link from the main frames page to the HTML document specified in the tag. Thus, it is necessary to declare a document to fill each row or column you have created in the order you would like them to appear in the window. The document specified first, x.html in the example, will appear in the left frame.

In addition to specifying the document to be shown in the frame, the frame tag also allows you to name the
frame. This is very useful if you want the reader to be able to view another page and not lose sight of your site's table of contents. By using the name and target attributes, you create a link from one page to another - but all in one window!! Look at the following examples of the code for yz.html and x.html :

<head>
   <head>
      <title>YZ</title>  
      <title>X</title>
   </head>  
</head>

<h1>YZ</h1>  
<h1>X</h1>  

Content to be replaced
<a href="docs/framespage/content1.html" target="bottom"> Content 1 here </a>
<a href="docs/framespage/content2.html" target="bottom"> Content 2 here </a>


Since we added the name attribute to the second frame, we can target links to that frame. In this example, if the reader clicks on Content 1 here, the document content1.html will appear in the second frame and replace "Content to be replaced".

 

How are the Sizes of the Frames Declared?

There are three ways sizes can be defined:

  • The sizes can be defined as actual numbers. For example, if the width of the screen is 700, the column sizes can be defined as 200 and 500.
  • The sizes can also be defined in percents. For example, 20% and 80%.
  • The last way sizes can be defined is with an *. For example, if you define 2 columns with the sizes defined as *,* then the browser will divide the window equally into two parts. Likewise, if you define 3 rows with the sizes defined as *,*,* then the browser will divide the window equally into 3 rows.

It is also possible to combine the different methods of declaring size. For example, if you declare the size of the columns to be 20%, * then the browser will size the first column to 20% of the window and the second column will take up the rest of the window.

 

What Else Do I Have To Do?

Nothing!! You have all the information you need to create an HTML document utilizing frames!