Frames tutorial

[HmmZ 0]

Since I am working on a game wich uses frames and getting experience with it, i thought, a tutorial!

 

Frame Basics

Frames are a feature that can have great effects, you can separate the term frames into 2 objects, <frame> and <iframe>.

Whats the difference?

Frames are more or less an ancient feature from internet explorer and have not been updated much, the iframe on the other side is a much newer version of frames meaning they also have some advantages above normal frames. For example, the <iframe> can be embedded in tables and div tags. the <iframe> can also be nested into each other and create the term floating frame and give the user a userfriendly way of including frames in their pages, heres a visual example:

 

This is usual standard frame setup:

 

And this an example of an iframe setup:

 

You can see the difference.

Either frames have the special feature of acting as a static/separate page, you can insert a refresh line in your frame and it will only refresh the <iframe> or the <frame>. Frames are usually the basics of webchatrooms, shoutboxes jukeboxes etcetera. Thats whats making frames so great

 

Coding..

both frame objects are coded in a really different way and can even be combined.

 

Lets start out with standard frames, wich are usually the ones that need the most coding..

This is how a framed page has to be setup, ill explain it all clearly after it

<frameset rows="75, 575, 150" frameborder="no" framespacing="0" border="0"><frame name="header" src="header.html"><frameset cols="180, *"><frame name="navigation" src="navigation.html"><frame name="content" src="content.html"><frameset><frame name="footer" src="footer.html"></frameset></frameset></frameset>

looks like alot of code and basically it gives this result:

 

Explanation:

<frameset rows="75, 575, 150" frameborder="no" framespacing="0" border="0">

this line created a frameset with the heights that the frames from top to bottom have to be, header.html is 75px, content/navigation.html are 575px height and the footer is 150px in height. Then you basically see 3 attributes that are the same, it removes the border around the specified frames, the 3 same attributes have only 1 purpose, telling every browser to remove the borders. Unfortunately, Netscape, Internet Explorer and all the others need their own "no-border" attribute. so if you want to have your framesets function properly in every browser, use all 3 attributes..

 

<frame name="header" src="header.html">

this line creates the actual frame for the header, naming your frames is well important for later on, when you make your links

 

 

<frameset cols="180, *">

this additional frameset IN the first frameset is only meant for the frames that follow, so the header and footer do not deal with this frameset, it creates the frameset for the navigation and content, cols is the width, in opposite to rows, wich is height, the frame that starts in this frameset gets the property of 180px width, the frame that follows after that gets the rest.

If you would wanna have an additional frame next to the content, all you need to do is edit this line by adding a comma and the width you want, as an addition you need to specify a width for the content, resulting in this: <frameset cols="180, 500, *"> wich gives the content 500px width instead of the remaining px of the screen.

 

<frame name="navigation" src="navigation.html"><frame name="content" src="content.html">

these 2 lines create the frames for navigation.html and content.html, not much to explain

 

<frameset><frame name="footer" src="footer.html"></frameset></frameset></frameset>

here it creates another frameset, so that the frame following doesnt deal with the frameset of navigation and content, after creating the frame footer.html you of course have to close all framesets, remember, you can't close a frameset WITHIN a frameset, so all closings go at the end.

 

Thats what you need to frame a page using standard frames. Of course you have to tweak your pages with the by you defined widths and heights, else it would display horizontal AND vertical scrollbars, doesnt look neat..

 

Also, very important, is to make a nonframed page too, for users/browsers that dont support frames:

<noframe><body>your content</body></noframe>

 

Now for the iframe, im keeping it short, because it IS short.

The following is not necessary but gives me the option to explain it globally to you

<table width="100%" height="100% border="0"><tr><td>

now the first iframe

<iframe name="shoutbox" src="shoutbox.php" frameborder="0" width="300" height="400"><!-- content for non-supporting browsers -->...--!></iframe><iframe name="advertisement" src="advertisement.html" frameborder="0" width="300" height="400"><!-- content for non-supporting browsers -->...--!></iframe>

close the table..

</td></tr></table>

looks like very few code and gives this result:

 

Explanation:

 

<table width="100%" height="100% border="0"><tr><td>

like i said, this isnt necessary, but it gives the idea of having iframes in a table, of course you can make multiple tables and make mroe tables have iframes, no problem.

 

<iframe name="shoutbox" src="shoutbox.php" frameborder="0" width="300" height="400">

This creates the iframe for your shoutbox, the name is obvious, as it all works the same way as standard frames, same as src. Frameborder is the only attribute you need to tell every browser it doesnt want borders and the ease of using the usual width= and height= is very nice

 

<!-- content for non-supporting browsers -->...--!></iframe>

As with the <noframes> you need a backend code for non-frame supporting users/browsers, and of course the closing of your iframe, the other iframe works the same way and the table closings are self-explanatory too..

 

Now for a great feature of both frames...framelinking.

As said before, the great advantage of frames is having a static partial page, also meaning that you can put a link (a href) and target it to another frame...an example

 

<a href="news.html" target="content">News!</a>

or

<a href="othershoutbox.php" target="shoutbox">Second Shoutbox!</a>

 

you can put the link ANYWHERE on your page and it will open the link in the target you specified, if you have the link in your navigation, it will open the link in your content frame, with the benefit of ONLY the content frame being loaded, same with the shoutbox link

 

Attribute List

You can use the following attributes with both frame sorts:

Name--Specify a name that can act as target for a link

Src--Specify the frame source page

Frameborder="1"/"0"/"no"--Specify frameborder size

The following attributes are used in the style attribute

style="

margin-width: ?px;--Specify margin between top/bottom border(visible or not) and the embedded file

margin-height: ?px;--Specify margin between left/right border(visible or not) and the embedded file

frameborder: ?px solid/groove/outset/etc.. #color;--Customize the frameborder(if visible)

 

Hope this was explained clear enough

If you still got a question, ill try to answer it

[Adamrosso 0]

Hmm, i prefer not too use iframes as it takes up allot of bandwith if your gonna use a iframe for each page . But still a nice tut

[mizako 0]

Nice tutorial!

[wassie 0]

nice tutorial, i was searching for days when i needed this.very nice -_-thumbs up!

[pilgrim_of_mini-monkeys 0]

Although you have got a good tutorial, frames are not a nice feature and should never have been developed. They screw up the whole basis of SEO, they suck up bandwidth like a 1500CC vacuum cleaner and are generally annoying.You never see frames being used on well done professional sites.The only good place for frames or floating frames (iframe) is as a control panel for site administrators or mods.