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 is a powerful tool for communications. Unlike most other media, it is both graphical and interactive. These capabilities make it an excellent tool for providing information about tourist attractions and scenic areas.
In this chapter, I'll walk you through the construction of a Web-based guidebook and travel reference for a fictitious Pacific Northwest state park.
The steps we'll undertake are:
Jubilee State Park is a scenic getaway in the Pacific Northwest, encompassing
parts of a mountain range, lakes, waterfalls, and broad forests. For this
example, assume that the state park administration has hired you to produce
a guidebook for the park.
After interviewing the park staff, you find that their goals include the following:
As one of many local and federal facilities trying to increase its seasonal
business, and in on-line competition with larger "name" locations
such as the Grand Canyon and the Napa Valley region, Jubilee Falls needs
to make a concerted effort to promote and advertise its presence on the
Internet. As you learned in Chapter 20, "Make Yourself
Known," you can publicize a Web site in many ways.
First, the Guidebook will be listed on the Web's popular new site references,
including the NCSA "What's New on the WWW" page and by post in
the UseNet newsgroup comp.infosystems.www.announce. Second,
the park's designated Webmaster (the person who will manage the site when
you are finished) will maintain an on-line presence in UseNet discussion
groups that might be interested to know about the park's facilities, such
as alt.rec.camping, rec.outdoors.fishing,
rec.travel.usa-canada, rec.climbing, misc.kids.vacation,
and rec.animals.wildlife.
The park rangers have identified four sections for their Web application:
the introduction, with a list of services and a history of the park; the
park's seasonal schedules and fee and reservation information; a "what's
there to do" section, with a list of activities indexed to the park
location and when the activity is recommended; and a scenic tour of park
images to give users a glimpse of the park's highlights.
The first task is to create a flow chart for each section to lay out
the basic structure of the site. These charts show only the individual
pages or subgroup of pages, not the intuitive links users will expect when
the pages are distributed on-line. Figure 31.1 shows how the main sections
of the site interact, figure 31.2 shows the seasonal schedules and fees
section, figure 31.3 shows the index of activities, and figure 31.4 shows
the scenic tour.
Fig. 31.1
Laying out the structure of the site is the first step
Fig. 31.2
The tables on the schedule and fees pages are also laid out before starting development.
Fig. 31.3
By showing the nature of the connections between the activities, seasons, and locations we can see what links will be needed.
Fig. 31.4
By showing the nature of the connections between the activities, seasons, and locations we can see what links will be needed.
Now that you know what pages will be required, you need to create the text documents for the site. Remember that keeping the text clear and concise on these pages is important.
After the paragraph text is complete, you can add formatting such as headings, lists, and emphasis to the pages. Formatting makes the text more interesting and easier to scan quickly for the desired information. It's important that the pages contain accurate information because visitors will be planning their trips around what is listed here.
To help clarify complex information such as the activity schedule listing the overnight camping schedule and the special events for 1996, you can use a couple of tables.
See "Creating an HTML Document" to find out how to create and format the text.
See "Tables and Equations" for information on table creation.
The park has an official logo, so you can use it on each of the pages. The logo won't create a burden for visitors with slow connections because their systems will cache it after they load it the first time. The logo was created in CorelDRAW and is stored as a CDR file. Because it is not a standard Web graphic format, you can open CorelDRAW and export the logo as a GIF file). This way, you also get a chance to resize it so that it fits nicely on the page.
Because you're running CorelDRAW already, you also can take the time
to make some icons that are similar to the signs used at the park to direct
visitors (see fig. 31.5). These icons help
give your site a visual consistency that's just a little different than
other sites. You need to export each of these icons into GIF format as
well.
Special icons created just for your site make it more interesting for the visitor.
Graphic design is more than just making pictures; it entails choosing an overall organizing purpose and graphical "feel." Mixing unrelated graphic types, mismatched color schemes, and inconsistent elements betrays a novice approach to graphic design.
Many of the Web pages will display color photo images of scenic sights
and activities. The park hired a photographer last summer to document the
park's natural beauty. When the photographs arrived, they were converted
to a CD-ROM disc in the Kodak PhotoCD format. You can use an excellent
shareware program, LView Pro, to manipulate the photos, as shown in figure
31.6.
A graphics file conversion program is a must for building a web site.
A couple of the images need some cropping, to reduce the image size, but LView handles that chore easily. If the color balance or contrast is out of line, you can adjust that as well. Finally, reduce the color depth to 256 colors and resize the images to make thumbnail-sized pictures. Using smaller pictures reduces the amount of time needed to download the pictures. You can put a link to the full-sized true-color images so that if viewers can download them if they want to.
Troubleshooting
The HTML documents and graphics I'm using are copyrighted by my organization. How do we protect our intellectual property over the Web?
Truthfully, you can't. If people want to steal from you badly enough, they will. What's prudent, though, is to protect the accidental misuse of your work. This happens when users include links from their Web pages to pages on your server that are "inside" the application, away from the main page that usually contains the author's information and company affiliation. For the best protection, include copyright statements on each page (using the smallest heading size, H6, to keep them unobtrusive) and LINK statements in the documents' head sections to identify the author and the originating organization. You can also add copyright statements in fine print to graphics if necessary.
The Jubilee Falls Guidebook is primarily intended to deliver information;
an on-site kiosk is less complicated if users aren't asked to input information
(and a keyboard isn't necessary). But, for the on-line audience, using
a form that can be filled out to receive additional park information by
mail is a great idea. The people who use it are most likely not from the
local area and probably don't have access to the Park Service's printed
materials.
In chapter 21, "Forms and How They Work," you learned that a response form is the perfect way to get feedback from site visitors, so create one to give people a way to get in touch with you. The form is written in HTML as follows (LOG.HTM):
Listing 31.1 The Log Page
<HTML> <HEAD> <TITLE>Jubilee Falls Visitor's Log</TITLE> </HEAD> <BODY> <IMG ALIGN=middle SRC="../ logo.gif"> <H1>Jubilee Falls State Park</H1> <H2>Visitor's Log </H2> <P> As a public facility, we exist to serve you. Tell us how we are doing, or let us know if you would like more information mailed to you. <P> If you would like to be on our electronic mailing list choose the "Yes" button below - we will keep you informed of special park schedules, special holiday rates and regional activities that might interest you to visit our neck of the woods. <P> <HR> <FORM METHOD=POST ACTION="http://www.jubilee.org/cgi-bin/log_script"> <H3>Visitor's Log</H3> <P> First Name: <INPUT TYPE="text" NAME="fname" SIZE=25 VALUE=""><BR> Last Name: <INPUT TYPE="text" NAME="lame" SIZE=25 VALUE=""><BR> Mailing address: <BR><TEXTAREA NAME="message" ROWS="4" COLS="30"> </TEXTAREA> <P> E-mail address (for responses and mailing list): <BR> <INPUT NAME="email" SIZE=25 VALUE=""> <P> I would like to receive <SELECT NAME="mailer"> <OPTION SELECTED VALUE="nothing"> Nothing <OPTION VALUE="brochure"> Jubilee Falls brochure <OPTION VALUE="calendar"> Jubilee Falls Calendar <OPTION VALUE="activities"> Jubilee Falls Activities Schedule <OPTION VALUE="stateparks"> Oregon State Parks catalog <OPTION VALUE="everything"> All information </SELECT> <P> Enter a message if you wish: <P> <TEXTAREA NAME="message" ROWS="10" COLS="60"></TEXTAREA> <P> I would like to be on your Internet mailing list. <INPUT TYPE="radio" NAME="list" VALUE="yes">Yes <INPUT TYPE="radio" NAME="list" VALUE="no">No </FORM> <HR> <P> Thank you for visiting the Jubilee Falls Guidebook and for taking a few minutes to send us a message. We appreciate your patronage! <P> <A HREF="http://www.jubilee.org/cgi-bin/menu"> <IMG SRC="../graphics/menubar.gif" ISMAP></A> <H6>© 1996 Jubilee Falls State Park</H6> </BODY> </HTML>
You can check how your form looks by opening it in Netscape Navigator, as shown in figure 31.7.
The log page is ready for entry by site visitors
You know that the majority of visitors to your site will probably run
Netscape Navigator or Microsoft Internet Explorer, but some will use a
Mosaic-based browser. To avoid limiting your site to visitors with a specific
browser, stick to HTML 2.0, with the exception of the form and some tables.
Most browsers support these HTML 3.0 extensions now, and they add a lot
to the site.
The following code is the Jubilee Falls State Park home page in HTML
(HOME.HTM). This page is intentionally simple so that it will load quickly.
If anyone contacts you about adding a link to the site, you want them to
point to this spot.
Listing 31.2 The Main Page
<HTML>
<HEAD>
<TITLE>Jubilee State Park Guidebook</TITLE>
</HEAD>
<BODY>
<IMG SRC="..\logo.gif" ALT="Welcome to the Jubilee
Falls State Park Guidebook">
<P>
<H3>Select a menu option:</H3>
<P> <A HREF="intro.htm">[Introduction]</A>
<A HREF="schedule.htm">
[Schedules and Fees]</A>
<P> <A HREF="activity.htm">[Park activities]</A>
<A HREF="tour.htm">
[Scenic walking tour]</A>
<P>
<HR>
<P>
<A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../schedule_sign.gif"></A>
<A HREF="activity.htm"><IMG ALIGN=bottom SRC="../activities_sign.gif"></A>
<A HREF="tour.htm"><IMG ALIGN=bottom SRC="../tour_sign.gif"></A>
<A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A>
<P>
<H6>©1996 Jubilee Falls State Park</H6>
</BODY>
</HTML>
The result is shown in figure 31.8
The Jubilee Falls State Park home page is designed to load quickly.
The following code is the Jubilee Falls State Park welcome page in HTML
(INTRO.HTM).
Listing 31.3 The Introduction Page
<HTML>
<HEAD>
<TITLE>Jubilee Falls Guidebook</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=bottom SRC="..\logo.gif">
<H1>Jubilee Falls Guidebook</H1>
Welcome to Jubilee Falls State Park, the crown jewel of the Cascades.
A day's drive from five northwestern U.S. states and Canada's British
Columbia, Jubilee Falls is a frequent destination for families and
outdoors enthusiasts.
<P>
Jubilee Falls State Park provides year-round facilities for such popular
activities as fly cast fishing and hiking. Our overnight facilities
are
open nine months a year, including two winter months for snow activities.
<P>
Covering an area of 1151 square miles, Jubilee Falls is roughly the
same
size as Yosemite National Park, and boasts as wide and spectacular
assortment of natural wonders. The Jubilee Falls are among the most
spectacular in the world, many with a vertical drop of over 900 feet.
Jubilee Falls was commissioned by Governor Robert MacKensey in 1937,
and
is proud to have served over eight million visitors from countries
worldwide.
<P>
You are invited to <A HREF="facility.htm">check out
our facilities</A>,
discover the natural beauty of the Cascades in our
<A HREF="tour.htm">walking scenic tour</A>, and
learn about the
<A HREF="activity.htm">rich experience</A> awaiting
you at Jubilee Falls
State Park.
<HR>
<P>
<A HREF="jubilee.htm"><IMG ALIGN=bottom SRC="../home_sign.gif"></A>
<A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../schedule_sign.gif"></A>
<A HREF="activity.htm"><IMG ALIGN=bottom SRC="../activities_sign.gif"></A>
<A HREF="tour.htm"><IMG ALIGN=bottom SRC="../tour_sign.gif"></A>
<A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A>
<P>
<H6>©1996 Jubilee Falls State Park</H6>
</BODY>
</HTML>
The result is shown in figure 31.9.
The introduction page gives a detailed description of the park.
The following code is the Jubilee Falls State Park Schedules and Fees
page in HTML (SCHEDULE.HTM).
Listing 31.4 The Schedule Page
<HTML>
<HEAD>
<TITLE>Jubilee Falls State Park Schedules and Fees</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=middle SRC="..\logo.gif">
<H1>Schedules and Fees</H1>
<P>
<H2 ALIGN = CENTER>Jubilee Falls Day Areas</H2>
<P>
<EM>Open 365 days a year, including major holidays.</EM>
<P>These areas include the hiking trails and boat slips on the
McKensie
riverhead. A <A HREF="fees.htm">list of fees</A>
for entry and
activities is available.
<P>
<P>
<H2 ALIGN = CENTER>Jubilee Falls Overnight Areas</H2>
<P>
The overnight areas, including the powered RV slips and rustic camping
sites, are available on a seasonal basis.
<P>
<Table Border>
<Caption><H3>1996 Overnight Camping Calendar<H3></Caption>
<TR>
<TH>Date</TH>
<TH>Acceptable Activities</TH>
</TR>
<TR>
<TD><B>Jan. 1 through February 29</B></TD>
<TD>No overnight areas available due to potentially hazardous
winter
weather conditions.</TD>
</TR>
<TR>
<TD><B>March 1 through March 31</B></TD>
<TD>Overnight only permitted in powered RV slips. Limited shower
and
bathroom services available.</TD>
</TR>
<TR>
<TD><B>April 1 through October 31</B></TD>
<TD>Overnight available in all areas. Full shower and bathroom
services
available. Weather advisories may close the camping sites, so check
with
the local weather information before planning your stay.</TD>
</TR>
<TR>
<TD><B>November 1 through November 30</B></TD>
<TD>Overnight only permitted in powered RV slips. Limited shower
and
bathroom services available.</TD>
</TR>
<TR>
<TD><B>December 1 through December 31</B></TD>
<TD>No overnight areas available due to potentially hazardous
winter
weather conditions.</TD>
</TR>
</Table>
<P>
<H2 ALIGN = CENTER>1996 Activities Calendar</H2>
Jubilee Falls hosts many events year-round for outdoors enthusiasts.
The following activities have been scheduled. Please
<A HREF="feedback.htm"> contact us</A> for late-breaking
events and
calendar changes.
<P>
<Table Border>
<Caption><H3>Schedule of Events for 1996<H3></Caption>
<TR>
<TH>Date</TH>
<TH>Event</TH>
<TH>Description</TH>
</TR>
<TR>
<TD><B>May 11-12</B></TD>
<TD><B>Couples Caravan Weekend</B></TD>
<TD>Jubilee Falls throws a party for adult couples, including
our nightly
chuckwagon banquet and music under the stars. Midnight walking tours
are
held and all water activities are included in the registration fees.</TD>
</TR>
<TR>
<TD><B>June 22</B></TD>
<TD><B>Lightning Bug Races</B></TD>
<TD>Overnighters can participate in Jubilee Falls' renowned Lightning
Bug
Races. This evening activity is open to children of all ages and features
prizes galore.</TD>
</TR>
<TR>
<TD><B>July 6</B></TD>
<TD><B>Falls Jubilee</B></TD>
<TD>The holiday weekend features the Falls Jubilee, a celebration
of the
natural landmarks that make our park special. Walking tours and public
swimming are available in the high pools, underneath the Widow Falls,
the tallest waterfalls in the park.</TD>
</TR>
<TR>
<TD><B>August 17-18</B></TD>
<TD><B>Kids Camp Jubilee</B></TD>
<TD>A weekend for pre-teens, Jubilee Falls hosts over a dozen
local teen
groups for fun in the sun. The weekend's highlight is the McKensie
Olympics,
pitting teams of water-logged kids in seven competitive events.</TD>
</TR>
</TABLE>
<HR>
<P>
<A HREF="home.htm"><IMG ALIGN=bottom SRC="../home_sign.gif"></A>
<A HREF="activity.htm"><IMG ALIGN=bottom SRC="../activities_sign.gif"></A>
<A HREF="tour.htm"><IMG ALIGN=bottom SRC="../tour_sign.gif"></A>
<A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A>
<P>
<H6>©1996 Jubilee Falls State Park</H6>
</BODY>
</HTML>
The Schedules and Fees page is shown in figure
31.10.
The schedules page shows how tables can be used for an attractive layout.
The following code is the Jubilee Falls State Park Activities Index
page in HTML (ACTIVITY.HTM).
Listing 31.5 The Activity Page
<HTML>
<HEAD>
<TITLE>Jubilee Falls State Park Activities Index</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=middle SRC="..\logo.gif"><H1>Activities
Index</H1>
<P>
Jubilee Falls offers a wide variety of activities for everyone from
the
avid outdoorsman to the weekend nature lover. This index provides the
following for park activities:
<UL>
<LI>Location
<LI>Seasonal availability
<LI>Available park resources
<LI>Fees required
<LI>Recommended experience
</UL></DL>
<P>
<A HREF="file://../activity.qtw"><IMG ALIGN=bottom
SRC="../movie_button.gif"></A>A short QuickTime
video shows many of
our most popular activities.
<P><PRE> </PRE>
<P>
<H2>Index Starting Point</H2>
Choose a category to begin your search from. You can return to this
menu
at any time by clicking the activities button: <IMG ALIGN=middle
SRC="../activities_sign.gif">
<P>
<DL>
<DT><B>By Season</B>
<DD><A HREF="winter.htm">Winter Season</A>
<DD><A HREF="summer.htm">Summer Season</A>
<DD><A HREF="yearly.htm">Year-round</A>
</DL>
<DL>
<DT><B>By Location</B>
<DD><A HREF="mckensie.htm">McKensie Riverhead</A>
<DD><A HREF="deschute.htm">Deschutes Riverhead</A>
<DD><A HREF="mt_jef.htm">Lower Mt. Jefferson</A>
<DD><A HREF="up_falls.htm">Upper Falls</A>
<DD><A HREF="low_falls.htm">Lower Falls</A>
<DD><A HREF="vista.htm">Vista Lake</A>
<DD><A HREF="jacob.htm">Jacob Lake</A>
<DD><A HREF="trail.htm">Forest Trails</A>
</DL>
<HR>
<P>
<A HREF="jubilee.htm"><IMG ALIGN=bottom SRC="../home_sign.gif"></A>
<A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../schedule_sign.gif"></A>
<A HREF="tour.htm"><IMG ALIGN=bottom SRC="../tour_sign.gif"></A>
<A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A>
<P>
<H6>©1996 Jubilee Falls State Park</H6>
</BODY>
</HTML>
The resulting page is shown in figure 31.11.
The activity page includes a link to a downloadable Quicktime movie.
The following code is the Jubilee Falls State Park Scenic Walking Tour
page in HTML (TOUR.HTM).
Listing 31.6 The Tour Page
<HTML> <HEAD> <TITLE>Jubilee Falls State Park Scenic Walking Tour</TITLE> </HEAD> <BODY> <IMG ALIGN=middle SRC="..\logo.gif"> <H1>Scenic Walking Tour</H1> <P> Jubilee Falls is a place of great natural beauty. Don't believe us, or want to see more? Then join us on a walking tour of the park. You can let us lead the way or choose your own path to explore the wonders of Jubilee Falls State Park. <P> <A HREF="path1.htm"><IMG ALIGN=middle SRC="../tour_sign.gif">Follow the park's guide down the wooded path.</A> <P> or choose a path for yourself: <P><A HREF="path1.htm"><IMG ALIGN=middle SRC="../tour_sign.gif"> Walk the forest paths</A> <P><A HREF="falls1.htm"><IMG ALIGN=middle SRC="../tour_sign.gif"> Do you hear falling water?</A> <P><A HREF="river1.htm"><IMG ALIGN=middle SRC="../tour_sign.gif"> Water rushing into rivers</A> <P><A HREF="lake1.htm"><IMG ALIGN=middle SRC="../tour_sign.gif"> Alone on a lakeshore</A> <P><A HREF="sunset.htm"><IMG ALIGN=middle SRC="../tour_sign.gif"> Until tomorrow . . .</A> <P> <HR> <P> <A HREF="home.htm"><IMG ALIGN=bottom SRC="../home_sign.gif"></A> <A HREF="activity.htm"><IMG ALIGN=bottom SRC="../activities_sign.gif"></A> <A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../schedule_sign.gif"></A> <A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A> <P> <H6>©1996 Jubilee Falls State Park</H6> </BODY> </HTML>
The Scenic Walking Tour page is shown in figure
31.12.
The walking tour page provides links to a series of guided tours through the park.
The following code is the Jubilee Falls State Park Walking Tour: The Falls page in HTML (FALLS1.HTM).
Listing 31.7 The Falls Page One
<HTML> <HEAD> <TITLE>Walking Tour: The Falls</TITLE> </HEAD> <BODY> <H1>Scenic Walking Tour</H1> <P> <H2>Jubilee Falls</H2> <P> The highlight of Jubilee Falls State Park is its namesake, the Jubilee Falls. This series of water drops begins in the Upper Falls, where the park's tallest waterfall is located, and continues with the Lower Falls, where the series of small drops creates a chain of swimming holes with dense forest undergrowth. <P> The park's namesake can be seen from many vantage points, but this rest stop is one of the most dramatic. <P> <IMG ALIGN=bottom SRC="../falls1.gif"><BR> <A HREF="../graphics/falls1a.jpg"><IMG ALIGN=middle SRC= "../grn_bullet.gif"></A> Click this button to see a larger version of the Jubilee Falls (<I>note: this file is 370K</I>). <P> The Lower Falls is filled with the sound of falling water. These small drops are a main outflow of snow-bound water from the local segment of the Cascade mountain range. <P> <IMG ALIGN=bottom SRC="../falls2.gif"><BR> <A HREF="../graphics/falls1a.jpg"><IMG ALIGN=middle SRC= "../grn_bullet.gif"></A> Click this button to see a larger version of the lower Jubilee Falls (<I>note: this file is 370K</I>). <P> <A HREF="falls2.htm">Continue</A> your tour of the falls. <P> <HR> <P> <A HREF="home.htm"><IMG ALIGN=bottom SRC="../home_sign.gif"></A> <A HREF="activity.htm"><IMG ALIGN=bottom SRC="../activities_sign.gif"></A> <A HREF="tour.htm"><IMG ALIGN=bottom SRC="../tour_sign.gif"></A> <A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../schedule_sign.gif"></A> <A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../feedback_sign.gif"></A> <P> <H6>©1996 Jubilee Falls State Park</H6> </BODY> </HTML> </BODY> </HTML>
The result is shown in figure 31.13.
A small graphic can be included in a web page, with a link to the much larger original version.
In chapter 26, "Java and JavaScript," you learned how you can add Java applets and JavaScript programs to an HTML page to make it dynamic. One very popular type of Java applet is a marquee that scrolls a message. You can use such a marquee on the example site to scroll information about special events and the weather.
To simplify your work, write the marquee in JavaScript. Following is the code that scrolls a message in the status bar of the browser. You add this code to the <HEAD> section of any page on which you want to have the information appear.
Listing 31.8 The JavaScript Code for Adding a Scrolling Marquee
<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="Overnight camping begins on March 1st.";
var Status2="The weather will be sunny and 65F this weekend.";
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>
Figure 31.14 shows what the Activities page looks like with the marquee scrolling across the status bar.
By adding a JavaScript message to the scrollbar, we can make a page much more dynamic.
Now, take a look at what this script does. The JavaScript functions
StartMarquee and ScrolledMessage are contained entirely
within the HEAD container to ensure that the browser loads the
program before it is called. The BODY container's attribute onload
causes the browser to run the program when the page has been loaded.
When the browser calls the StartMarquee function, it initializes the window size for the marquee. The initial value is 200, but you can use a smaller value to make the marquee window smaller. StartMarquee, in turn, calls ScrolledMessage. After ScrolledMessage is called, the message continues to run for as long as the page is displayed.
The actual message that scrolls in the status window is in ScrolledMessage, where it is split into two parts: Status1 and Status2. You can change to a new message if you want. On this page, remind your visitors that the camping season starts on March first and let them know that the weather should be nice this weekend.
The speed at which the message scrolls is controlled by the variable speed. The lower the value of speed, the faster it scrolls. It's set to 50 in this case.
After this program starts, it begins scrolling the marquee message within the status bar of the browser. The great advantage to having the message in the status bar is that it will always remain on the screen, even if the user scrolls the document window.
The next chapter will take many of the techniques that we developed here and use them in an entirely different environment.
|
