OS/2 e-Zine - The Best OS/2 Reading Anywhere!

August 16, 2004

Case Study: Redeveloping a web site with PPWizard (Part 2): Standard page elements

Case Study: Redeveloping a web site with PPWizard. Part 2: Standard page elements

Introduction

In the first part of this case study, I dealt with the HTML HEAD standard element of my web pages. Once I realised the possiblities of using a standard element in all web pages, I started to look for more page parts that I could convert into standard elements.

I found two: A standard top of page element, and a standard bottom of page element, that could be used in all pages.

The Image element

But first, a digression.

While searching for more information on PPWizard, I reread the series of articles on PPWizard and it's predecessor, in OS/2 E-Zine. In one of them Christopher Wright gave the code for an IMG definition that would go and calculate the dimensions of the image object, and pass it to the HTML page. This would ease the display of the image.

I used the code in my common header definition.

; Tired of looking up the WIDTH and HEIGHT tags yourself? Use this!
; It does all that stuff automatically and handles both GIF and JPG.
;--------------------------------------------------------------------
#define img                                                           \
;;--- Get the width and height ------------------------------- \
#evaluate+ w_ImgSize %GetImageHeightWidth('{$src}')%          \
<img src="{$src}" <$w_ImgSize> alt="{$ImgTitle}">

Usage:

<$Img src="filename.png" ImgTitle="Filename">

The top standard element

The top standard element contains other standard parts. Each element starts with the HTML BODY definition, the page background image resource, a masthead and a navigation bar.

The masthead

I wanted each page to look the same, and to be instantly identifable as belonging to my web site. I decided on a masthead which would comprise of a table with three elements, namely our club logo, our club name, and a reprise of the logo.

The left and right logo elements were easy, as our club had a logo, and we have been using it as an identity good on the previous web pages.

However, I did not know how to get the centre portion the way I wanted. It was at this time I remembered a tool called Gif_Text, which would generate a GIF image from a text string.

[See the separate article on Gif_Text for more information on this program and what it does]

After playing with Gif_Text for a while, I generated an image which I thought perfect for the masthead: A South African flag, with our club name written on it.

I ended up with a masthead comprising of a table with three image elements, namely a right and left logo, and a centre club identity image.

Here is the PPWizard definition of the masthead:

; Define images in masthead
; SFSA logo. Used as leftmost and rightmost elements of masthead
#define Top_of_Page_Image                                              \
<$Img src="<$imagePath>/sfsa_150x240.png"                      \
ImgTitle="SFSA Logo">
; SFSA SA flag picture. Used as centrepiece in masthead
#define Title_Image                                                    \
<$Img src="<$imagePath>/sfsa_flag.png"                         \
ImgTitle="SFSA Name">
; Define masthead
#define Standard_Page_Title                                              \
<TABLE SUMMARY="Page masthead" class="hidden">                      %\
<TR>                                                                %\
<TD class="hidden"><$Top_of_Page_Image></TD>                        %\
<TD class="hidden"><$Title_Image></TD>                              %\
<TD class="hidden"><$Top_of_Page_Image></TD>                        %\
</TR>                                                               %\
</TABLE>

The navigation bar

At this stage of the procedings I had four images on one page, even if one image was repeated. The rest of my page therefore had to be as much text as possible.

My navigation bar, which did the same job as the previously used table of contents, therefore had to be text based.

I settled on a navigation bar in table format, with two rows of four elements each. Each of my eight main pages would occur on the navigation bar, and I would not change the bar not to show a link to the current page.

This meant that the navigation bar could be defined once, and used repeatedly.

Here is my definition of the navigation bar:

; Define Navigation Bar table elements
#define Nav1  <a href="sfsa.html">SFSA Main Page</a>
#define Nav2  <a href="events.html">Meetings and Events</a>
#define Nav3  <a href="discussions.html">Discussion Evenings</a>
#define Nav4  <a href="links.html">Universe of SF</a>
#define Nav5  <a href="committee.html">Contact the Committee</a>
#define Nav6  <a href="publications.html">Publications</a>
#define Nav7  <a href="shortstory.html">Short Story Competition</a>
#define Nav8  <a href="books.html">Book Reviews</a>
; Define Navigation Bar table
#define NavBar                                                              \
<TABLE SUMMARY="Navigation Bar" class="navbar">                        %\
<TR>                                                                   %\
<TD><$Nav1></TD>                                                       %\
<TD><$Nav2></TD>                                                       %\
<TD><$Nav3></TD>                                                       %\
<TD><$Nav4></TD>                                                       %\
</TR>                                                                  %\
<TR>                                                                   %\
<TD><$Nav5></TD>                                                       %\
<TD><$Nav6></TD>                                                       %\
<TD><$Nav7></TD>                                                       %\
<TD><$Nav8></TD>                                                       %\
</TR>                                                                  %\
</TABLE>

Once again, I defined some definitions in one place, and used them only once, immediatly afterwards. This is once again to improve readablility of the resulting code.

The standard body element

Once I had defined the masthead and the navigation bar, I could define my standard top of page element.

;Define Top of BODY element and top of visible page structure
#define Standard_Body                                                 \
<BODY BACKGROUND="<$BackgroundImage>">                       %\
<$Standard_Page_Title>                                       %\
<$NavBar>

Usage:

; Standard element - HTML BODY definition, with masthead and navigation bar
<$Standard_Body>

Result:

<BODY BACKGROUND="Images/space.gif">
<TABLE SUMMARY="Page masthead" class="hidden">
<TR>
<TD class="hidden"><img src="Images/sfsa_150x240.png" width="150" height="240" alt="SFSA Logo"></TD>
<TD class="hidden"><img src="Images/sfsa_flag.png" width="592" height="240" alt="SFSA Name"></TD>
<TD class="hidden"><img src="Images/sfsa_150x240.png" width="150" height="240" alt="SFSA Logo"></TD>
</TR>
</TABLE>
<TABLE SUMMARY="Navigation Bar" class="navbar">
<TR>
<TD><a href="sfsa.html">SFSA Main Page</a></TD>
<TD><a href="events.html">Meetings and Events</a></TD>
<TD><a href="discussions.html">Discussion Evenings</a></TD>
<TD><a href="links.html">Universe of SF</a></TD>
</TR>
<TR>
<TD><a href="committee.html">Contact the Committee</a></TD>
<TD><a href="publications.html">Publications</a></TD>
<TD><a href="shortstory.html">Short Story Competition</a></TD>
<TD><a href="books.html">Book Reviews</a></TD>
</TR>
</TABLE>

CSS2 definitions

At this time, you will have noticed that I make use of the class keyword when I define tables. This is to make use of CSS2 styles, defined seperately in the associated style sheet.

For the moment I will skip dealing with the CSS2 styles, and come back to it in a later article.

The bottom standard element

As I did with the top element, I looked to see which parts of the bottom of the page were the same on all pages.

I came up with four things that were the same: The date the page was last updated, a bottom navigation bar, closing the BODY HTML tag, and closing the HTML page tag.

Later, after validating my generated HTML code, I added a validated element after the navigation bar. I will show code including the validated element, but will only discuss it in a later article, where I will look at validation in more detail.

Last Updated

The Last Upated line just tells when the page was last updated. I made this a calculated element that would change whenever the individual page changes. With PPWizard, this meant every time any file in that page's dependency chain change.

Standard Foot

Here is the Standard Foot definition:

;Define Bottom of BODY element and visible page structure. Also ends HTML page
#define Standard_Foot                                                   \
<DIV class="LAST_UPDATED">                                      \
Page last updated: <$LastUpdateDate></DIV>                     %\
<$NavBar>                                                      %\
<p><a href="http://validator.w3.org/check/referer">             \
<$Img src="<$imagePath>/valid-html401.png"                      \
ImgTitle="Valid HTML 4.01!">                                    \
</a></p>                                                       %\
</BODY>                                                        %\
</HTML>

Here is how to use it:

; Standard element - last updated, bottom navigation bar and close of BODY
; and HTML tags
<$Standard_Foot>

And this is the HTML code generated:

<DIV class="LAST_UPDATED"> Page last updated: 26 February 2004</DIV>
<TABLE SUMMARY="Navigation Bar" class="navbar">
<TR>
<TD><a href="sfsa.html">SFSA Main Page</a></TD>
<TD><a href="events.html">Meetings and Events</a></TD>
<TD><a href="discussions.html">Discussion Evenings</a></TD>
<TD><a href="links.html">Universe of SF</a></TD>
</TR>
<TR>
<TD><a href="committee.html">Contact the Committee</a></TD>
<TD><a href="publications.html">Publications</a></TD>
<TD><a href="shortstory.html">Short Story Competition</a></TD>
<TD><a href="books.html">Book Reviews</a></TD>
</TR>
</TABLE>
<p><a href="http://validator.w3.org/check/referer">
<img src="Images/valid-html401.png" width="88" height="31" alt="Valid HTML 4.01!"> </a></p>
</BODY>
</HTML>

Conclusion

This concludes today's article on the use of PPWizard in my web site. I looked at standard page elements, that can be used on all pages, giving a common look and feel to all pages in the web site.

Next time we will look at blocking out elements within a page, page specific definitions, conditional processing, and PPWizard's import functions.

Resources

gif_text: Newest version is 1.3c, and can be found here:
http://www.srehttp.org/distrib/gif_text.zip

AL du Pisani is a South African, working at a large financial institution, where he looks after their Lotus Notes environment. He has been using computers off and an for the past twenty years. His first exposure to OS/2 was with 2.11. It is still the preferred environment, and is what he runs at home. He is also a fan of Science Fiction.

This article is courtesy of www.os2ezine.com. You can view it online at http://www.os2ezine.com/20040816/page_7.html.