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>

VIEW IT

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>

VIEW IT

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>

VIEW IT

FAQ: I try to make my frames with no borders, but with Browser-A, a thin line still appears between the frames. How do I make it go away? A: Under most circumstances those thin lines can be eliminated. Look here for a simple solution.

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>

VIEW IT

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>

VIEW IT

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>

VIEW IT

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>` `NAME`s 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`.

VIEW IT

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>

VIEW IT

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>

VIEW IT

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-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 | Templates | Barebones HTML Guide
PROFESSIONAL WEB DESIGN