Jump to content
xisto Community
Sign in to follow this  
HmmZ

Frames tutorial

Recommended Posts

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:

Posted Image

 

And this an example of an iframe setup:

Posted Image

 

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 :lol:

 

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:

Posted Image

 

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:

Posted Image

 

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 B)

 

<!-- 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 :D

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.