HTML Studio's
Html Studio's Web Tutor
Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Frames Tutor - Lesson 4

Next we'll try a couple minor effects. Not all of them work with all browsers though. If the browser doesn't understand the attribute, it will just ignore it.

First we can change the thickness of the borders. 

<FRAMESET COLS="154,*" BORDER=20>
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

We can change the color of the borders. 

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

We can turn off borders for individual <FRAMESET>s with FRAMEBORDER. 

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*" FRAMEBORDER=NO>
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

We can prevent the viewer from resizing a frame. Unless you have a very unusual circumstance, there really is no reason to use this attribute. 

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*" FRAMEBORDER=NO >
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html" NORESIZE>
</FRAMESET>

Ok. Now that we have learned a bit about Framing let's go back to something simple and we'll tear into linking between frames. 

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

What we're going to do is add a link from beth.html to shannon.html. So open beth.html with Notepad and add the following... 

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth
<P>You have to visit my friend Shannon.
</BODY>
</HTML>

Then add the link, and save it. 

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth
<P>You have to visit my friend <A HREF="shannon.html">Shannon</A>.
</BODY>
</HTML>

Now try it. 

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

If you click on that link you'll see Shannon's page load into Beth's window. I know, I know... you're not impressed. You want to click on a link in Beth's window and have it load into Terri's window. Well, that's a little more work.

What you have to do is NAME the <FRAME> in your master page. So go ahead and give that second frame a name. 

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html" NAME="WINDOW-1">
</FRAMESET>

Note - <FRAME> NAMEs must begin with an alpha-numeric character (abc123 etc). All other window names will be ignored. (An exception is to begin the frame name with the underscore _   Its use is explained a little later.)

Next we have to add a little something to that link in Beth's page, so open beth.html again (with Notepad) and add a TARGET. 

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth
<P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A>
</BODY>
</HTML>

This will cause the link to load into the frame named WINDOW-1.

That kind of linking is great when you want to link together pages in your site. But what if you want to link to something outside your site? Let's add another link to Beth's page. 

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth
<P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A>
<P>And of course you have to visit Joe at
<A HREF="http://junior.apk.net/~jbarta/" TARGET="WINDOW-1">Professional Web Design</A>
</BODY>
</HTML>

As you can see, this causes someone elses page to load into your window.

How can you make an outside link load into the full browser window? Easy, change the TARGET to _top. (Note that was in lower case... very important.) 

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth
<P>You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A>
<P>And of course you have to visit Joe at
<A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A>
</BODY>
</HTML>

Always use this method when linking to an outside page. Believe me, your viewers will appreciate it!

_top is one of 4 so-called 'magic targets'. They are _top, _blank, _self and _parent. These are the only targets that can begin with something other than an alpha-numeric character. In addition, any target beginning with an underscore_ that is not one of the 'magic targets' may behave unpredictably.

What exactly do those 4 magic targets do?

_top opens a link in the full browser window.
_blank opens a link in a new browser window.
_self opens a link in the same browser window or frame. (Same as doing nothing)
_parent opens a link in the immediate frameset parent.

It is commonly thought that _new will open a link in a new window. With most browsers it will. So will _tom, _dick or _harry. For that matter so will bonnie and clyde. Any TARGET that is not defined somewhere will simply result in a new window opening up (usually).

Once again, remember, when using one of the four magic targets, _top, _blank, _self or _parent, make sure they are lower case. UPPER case won't be understood and the end result will probably be the link opening in a new window.

< Back Next >

Lesson : 1 - 2 - 3 - 4 - 5 - 6 - 7

Maintained by Nick Grant < htmlstudio@talk21.com >

Copyright © 2000 Nick Grant. All Rights Reserved.