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

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

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

Let me make a comment here. That second frame is not really "Terri's". It's simply the second frame and we have specified that `terri.html` is the first thing to be loaded into it. If we had an empty `<FRAME>` tag the window would be... well... empty.

Note- `<FRAME>` `NAME`s must begin with an alpha-numeric character. 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 window 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><P>
</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`.

`<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><P>
</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 `_self`, `_blank`, `_parent` and `_top`. 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' will be ignored. For what we're doing, `_top` is the only one to concern ourselves with now.

Note- It is important to specify `TARGET="_top"` rather than `TARGET="_TOP"`. Normally HTML is not case-sensitive but in this instance it is. Using `_TOP` instead of `_top` will sometimes cause the link to open in a new browser rather than the full window of the existing browser. Since it's been mentioned, that's what `TARGET="_blank"` does.... loads a link into a new browser window.

`<--BACK` `NEXT-->`

Introduction | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Lesson 7
PROFESSIONAL WEB DESIGN