Web_Frames_Introduction

Frames-based Web-Pages - an Introduction
by: Bill Schell - write me with questions: bill@vikingasia.org

Here's the basic premise:

A "Frames Based Web Page" creates this philosophical perspective: (again from Mr. Bill's Keep It Simple viewpoint) they help 'organize' the page into these two-or-three (or more, but rarely more than 5) frames. Almost all web-pages today (2006) are Frames Based.

Some web-authors will 'tell you' this - (up front (with the ' view source ' command)) some do not tell you - and they 'hide' the fact from the viewer.

Even worse - on MANY web-pages that are 'Frames Based' there is little or no 'visual cue (visual clue)' to the fact that the web-page is 'Frames Based'.

THEN SOMETIMES, when you print a web-page you may find your print-out only gives you a part of what you want, not everything you see on the screen. This is a function, usually, of a Microsoft Windows Operating System and/or a Microsoft Web Browser Client, (something such as Internet Explorer) confusing and/or confounding a Frames Based web-page and only printing one or two of the frames that you are actually seeing. Again - as noted above, sometimes there is no visual clue / cue as to what you see and/or what you print.

TYPICALLY a Frames Based approach gives you these three frame-types:

a " Title Frame " at the top of the page - this 'Title Frame' extends the full width of the web-client-browser's screen-window.
a " Menu Frame " at the left-side of the page - this is where (typically) there is a 'menu' of items that the viewer-user can choose from. The width of the MenuFrame is re-sizeable by the viewer-user in their Web-Browser-Client-software (Internet Explorer, Apple Safari, Mozilla Firefox, etc.)
a " Main Frame " at the right-side of the page - this is where the content items from the 'Menu Frame' are displayed.

EACH of these 'Frames' requires a separate ...hmtl file. This confuses many Frames-Based beginners. Do not despair. You can (as in using the' view source ' command ) create your first Frames Based web-page.   Try and then 'extrapolate' and learn more by implementing ever more complex environments as you gain confidence and experience.

In general this (Frames Based) approach allows you to limit your time editing, because it allows you to not edit anything at all for things that do not change. It does, however, limit the 'look' of your web-page. There are ways around this - but not under Mr. Bill's "Keep It Simple" methodology...

If you want to carry this concept (of not editing things that don't change) even further, then you will be using a concept called 'CSS' (Cascading Style Sheets).    This is a "whole 'nother level'" of complexity from the editing end but - again, allows you more flexibility and more variability at the user-viewer -level.    I can explain that to you - or you can learn about it in books, but it is not part of the Keep It Simple strategy, so it is not covered here.      There is a VERY BRIEF-BASIC explanation / introduction to CSS available (by clicking ' here '.

Anyway - for a 'chance to view a simple (VERY simple) Frames Based Web Page click on this link: ' Bill's Personal Web Page '

When you click on this link you'll see a web-page that has only two frames (the 'Title Frame' (noted above) does not exist on this web-page) but you can see (easily, I might add) the left-side "Menu Frame" and the 'Main Frame' in the middle - where the bulk of the content or information is presented.

The "index.html" in the directory is a very very small file that merely 'calls' or 'loads' the MenuFrame.html file to display the Menus in the left-side.

This is Bill's 'index.html' file (but it is for a 'generic' month, that is - it works for any month) - it just 'loads' files into the interpreter called " VANC_MenuFrame.html "   and " VANC_Intro.html " and it 'ties' those files to 'generic functions' called 'menuFrame' and "mainFrame" - again - if you read the file you will understand this functionality - if you do NOT understand it - just ask me for further explanations ( bill@vikingasia.org ).

<html>
  <head>
      <title>VikingAsia Computer and Network Consulting</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  </head>

<frameset cols="113,462" rows="*" bordercolor="#CC0099" border="5" framespacing="5">
    <frame name="menuFrame" src="VANC_MenuFrame.html" bordercolor="#CC0099">
    <frame name="mainFrame" src="VANC_Intro.html" bordercolor="#CC0099">
</frameset>

    <noframes>
        <body bgcolor="#FFFFFF" text="#000000">    </body>
    </noframes>

</html>

Further the 'formatting' that I've introduced here in terms of indenting the sections of the file is COMPLETELY my own thing.   The 'tags' (such as <head> and </head> are what gives the ...html file it's structure. The interpreter (inside the Web-Client-Software) completely ignores 'white-space' (tabs, spaces, and carriage-returns (line-ends)). So you can put 'white-space' wherever you want, and the web-page will look the same when you view it with a "Web-Client-Software tool (Microsoft's Internet Explorer, Apple's Safari, Mozilla's Firefox or Mozilla, Netscape's Netscape, etc. etc. etc. )

I've only formatted this file (with tabs and such) to make it easier for you to read the file, here in this web-page...

The 'default' content in the "mainFrame" is also dictated by the first few lines in the " VANC_MenuFrame.html " file.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>



<title>VikingAsia Computer and Network Consulting</title>

<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="author" content="Bill Schell - bill@vikingasia.org">

</head>

<body bgcolor="#ffffff" text="#000000">
<br>
<font size="+2"><b>Computer Help<br>
</b></font>
<hr size="2" width="100%"> <a href="VANC_Intro.html" target="mainFrame">Home_Page</a>
<br>

<a href="ANAR/ANAR_Intro.html" target="mainFrame">ANAR</a> <br>

<a href="Audit/Audit_Intro.html" target="mainFrame">Audit</a> <br>

<a href="AuditCC/AuditCC_Intro.html" target="mainFrame">Audit_Tools</a> <br>

<a href="Books/Books_Intro.html" target="mainFrame">Books</a> <br>

<a href="Conceptual/Concepts_Intro.html" target="mainFrame">Concepts</a> <br>

<a href="HomeLAN/HomeLAN.html" target="mainFrame">HomeLAN</a> <br>

more of this file exists but has not been copied in here, yet, for you to see...!!!

<<<< #### more to come, here, later - this is the end of my work on Thursday, 21 December #### >>>>

When the user clicks on an item in the "MenuFrame" that (clicked-items') web-page (content) appears in the "MainFrame" (by default). You can write further ...html to make the "MainFrame" behave differently, or make the 'content' appear differently.

On the other hand - remember that this whole treatise is about 'Keeping it Simple'...

You can program the behaviour of both the menuFrame and the mainFrame (and others) but that wouldn't be 'keeping it simple'.

Another lesson to learn here is tha tthe workload to get that web-page from some remote computer to your (office or home) computer is a 'miracle' of modern science, of modern computing...   There is 'work' to be done on both the Web Server computer (at some remote location) and the Web-Browser-Client computer (at your location / home / business) .

The two computer(s) share the workload and ultimately are able to present the Frames Based Web Page to the viewer-user. Remember, too, though, that though there are two computers involved in this equation. There are two computers and they are both fairly 'fast' at processing information.

BUT THERE IS ALSO A NETWORK...

Networks tend to be 'slow' compared to the computers they connect together. If you are having trouble with your web-page(s) and/or displaying your or someone else's web-page - REMEMBER the NETWORK.

It is typically the 'bottleneck' in the web-display equation. More information on this 'philosophy' can be seen by clicking here .

MORE here, later (probably after Christmas, 2006)...

last updated: 14:06 - Thursday, 25 January, 2007; revID: 1h