Hyperframe flatfile CMS

The frame.php file

constructing a frame for your site

The frame.php file must be present in each frame. It contains the HTML elements which are common to all webpages using this frame. In structure it is very like a typical webpage, and in fact it is possible to do the graphical design of a frame in any  HTML editor (Dreamweaver, Kompozer, etc) and then add the hyperframe-specific frame components.

The first point to note is that only the <head> and <body> sections of frame.php are used by the Hyperframe system. The rest is ignored. Thus, there is absolutely no point in placing javascript or the like outside of the head or body, as it will never be seen by the browser.

The frame head section contains items which determine the presentation of the page by Hyperframe, as well as the usual meta tags.

A typical <head> section might contain:

<head>
  <title>Hyperframe !CMS</title>
  <meta name="description" content="HTML pages, content managed">
  <meta name="keywords" content="content management, web frontend, html, pages">
  <META NAME="hf_doctype" CONTENT="HTML">
  <META NAME="hf_hide" CONTENT="">
  <meta name="Author" content="IWR Consultancy">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel=stylesheet href="<?php echo codedir ?>system.css" type="text/css">
  <link rel=stylesheet href="<?php echo framedir ?>frame.css" type="text/css">
  <script language=javascript src="<?php echo codedir ?>system.js"></script>
  <script language=javascript src="<?php echo framedir ?>frame.js"></script>
  <?php include_once plugin('menu'); ?>
</head>

The frame's head section in fact forms the definitive head section of all pages, with the exception that certain items in the calling page's own head section may modify or over-ride those in the frame.

The title is used on all pages, and is prepended to any title found on an individual page. This conveniently avoids the need to keep repeating the site's name in titles. Where a page contains no title. the frame title is used, with the first <Hn> tag's contents appended. This in most cases will give rise to an acceptable title string which characterises the page's content.

The frame's description meta tag is only used if the calling page contains no title. If the page contains a title, its own description is used.

The author content -and any other unspecified meta content- applies to all pages, regardless.

Several special hf_xxxx meta tags exist:

hf_doctype determines the <!doctype> declaration placed at the top of each rendered page. The possible values are: 
HTML (Default, HTML5)
HTML5
HTML4
HTML4T
HTML4F
-which should be self-explanatory.
To reiterate, any doctype declaration in the first line of the frame will be ignored, as will any in the calling page. The reason it's done like this, by the way, is that the online editor needs to know the document type, and it's simpler to use a variable of a known format than to scan the file for it. It also means that any extraneous doctype tags on imported pages will not affect operation.

The content-type meta tag behaves as usual in a static page, and should be as appropriate to the page character-set. Typically for HTML5 pages this will be utf-8, which allows for most international languages.

Hyperframe v3-on does not support XHTML. This is not the problem it might seem for imported pages, since the majority of XHTML documents will display perfectly well as HTML5.

HTML4 support, which is mainly provided for easy import of legacy sites, includes switching the editor's semantics to generate the tags preferred by that standard. For example in HTML4 mode, the Bold  button will insert a  <b> tag, in HTML5 mode it will insert a <strong> tag.

hf_hide takes any of the values banner, top, left, content, right, bottom  comma separated, or the keyword all. It causes the relevant hf-[section] ID to not be displayed.  hf_hide can be used in the frame, or in the calling page. This is useful where pages contain very wide content, and need more space.

The body section of frame.php constitutes the actual webpage as seen by the site visitor. This will typically consist of a collection of dividers separating content into a top banner, menus, actual page content, and various other embellishments. The page divisions may be created with div elements, HTML5 document section tags, or the more traditional approach of using a table. Purists would insist on the use of divs or HTML5 tags here, but in many instances it is far easier to achieve a consistent and reliable layout using a table than with the new mechanisms. Anyway, the choice is yours. Hyperframe itself doesn't care which you use.

The important point is that the Hyperframe system does expect to see a number of predefined css IDs in the body, which allow it to determine how to handle the content. What tags these IDs are attached to, is entirely up to you.

The structure here is that of a set of divs or  tables defining these css IDs:
ID: hf_banner - a top banner
ID: hf_top - a topmenu line
ID: hf_left - a lefthand bar
ID: hf_content  - the main content area
ID: hf_right - a righthand bar (if used)
ID: hf_bottom - a footer area.

A div-based frame <body> section might contain:

<body>
<div class="hf_pagecontainer">
  <div id="hf_banner" >
    <h1>Hyperframe flatfile CMS</h1>
  </div>
  <div id="hf_top" >
    <div class="menutree topmenu" >
    <a class="menu_single" href="<?php echo siteroot ?>sitemap.php">Site Map</a>
    <?php menu('tree.mnu','dropdown');?></div>
    <div style='text-align:right'><?php widgets();?>&nbsp;</div>
  </div>
  <div id="midsection">
    <div id="hf_left" >
     <img src="<?php echo framedir ?>sidelogo.gif">
    </div>
    <div id="hf_content" >
      <!--CONTENT-->
    </div>
  </div>
  <div id="hf_bottom" >
   Powered by Hyperframe <br>
  </div>
  &nbsp;  
</div>
</body>

A table-based frame <body> section might contain:

<body>
<table class="hf_pagelayout">
<tr><td id="hf_banner" >
  <div float='left' align='left'><img src='<?php echo framedir ?>hylogo.png' align="left"></div>
  <div float='right' align='right'><span class='callout'>by IWR Consultancy</span></div>
</td></tr>
<tr><td id="hf_top">
  <div float='left' align='left'><?php sitemenu('top');?></div>
  <div float='right' align='right'><?php printbutton();?>&nbsp;</div>
</td></tr></table>

<table class="hf_pagelayout"><tr>
<td id="hf_left">
  <?php sitemenu('side')?>
  <hr width=90%>
</td>
<td id="hf_content" >
  <!--CONTENT-->
</td>
<td id="hf_right">
  &nbsp;
</td></tr></table>

<table class="hf_pagelayout">
<tr id="hf_bottom"><td >
  <p class='callout'>Powered by Hyperframe</p>
<td></tr></table>
</body>

As we mentioned, whether you use divs or table cells to define these regions is entirely up to you. I prefer to use tables for fluid layouts because they always seem to give a more reliable placement of regions on various screen sizes. Divs are good for fixed-width styling. Because these css ID's are referred-to internally by Hyperframe, they should always be present in any frame if the relevant area exists. You can use these predetermined IDs for styling purposes, or you can add as many IDs or classes as you like of your own.  

 

Images in the frame:

A point to note is that images or media are loaded from the calling page's context, not the frame's context. Thus, images to be incorporated into the frame need to be either css backgrounds, or else need to be called with the special syntax : src='<?php echo framedir ?>filename' -which will load the image from the frame directory regardless of what that is called-  which is usually what is wanted.

The hf_content area contains a special tag, <!--CONTENT--> which must be exactly as shown. This is not a comment, but a placeholder for the individual page content within the frame. So far this is the only example of 'duck code' within Hyperframe, and I'd rather it were not there.. but this proved to be the simplest approach, so that's the way it is.

A frame has a subdirectory, menu_img which contains the small placeholder icons used in the lefthand cascading menu. Since it might be desirable to customise these for specific frames, it makes more sense for them to be bundled with the frame rather than with the menu itself.

Menus:

The first example displays a single dropdown menu with fixed content. The second example demonstrates the two-menu approach, in which the lefthand menu contains the full list of links, whereas the top-row menu shows only the most often-used links. In all cases where the menu system is used, the frame head must contain the line  <?php include_once plugin('menu'); ?> -otherwise the page will fail to load correctly.  A menu is loaded by way of a php call to its function.

Automation:

The frame can contain any php or javascript code. A point to note if including php is that the execution order is system php code, php code in the calling page, then php code in the frame. Thus, values changed in the frame have no effect on those settings as far as the calling page is concerned. This is probably the reverse of what you would intuitively expect, so take note. Since javascript is executed by the browser after the page has been sent, this consideration does not apply there.