Contact | Privacy | Datenschutzerklärung | Impressum

Using the Default Layout by Keith Oustalet

At this point you might be tempted to rush off and create a few pages of your own using the concepts we've introduced thus far, but we still have some territory to cover before you should do that. Up until this point our discussion has centered around some basic concepts that, although very useful, only touch upon the things you should be thinking about each time you begin working on a new Web Page.

If we step back for a moment and take a higher level view of the topics already covered, we see that we've been doing much more than simply learning how to build Tags and Templates, storing them in files and making them part of a Web Page by using the include Tag. What we've been doing is learning a Design Process, and in this section we'll expand upon that process and show you how to create a Default Layout that should become the foundation for every Web Page you create.

HTML is a Document Description Language, and we tend to look upon it as a loose collection of Tags, some of which work independently, and some of which work co-operatively (such as the <TR> and <TD> Tags, which are part of the larger <TABLE> Environment Tag). But we rarely think of any one HTML Tag as being more important than another, so it is not uncommon for us to begin working on a page by writing text and adding formatting Tags, and proceeding in a linear fashion from the top of a page until we get to the bottom.

What we really need, though, is a model to follow, a way to approach each task as part of an overall plan that divides Pages into modules or sections, each of which is somehow related to or dependent upon the other. Without such a model we can easily get lost in the sea of links and pages, and never raise our heads from our monitors long enough to see that there really is a better way to do things. What this means is that we have to learn to think about Web Pages in a more abstract manner. In many ways, this abstraction process is similar to what programmers do whenever they begin a new programming project.

This Design Process can take many forms, but the most common approach uses a method called Top-Down Design. With Top-Down Design, one asks questions such as: What should the final product look like? How can we divide it into sub-tasks that could be distributed among a team of people? How can we be sure that each sub-task will "plug-into" the parts created by others in a seamless fashion?

It doesn't really matter whether the project is big enough to require a team of many people, or small enough that it can be done in just a few hours by a single person. What matters is that the process of looking at a project from the highest level view (i.e. the final product) and finding ways to subdivide it into manageable tasks, is where we achieve the most benefits. Even simple projects have a tendency to grow and be redefined over time, and so it is with Web Pages. What starts out as a simple Home page can eventually grow into a suite of inter-related pages than can easily wind up being a disorganized mess if we aren't careful.

Therefore, if we take this Top-Down or high-level view of the concepts we've introduced thus far, we see that Web Pages are composed of Templates, consisting of Header Information (Page Titles, Logos, Slogans, etc.), a Main Body (which itself may be divided into numerous sub-sections), and Footer Information that closes the page (Corporate contact information, Page Counters, copyright messages, etc.).

But there are other things we need to think of as well. For instance: What if we want our Web Site to work with and without frames? Do we need two copies of every page, one for the frames version, the other for the no-frames version?

What if we have multi-page sections with related content? Is there any way we can give the User the option of viewing them as a single large page that he can send to his printer?

And what if we want to do a survey of Users, to see how many pages (s)he visits in a single session, or how much time (s)he spends on each page? Is there any way we can assign variables to identify and track User movements across our Site without getting involved in a lot of convoluted CGI Scripts?

All of these questions and more can be handled when you redefine the Tags used for HTML Web Authoring like <BODY>, <TITLE> aso. These redefinitions together form your Default Layout.

The Tags used for the Default Layout create Web Pages based on the following model:

  • Pages can have a Browser Title (plain text only),
  • Pages can have a formatted Heading Line
  • Pages can have Parameters that define text and link colors, as well as a page background color or background jpeg file.
  • Each Page can define its own Header Information (Banners, Logos, Slogans, Image Maps, Navigation Bars, etc.)
  • Each Page can define its own Footer Information (same as above, plus Email links, copyright messages, or anything else you wish to include)

This model is simple enough that it can be applied to even the shortest Web Pages without imposing an undue burden on the Designer or Implementer. But as we'll see here and in other sections of this Language Guide, it serves as the foundation upon which very large and complex Web Sites can be built. Therefore, if you get in the habit of building your Pages using with a Default Layout, you will be able to go back to them later and add complexity to those pages in a modular fashion, thus saving you the time it would otherwise have taken to re-design them from scratch.

To demonstrate how this model is implemented, let's assume that you are about to start on a new project. Remember that a project can be as simple as a single Home page, or it can be a group of related pages, or even an entire Web Site that is organized and sub-divided into many sections.

In the last section we started with the definition of some low-level Tags like <ShowLogo/>, <ShowSlogan/>, and <Email Address/>. Then we defined a <BODY> Environment Tag to show how these Tags could work together in an organized page layout or template. We put all these newly defined Tags into a file called mylayout.hei and then created a Web Page called Sample.hei.

This isn't a Top Down but Bottom Up approach, starting with the lowest level view up to the higher levels until the finished Web Page Sample.hei.

One of the philosophies of Top Down Design is that you should never have to look at any more detail than is necessary to understand what is going on at a given level. Too much detail simply clutters things up and makes it difficult to focus on the task at hand. On the other hand, you could first design components that occur multiple times in pages on your Web site and then reusing these components for the page actually being built.

Now lets look at the first part of NewLayout.hei to see what we can discover:

NewLayout.hei
<def ShowLogo> 
   <IMG SRC="/DirectoryName/LogoName.jpg">
</def>

<def ShowSlogan>
  <P>
  <FONT COLOR="#8b0000>
  <B>h<I>ei</I>tml takes the World Wide Web
  to a higher level!</B>
  </font>
  <P>
</def>

<def EmailAddress>
 <P>
 Send your comments to
 <A href="mailto:contact@radpage.com">
    contact@radpage.com </A>
</def>

<def ShortCopyright>
 <HR>
 <center>
  Copyright(c) 1997 Company Name
 </center>
</def>

<def LongCopyright>
 <HR>
 <center>
  Copyright(c) 1997 Company Name
  <BR>
  ALL RIGHTS RESERVED
  <BR>
  This information may not be reproduced in any
  form without first obtaining written permission.
 </center>
</def>

<def ShowBanner>
   <IMG SRC="/DirectoryName/BannerName.jpg">
</def>

The first part of NewLayout.hei contains a number of Tags we've seen before, plus a few new ones. These Tags or components are general enough to be reused on every page on your Web site. With these components, the Default Layout of your Web site starts to constitute.

Most layout parameters are defined through the <BODY> Tag which is part of Standard HTML Web Authoring. To ensure that the same layout parameters are used for every page on the Web site and/or use other default layout parameters than the default layout parameters redefine the <BODY> Tag:

NewLayout.hei (continued)
<defenv BODY @p ...;
             p.background=default(p.background,"Filename.jpg");
             p.bgcolor=default(p.bgcolor,"#ffffff");
             p.text=default(p.text,"#000000");
             p.link=default(p.text,"#ff0000");
             p.alink=default(p.alink,"#00ff00");
             p.vlink=default(p.vlink,"#0000ff")> 

The parameters of the <BODY> Tag give you the opportunity to specify a Background jpeg file and to set various color values within a page. You can use the Hexadecimal RGB values as shown above, or any pre-defined color name recognized by your browser (RED, GREEN, BLUE, BLACK, etc.). You can specify as many or as few of the above parameters as you wish. Any parameters not specified will revert to the default values that can be specified using the default() function.

Next come the call to the Tags that we have already defined above and which will build the Header and Footer information that will appear above and below the main body of your page contents.

Here is just one example of how these Tags could be used:

NewLayout.hei (continued)
 <ShowBanner/>
 <ShowLogo/><ShowSlogan/>
 <HR>
 <defbody>
 <EmailAddress/><LongCopyright/>
 <ShortCopyright/>
 <P>
</defenv>
 

As you can see, we've used the Tags we defined earlier and placed them before and after call to the defbody Tag which represents the main body. If your Web Page appears normally, the call to the Heading tags before defbody will display an Advertising Banner at the top of the page. The call to the Footing Tags which are called after defbody work in a similar manner. Normally, an email address and copyright message are displayed.

There are two Tags left we need to point out before leaving this section. The <TITLE> Tag places an unformatted string of text in the title bar above your Browser and the header tags <H1>, <H2>, etc. define what appears in which size at the top of your Web Page. Keep in mind, however, that these Tags should not be defined in the layout page, otherwise every page will wind up having the same formatted title and header. You must place the <TITLE> Tag near the beginning of the actual Web Page, just before the <BODY> Tag appears and the <H1>, <H2>, etc. Tags right after the <BODY> Tag. Here is an example:

Sample.hei
A page
using the Default Layout
<include name="NewLayout.hei"/>
  <TITLE>Sample Page</TITLE> 
<BODY>
  <H1>
    <font color="#8b0000"> Sample Page  </font>
  </H1>

Anything else you
want to do with this
Web Page should be
placed here.

</BODY>

If the same color should be used for the headings in all pages, you could have also redefined the <H1> Tag in the layout page. This is left to you as an exercise.

Summary

In this page we briefly discussed the concepts of Top Down and Bottom Up Design, in the process achieving a structured/modular set of tools and components that can easily be plugged together when needed.

We applied the two approaches to the development of Web Pages and explained how to define a Default Layout, which forms the foundation on which all Web Pages should be constructed.


This page was dynamically generated by the web application development tool RADpage of H.E.I. H.E.I. provides support, tools, and services like Webdesign in Mannheimm, the HTML/CSS 3D WebGL Animation Library taccgl, 3D Webdesign, and 3D Product Configurator (3D Produkt Konfigurator in German).

Selected blog articles : 3D Objects on HTML pages, CSS Transition Visibility, and CSS Transition Display.


© 1996-2024 H.E.I. All Rights Reserved.



Homepage
Intro/Features
Component Guide
Programming
  Language Guide
    Modular Pages
      Default Layout
      Outline Layout
    Dynamic Pages
    Interactive Pages
  Language Ref.
  Component Ref.
  Class Library
  User Components
  Tutorial
  New Features
  heitml 1
User Guide
Services
Privacy
Datenschutz
 
Contact / Impressum