by Robert Meegan
The Web provides many opportunities for a business to greatly increase its exposure to potential customers. If a company's business is a retail outlet or a service that can be performed remotely, it can use a Web site to provide an online catalog of goods or services.
In this chapter, you will create a Web-based brochure for a travel agency.
The steps needed to complete this task are:
For this example, assume that the owner of World-Wide Travel (WWT) was exploring the Web, looking at potential destinations for his services when he came across the Jubilee Falls State Park site that you created in the preceding chapter. He was impressed enough with the quality of the site to contact the park's Webmaster and inquire as to who developed it. He then contacted you and asked if you would be interested in building a site for his company.
After you accepted the contract, you met with him and his staff and found out that they are a medium-sized travel agency that is not affiliated with any of the major chains. Several members of the staff were familiar enough with the Web to realize that it represented the opportunity to develop a nationwide customer base for relatively little expense.
Their goals for the site included the following:
To get as much exposure as possible for their site, the people at WWT have decided to use many of the methods discussed in chapter 20, "Make Yourself Known," for advertising a Web site.
After the site is complete, the site's Webmaster (the person in
charge of maintaining the site) will register the site with as
many search tools as he or she can. This includes registering
with all the major databases and Webcrawlers, and trying to locate
any specialized travel, business, and vacation sites that might
be willing to list the WWT site. At this time, the management
at WWT doesn't think that it would be cost effective to sponsor
one of the popular Web sites, but they might be willing to rent
a storefront on one of the Internet malls, if the site begins
to bring some new business.
| Note |
This strategy is probably good for a small- to medium-sized company-building a Web presence using inexpensive methods first and gradually increasing the expenditure as justified by the returns. |
After your interviews, you can identify three primary areas on which the company would like to focus the site: the travel packages developed by the company, bargains available on travel, and a form for ordering additional materials.
To give the site a proper structure, plan it out completely before you begin to build it. You can create a set of flow charts to show how the pages interconnect. Figure 32.1 shows how the main sections of the site interact, figure 32.2 shows the travel package section, figure 32.3 lays out the travel specials section, and figure 32.4 is a depiction of how you can expect the information request form to look when it is complete.
Figure 32.1 : The three sections of this site spread out from the main page.
Figure 32.2 : The travel package section shows the packages available by destination.
Figure 32.3 : The specials section lists bargain rates that are available.
Figure 32.4 : This figure shows what the finished response form will look like.
After you lay out the pages, you need to develop the body text to be used in them. For most of the travel packages, you can use the text that has already been created for paper brochures used by the agency. Whenever this type of text is present, you should use it, if possible, to minimize the amount of writing that is required.
To make it easy to edit the text, copy it from a Word file and
paste it into an HTML file using Notepad as the editor. The next
step is to identify headings and to add the proper tags to the
page.
| Tip |
Microsoft provides a free add-in to its Microsoft Word program that can greatly assist in the production of web pages from existing Word documents. The Microsoft Internet Assistant provides the formating and mark-up macros necessary to convert a Word document into a usable HTML document. Even with the Internet Assistant, you should carefully check your pages to make certain that everything converted as you expected. |
WWT uses a company logo on its letterhead and on all its paper
brochures, so to maintain a uniform appearance, you can use it
for the Web site also. This logo is provided as an encapsulated
PostScript (EPS) file by the graphic design house that originally
created it. Because EPS is not generally supported by Web browsers,
you have to convert it to another format.
| Note |
The most commonly supported graphics formats are the Graphical Interchange Format (GIF) and the JPG format. Of these, the JPG format generally produces smaller image sizes, albeit with some loss in quality. For our images, the JPG images are quite suitable. |
CorelDRAW! can read EPS files, and because you're already familiar with it, that's what you can use here. Figure 32.5 shows the logo in CorelDRAW!. Export it as a GIF file and convert it to JPG later. You also can use CorelDRAW! to create banners for the top of each page. Creating banners takes a lot of time, but the effect should be worth the extra effort. One of the banners is shown in figure 32.6.
Figure 32.5 : You can use CorelDraw! To modify image formats.
Another nice element is to use graphic maps to allow visitors to move around the site. On the screens that list travel by continent, you can build a map of the flags of each country. By clicking the flag for the country they want, visitors can jump to the correct page. Figure 32.7 shows what one of these maps looks like.
Figure 32.7 : An image map with the flags of several
countries serves as a guide into the site.
| Note |
Remember that the Web is a graphical interface and that crisp, clean images can make your site more attractive. The other side of the coin is to also remember that many people don't load images for every page, so make sure that text-only viewers can still navigate your site. |
Your customers would like you to add some pictures to the pages. Each destination should have a picture that captures the local flavor. Unfortunately, WWT doesn't have any photographs. On a trip to the local software store, you find several low-cost CD-ROMS containing royalty-free photographs that you can use.
On the disk the files are stored as TIF files, which is a common format for files that can be used on either PCs or Macs. You can use the shareware program LView Pro to manipulate the photos, as shown in figure 32.8.
Finding enough images that meet your needs may take awhile. Some
of the images need cropping because of black edges in the photos.
Using LView, you can resize the images and convert them to JPG
format. On this site, you won't have the original high-color,
large images available for downloading.
| Caution |
Carefully read the license agreement that comes with the images. In most cases, you can use the images, but you should not distribute them. In other words, you shouldn't make downloading the images an option at your site. |
The World-Wide Travel on-line brochure will have a page for visitors to the site to request more information. Some of the options that your clients want to have available are the ability to order literature, to request that an agent contact them by telephone, and to be notified by e-mail when new specials are announced.
You can create a form similar to the one you used for the park in chapter 31, but with more options for the visitor to set. The form is written in HTML as follows:
Listing 32.1 the log page
<HTML> <HEAD> <TITLE>World-Wide Travel Response Form</TITLE> </HEAD> <BODY> <IMG ALIGN=middle SRC="logo.gif"> <H1>World-Wide Travel</H1> <H2 ALIGN=Center>Information Order Sheet</H2> <P> Our goal at World-Wide Travel is to make traveling as easy and comfortable as possible. To assist you in your travels, we have several services available. <UL> <LI> You can have one of our agents call you to arrange your travel plans <LI> You can order literature on our many travel packages <LI> You can join an email list and receive information on travel specials, as soon as they're announced <P> <HR> <FORM METHOD=POST ACTION="http://www.wwt.com/cgi-bin/response_script"> First Name: <INPUT TYPE="text" NAME="fname" SIZE=25 VALUE=""><BR> Last Name: <INPUT TYPE="text" NAME="lname" SIZE=25 VALUE=""><BR> Telephone: <INPUT TYPE="text" NAME="phone" SIZE=25 VALUE=""><BR> Mailing address: <BR><TEXTAREA NAME="message" ROWS="4" COLS="40"> </TEXTAREA> <P> E-mail address (for responses and mailing list): <BR> <INPUT NAME="email" SIZE=25 VALUE=""> <P> <HR> Please send me information on the following destinations:<P> <input type=checkbox name=destination value=europe>Europe<br> <input type=checkbox name=destination value=asia>Asia<br> <input type=checkbox name=destination value=samer>South America<br> <HR> Please have an agent call me: <INPUT TYPE="radio" NAME="list" VALUE="yes">Yes <INPUT TYPE="radio" NAME="list" VALUE="no" checked>No <HR> Send me information on travel specials: <INPUT TYPE="radio" NAME="list" VALUE="yes" checked>Yes <INPUT TYPE="radio" NAME="list" VALUE="no">No <HR> Send a message to us: <P> <TEXTAREA NAME="message" ROWS="10" COLS="60"></TEXTAREA> <P> </FORM> <HR> <P> Thank you for visiting us at World-Wide Travel! <P> <H6>©1996 World-Wide Travel</H6> </BODY> </HTML>
You can check how your form looks by opening it in Netscape Navigator, as shown in figure 32.9
When you talk to the owner of WWT, you find out that he is more interested in having a visually exciting site than he is in having one that can be read using every browser available. With this fact in mind, you can use HTML extensions that are supported by both Netscape Navigator and Microsoft Internet Explorer.
This way, you can use variable font sizes, background colors, and (most importantly) client-side maps. Client-side image maps have a number of advantages, but the two that are most relevant for you are that the number of hits on the server is greatly reduced and that the users can get their links somewhat quicker. These advantages are important because WWT can't afford a high-powered server yet, so anything you can do to improve performance will be welcome.
The following code is the World-Wide Travel home page in HTML (HOME.HTM).
Listing 32.2 The Home Page
<HTML> <HEAD> <TITLE>Welcome to World-Wide Travel</TITLE> </HEAD> <BODY> <IMG SRC="logo.jpg" ALT="World-Wide Travel"> <P> World-Wide Travel is proud to offer the finest in travel packages. Please take the time to tour our site and we think that you'll be glad that you did. <P> <HR> <H3>Click on a page</H3> <IMG SRC="menumap.gif" USEMAP="menumap"> <MAP Name="MENUMAP"> <AREA SHAPE="RECT" COORDS="0,0,75,90" HREF="destination.html"> <AREA SHAPE="RECT" COORDS="80,0,170,90" HREF="specials.html"> <AREA SHAPE="RECT" COORDS="171,0,135,90" HREF="moreinfo.html"> </MAP> <H3>Or select a menu option</H3> <P> <A HREF="Destination.htm">[Destinations]</A> <A HREF="specials.htm"> [Specials]</A> <A HREF="moreinfo.htm">[More information] <P> <HR> <H6>©1996 World-Wide Travel</H6> </BODY> </HTML>
See the result shown in figure 32.10.
The following code is the WWT destinations page in HTML (DESTINATION.HTM).
Listing 32.3 The Destinations Page
<HTML> <HEAD> <TITLE>World-Wide Travel Destinations</TITLE> </HEAD> <BODY> <IMG ALIGN=bottom SRC="logo.gif"> <H1>Circling the world, World-Wide Travel is Your Travel Connection</H1> World-Wide Travel has over twenty years of experience in the travel business. Don't trust your travel to a fly-by-night operator. <P>Instead, contact us for all your international travel needs. <HR> <H2>Select a destination continent</H2> <A HREF="europe.htm"> [Europe] </A> <A HREF="asia.htm"> [Asia] </A> <A HREF="samer.htm"> [South America]</A> <HR> <P> <H6>©1996 World-Wide Travel</H6> </BODY> </HTML>
The resulting page is shown in figure 32.11.
The following code is the European Destinations page in HTML (EUROPE.HTM).
Listing 32.4 The Europe Page
<HTML> <HEAD> <TITLE>World-Wide Travel European Destinations</TITLE> </HEAD> <BODY> <IMG ALIGN=middle SRC="logo.jpg"> <H1>European Destinations</H1> <P>World-Wide Travel has been sending travelers to Europe for more than twenty years now. We are specialists in package vacations in many European countries. Leave your troubles behind and let us handle all of your needs. <HR> <H2 ALIGN = CENTER>Select a country</H2> <IMG SRC="euroflags.gif" USEMAP="euroflagmap"> <MAP Name=" euroflagmap"> <AREA SHAPE="RECT" COORDS="0,0,78,50" HREF="austria.html"> <AREA SHAPE="RECT" COORDS="86,0,141,50" HREF="belgium.html"> <AREA SHAPE="RECT" COORDS="150,0,218,50" HREF="denmark.html"> <AREA SHAPE="RECT" COORDS="227,0,302,50" HREF="france.html"> <AREA SHAPE="RECT" COORDS="310,0,395,50" HREF="germany.html"> <AREA SHAPE="RECT" COORDS="444,0,494,50" HREF="switzerland.html"> <AREA SHAPE="RECT" COORDS="455,0,560,50" HREF="england.html"> </MAP> <P> <A HREF="austria.htm"> [Austria] </A> <A HREF="belgium.htm"> [Belgium] </A> <A HREF="denmark.htm"> [Denmark]</A><BR> <A HREF="france.htm"> [France] </A> <A HREF="germany.htm"> [Germany] </A> <A HREF="switzerland.htm"> [Switzerland] </A> <A HREF="england.htm"> [England]</A> <HR> <H6>©1996 World-Wide Travel/H6> </BODY> </HTML>
The European Destinations page is shown in figure 32.12.
The following code is the English Destinations page. It is an example of what the other countries' pages would look like (ENGLAND.HTM).
Listing 33.5 The England Page
<HEAD> <TITLE>World-Wide Travel English Destinations</TITLE> </HEAD> <BODY> <IMG ALIGN=left SRC="england.jpg"> <H1>English Destinations</H1> <P> <IMG ALIGN=right SRC="london.jpg"> Of all the many countries that World-Wide Travel sends people to, England remains the most popular. With its pleasant summers and mild winters, England remains a prime year-round vacation spot. We offer a number of trips to England, with plans to suit almost any interest and budget. Some of our more popular trips are listed here. <P Align = right> <Table Border> <Caption><H3>Spring 1996 English Travel Packages<H3></Caption> <TR> <TH>Length Days/Nights</TH> <TH>Cities</TH> <TH>Sights</TH> <TH>Price</TH> </TR> <TR> <TD>3/4</TD> <TD>London</TD> <TD>The Tower, the British Museum, 221B Baker Street</TD> <TD>$1,750</TD> </TR> <TR> <TD>5/6</TD> <TD>Oxford</TD> <TD>Stratford upon Avon, Stonehenge, Rollright Stones, Oxford University</TD> <TD>$2,250</TD> </TR> </Table> <HR> <H6>©1996 World-Wide Travel</H6> </BODY> </HTML>
The English Destinations page is shown in figure 32.13.
Just as you added a scrolling marquee to the park pages in the preceding chapter, you can add the same tool to the main page at the travel agency. This is an example of how you can reuse Java code, after you have it working and bug free.
The following is the same code that you used in chapter 32, with the variables Status1 and Status2 changed to show their new use. You add this code to the <HEAD> section of any page on which you want to have the information appear.
Listing 32.6 The Response Script
<SCRIPT LANGUAGE="JavaScript">
<!-- Comments hide this program for browsers that don't understand
JavaScript
var window_size = 0;
// These two lines are the message that is scrolled in the status
// window
var Status1="Our hours are 8:00am to 6:00pm Central Time M-F";
var Status2="Call us at 1-800-555-2921";
function StartMarquee(initial_size) {
window_size = initial_size;
ScrolledMessage(window_size);
}
function ScrolledMessage(scrollto) {
var StatusLine;
var msg = " ";
var i = 0;
var speed = 50;
StatusLine = Status1+"......"+Status2;
scrollto--;
if (scrollto == -StatusLine.length)
scrollto = window_size;
if (scrollto > 0) {
for (i = 0; i < scrollto; i++)
msg = " "+msg;
msg = msg + StatusLine;
} else
msg = StatusLine.substring(-scrollto, StatusLine.length);
msg = msg.substring(0,window_size);
window.status= msg;
window.setTimeout('ScrolledMessage('+scrollto+')',speed);
}
// end of comment that hides the JavaScript code -->
</SCRIPT>
</HEAD>
<BODY onload="StartMarquee(200)">
</BODY>
After this program starts, it begins scrolling the marquee message within the status bar of the browser. Figure 32.14 shows how the main page looks with a marquee scrolling across the status bar.
Figure 32.14: The main page now shows the scrolling marquee running in the status bar.