Frameset Attributes

If you've viewed any of the examples so far, you'll know they're a little messy.

By adding attributes to the FRAMESET and FRAME tags, you can dramatically change the look of your frames pages.

Frame Resizing

We'll start with a simple one. Notice on the previous examples that the frames can be resized if you drag them with the mouse. You probably don't want your visitors to be able to do this, so to prevent it happening add NORESIZE to your FRAME tags.

Here's the modified code (we'll work with a simple two frame horizontal split for these examples):

<FRAMESET ROWS="100,*">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE>
<FRAME NAME="main" SRC="main.html" NORESIZE>

</FRAMESET>

Click here to view the result.

To Scroll or Not to Scroll

You can decide whether or not to put scrollbars in each of your frames using the SCROLLING attribute of the FRAME tag. Under most circumstances you should set this to AUTO, which means that the scrollbars will only appear if they are needed. However, you can also set this attribute to YES or NO depending on if you want scrolling or not.

When choosing which setting to use, always remember that not everyone will be viewing at the same screen resolution as you. On your screen with your settings you may not need scrollbars, but someone else may. That's why AUTO is generally the best option.

Frame Borders

At the moment our frame sets all seem to have borders on them. Just like the tables did before we learnt to set them to zero. You'd think they'd be quite simple to get rid of because of that, unfortunately it's not as simple as it seems. There are in fact 5 separate attributes concerning frame borders, and to be safe we advise that you use all of them. Different browsers look for and respond to different code, so you'll have to check it all looks fine on the browsers you have installed.

Let's imagine that you want to get rid of all borders, which is a fairly common. If you do want some kind of border then simply adjust the attribute values as necessary.

First of all, in the FRAMESET tag (or tags if you're nesting them), add the two attributes BORDER and FRAMEBORDER. BORDER takes a number value, specifying how thick the border should be while FRAMEBORDER just needs a simple yes or no.

<FRAMESET ROWS="100,*" BORDER="0" FRAMEBORDER="NO">

Next in your FRAME tags add the FRAMEBORDER attribute, As before, this just requires a yes or no:

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="NO">

That should have eradicated all traces of a frame border. Have a look at this example.

Border Colours

You may have noticed that we said there were five attributes relating to frame borders. The other two are only used when you are using borders.

They're both used to control the colour of your borders. The attribute is called BORDERCOLOR, it goes in both the FRAMSET and FRAME tags, and it takes a normal hex colour code. Here's an example:

<FRAMESET ROWS="100,*" BORDER="5" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">
<FRAME NAME="main" SRC="main.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

</FRAMESET>

Click here to view the example.
NB: Some browsers don't respond to the BORDERCOLOR attribute until the BORDER attribute has been set to 5 or higher.

Margins

The final set of attributes we'll look at relate to frame margins. Use these attributes in the FRAME tag and they'll alter the margins in the frame.

The two attributes are MARGINWIDTH and MARGINHEIGHT - WIDTH deals with horizontal margins and HEIGHT with the vertical ones. They both take number values from 0 upwards. For example:

<FRAMESET ROWS="100,*" BORDER="5" FRAMEBORDER="YES" BORDERCOLOR="#0000FF">

<FRAME NAME="navbar" SRC="navbar.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#FF0000" MARGINWIDTH="30" MARGINHEIGHT="30">
<FRAME NAME="main" SRC="main.html" NORESIZE SCROLLING="AUTO" FRAMEBORDER="YES" BORDERCOLOR="#FF0000" MARGINWIDTH="30" MARGINHEIGHT="30">

</FRAMESET>

The result looks like this. You'd probably never want a margin this big in a real situation.

And that just about covers everything you should need to know about frames. Always think carefully when you're using them because they can cause serious problems, but hopefully things will work out fine.

Now you have the frame set you need the frame pages.