Frames Tutor- Lesson 4

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.

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 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 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> NAMEs 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 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 You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A> 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.

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