|
|
|
|
|
|
|
|
|
|
First methods will be discussed that show how to automate the process of changing the look and feel of an entire Web site including backgrounds, navigation buttons, title banners, copyright information, etc. Next several software packages will be examined that can locate and fix broken links and can generate a visual map of the site. Finally, a CGI script will be introduced which allows the dynamic and instant posting of URLs to a site. This script allows a site to grow more resourceful by permitting other members of an organization, or even outside visitors, to help contribute content to a site without having an account on the Web server.
Background Images
Using the same background image across all pages is one of the easiest methods of obtaining consistency. Simply specify the same background image in all files as shown below.
<body background="pathname/background-image">
Where pathname is either an absolute or relative pathname and background-image is the name of the JPEG or GIF file. If this same code fragment is placed in every document, then by changing this one image all of the backgrounds at a site will instantly be changed. A generic name should be given for the background image such as background.jpg. If a more descriptive filename is specified, the name may seem confusing later if the background image is changed. For example, if the background image is named blue-seal.jpg, this filename may seem confusing if the seal color is later changed to green. By providing a generic name, the Webmaster would not feel compelled in this case to change the background for every document from blue-seal.jpg to green-seal.jpg.
Background Colors
A background may also be specified as a solid color. Simply indicate the desired color as a text string or as a hexadecimal value as shown below.
<body bgcolor="white"> or <body bgcolor="#ffffff">
Unlike changing a background image, to change the background color across an entire Web site requires that every file be modified to use the new color. Using the following Perl command, the background color can be changed for all files ending in html in the current directory from blue to white.
perl -pi -e 's/bgcolor="blue"/bgcolor="white"/g' *.html
If using hexadecimal values using the following command.
perl -pi -e 's/bgcolor="#0000ff"/bgcolor="#ffffff"/g' *.html
To perform this same modification on files in subdirectories one level deep change *.html to */*.html. To go two levels deep change */*.html to */*/*.html and so forth. For people who want the flexibility to easily change the background color across all documents, but are uncomfortable using a scripting language, they should consider specifying the background as an image (described earlier) rather than as a color. In this case create a file 1x1 pixel in dimension and fill it with the preferred color. Simply changing the color of this one image will now change the background color in all documents at a Web site. The file size of a 1x1 pixel image is so small that it will go unnoticed as documents are downloaded. By using this approach, flexibility now exists to switch between a background image and a solid color without having to edit any documents.
Navigation Buttons, Headers, and Footers
The ability to modify navigation buttons, headers, and footers across a Web site is a more complicated problem than simply changing the background image or color. It typically requires much more editing. If a Web site contains 10 documents this is a manageable problem. However, for sites that have grown to 100 or 1,000 documents, this quickly becomes a time- consuming task. One limited solution is to use server side includes that provide simple information to clients on the fly such as a file's last modification date or size. The disadvantage of server side includes is that they can decrease the performance of the server, since the files must be parsed while they are sent.
A second solution is to use a WYSIWYG authoring program such as Microsoft FrontPageŠ or Adobe Site MillŠ. By dragging and dropping icons, multiple links and images can be updated. The disadvantages of these authoring packages include: limited functionality, higher cost, and the inability (at least in early versions of these software packages) to work straight with the HTML source code.
To overcome the limitations of these other approaches, a Perl script has been created that functions like a very basic HTML pre-processor. This script is now available in the public domain. This script allows an entire set of pages to be reformatted by executing just one command. The idea is that common sections of a document such as headers, footers, or navigation buttons are maintained in a single document. To change the layout, one template file is edited and then a script is executed that automatically inserts the new content into all documents.
To use this script simply insert two special markup tags into the source code. The first tag should immediately precede the changeable data and the second tag should immediately follow the changeable data in the document as shown in Figure 1.
| Before | After |
<html> <head> <title>Document Title</title> </head> <body> ... <a href="document1.html"><img src="pathname/button1.gif"></a> <a href="document2.html"><img src="pathname/button2.gif"></a> </body> </html> |
<html> <head> <title>Document Title</title> </head> <body> ... <NAVIGATION-BUTTONS> <a href="document1.html"><img src="pathname/button1.gif"></a> <a href="document2.html"><img src="pathname/button2.gif"></a> </NAVIGATION-BUTTONS> </body> </html> |
In this example, the special tags are <NAVIGATION-BUTTONS> and </NAVIGATION-BUTTONS>. These special tags may be customized for individual needs. For instance, the special tags might be labeled <HEADER-INFO> or <FOOTER-INFO>. Any tags that a browser does not recognize, such as these tags, will be ignored when the document is displayed. The ending tag must be equivalent to the beginning tag with the addition of a closing forward slash (i.e., "/"). Avoid using tags that browsers recognize such as
or