shadowline
Borders << Linking >> NoFrames
Linking between frames creates the "magic" of using frames. Linking can make the same frame change its contents or have a different frame change its contents.

First, start off with a simple column layout again.

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

<frameset cols="35%,65%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>

</html>



Linking in the same frame.

Open the coding for "PAGE 1" and create a simple link that goes to "PAGE 3".

<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>

Link to page 3 <a href="page3.html"> CLICK HERE </a>

</body>
</html>

When the Master Page is run, the first column containing "PAGE 1" will now have a link to "PAGE 3". Clicking on this link will load "PAGE 3" into the same frame (column) that "PAGE 1" occupies.

Click here to see the example in action.



Linking to a different frame

Linking to a different frame requires using the NAME and TARGET properties. This gives the browser instructions on where to open the link.

On the Master Page, the NAME property is entered into the FRAME SRC tag to give the frame a name.

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

<frameset cols="35%,65%">
<frame src="page1.html">
<frame src="page2.html" name="MainWindow">
</frameset>

</html>

In PAGE1, the TARGET property will be added to the A HREF tag. This is a "pointer" to find the named area.

<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>

Link to page 3
<a href="page3.html" target="MainWindow">
CLICK HERE
</a>

</body>
</html>

When the link in "PAGE 1" is activated, the TARGET will look for the NAME and load the link into that particular frame.

Click here to see the example in action.

Note : Be sure to check your spelling and CaSe LeTtErS for the NAMES and TARGETS. They should match EXACTLY to work properly.

Add another link into PAGE 1. This one will load PAGE 4 into the NAME specified frame. The PAGE 1 coding now looks like this:

<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>

Link to page 3 <a href="page3.html" target="MainWindow"> CLICK HERE </a>
<BR>
Link to page 4 <a href="page4.html" target="MainWindow"> CLICK HERE </a>

</body>
</html>

Click here to see the example in action.

You have now created a framed page with a site directory on the left side. This can also be done in ROWS if you prefer to have a listing along the top or bottom of the page.


Linking to more than one frame

Having more than one frame area change during one click is covered in our FAQ area. Click here for details.



Outside Linking

When linking to other sites, the settings for the TARGET property should be changed. Having someone else's site load into one of your frames is considered "bad netiquette" and is sometimes confusing.

The outside values for the TARGET property are _top , _self , and _blank. These settings MUST be in lower case and MUST contain the underscore before them to work properly.

_topThis will clear your site out of the current browser window and load the targeted page. This is the best way to link to another site.
_selfThis is just like not having a TARGET property. It will load the target page into the same frame.
_blankThis will bring up a new browser window and load the target page into it. This makes it easier for a visitor to return to your page afterwards.

To show how the _top value works, I'll add a link in "PAGE 1" going to the AltaVista site.
<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>

Link to page 3 <a href="page3.html" target="MainWindow"> CLICK HERE </a>
<BR>
Link to page 4 <a href="page4.html" target="MainWindow"> CLICK HERE </a>
<BR>
<a href="http://www.altavista.com/" target="_top"> Visit Altavista </a>

</body>
</html>

Click here to see the example in action.
Borders << Linking >> NoFrames
shadow

Advertise in the banner along the top, Click here!

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