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.
Figure 31.1 : Laying out the structure of the site is the first step.
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.
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.
Figure 31.5 : Special icons created just for your site
make it more interesting for the visitor.
| Note |
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 indicates 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.
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 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.
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.
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.
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.
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.
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="../ <A HREF="schedule.htm"><IMG ALIGN=bottom SRC="../ <A HREF="feedback.htm"><IMG ALIGN=bottom SRC="../ <P> <H6>©1996 Jubilee Falls State Park</H6> </BODY> </HTML>
The Scenic Walking Tour page is shown in figure 31.12.
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.
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
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.
Figure 31.14: 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.