So, you want to have a page divided up into sections, e.g. for a navigation menu? Here's how...

Like Tables, frames may seem scary things at first. Al they are is combinations of 2 or more different HTM files managed by a "frameset" HTM file, which tells the browser how to, and in what order, to display these frames in a browser.

You will now find out why it is that I have been getting you into the habit of right-clicking on the area of a page to view the source, as opposed to using "View" then "source" from the toolbar.This is because if you are trying to look at code on a page that has frames, doing "view source" from the main browsner toolbar will only show you the master file - the "frameset" file for the page - not the code for the individual frames themselves. To see those, you have to position your cursor in the area of the page that is the frame and right-click and view source instead. So if you want to check out people's code for frames then you'll need to remember this!


Frameset file code

A frameset file should be coded in a similar fashion to the below:


<HTML>
<HEAD>
<TITLE>Frameset name<TITLE>
<HEAD>

<FRAMESET BORDER="x" COLS="20%","80%">
<FRAME NAME="frameone" SRC="filename.htm" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="auto">
<FRAME NAME="frametwo" SRC="otherfilename.htm" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="auto">
</FRAMESET>

<NOFRAMES>
you put in information for those who haven't got frame capable browsers in here just so they know what is going on, and what they are missing.
</NOFRAMES>
</HTML>

So what does all the stuff mean?:

  • The percentage values against the <FRAMESET COLS="x"> tell the browser the width each frame should take up in the browser window.
  • The <FRAME SRC=... is the code that pulls in the required html pages you wish to appear in each frame.
  • The NAME="framename" attribute names each frame. What this means is that you can set up links with a TARGET="..." attribute within the <A HREF.. element. This is turn means that you can define which frame you want the thing to which you have linked to appear in, simply by entering the name of the frame against the TARGET=" attribute.
  • If you want a page to which you have linked to appear without frames, you just enter TARGET="_top" in the <A HREF= tag. TARGET="_bottom" will give you the page loading in an entirely new browser window while the other stuff still stays easily accessible below!
  • The SCROLLING="..." can be set to either "None" (for no scrollbar), "Auto" (for the browser to decide if it needs to show a scrollbar) or "yes" (for a scrollbar to always appear).
  • The BORDER="x" attribute tells how many pixel widths you want any scroll bar to appear. MARGINHEIGHT> and MARGINWIDTH can be used to specify the margins you want for each frame.
  • The NORESIZE attribute (which has no variables) just tells the browser not to allow resizing of the frame in which this attribute has been placed.
  • The <NOFRAMES> element is used for those whose browsers do not support frames. It is, as well as having a note in your frameset page as I have indicated, worth having an entirely separate htm file/s for the content you have in frames, done as a NOFRAMES version, so even if your viewer cannot view the pages using frames, they can at least view them somehow! If you do not do this, it could be your loss and not theirs!
  • You can also have HSPACE="x" and VSPACE="x" which define the amount of horizontal and vertical blank space you want surrounding your frames.



Nested Frames

FRAMESET element or how ever many you want, in the frameset htm file! An example is below:


<HTML>
<HEAD>
<TITLE>Frameset name<TITLE>
<HEAD>

<FRAMESET BORDER="x" COLS="20%","80%">
<FRAMESET ROWS=""x, x">
<FRAME NAME="frameone" SRC="filename.htm" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="auto">
<FRAME NAME="frametwo" SRC="otherfilename.htm" MARGINHEIGHT="0" MARGINWIDTH="0" NORESIZE SCROLLING="auto">
</FRAMESET>

<FRAME NAME="framethree">
</FRAMESET>

<NOFRAMES>

you put in information for those who haven't got frame capable browsers in here just so they know what is going on, and what they are missing.

</NOFRAMES>

</HTML>

Inserting the variables as discussed under attributes earlier should give you frames that look like:


Frameone Frametwo
Framethree

Expecting there would be more were we? Well there aint! You don't need any code in the HTML pages you want pulled into each frame (though you may need to insert a TARGET="x" attribute and the relevant variable as discussed earlier in some of your link <IMG. tags in other pages so the page gets pulled into the frame it is supposed to!). The rest is up to you, so experiment away!

Oh, and note that you will obviously need a <FRAME... element and its associated attributes for every other frame you wish to have on the page. But don't go nuts - 3 is normally enough in itself! Vistors can tend to get irritated by frames so only use them anyway, for very good reason as I have in this HTML tutorial for the index on the left. Right, onto another nifty gizmo...........



Floating Frames

Nope, I am not referring to the effect after one has partaken of rather too much alcohol, I am talking nifty useful gizmo's here! Ever since MIExp 3.0 you have had this option. It is where the frame appears to be part of the actual web page itself, rather than in its own separate window as we have been doing them before. I will mock up a little one for you to see below:



And the code I used for this:


<div align=center>
<IFRAME NAME="Afloatyframe" WIDTH="200" HEIGHT="200" SRC=*quot;HTMLmenu.htm" BORDER="2" NORESIZE HSPACE="2" VSPACE="2" SCROLLING="yes">

</IFRAME>
</div>

So just stuff this code in with whatever variables and other attributes (as dealt with under "normal" frames at the beginning) you want, and you've done it! You do need borders, else your handywork will not be obvious! You just put in whatever filename you want. It's all as easy as that, folks!

wanna remain in good form?


Back To Noframes Version Next
 

Didi Barnes is a member of:
The International Webmasters Association The HTML Writers Guild
web site design
© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.

Passed HTML 4.01