Web-Based Marketing -email me.---back to home page.

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.

Web-based brochure.

The steps needed to complete this task are:

Defining the goals of the site

In order to make the site an effective business tool, the goals must be clear and well defined.

Outlining the structure of the site

To meet the goals that we defined, the site must be completely designed before construction begins.

Designing the guide's graphics and images

A commercial site should make use of a strong graphic presence on the Web to attract customers.

Creating the response forms

Once customers have been drawn into the site, the next step is to provide a location for feedback and requests.

Reusing previously written elements

One of the principles of cost effective computer development is that code and other elements should be designed to be flexible enough for reuse.

Adding action with JavaScript

A commercial site can make excellent use of a short JavaScript.

Defining Goals

Their goals for the site included the following:

Developing a corporate presence on the Net that could serve to attract customers
Showcasing the tours and travel packages that the agency represented
Showing a listing of current travel specials that could change daily
Providing an on-line information request form for visitors to request literature
Improving the agency's market size without greatly increasing advertising costs

Creating a Corporate Presence On-Line

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.

Creating the Body Text

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.

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.

Creating the Graphics and Images

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 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 quie suitable.

CorelDRAW can read EPS files, and because you're already familiar with it, that's what you can use here. 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 32.6.

32.5

You can use CorelDRAW to modify image formats.

32.6

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. 32.7 shows what one of these maps looks like.

32.7

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 32.8.

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.

Creating the Input Forms

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>&copy1996 World-Wide Travel</H6>

</BODY>

</HTML>

Visitors to the site can request additional information from WWT using this page on their browsers.

Writing the Pages

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 Home Page

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>&copy1996 World-Wide Travel</H6>

</BODY>

</HTML>

32.10

The home page is intentionally simple. Later you can add some JavaScripts to spice it up somewhat.

The Destinations Page

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>&copy1996 World-Wide Travel</H6>

</BODY>

</HTML>

The resulting page is shown in 32.11.

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 Europe Page

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>&copy1996 World-Wide Travel/H6>

</BODY>

</HTML>

The European Destinations page is shown in 32.12.

32.12

The European destinations screen has plenty of room for additional countries as new packages are developed.

The England Page

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>&copy1996 World-Wide Travel</H6>

</BODY>

</HTML>

The English Destinations page is shown in 32.13.

32.13

A stock photo really adds drama to the page, especially when added to the custom banner.

Adding a JavaScript Marquee

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 Status1and Status2changed 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. 32.14 shows how the main page looks with a marquee scrolling across the status bar.