Frames - tutorial

HmmZ

May 20 2005, 01:46 AM

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:
user posted image

And this an example of an iframe setup:
user 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

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

CODE

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

Explanation:

CODE

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

CODE

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

CODE

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.

CODE

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

CODE

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

CODE

now the first iframe

CODE

close the table..

CODE

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

looks like very few code and gives this result:

Explanation:

CODE

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.

CODE

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

CODE

...
--!>
</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

Aug 8 2005, 10:29 AM

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

Aug 8 2005, 05:07 PM

Nice tutorial!

wassie

Aug 8 2005, 06:25 PM

nice tutorial, i was searching for days when i needed this.
very nice

thumbs up!

pilgrim_of_mini-monkeys

Aug 10 2005, 06:13 AM

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.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE