ScoreKeeper News: Volume 1 - November 1, 2004

Customizing Your Web Pages

ScoreKeeper gives you some flexibility in generating your meet results web pages. This short article will describe how in ScoreKeeper 1.1 you can make your web pages fit in with your overall web site.

Colors

The first and easiest customization is to change the web page colors. Chances are your institution uses a consistent web page color scheme. You can tell ScoreKeeper to use this scheme by setting the colors of different parts of the web page. On the Web Pages (2) tab of the Program Preferences screen (Edit > Program Preferences), you can set the colors for the page title, accent text, highlight rows, and team totals.

Ok, that is easy to say but how do you know what colors to use? There are several ways to figure this out. The simplest way is to ask someone who knows or who is responsible for web page design. Another way is to open one of your other web pages and take a look at the page source. In Internet Explorer, go to View > Source. In Netscape, go to View > Page Source. If you are unfamiliar with HTML code, what you get can be confusing. What you are looking for are color numbers. Each color is represented by a number. In the web page source, these are six digit hexadecimal (base 16) numbers preceded by a # (pound symbol). These six digits represent three pairs of color values. The first two are for the Red component, the second for the Green component, and the third for the Blue component. Each color component pair can have values from 00 through FF (0 to 255 in decimal). Thus #FF0000 would be bright red and #770000 would be a darker red. White is represented by #FFFFFF and black by #000000.

Unfortunately, Windows does not use hexadecimal numbers in its color selector (the one used by ScoreKeeper to pick your web page colors). Rather it uses decimal numbers for each color component. You can use the calculator included with Windows to convert from decimal to hexadecimal or hexadecimal to decimal. This calculator can usually be found on the Accessories menu (Start > All Programs > Accessories). To help make selecting your colors easier, ScoreKeeper can display the color values in either decimal or hexadecimal.

Include Files

ScoreKeeper can include the contents of files you customize much like a word processing program does a mail merge. These are text files containing HTML code and should be free of any <html>, <head>, <body>, or their related closing tags. Beyond these limitations, ScoreKeeper does not limit what these files contain so you can include JavaScript code, style sheets, or other special code.

There are five specifically named include files which, if used, must reside in the program folder (usually c:\Program Files\ScoreKeeper): If a file is found, it will be included. To see exactly where in the web page file each include file’s contents would be placed, look at a generated web page file and search for comment lines such as <!-- include file location for HTMLHead2.htm -->. If an include file of that name was found, its contents rather than the comments would be placed there.

HTMLStart.htm
Inserted at the beginning of the file, immediately after the <html> tag.
HTMLHead1.htm
Inserted near the beginning of the file, immediately after the <head> tag.
HTMLHead2.htm
Inserted near the beginning of the file after ScoreKeeper's <title> and several <meta> tags.
PageHead.htm<
Inserted immediately after the <body> tag.
PageFoot.htm
Inserted at the end of the page just before Beaver Creek Software's copyright notice.

NOTE:  If any of your include files refer or link to a graphic or other file, the referenced file must exist in the location specified in your include file.

The first three include files would include content that is not itself displayed. This is where you would add style information, JaveScript code, meta tags, etc. The latter two include files, PageHead.htm and PageFoot.htm is where you can place things that will actually be shown on the page. For example, To place your school logo at the top of the page, create a text file named PageHead.htm in the program folder and include a link to your logo file. The link must be to a logo file on your web server.

HTML can be tricky to write directly. It is better to use a web page design tool such as Dreamweaver or FrontPage then use copy and paste to put only the parts you want in to your include files.