Tutorials - Frame

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="shameem.html"> </FRAMESET> <FRAME SRC="sharf.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="shameem.html"> </FRAMESET> <FRAME SRC="sharf.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="shameem.html"> </FRAMESET> <FRAME SRC="sharf.html"> </FRAMESET>

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

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="kassim.html"> <FRAME SRC="sharf.html"> </FRAMESET>

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

<HTML> <HEAD> <TITLE>My Frame Page</TITLE> </HEAD> <BODY> Beth You have to visit my friend Sultan </BODY> </HTML>

Then add the link, and save it.

<HTML> <HEAD> <TITLE>My Frame Page</TITLE> </HEAD> <BODY> Beth You have to visit my friend <A HREF="sultan.html">Sultan</A> </BODY> </HTML>

Now try it.

<FRAMESET COLS="33%,67%"> <FRAME SRC="kassim.html"> <FRAME SRC="sharf.html"> </FRAMESET>

VIEW IT

If you click on that link you'll see Sultan's page load into Kassim's window. I know, I know... you're not impressed. You want to click on a link in Kassim's window and have it load into Sharf'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="kassim.html"> <FRAME SRC="sharf.html" NAME="WINDOW-1"> </FRAMESET>

Let me make a comment here. That second frame is not really "Sharf's". It's simply the second frame and we have specified that sharf.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 Kassim's page, so open kassim.html again (with Notepad) and add a TARGET.

<HTML> <HEAD> <TITLE>My Frame Page</TITLE> </HEAD> <BODY> Beth You have to visit my friend <A HREF="sultan.html" TARGET="WINDOW-1">Sultan</A> </BODY> </HTML>

This will cause the link to load into the window 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 Kassim's page.

<HTML> <HEAD> <TITLE>My Frame Page</TITLE> </HEAD> <BODY> Beth You have to visit my friend <A HREF="sultan.html" TARGET="WINDOW-1">Sultan</A> And of course you have to visit Jaffri at <A HREF="http://knrfriends.20m.com/tutorials" TARGET="WINDOW-1">Professional Web Design</A> </BODY> </HTML>
As you can see, this causes someone else 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 Frame Page</TITLE> </HEAD> <BODY> Beth You have to visit my friend <A HREF="sultan.html" TARGET="WINDOW-1">Sultan</A> And of course you have to visit Jaffri at <A HREF="http://knrfriends.20m.com/tutorials" 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 _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- Apparently there is an occasional problem with TARGET="_TOP". It often opens up a whole new browser window rather than simply loading the link in the full browser window. Technically that is what TARGET="_BLANK" is supposed to do. The cure for this is to specify TARGET="_top" instead of TARGET="_TOP". Just use lower case letters.

<--BACK NEXT-->

Lesson 4