 | ||
|
| ||
| ||
|
| ||
September 30, 1997
Hello, fellow SBN members. I would like to share a little story about how I created a Web site 
-- with 1000 pages of information, an easy-to-use interface, and a simple, yet in my eyes, good-looking design -- in two months.
The client was the city of Horsens, where I live. WhiteHouseŽ Company ApS, where I work, was the first company in our region to offer Web-related services. We have some pretty good references on the Internet, and we had earlier created several marketing and design jobs for the city, which was why they came to us with this job.
Software and technologies used:
When I started working on the structure of the site, I sat down in my office with paper and a pen, and I did some sketches of how I wanted the site to work. I found out pretty fast that I wanted to build a non-frame version to make the site compatible with earlier browsers. This decision was based on the log files for our server, which showed that some people still used version 1.x of both Netscape and Internet Explorer. I created a check for Java compatibility, though, to ensure that the user would be able to view the functionality built with Microsoft Visual J++. I knew that the inclusion would prevent a small amount of people from viewing the site, but I felt that it was necessary to make the site work.
The possibility of using a special frame for navigation was out of the question, so I created a table that looked like a frame on the left side of the pages; the table included access to all 11 main sections of the site. An arrow on the bottom-left side of each page pointed to the previous level - this way the user would always have a choice of getting back to the front page in one or two clicks.
After finishing the structure of the site, I presented it in Microsoft PowerPoint, which I ran at the client's office.
I then asked the art director to do a rough drawing for the cartoon-like front page of the site. I decided to use handmade drawings to make the look of the site more "alive."
I scanned the rough black-and-white drawing, and used Adobe Photoshop to add the colors and shadows. At this point, I started to write the HTML for the front page. For a long time, I have used the Microsoft Notepad editor for HTML, because it is fast and it gives me 100 percent control over all tags and tables.
I added the blue menu, my frame-like table, in the left side and the Photoshop cartoon image. Now I only needed the client to either accept the look or ask me to create another one.
The client accepted this layout, and I added the server-side ASP functionality that I needed. The site features a three-level entrance. As I mentioned earlier, a page checks whether the user is supporting Java; if true, all Internet Explorer users are redirected to the Internet Explorer-optimized front page, and all other users, including those using Netscape, are redirected to the standard front page.
When a user enters the URL for either the Internet Explorer-optimized page or the standard front page, a server-side ASP script logs the time, browser, browser version, language, and the user's IP address. White House Company runs a report in WebTrends once each month for all clients on our server, but the ASP-generated logs provided a quick and easy way for the client to keep track of the users during the month until they received the final report.
The server logs the information in a standard ASCII file, which the client can access through a password-protected URL.
The text-based ASP counter used on both the optimized and the standard front pages is the standard counter, which can be downloaded from the Microsoft BackOffice Downloads site.
I implemented a similar design for the subpages, and used the same cartoon image as on the front page, only a lot bigger. I placed red lines as a border around all contents of the pages, ending up in the arrow pointing back to the previous level of the site.
Note: Adobe Illustrator and Adobe Photoshop are excellent tools for creating these kinds of graphics, because the Illustrator vector-format (.AI) can be opened in Photoshop in the exact fixed size that is needed for the GIF file, without the loss of sharpness in the picture that I get when I resize graphics in Photoshop. Both Macromedia Freehand and CorelDRAW can export all graphics in the .AI format.
After I finished the design for the subpages (for example, http://www.horsens-bynet.dk/forsid10.htm ), I added the contents, which I received from the client in Microsoft Word format. All pictures were scanned inhouse. Next, I spent 45 days creating all the HTML and ASP for almost 1000 pages by cutting/pasting the contents from Word into Notepad. Finally, I needed only the Perl scripts for the search feature. The search functionality was written in Perl to access some special features the client wanted, and we had already written a similar script for another client.
Then I tested the site. For my platform when working with HTML, ASP, and design, I use a "workstation" with Windows NT 4.0 Server and IIIS 3.0, which makes it possible for me to run my own private "intranet" on the HTTP-protocol, and I can preview all pages from any Mac or PC in our network, allowing me to ensure that all browsers on all platforms can show the pages correctly.
I can also set up all kind of scripts and run them and test them before finally uploading them to our Web server, which has almost the same configuration.
Since this site was published on May 16, 1997, a lot of new pages and parts of the site have been added and optimized. The basic design of the pages makes it easy for me to add new contents in minutes. I usually get an e-mail from the client with an attached Word-file, or a normal mail with photos and other material, and then I decide how to present it in HTML to match the other contents. (All news can be seen at http://www.horsens-bynet.dk/nyheder.asp ).
For now, all contents are in Danish (sorry). We are currently working on adding all relevant information in English, too -- but this will not be ready until sometime during December 1997.
We are also currently working on changing the Perl scripts to use Microsoft Index Server, which has the exact same functionality and is a lot easier to use. This change should be final by the end of October 1997.
In the meantime, another Danish city -- with a population of 80,000 -- has ordered a "city-net" with the same concept as the Horsens site, so I had better end this article and start working.
As a final word before I get back to work, I would like to let everyone know the importance of using the Site Builder Network as a resource of information, tips, and tools. This is a brilliant way to expand your skills in all areas of Web publishing.
Allan Rasmussen is an Interactive Developer at WhiteHouse Company , and created jointly with Comania the Tech Circus site in the SBN State Fair. He is also a member of Club Internet Explorer , a volunteer user group supporting Microsoft Internet and its related technologies.
Photo Credit: Russell Illig/PhotoDisc; Neil Beer/PhotoDisc
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top