shadowline
Frames >> Col & Row
Frames are hated by some and loved by others. They are the lines that create sections in the one browser window to display at least two pages at once. If you look at the Source Code on a framed site, you will probably see a very small HTML code. This code sections the main page and inserts individual web pages into the sections.

Frames are enhanced tables that use the whole screen. You specify the rows and columns, then you decide what contents to show in each cell. You should have a solid grasp on regular HTML coding before attempting frames.

To start a framed site, a MASTER PAGE must be created. This page will divide the screen into sections (frames) and specify the contents to be viewed in each frame. Most people have the MASTER PAGE saved as the "index" page so it is the default load page.

The tag set used to create a frame is <frameset>. This set is entered after the HEAD of the web page code. Have a peek at the coding below. Notice the BODY tags missing? In a frame setup, we don't need them... for now.

The opening FRAMESET tag has parameters used to create a number of COLUMNS or ROWS. The settings for the COLS and ROWS parameters can be declared as a percentage of the screen or as a fixed pixel amount.

This example shows a screen divided into 4 equal columns. COLS is the column parameter and each column needs a declared width. The columns are laid out from left to right.

<html>
<head>
<title> Example Page </title>
</head>

<frameset cols="25%,25%,25%,25%">
 
 
</frameset>

</html>

  1. COLS creates the columns.
  2. There happens to be 4 declared values, so 4 columns will be created.
  3. Each column is being declared at 25% of the screen size.
This next example shows a screen divided into 3 rows. The rows are laid out from top to bottom. Both COLS and ROWS may have a percentage (example above) or a fixed pixel width (example below) specified.

<html>
<head>
<title> Example Page </title>
</head>

<frameset rows="200,300,*">
 
 
</frameset>

</html>

  1. ROWS divides the screen into rows.
  2. There are 3 values declared, so 3 rows will be created.
Notice the * used for the third ROW setting? This is a "Whatever is left over" setting. It can be used with a percentage setting but it is usually found in the fixed pixel setting. Percentages will adjust themselves to the screen size.



For the rest of the frames tutorial, 4 sample pages have been created. Here is the code for one of them :
<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1.
</body>
</html>

In a real application, these will be actual pages containing your information.

To specify which pages are going to be shown in the FRAMES, the FRAME SRC tag is used. This is found within the FRAMESET tags. FRAME SRC does not have a closing tag.

Using the first Master Page example, we can insert pages for viewing like so :
<html>
<head>
<title>Master Page Example</title>
</head>

<frameset cols="25%,25%,25%,25%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
<frame src="page4.html">
</frameset>

</html>

This will place :
  • page1.html into the first specified COL space.
  • page2.html into the next specified COL space.
  • page3.html into the next specified COL space.
  • page4.html into the next (last) specified COL space.
Click here to see the Master Page working.

Note : Always have something going into each frame area. You can use web pages, images, or another frameset.

This is a very simplified example to show a frame setup. You can combine FRAMSETS to create a wide variety of different layouts and designs. This is known as nesting framesets.
Frames >> Col & Row
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow