Implementing ZoneZ Part 3 - ZoneZ in Action

As I have said in the from the very beginning, that my goal was to find an alternative solution to FRAMES without giving up the benefits and flexibility in page layout (at least from my point of view).

Well, we are almost there:

Sample Page Layout

Now, we can take next obvious step, and define three types of ZoneZ - each with its own Scrollbar control, using the Z Boxes concept:

Finally, we can utilize these Zones as the building blocks in the implementation of a screen layout design using the ZoneZ concept.

To illustrate such an implementation, let's build a simple layout model similar to the one used in this site:

html, body
{height: 100%, width: 100%; margin: 0; padding: 0; overflow: hidden;}
#logo
{position: absolute; left: 0px; width: 200px; top: 0px; height: 80px; overflow: hidden;}
#leftpanel
{position: absolute; left: 0px; width: 200px; top: 80px; bottom: 0px; overflow: visible;}
#header
{position: absolute; left: 200px; right: 0px; top: 0px; height: 70px; overflow: hidden;}
#main
{position: absolute; left: 200px; right: 190px; top: 70px; bottom: 70px; overflow: auto;}
#footer {position: absolute; left: 200px; right: 190px; bottom: 0px; height: 70px; overflow: auto; background: none #bdcedb;}
#rightpanel
{position: absolute; width: 190px; right: 0px; top: 70px; bottom: 0px; overflow: auto;}

Detailed Analysis

Let's take a few minutes to analyze each zone further, one by one:

#logo

This is a Plastic Zone, which is plastic both in width and height. It is placed on the top-left of the screen. The intended of use this zone is to contain the logo and, perhaps, the address, or other similar purposes. Furthermore, since the contents of this zone and the size would be coordinated and fixed, thus there will be no need for scrollbars. Consequently, its overflow property was set to hidden.

#leftpanel

This is an Elasti-plastic Zone, which is plastic in width, but elastic in height. It is placed on the left of the screen, below #logo. The intended of use this zone is to contain the menu and, perhaps, other similar. The overflow property is set to visible, to accommodate nested menus. However, its value may be set differently, in different applications.

Please Note....
In most applications, these two Zones can be combined into a single Elasti-plastic Zone, which plastic in width, but elastic in height. To be honest, the main reason to utilize two different zones was illustrate the use of a Plastic Zone in conjunction with Elasti-plastic and Elastic Zone.

#header

This is an Elasti-plastic Zone, which is elastic in width, but plastic in height. It is placed on top of the screen, right of #logo. The intended of use this zone is to contain a slogan, etc. The overflow property is setting (hidden) is purely a judgment call. Definitely, its value will be determined by the requirements of each application.

#main

This is an Elastic Zone, which is elastic both in width and height. It is placed below #header, right of #leftpanel. The intended of use this zone is to contain the main content of the page. The overflow property is set to auto for obvious reasons.

#footer

This is an Elasti-plastic Zone, which is elastic in width, but plastic in height. It is placed on bottom of the screen, right of #leftpanel. The overflow property is setting (auto) is purely a judgment call. Definitely, its value will be determined by the requirements of each application.

#rightpanel

This is another Elastic Zone, which is elastic both in width and height. It is placed below #header, at the right of the screen. The intended of use this zone is to contain the auxiliary content, links, ads, etc. The overflow property is set to auto for obvious reasons.

Quick Summary

Well, the example used here clearly demonstrates that a self-adjusting Web page layout (i.e. one that will shrink/expand with the varying sizes of Peep-Hole.), can be successfully implemented, using ZoneZ concepts, using only absolute units (px).

And, with the modular building blocks of ZoneZ gives you, the Web Designer, total control of the page layout design to meet requirements of any application. For all practical purposes, there are no limitations, neither in the of number of ZoneZ used, nor how they are arranged.

What is Next?

Now that you can think and relax, saying bye-bye to the notion that only way to achieve a self-adjusting page layout, was through proportional units (%).

Not just yet...
As pointed out earlier, IE 5 and 6, will not recognize Elastic Dimensioning (i.e. specifying the size of a box by the top, right, bottom and left properties). We will address this issue further in the final part of this article. www.web-zonez.com/revolution/zonez4.html

Feed-back & Comments:
Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:
You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

Web Design & Engineering: Dr. Z
© 2004-2008 Martian Melodies.
All rights reserved.www.Web-ZoneZ.com