Invisible Frames 4 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FRAMES 4 - INVISIBLE FRAMES

WHY INVISIBLE FRAMES?

You will have noticed scrollbars in the examples given. These allow you to move up and down within each frame. You can also resize the borders of the frames to suit yourself. Now in the case of a badly designed web site this can be a good thing, but if you have slaved over a hot web site and you like things just the way they are, you don't want people messing about with it, do you.

The way to do this is to create "invisible frames" - to make the scrollbars disappear. To do this, you add some extra commands to the FRAMESET tag, and then adjust your FRAME tags so that they make visual sense.

The new bits of code are these:

BORDER="0"

FRAMEBORDER="0" Sets the frameborders to zero so they are hidden.

FRAMESPACING="0" If you don't set this to zero there will be a gap between frames.

SCROLLING="NO" Set the scrolling attribute to "NO" in one or more of the FRAME tags. If I have a small amount of information in the left column I won't need a scroll bar to see it all. In the right frame by leaving out the "NO" command, scrollbars will be added by default if needed.

You can alter any of these values to create any special effects you might like. The following code will create two frames with an invisible border between them:

</FRAMESET>

And HERE is the example from the above code.

You can make a good looking frame page by adding another frame across the top with your header or logo in it, make it and the left side the same colour or do the whole page in the same background colour. If possible turn off the scrollbars for these two section; the main part of the page will automatically generate a scrollbar if needed. You will need to fiddle around with the frames and adjust things like font size for the left column.

OTHER ADDITIONS

There are a few more things you can add to FRAME tags improve or modify the way they work.

This is an example of incorporating some of them - MY FRAMES. It uses a number of different elements which are specified below. By the way, none of the links work - they are just underlines.

RESIZE="NO"

NORESIZE This is the same as RESIZE but not all browsers support the RESIZE="NO" command (and vice versa). Use both to be on the safe side.

MARGINWIDTH="2" and MARGINHEIGHT="2" Set these to whatever size you want for the margins between the frame and the contents of the frame.

You can also use an asterisk * to specify the second percentage of the frame. Your browser will automatically "fill in the blanks". For example:

<FRAMESET ROWS="11%,*" COLS="*" FRAMEBORDER="yes" BORDER="1" FRAMESPACING="0"> This is the first frameset line in MY FRAMES example given above.

You can play around with the "MY FRAMES" example given above. Copy or download the pages, rename them to whatever you like and go for it. Try to keep the originals intact or they may not work properly. The pages you need are:

myframes.html
frtop.html
frmain.html
frleft.html

And for practice, here is a list of the coloured example pages used in these CREATING FRAMES pages:

fryellow.html
frgreen.html
frgrey.html
frblue.html
frpeach.html
frcoral.html

There are a number of other pages used and are all prefixed by "fr" - for example, frexlink1.html

As with all these lessons, if you get hung up on something read through ALL the instructions again. If you are still stuck just click Help. Frames can do all sorts of weird and wonderful stuff to your browser. If you find something particularly strange happening, just close down your browser, restart it and try again. That will usually fix the problem.

Next: Image Maps

Advanced Index