| |
Let's face it, frames are easy to do but hard to do properly. It can be used to enhance a page, but it can also be a page's detracting factor, especially when the frames require too much down-scrolling and when it takes too much space for browsing comfort. Another thing that could be remembered when using frames is that the extra separate html files that you use with your frames cost also extra server space.
Anyway, we will start with the basics first. I asked my friend Alex P'ng how he would go about teaching someone how to do frames and written below is what he told me.
Ok Ruk, here we go...
In order to create frames, you need to keep this concept in your mind.
|------- |
Parent Frame |
------| |
| Child 1 |
|
Child 2 |
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. Say you wanna split like
you said and the spacing you want on the left is 150 pixles wide, with the side bar
referring to Child 1 whose name is "side_bar.html" and the main body is child 2
whose name is "intro.html". Then your parent frame should look something like
this, the important bits are coloured red. 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 tot he fact that you might
want some link on your smaller frame to call up another HTML file to load up in the bigger
frame. The names are in blue! The usage of the names are
explained after the tags table below.
<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="side_bar.html" noresize
name="sidebar">
<frame src="intro.html" noresize
name="main">
</frameset>
</html>
The keywords section is very important as it will point search bots and indexing bots
to your web site, and if you wanna put your page on the search engine then this must exist
not in your child frames but in your parent frame.
Here are some more common tags where you can put to aid your control over the frames.
| Tag |
Choices |
Position |
Function |
| rows |
="any combination of pixels" OR
= "any combination of proportion" OR
= "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. |
Right, so you got your frames all nicely partitioned up, now you have to make some
links. Say you got an image (big.gif, 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 (big.html) to be loaded
onto the bigger area. You know how to write the HTML so here we go, <a
href="big.html" target="main"><img
src="big.gif" width="100" height="20" border="0"
alt="This is my big HTML file!"></a>
Once someone clicks on this, the bigger area will be loaded up with big.html and leave
the side bar as it is.
[ Main Page || The Help Office || GeoCities || GeoCities Tokyo || View Gbook ]
|