retrieval system without
prior written permission of the publisher except in the case of brief quotations
embodied in critical articles and reviews. Making copies of any part of
this book for any purpose other than your own personal use is a violation
of United States copyright laws. For information, address Que Corporation,
201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.
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 on-line 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:
computer development is that
code and other elements should be designed to be flexible enough for reuse.
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:
corporate presence on the Net that could serve to attract
customers 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.
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.
Fig. 32.1
The three sections of this site spread out from the main page.
Fig. 32.2
The travel package section shows the packages available by destination.
Fig. 32.3
The specials section lists bargain rates that are available.
Fig. 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.
WWT uses a company logo on their letterhead and on all their 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.
The most commonly supported
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.
You can use CorelDRAW to modify image formats.
By creating a banner that shows the flag and an image from the country, you can create a feeling of adventure and excitement.
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 on 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.
An image map with the flags of several countries serves as a guide
into the site.
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.
LView Pro is an example of the excellent shareware programs that
are available to help you construct Web sites.
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.
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.
Visitors to the site can request additional information from WWT using this page on their browsers.
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 home page is intentionally simple. Later you can add some JavaScripts to spice it up somewhat.
The following code is the WWT destinations page in HTML (DESTINATION.HTM).
Listing 32.3 The Destimations 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 destination page is something of a placeholder at this point.
You need to add graphics of the continents before you're done.
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 European destinations screen has plenty of room for additional countries as new packages are developed.
The following code is the English Destinations page. It is an example of what the other countries' pages would look like (ENGLAND.HTM).
Listing 32.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.
A stock photo really adds drama to the page, especially when added to the custom banner.
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 31, 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.
The main page now shows the scrolling marquee running in the status bar.
|
