Designing the Web Site

In this chapter, William will provide a low-level design for the Order/Inventory Reporting Web site based on the high-level design outlined in the previous chapter. This will include the identification and placement of all interface elements and data content. It will also include the identification and placement of links that will support navigation between the pages that make up the Web site. In addition, William will determine what functionality he wants to add to each page on the Web site using VBScript and describe what each VBScript will provide.

A Quick Overview of the Order Inventory Reporting Web Site

As explained in Chapter 26, "Project Case Study: Reporting Application Summary Data via the Corporate Intranet," Alexander and William plan to organize the Order/Inventory Reporting Web site into a collection of HTML pages. The site will have a Main page, which will serve as the default page for all visitors. From this page, visitors will be able to directly access the following three HTML pages:

• The Daily Consolidated Summary Report page. Displays the HTML version of the current day's consolidated summary report
• The Reports Archive page. Displays a list of links to HTML pages representing previous consolidated summary reports and provides access to downloadable copies of Microsoft Word versions of these reports
• The Registration and Configuration Settings page. Provides visitors with the ability to identify themselves to the Web site and to specify customization settings such as background colors and a default page

The content provided by the Web site's Main page and that of the Registration and Configuration Settings page will be static, meaning that it will be manually developed and updated by William as required. The content provided on the Daily Consolidated Summary Report page and the Reports Archive page will be dynamic, meaning that the content provided on these pages will be created by WSH VBScripts each morning based on the information found on the consolidated summary reports.

Note

This chapter and the one that follows assume a basic understanding of HTML on the part of the reader. Therefore, only a brief explanation of the HTML involved in creating the HTML pages is presented in this book. If you feel that you need additional information about HTML and how to work with it, read Learn HTML in a Weekend, 3rd Edition by Steve Callihan (Premier Press, 2000).

The Web Site s Main Page

William has decided to use HTML frames as the key design element of the Order/Inventory Reporting Web site. He plans to organize the display of all content for this site by dividing the display into two separate frames, as demonstrated in Figure 27.1.

Figure 27.1: Data presented at the Order/Inventory Reporting Web site will use frames

The left frame will be called left_frame and will be used to display HTML links to each of the three HTML pages that can be directly accessed from the Main page. The right frame will be called right_frame and will be used to display the content provided by the Web site, including links to the reports, archives, and the Registration and Configuration Settings page.

Defining the Links Page

In order to display the list of links that is to be provided on the left-hand side of the display, William plans to create an HTML page called Links.html and to load this page into the left_frame frame of the Default.html page (the Web site's main page). An example of the content to be presented on the Links page is shown in Figure 27.2.

Figure 27.2: The Links page provides navigation links to the other HTML pages

The following links will be displayed:

• Consolidated Summary Report for Today
• Consolidated Summary Report Archive
• Personal Configuration Settings and Registration

Each of these links will be left-justified. In order to enhance the appearance of these links, William plans to embed a number of VBScripts on the Links page, which will provide the functionality outlined below.

• Link rollovers. Changes the color of a link as the mouse moves over and off of the link
• Status bar messages. Displays supplemental text messages in the status bar

William will add rollover effects that will turn the color of each link to red when the mouse is moved over it and blue when the mouse is moved off of the link. By implementing rollover effects in this manner, William will make it easier for visitors to identify which link currently has focus (which link will be opened if the left mouse button is clicked). In addition, William will display a message on the browser status bar describing the HTML page to which each link points whenever the visitor moves the pointer over it, thus providing the visitor with additional information without crowding the main display area.

Defining the Welcome Page

By default, all visitors will see the Welcome page displayed in the right frame when they visit the Order/Inventory Reporting Web site. The content to be provided on the page is shown in Figure 27.3 and will include basic information about the Web site as well as contact information for several departments, should visitors have any questions or concerns.

Figure 27.3: The Welcome page will serve as the default page and will greet visitors by name and provide general information about the Web site

In addition to the text displayed on this seemingly simple HTML page, William plans to add a great deal of behind-the-scenes functionality in the form of embedded VBScripts, as outlined in the following list.

• Cookie retrieval. Retrieves information about visitors and their preferences from the client-side cache
• Browser detection. Determines what type of browser a visitor is using as well as its version number
• Redirection. Automatically loads different HTML pages based on browser type or user preferences

Note

A cookie represents a small amount of data that can be stored on visitors' computers when they visit your Web site. Using cookies, you can store information collected from the user and reuse that information the next time the visitor returns to your Web site in order to provide a personalized experience.

Each time a person visits the Order/Inventory Reporting site, the Welcome page will check to see whether their computer has a cookie from the Web site. If a cookie is found, it is retrieved and the data that it contains will be used to:

• Greet the visitor by name
• Set the Web site's color scheme
• Redirect the visitor to the preferred default page

Information stored in cookies is collected and saved on the Registration and Configuration Settings page. The first time users visit the Web site, they will not have a cookie. Therefore, their browsers will automatically be redirected to the Registration and Configuration Settings page. Once the visitor has supplied the information required on that page, a cookie is created and saved on the visitor's computer. Each visitor will have the option of returning to the Registration and Configuration Settings page in order to make modifications any time he wishes.

Visitors will be required to use Internet Explorer 5 or higher to use the Order/Inventory Reporting Web site. The Welcome page will automatically check the browser being used by each visitor to ensure that it meets this requirement. If the browser does not meet this requirement, the visitor's browser will be redirected to an HTML page that advises her of the requirement to use the appropriate browser.

Assembling the Main Page

Figure 27.4 shows how the Order/Inventory's Main page will look when loaded into the visitor's browser. As you can see, by implementing frames William provides a structure for consistently displaying content. He will also make considerable use of font size and highlighting in order to enhance the overall appearance of the Web site.

Figure 27.4: The home page for the Order/Inventory Reporting system will serve as the Web site's default page

The Daily Consolidated Summary Report Page

The Daily Consolidated Summary Report page, shown in the right-hand pane in Figure 27.5, is created each morning by a VBScript run on the Windows 2000 Professional workstation by the WSH. This HTML page uses HTML tables to display the contents of the current day's consolidated summary report in a spreadsheet-like format. Alexander is responsible for developing the automated creation of this HTML page each morning and for copying it to the D:Order_InventoryHTML folder on the company's Web server. Alexander will save this HTML page as CurrentRpt.HTML, overriding the previous day's consolidated summary report each morning with the current day's report.

Figure 27.5: The HTML version of the consolidated summary report will provide a spreadsheet-like view

All that William needs to do to integrate this HTML page into the Order/Inventory Web site is to make sure that he provides a static link to it on the Links page.

The Reports Archive Page

Like the Daily Consolidated Summary Report page, the Reports Archive page (shown in Figure 27.6) is created by a VBScript run by the WSH on the Windows 2000 Professional workstation. It provides access to a three-month archive of HTML versions of the consolidated summary reports. These reports will be organized by month and will be accessible by clicking on their links.

Figure 27.6: The Reports Archive page provides links to the previous three months' worth of consolidated summary reports

In addition to the HTML version of the consolidated summary reports, the Reports Archive page provides a link to Word versions of the reports. All that a visitor will have to do to download one of the Word versions of the report is to click on its link and then click on Yes when prompted to confirm the download.

The Registration and Configuration Settings Page

The Registration and Configuration Settings page, sketched out in Figure 27.7, will be created as an HTML form and will include a number of form elements, including:

• Text fields. To collect text string input
• Radio buttons. To provide a list of mutually exclusive choices from which visitors may select a single option
• Drop-down lists. To provide a predefined collection of options to select from
• Buttons. To initiate actions on the form such as form validation or the execution of VBScripts

Figure 27.7: The Registration and Configuration Settings page collects each visitor's name and personal preferences

The form's text field will be used to collect the visitor's name. The collection of radio buttons will provide each visitor with the ability to specify a default page for the Web site. The drop-down list will provide the visitor with the ability to select from one of a number of predefined color schemes that will control the background color of the Links page. Finally, buttons will be used to initiate a number of script tasks, as outlined below.

• Cookie creation. Retrieves information about visitors and their preferences from the client-side cache
• Form validation. Determines what type of browser a visitor is using as well as its version number
• Pop-up dialog box based confirmation. Automatically loads different HTML pages based on browser type or user preferences
• Pop-up dialog box based help. Provides text-based help that explains the information required by each form element on the page

Summary

In this chapter, you observed as William outlined the content and format of each of the HTML pages that will make up the Order/Inventory Reporting Web site. This included defining the relationships and links among the HTML pages as well as the identification and placement of VBScripts within each of these HTML pages. The chapter also explained how these VBScripts will enhance the overall presentation of the Web site.