Using the Outline Layout by Keith Oustalet
Adding Menu Outlines
You don't have to spend a lot of time surfing the Web before noticing that a great many Web Sites design their pages in a two column format. The left column usually contains a Table of Contents style menu, and the right column displays whatever text belongs to the current page. We have therefore created an Outline Library to help manage your menus. d. p. i.
First we'll show the simplest way to set up a menu. We'll define a Tag called <MyOutline/> and we'll place it into the layout file MyOutline.hei along with all our other definitions. We only need two Tags from the Outline Library to do this, the <olSection> Environment Tag, and the simple <olEntry> Tag.
| MyOutline.hei |
|---|
<include name="outline.hei"/>
Note: All other definitions go here.
<def MyOutline>
<olSection path="Page01.hei" name="Introduction">
<olSection path="Page02.hei" name="heitml Features">
<olEntry path="Page0201.hei" name="for Designers" />
<olEntry path="Page0202.hei" name="for Programmers" />
</olSection>
<olSection path="Page03.hei" name="Language Guide">
<olSection path="Page0301.hei" name="Modular Pages">
<olEntry path="Page030101.hei" name="Default Layout" />
<olEntry path="Page030102.hei" name="Outline Layout" />
</olSection>
<olEntry path="Page0302.hei" name="Dynamic Pages" />
</olSection>
</olSection>
</def> |
Since the <MyOutline/> Tag defines a Menu, it should contain an entry for every page on your Web Site. We've listed a few pages from our own heitml Web Site to show how various sections can be grouped together to create nested sub-sections. The naming convention we've used here is merely for illustrative purposes. You can give the files any name you like, so long as it is compatible with your Operating System and they have a .hei extension.
The first page of each section is defined by the <olSection> Environment Tag, and every page belonging to that section is defined by the simple <olEntry> Tag, unless it begins a new section of its own. In that case, the page would be defined using <olSection>, and all pages belonging to it are defined using <olEntry>.
Both Tags show two parameters: the name of the file where heitml is expected to find the page contents, and a short menu name to identify what the page is all about. This menu name will appear in the menu listing on the left-hand side of the page, and it will contain a clickable hot-link to the file's contents.
There is also a third parameter, not shown here, which can be used to show the menu item without a hot-link. This "select" parameter can be set to true or false. The default value is true, so you only need to specify it when you want to turn off the link. This is equivalent to a drop-down menu where some of the entries are "grayed out". In other words, you can see that an entry is there, but it is not currently available for use. An example of how to use this is contained in the Quick Tutorial section of the heitml Download Package, so we will not discuss it here.
After the menu has been defined, you can setup a new layout template file for the pages in the usual manner. Then, you add an include for the file MyOutline.hei and call the tag <MyOutline/> within the <BODY> definition:
| NewLayout.hei |
|---|
<includeonce/>
<include name="MyOutline.hei"/>
<defenv BODY @p ...>
<MyOutline/>
<\BODY>
<olPage>
<ShowLogo/>
<ShowSlogan/>
<defbody>
<P>
<EmailAddress/>
</P>
</olPage>
<\/BODY>
</defenv>
|
Just calling <MyOutline/> defines the menu, but this isn't really what we had in mind. In order to create the two column format discussed earlier, we use the <olPage> Environment Tag around the body contents.
Now, here is what two of the pages used in the outline menu look like:
| Page01.hei | Page03.hei |
|---|---|
<HTML> <HEAD> <include name="NewLayout.hei"/> <TITLE> Introduction </TITLE> </HEAD> <BODY> Anything else you want to do with this Web Page should be placed here. </BODY> |
<HTML> <HEAD> <include name="NewLayout.hei"/> <TITLE> Language Guide </TITLE> </HEAD> <BODY> Anything else you want to do with this Web Page should be placed here. </BODY> |
Aside from the fact that there are only the filenames, titles and the text within the <BODY> Tag that will change from page to page, the pages have the same structure and use the same layout template in NewLayout.hei.
When executed, Page01.hei will display a menu along the left-hand side of the page, with entries for "Introduction", "heitml Features" and "Language Guide". Clicking on the "heitml Features" link will load in the file named Page02.hei, and the left-hand side menu will expand to show entries for the menu items "for Designers" and "for Programmers". If at that point you clicked on the "Language Guide" link, the Page03.hei file would be loaded, and the menu would contract (not display) the pages in the "heitml Features" section, but instead would expand to list the "Modular Pages" and "Dynamic Pages" pages. Clicking on the "Modular Pages" link would further expand the menu to reveal the "Default Layout" and "Outline Layout" menu items.
|
heitml takes the World Wide Web to a higher level! Anything else you want to do with thisWeb Page should be placed here.
Send your comments to contact@radpage.com |
A numbering scheme is also used to help you keep things straight. For example, a numbering scheme would help to build a table of contents using the following template:
| TOC.hei |
|---|
<include name="MyOutline.hei"/> <MyOutline/> <olStructure nest="10000" showroot="showroot"> <olNumber/> <olLinkName/><BR> <olStructure> |
The <olStructure> Tag simply walks over all sections and entries and executes the code in-between for every section or entry. Within the code, the number for a section or entry is printed with the <olNumber> Tag, the name of the section or entry is printed with the <olLinkName> Tag. This code would produce the following result:
Introduction 1 heitml Features 1.1 for Designers 1.2 for Programmers 2 Language Guide 2.1 Modular Pages 2.1.1 Default Layout 2.1.2 Outline Layout 2.2 Dynamic Pages |
Chaining from one page to another by clicking on the menu hotlinks would be the Normal manner.
Using Frames
If you are using the outline layout discussed so far and your page becomes very long, the links in the outline menu are not visible anymore if you scroll to the bottom of the page. In this section we show you what you can do about that using frames.
All Web Pages using Frames must be defined using the HTML <FRAMESET> Tag. Additionally, there are a few heitml specific things we need to do to pass variables from one page to another, but none of this is very difficult or time consuming to set up. Keep in mind, however, that the Frames we set up serve the purpose of separating your Table of Contents menu from the actual page contents, and that menus appearing in frames do not expand or contract, but show a complete list of pages on your Web Site. The obvious advantage of this is that it makes it possible for a user to go from any one page to another with a single click, regardless of which section that page resides in.
Here are two example Frame Templates that will work with everything we've done up to this point:
| olFrameset.hei |
|---|
<HTML>
// Set up FRAMES.
<FRAMESET COLS="200,*" FRAMEBORDER=0
FRAMESPACEING=0 BORDER=0>
<FRAME SRC="olFrame.hei?s.inframe=t"
NAME="cont">
<FRAME SRC="Page01.hei?s.inframe=t"
NAME="txt">
</FRAMESET>
</HTML> |
If you are already familiar with the HTML <FRAMESET> and <FRAME> Tags, you will see that we have merely divided our Browser window into two vertical sections. The left-hand FRAME will be 200 pixels wide, and the right-hand FRAME will get whatever pixels remain, depending on how wide your Browser window is.
Of special interest here is that the two <FRAME> Tags each pass a single parameter to the heitml Web Page being called. The olFrame.hei page which will define the layout for our Table of Contents receives the s.inframe variable, which tells the page that it is being called within a frame. Page01.hei also receives the s.inframe variable, which communicates to the <olPage> Tag (which is called inside the <BODY> Tag) that the page is being called within a frame. This prevents a menu from being displayed within those frames, since in this case they are superfluous. Note that no changes are necessary for the Page0x.hei pages to use them with Frames.
| olFrame.hei |
|---|
<HTML>
// Show Frame Menu.
<HEAD>
<include name="NewLayout.hei"/>
<BASE TARGET="txt">
</HEAD>
<BODY BGCOLOR="#006599" text="black"
LINK="#ffffff" VLINK="#b9b9b9">
<olStructure>
<NOBR>
<olNumber/> <olLinkName/>
</NOBR>
<BR>
</olStructure>
<p>
<FONT SIZE=+1>
<olRemoveFrameLink href="Page01.hei">
Remove Frame
</olRemoveFrameLink>
</FONT>
</BODY>
</HTML> |
Our second template defines the outline menu within the frame.
Naturally, we must include our layout file, which contains the all important <MyOutline/> Tag.
The HTML <BASE> Tag tells your Browser which target FRAME to use for all the links in the menu, in this case, the right one.
The HTML <BODY> Tag, which we have redefined in the NewLayout.hei file, controls text, link and background colors and will also call the <olPage> Tag. The <olPage> Tag itself will recognize that it is display within a frame and won't show the outline menu in its frame.
The next few lines of code make use of a number of Outline Library Tags that are introduced in Outline Components or the Outline Library. The only important thing to take note of now is what happens within the body of the <olStructure> Tag. We have used the HTML <NOBR> Tag to make sure that each of our menu items appears on a single, unbroken line. All menu items are printed in the normal/default text size.
At the very end of our menu listing, we'll want to include an option that allows the User to switch back to the Normal (no-frames) mode. As you can see, we've used the <olRemoveFrameLink> Tag to create the "Remove Frame" link. Therefore, if the User clicks on the link, he will be transported back to Page01.hei, and all pages will be displayed in Normal Mode.
But how do we go into the Frame mode at all? The answer is very simple. The outline library provides the <olFrameLink> Tag that generates a link to the page defining the frameset. Just put the Tag onto the pages where the User is allowed to switch to Frame mode:
<olFrameLink href="olFrameset.hei">Frame<olFrameLink> |
You will find a Frame Link at the bottom of the Tabe of Contents on the left side of this page after you've scrolled up.
Summary
In this section we began by showing you how to add a left-hand Menu Column to your pages, simply by defining the menu in your layout page (using <olSection> and <olEntry>), and redefining the HTML <BODY> Tag.
We expanded this use of menus to show how all the work we've done previously could be combined into a suite of orchestrated pages that communicate with one another, switching back and forth between Normal and Frame Mode.
In short, any heitml Web Site should have the following files in order to give your Users the choice of how (s)he wishes to view your pages:
- A Layout File containing all the Tags necessary to define your Headings and Footings, and a Table of Contents style menu.
- A suite of files containing their own unique content, each of which includes the same Layout file.
- Two Template files that separate your menu from the actual page contents using frames.
Selected blog articles : 3D Objects on HTML pages, CSS Transition Visibility, and CSS Transition Display.
© 1996-2024 H.E.I. All Rights Reserved.
