Beyond basics – Frames

Frames are a great way of navigating your Website or pages within your website but they can also be a pain if not properly formatted. When using frames for the first time keep it simple. The two most common ways of formatting frames are: two frames verticle and two frames horizontal. It is a matter of taste on which one you prefer.

The Horizontal format is great for dropdown menus and allows you to open the other pages in a frame below the navigation frame while keeping that navigation frame on top at all times.

The Verticle format keeps everything on the left side while opening pages on the right side.

No matter which format you use you will need at least three pages.

Lets take this one step at a time and set up an index page.

There is a frames maker page on this website for your use. It would be a good idea to use it. There are step by step instructions there for setting up that first page. Save it as index.html. Make sure that you change the frame src= to the name of the page that you want to open. There will be two of these tags. The first one will open on the left or top and the second will open on the right or bottom.

Now your index page formatting should look like this (if it is horizontal):

<HTML>

<HEAD>

<TITLE>My Frame Page</TITLE>

</HEAD>

<frame src=main.html name=One

scrolling=auto marginwidth=0 marginheight=0 noresize=yes>

<frame src=welcome.html name=Two

scrolling=auto marginwidth=0 marginheight=0 noresize=yes>

</frameset>

You need a frames capable browser to view this page.

</noframes>

</HTML>

The BODY tags are missing. This is because the FRAMESET tag replaces the BODY tag. If you put in a BODY tag, the frames won't work. You will receive exactly the same error message or blank page that a browser not supporting frames displays.

Now lets make the navigation page. This is the one that will open in either the top or left side of the viewed page. Remember that only 20% or 30% of the page will be displayed so if you have verticle frames you'll want to keep the page aligned left and if you're using horizontal frames you'll want to keep everything towards the top of that page. This where you want to add any dropdown menus for navigation or whatever way you want to navigate the website.

Directly after the <body> tag put in this tag <BASE TARGET="whatever the “name” of the second frame src is in the index page">. What this does is to open any link in this page into the other frame.

Lets see if I can make this clearer. In the index.html that you just created there are two tags. One is <frame src=1.htm name=One and the other is <frame src=2.htm name=Two. That is if you used the frames maker on this site. So you want to make the base target = two or <BASE TARGET="Two">. I hope that cleared things up.

Please do not put links to other peoples websites in the navigation page. It is bad “netiquette to do so. It traps their work in your frames. Ok now we can save this page so lets save it as main.html. So now you have a navigation page. Next lets do a Welcome page.

This is the third page you'll create and it will be the largest page to be viewed. It will be the first page that someone sees when they visit your site so keep it simple and informative. I usually center everything on this page but it is up to you and your personal tastes. Save this page as Welcome.html.

Some tips

When including links to other sites you'll need to add the tag TARGET=_"top" in the href portion of the link.

It will look like this: <A HREF="http://www.whateverthesiteis.com" TARGET=_"top">. This will break out of the frames so as not to trap their site in your frames.

Another way to open a link is to open it in a completely new browser window. This accomplishes two things, it keeps your page open and it breaks the other site out of your frames. This is very handy if your site is a links site like this one. It keeps a browser window open with your site so that visitors always have your webpage open for navigation to other sites without them having to use the "back" button on the browser.

To accomplish this you use target="0" just before the href portion of your link. It will look like this:

<a target="0"href="http://www.whatever.com">.

We used two container elements (FRAMESET and FRAME) and each have their own attributes.

FRAMESET ATTRIBUTES

BORDER=" " specifies the width in pixels of the border drawn around the frames. (Netscape only)

COLS=" " creates the frames as columns. The width of each column may be specified as a percent (%), in pixels, or in relative size (*).

FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frames. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)

FRAMESPACING=" " specifies the amount of space between the frames in pixels.

ROWS=" " creates the frames as rows. The height of each row may be specified as a percent, in pixels, or in relative size.

SCROLLING=" " to determine whether or not scroll bars are to be displayed on all the frames. Values are either "yes", "no" or "auto".

FRAME ATTRIBUTES

BORDER=" " specifies the width in pixels of the border drawn around the frame. (Netscape only)

FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frame. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)

MARGINHEIGHT=" " specifies the top and bottom margins of the frame in pixels

MARGINWIDTH=" " specifies the left and right margins of the frame in pixels

NORESIZE prevents the frame from being resized by the viewer

SCROLLING=" " determines whether or not scroll bars are to be displayed along the frame. Values are either "yes", "no" or "auto".

SRC=" " specifies the source document to be placed in the frame.

Also, don't forget the following two points:

<NOFRAMES> and </NOFRAMES> tags to be placed inside the FRAMESET tags. Anything placed between the NOFRAMES tags is printed only by browsers not supporting frames.

TARGET=_"top" is to be used as part of the URL of a link to ensure that the frames page is properly exited.