HTML frames help needed

Factual Questions
1

I’ve been trying to Google for an answer to this, but so far I’m striking out.

I’m trying to design a web page with 3 frames – a “banner” frame across the top, a “contents” frame on the left side, and a “main” frame to display a variety of pages.

In the “contents” frame I have a series of buttons, such as:

<input type=“button” name=“button1” value=“Option 1” onclick="???">

I can’t figure out what to put in the onclick to get it to load option1.html in the “main” frame. If I put onclick="location.href=‘option1.html’ " it will load the page in the “contents” frame, which is not what I want, even though I have <base target=“main”/> in the <head> block.

I’m sure it’s something very simple, as there are lots of web sites that do this.

What am I missing?

2

Is there a reason why you want to use frames? Frames are rarely the best choice for building a web page. In the example you give, for instance, the use of frames as navigation hosts will screw up a person’s ability to bookmark any of the content in the main frame.

The way the target property should be used, if you must do it, is to put the name of the frame in the frame tag, then include the target property in the href, like this:

<Frame Name=“mainframe”>
…some content…
</Frame>
<Frame Name=“contentsframe”>
<a href=“option1page.html” target=“mainframe”>Load this into mainframe</a>
</Frame>

That should work. HOWEVER, once again this sounds like a bad use of frames. A much better choice would be to use server-side includes to build the page up, or use AJAX or some other form of scripting technology to do it. Or, if you can’t write server-side code, you could pass the request back to the main page on the querystring and have the page reload with the correct content in the frame. At least that way, you won’t break browser navigation controls.

3

To elaborate on the second option, you could write your href like this:

<a href=“Mainpage.html?contents=option1”>Load page again, this time with option 1 in the main frame</a>

Then write some javascript in your onload handler like this:



function loadframe()
{
   var optionValue = request.querystring("contents");

   if (optionValue="option1")
  {
      var mainframe = document.getElementByID("mainframe");
      mainframe.document.location="option1.html";
   }
}
<body onload="loadframe()">
  <frame id="mainframe" />

Something like that. The syntax above is probably slightly wrong - I haven’t written Javascript in months. This technique will cause the page to reload, so it won’t look quite as ‘smooth’ as directly manipulating the frame in a link, but this way you will have a URL that points to all content on your web site. Users can bookmark it, other web sites can link to it, etc.

Using your first frames technique, there will be no way for other web sites to link directly to content on your site. That means your pages won’t get ranked properly by search engines, either.

4

In this case, I don’t want the users to link directly to pages in the main frame. Think of something like a home banking application, where the user enters a login/password to get to the main page, then has options on the left side to show balances, history, loan payments, etc.

I can figure out how to make it work using standard anchor tags ( <a href=… >), but I wanted to use buttons instead of text links.

Are there any php techniques that would make this easier?

5

The technique doesn’t change if you use an input button. You just reference the frame in the input onlick call like this:

<input type=“button” value=“Clickme to open in another frame” onclick=“mainframe.location.href=‘option1.htm’”>

Or, if you want to generalize the function in Javascript, you can write a function like this:



function loadFrame(frameName, pageName)
{
    var targetFrame;

    targetFrame = document.getElementById(frameName);
    targetFrame.location.href=pageName;
}

Then your input statement can look like this:

<input type=“button” value=“clickme” onclick=“loadFrame(‘mainframe’,‘option1.html’)” />

This assumes you have a frame where the ID is set to “mainframe”

If you have access to php, you can do server-side stuff. In which case I’d once again recommend ditching the frames and use server-side includes to build your page on the server and send it as one html document. Use CSS to position the elements on the page. This separates the client from the server logic, allows you to write different versions of the page for different browser technologies, and makes the whole thing far more maintainable going forward.

6

Thanks, Sam. I’ve been programming for years, but I’m kind of new at this web design stuff, so I’m trying to quickly get up to speed on HTML and PHP.

7

If you use input buttons, you are also talking about forms. Not a good way to go with site navigation. Save the forms for their proper purpose. You can achieve a visual appearance of buttons with graqphics, or better still, CSS.

If you are using onclick, that means Javascript. Not a good way to go with site navigation. Maintaining a user dependency with site navigation means if Javascript isn’t working or disabled, your site is dead in the water. Also, Javascript navigation often means the search engines cannot properly track your web site.

Since you are new to web pages, I suggest sticking with the most basic of page design (no frames, no Javascript) using a simple navigation method. Using PHP can greatly automate the process with SSIs and other dynamic features.

I’ve seen too many people with limited to no web experience want a web site with bells and whistles. More often than not, the results are dismal failures.

Sam’s comments concerning PHP and CSS are spot on. However, there is no need (and it’s a waste of time) to create web pages for specific browsers. Build according to W3C web standards. Then consider adding CSS hacks so the non-standard browser renders the pages as intended.

8

I was thinking more along the lines of pages formatted for mobile devices and things like that. I agree, you should code the page according to W3C standards.

9

While you may have a very good reason for this, I’d advise considering whether it’s really that important. Frames have other unintended consequences - in particular, they don’t index well in search engines, because as far as Google (for example) sees, each frame is an individual page, so Google will just index them separately. Also, the frames don’t stop users from linking to main-frame pages, assuming they’re bright enough to find out the page’s address (this is trivial in Firefox and Opera, and only slightly challenging in IE). You can always stick javascript calls on the main frame content to ensure that if anyone links directly to the main pages, then the site reloads with the navigation frames, but that’s a bit hacky. Apart from which, why do you actually want to stop your users from bookmarking internal pages? Is it a security thing, or something else? If there’s any reason why your users would want to bookmark individual pages, then the frames restriction is just going to annoy them, and seek ways to circumvent it (this is certainly my reaction, at least :)).

I guess I’d just advise really thinking through the reason you’re using frames, as they come with some real usability downsides, and frequently don’t actually achieve what the designer was after in the first place.

10

To echo what others are saying, I don’t think frames are the best way to go. Ideally, look into CSS, but even tables would be better than frames.

There are plenty of examples of what you want to do on the web for free. I suggest you download, study and edit a free CSS template that looks similar to what you are after. There’s a good collection here…

The basic difference between the three are…

  1. Frames use a different html page for each area (this = trouble).

  2. Tables use one html page split into sub areas. This is better but can be hard to get looking exactly how you want (being so static) and sometimes do not display the same on all browsers/resolutions.

  3. CSS dynamically positions your headers, menus and content areas by attributes like distance from the top, etc.

Of course, you may be using php rather than html pages, but the above is still true.