Advanced Frames Tutorial

Mitzrah's Get IT Right Column!!
Advanced Frame Tutorial
Updated : Friday, July 31, 1998

Dear Homesteaders!

In order to create frames, you need to keep this concept in your mind.

	Parent Frame filename: index.html \|\| \/
Child 1 ======> filename: navbar.html name : right_frame		Child 2 <====== filename: main.html name : right_frame

IMPORTANT: The parent frame will govern the behaviour and most importantly the layout of its 2 child frames.

You can split a frame into as many sections as you want, horizontally or vertically, it is all done by means of a tag. So here we go with some examples.

These are the attributes of Child 1 and Child 2:

Frame on the left : Child 1 = 150 pixles wide, name = "left_frame", initial call up page ="navbar.html"
Frame on the right : Child 2 = takes up the rest of the frame, name = "right_frame", initial call up page ="main.html"

Then your parent frame [index.html file] should look something like this: the important bits are coloured red.

Contents of the index.html [parent] file

<HTML>
<head>
<meta name="keywords" content="sailormoon etc etc">
<meta name="author" content="your name">
<title>Your title of the page</title>
</head>
<frameset cols="150,1*">
<frame src="navbar.html" noresize name="left_frame">
<frame src="main.html" noresize name="right_frame">
</frameset>
</html>

IMPORTANT NOTE: Please note that there is NO <BODY> tag if you include this tag in the index.html file or any frame file for that matter, your frame will not show!

If you don't want viewers to resize your frame then you have to add the noresize tag. Please also note that it is very important to name/christen your frames, this is due to the fact that you might want some link on your smaller frame [left_frame] to call up another HTML file to load up in the bigger frame [main]. The names are in blue! The usage of the names are explained after the tags table below.

The keywords section is very important as it will point search bots and indexing bots to your web site, and if you want to put your page on the search engine then this must exist not in your child frames but in your parent frame.

Right, so you got your frames all nicely partitioned up, now you have to make some links.

Contents of the navbar.html [child1] file

Ok so, now you have learnt how to call up the child HTML files into the parent window. The next step is to learn how do you make a link from the left frame which makes the frame on the right comply with the click.

TEXT LINKS: OK for example you got a file called myself.html that you want loaded up into your right frame and you'd like to do this when the person clicks on the left frame. Remember that the left frame's HTML file is navbar.html. In navbar.html 's code there should be something along these lines here:

<a href="myself.html" target="right_frame">Myself</a>

The target="right_frame" tag will tell the browser to call up myself.html and load it into the right frame.

IMAGE LINKS: Let us say you got an image [filename ="myself.gif", size = 100 x 20] and you want to make it a link on the side bar, and clicking on this image will bring up another HTML file [filename = myself.html to be loaded onto the bigger [right_frame] area.

You know how to write the HTML so here we go,
<a href="big.html" target="right_frame"><img src="myself.gif" width="100" height="20" border="0" alt="Click here to read something about me!"></a>

Once someone clicks on the button, the bigger [right_frame] area will be loaded up with myself.html and leave the side bar as it is.

Good luck, if you need any further explanation do email me. Or if you got any comments on how to improve this tutorial, all is welcome.

Here are some more common tags where you can add to aid your control over the frames.

Tag	Choices	Position	Function
rows	="any combination of pixels" / = "any combination of proportion" / = "any combination of pixels and proportions"	<frameset>	This splits up your frame into horizontal rows into proportions that you specify. If you want to specify the number of pixels then use numbers, or another method is to use proportions like say you want to split your screen into halves, the top row having 1/4 of the screen and the bottom 3/4 of the screen so you specify your tag as such, rows="1,3"
frameborder	= "yes \| no"	<frameset>	if this value is set to yes, then a border is drawn with a 3-D look, if this is set to no, you would not get a border, but instead the background of the page shows through.
border	= "size in pixels"	<frameset>	This specifies the size of the border between frames. If this is set to 0 then there will be no borders and would end up like the case above.
bordercolor	= "#ascii_value" or ="color"	<frameset>	This tag specifies the colour of the border, I think it works with IE only.
scrolling	= "on \| off \| auto"	<frame>	It governs whether the frame can be scrolled down to see its content below if a visitor has a lower resolution. Keep in mind that some of your visitors may be operating on a 640 x 480 resolution.
marginheight	= "number of pixels"	<frame>	This governs the amount of pixels set aside as a margin from the top of the frame before your content starts pouring in.
marginwidth	= "number of pixels"	<frame>	This governs the amount of pixels set aside as a margin from the left hand side of the frame before your content starts pouring in.

Notes from Alex:

If you found my guidance helpful, please drop a note by my guestbook! So I know that you have dropped by and benefitted from my efforts, it took me quite sometime to get these tutorial up! Click on home and then SIGN GUESTBOOK! I will also visit your homepage and will sign your guestbook too.


[ Emiri Nakayama \| Sailor Mars, Rei \| About Me \| Photo Gallery ] [ WWW Resources \| HTML Tutorials \| Hints & Tips \| Banner Exchange ] [ Awards \| Win My Award \| Home \| Links \| Change Music \| E-Mail Me ]

LinkExchange Member

Free Home Pages at GeoCities