EarthWeb sites:
|
|
Chapter 30
HTML Examples
CONTENTS
Well, it's time to see if we can't apply just about everything
you've learned to the world of the Web. This is also a wonderful
opportunity to find a page that works well for the type of site
you're trying to build. If you find a close match, you can get
a headstart on your own site by copying the example from the included
CD and altering it to fit your needs.
| Note |
This is one chapter where the included CD can really help you out. If I've created a page that you think will work well for your site, just grab the HTML off the CD, change it to suit your needs, and toss it up on the World Wide Web. Hopefully, I've
already done most of the work for you!
|
The beauty of designing HTML 2.0-compliant sites is that you never
really have to worry about whether or not your users are happy,
satisfied, and fully informed. Everyone, regardless of his or
her browser, can see just about your entire site (except for
text-based users who can't see your graphics). The downside is
you don't get to do too much cool stuff.
For the typical personal Web site, though, HTML 2.0 is a great
place to start designing. One of the most important rules to remember
in HTML design is that your information is more important than
the presentation. If using nothing but HTML 2.0-like basic text,
lists, graphics, and even server-side maps-helps you update your
pages quicker and keep things interesting, then you're doing better
than the advanced Java programmer with nothing to say.
Let's see some examples of a "personal" Web site, perhaps
useful for a home-based business or even just for fun. My examples
are for a fictitious graphic designer named John Jones, who uses
his site as both a business and a personal site. We'll create
four basic pages-an index page, a personal biography, a business
information page, and a resume page. These days, sometimes you
tell people your life story with little more than an URL.
Since we're not talking about any major leaps of thought in HTML,
I'll concentrate more on design issues with these personal pages.
The keys to your index page will be an attractive presentation,
while making it clear that things are dynamic on the page-you'll
highlight your changes early. To create the index page, enter
Listing 30.1 in your text editor.
Listing 30.1 index.html The
Personal Index Page
<HTML>
<HEAD>
<TITLE>John Jones on the Web</TITLE>
</HEAD>
<BODY>
<IMG SRC="johnlogo.gif" ALT="John Logo">
<H5>
<A HREF="index.html">Index</A> | <A HREF="about.html">About
John</A> |
<A HREF="contract.html">Business Info</A>
| <A HREF="resume.html">Resume</A> |
<A HREF="feedback.html">Web Feedback</A>
</H5>
<HR>
<H2>Welcome to My Home on the Web!</H2>
<P>I'm <A HREF="about.html">John Jones</A>,
and you've reached my home on the Web. If you were looking to
find me here, thanks for the thought. If you're here by accident,
well, maybe there's something interesting. Stay a while.</P>
<HR>
<IMG SRC="news.gif"><BR>
<H3>What's News?</H3>
<P>I've finally gotten around to updating my <A HREF="macnet.html">Apple
QuickTime VR on the Net</A> pages. Those of you getting
used to following the news here will hopefully find everything
you need.</P>
<P><A HREF="apple_pr1.html">Mac's Make it
Big with VRML</A> Click for a copy of Apple's PR on new
QuickDraw 3D technology in the Web. To learn more, check out
<A HREF="http://www.apple.com/">Apple's Web site</A>.</P>
<P><A HREF="ab_pics.html">Family Vacation
Photos</A>! Just got back from vacation in the Bahamas,
and if you've never been you should check out these photos. You
can't beat the parasailing!</P>
<HR>
<IMG SRC="thesite.gif"><BR>
<H3>Stuff that John does that you may or may not find interesting...</H3>
<UL>
<LI> Magazine writer for <A HREF="http://www.netmag.com/">Net
Mag</A> the online Web graphics resource.
<LI>Freelance <A HREF="contract.html">Macintosh
consultant</A> that you can hire for <B>your own Web
development</B> needs!
<DD>Just somebody's <A HREF="about.html">dad</A>.
</DL>
<HR>
<H3>Your Feedback on this Web Site...</H3>
<P><A HREF="feedback.html">Feedback</A>
Lots of folks have written in to tell me what they like about
this site. The feedback has been incredible, and I couldn't be
happier. Keep it coming! If you've got something to say, please
<A HREF="mailto:jjones@net.com">send mail</A></P>
<HR>
<H6>Copyright John Jones 1996. All Rights Reserved. Do not
duplicate without permission.</H6>
<H6>These pages are HTML 2.0 friendly!</H6>
</BODY>
</HTML>
Boring? I hope not. Let's call it "clean." This is a
page that uses a couple of different ways to get around on the
site, including a text menu at the top of the page and links throughout
to relevant material. It also features site news right up front
and some invitations to wander the site. Tasteful graphics and
logical formatting let users get a feel for the site quickly,
so they know they're not missing anything (see fig. 30.1).
Figure 30.1 : An inviting clean index page for a personal site.
The next step is to create a biography page for John, complete
with some interesting text and classy use of photos. Personal
bios should probably be the most laid back part of the site; but
it's important to remember that John is also using this as a business
site-so it should probably be rather tasteful, too. Enter Listing
30.2 in
your text editor.
Listing 30.2 about.html The
Personal Bio Page
<HTML>
<HEAD>
<TITLE>About John</TITLE>
</HEAD>
<BODY>
<IMG SRC="aboutlogo.gif" ALT="About John Logo">
<H5>
<A HREF="index.html">Index</A> | <A HREF="about.html">About
John</A> |
<A HREF="contract.html">Business Info</A>
| <A HREF="resume.html">Resume</A> |
<A HREF="feedback.html">Web Feedback</A>
</H5>
<H3>A Little About Me...</H3>
<P>What is there to say about myself? I'm a graphic designer,
a World Wide Web addict and a <A HREF="ab_pics.html">
post-vacation dad</A> and husband. I'm an incredible nut
about Macintosh computers...
professionally. I play a lot of golf, a little tennis, and I do
some
<A HREF="http://www.aescon.com/ski/">skiing</A>.
</P>
<P>I'm a graduate of <A HREF="http://www.unt.edu/">the
University of North Texas</A>.
My degree is in Fine Arts, with a minor in computer science. Since
that time I've worked in a number of positions as an artist, designer
and senior designer. I currently work in advertising as a Creative
Manager.</P>
<P>I'm a nut about flying private airplanes, and recently
completed the requirement for my private license. Want to see
<A HREF="ab_solo.html">pictures</A> of me
soloing? Now it looks like it's a crap-shoot to see if the kids
get through college before or after I buy myself a plane!</P>
<HR>
<img src="business.gif" ALT="Business">
<H2>John's Contract Web Services</H2>
<H3><I>How Great Can It Look?</I></H3>
<P>I make every effort to make myself available at reasonable
rates to local businesses who have a serious need for a strong
graphics designer. With a background in advertising, public relations
and editorial layout, I'm the all-around solution for any business
that needs something that looks just right!
</P>
<P>My <A HREF="contract.html">sales pitch</A>,
<A HREF="resume.html">resume</A>
and <A HREF="contract.html#rates">freelance rate
card</A> are available here for your appraisal. If you'd
like to get a hold of me to discuss a project, you can do that
by <A HREF="mailto:jjones@net.com">sending me
email</A> or call me during business hours at 214/555.4369.</P>
<HR>
<H6>Copyright John Jones 1996. All Rights Reserved. Do not
duplicate without permission.</H6>
<H6>These pages are HTML 2.0 friendly!</H6>
</BODY>
</HTML>
If there's anything this page shows, it's the importance of content
over design. The point of this page is just to be friendly and
talkative, while using HTML throughout to make the page presentable
and approachable. Are people really interested in John's family
photos? They probably are, and it's not so bad for business contacts
to get to know you as a person. Take the space you need, but break
up text with lines and small graphics (see fig. 30.2).
Figure 30.2 : The About John page.
Also notice the consistency from page to page, like the text menu
and logo at the top of the page. I'd suggest this same level of
consistency for your pages, as well. It makes them more memorable
and reminds people that all this great information is part of
your site. You don't have to be dull on your pages, but I do suggest
that you have a guiding design.
Perhaps this next page could be a little more graphically appealing,
but I'm not a graphic artist-John is. What it does is communicate
business information without being too overwhelmingly commercial.
Are you going to generate a lot of leads on the Web? Not without
investing a lot of time in your site and making an effort to distribute
your URL. But, it's also a ready-made brochure for folks who are
interested. Perhaps it'd be a good idea for John to put some designs
online to serve as a Net-based portfolio-especially if he plans
to work for people around the country (or world) via the Internet.
Enter Listing 30.3 in your text editor to create the page.
Listing 30.3 contract.html Communicating
Business Information on a Personal Site
<HTML>
<HEAD>
<TITLE>Freelance Info and Rates</TITLE>
</HEAD>
<BODY>
<IMG SRC="contractlogo.gif" ALT="Freelance Logo">
<H5>
<A HREF="index.html">Index</A> | <A HREF="about.html">About
John</A> |
<A HREF="contract.html">Business Info</A>
| <A HREF="resume.html">Resume</A> |
<A HREF="feedback.html">Web Feedback</A>
</H5>
<HR>
<H2>Shouldn't Your Business Literature Show Your Strengths?</H2>
<P>No matter what you may hear, there's only one way to
be a great salesperson.
<B>Believe in your product!</B> If you believe in
your product, then people will believe in you and your company.
In order to make sure they understand the depths of your faith,
though, you need to catch their eye!</P>
<UL>
<LI>Brochures and Sales Literature
<LI>Catalog Layout
<LI>Advertising/Promotional Layout
<LI>HTML and Web Site Development
<LI>Corporate Presentations
<LI>Public Relations Material
</UL>
<HR>
<A NAME="Rates">
<H2>Freelance/Contract Rates</H2>
<P>I'm willing to work both as a contractor and per piece.
As is generally the case, any project is negotiable. Please contact
me with full details of the project. My office number is 214/555.4369.
Or, feel free to send me
<A HREF="mailto:jjones@net.com">email</A>.
</P>
<P>The following are my base rates for contract and per
piece work:
<PRE>
Brochures and Sales Literature
$100-300 per page
Catalog Layout
$65 an hour
Advertising/Promotional Layout
$100-300 per advertisement
HTML & Web Site Development $65
an hour, $100-200 per page
Corporate Presentations $100
an hour
Public Relations Material $65
an hour
</PRE>
<H6>Copyright John Jones 1996. All Rights Reserved. Do not
duplicate without permission.</H6>
<H6>These pages are HTML 2.0 friendly!</H6>
</BODY>
</HTML>
Aside from the continued consistency, we've got two notable uses
of HTML here. First, the use of a NAME
anchor isn't even taken advantage of in the HTML on this page.
But back in the personal biography, we did link to this part so
that folks can get right to the rates if they want. Also, notice
that the <PRE> tag
works as a low-end HTML substitute for the table tags that you
can't use (since you're doing this with only HTML 2.0 tags) (see
fig. 30.3).
Figure 30.3 : John's freelance info page.
Our next step is to add John's resume. I guess, by rule, a resume
is a little dry, but perhaps that also adds to the professionalism.
Again, a graphic designer should be a little more original with
his/her resume than this-but it's a nice template for the rest
of us (see Listing 30.4).
Listing 30.4 resume.html A
Sample Resume in HTML
<HTML>
<HEAD>
<TITLE>John's Resume Page</TITLE>
</HEAD>
</BODY>
<IMG SRC="resumelogo.gif" ALT="Resume Logo">
<H5>
<A HREF="index.html">Index</A> | <A HREF="about.html">About
John</A> |
<A HREF="contract.html">Business Info</A>
| <A HREF="resume.html">Resume</A> |
<A HREF="feedback.html">Web Feedback</A>
</H5>
<HR>
<H2>John's Resume</H2>
<H3>EDUCATION</H3>
<B>University of North Texas </B> <I>Sept. 1984-May
1989</I>
Denton, Texas BA in Fine Arts, Minor in Computer Science.
<I>Cum Laude Honors, Dean's List, National Merit Scholar.</I>
<H3>SUMMARY OF QUALIFICATIONS</h3>
<UL>
<LI>Proven designer and layout artist strong background
in computing.
<LI>Experience with creation and implementation of Hypertext
Markup Language (HTML)
<LI>Very familiar with Internet and online issues.
<LI>Constantly in touch with the computer industry through
trade publications, on-line interaction and dealings with computer
publishers and industry contacts.
<LI>Solid team player and leader with experience and formal
education in business management.
</UL>
<H3>WORK EXPERIENCE</h3>
<P><B>BigCorp Advertising</B> (Dec. 1994-Present)<BR>
Dallas, TX<BR>
<I>Advertising Creating Manager</I><BR>
Manage staff of twenty-five designers, writers and support personnel
in the creation of all in-house advertising. Oversee the production
of all print and direct mail advertising, and responsible for
managing input from out-sourced advertising specialists.
</P>
<P><B>BigCorp Advertising</B> (Oct. 1989 - Dec.1992)<BR>
Dallas, TX<BR>
<I>Designer</I><BR>
Responsible for creating print advertising on Macintosh computers
for a variety of products and mediums. Contributed to multimedia
projects, TV design and in-store retail signage.
</P>
<P><B>Jones Designs</B> (Sep. 1988 - Present)<BR>
Dallas, TX<BR>
<I>Freelance Artist/Designer</I>
Accounts have included BigSoftDrink Co., FashionableClothes Inc,
and
MajorProductionCompany Entertainment.
</P>
<H6>Copyright John Jones 1996. All Rights Reserved. Do not
duplicate without permission.</H6>
<H6>These pages are HTML 2.0 friendly!</H6>
</BODY>
</HTML>
Again, there's good continuity and clean design (see fig. 30.4).
Can't ask for much more than that.
Figure 30.4 : John's resume.
I think you can see where I'm going with this. The strongest point
is this: you can do a lot with an HTML 2.0 site, and working just
in 2.0 makes sure your documents are available to the widest audience
possible. Keep your site newsworthy, interesting, consistent,
and personal, and you'll succeed with your small site.
In this section, you'll start by walking through the creation
of a large Web site-you guessed it, BigCorp's-in an effort to
apply most of the tags, extensions, programming, and theory you've
learned throughout this book. I'll try to point out the major
issues in each page as we go along.
The point of this site will be to do just about everything you
can without consulting the Web server. A growing number of HTML
users are able to create sites without back-end programming with
the help of JavaScript, client-side images, and similar technologies.
Client-side has been the theme throughout this book. Hopefully,
these examples will help make that a strong reality for you.
| Note |
As opposed to the first section of this chapter, the client-side site pushes the envelope of HTML. You'll need the latest version of Netscape Navigator (or a compatible browser) to view these pages-and so will your users.
|
We've talked about front door pages before: pages designed to
introduce users to your Web site, warn them of potentially offensive
material, and/or allow them to choose the pages that are best
suited to their browser type. In this simple example, you'll create
an attractive front door that uses client-pull to draw in Netscape/Internet
Explorer users, while giving others a chance to click for the
HTML 2.0 compatible version of our site (see Listing 30.5).
| Note |
For purposes of putting this file on the CD-ROM, I've named it bg_index.html. Since it's the first page of this particular site, though, you may want to save it as index.html in a different directory from the personal site files you
created earlier in this chapter. I recommend that you begin your sites with a document named index.html whenever possible.
|
Listing 30.5 bg_index.html A
Business' Front Door Page
<HTML>
<HEAD>
<TITLE>BigCorp - What Type of Browser Are You Using?</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT = "15; URL=http://www.fakecorp.com/graf_idx.html">
<IMG SRC="logo.gif">
<H2>Welcome to BigCorp's Web Site!</H2>
<P>To better serve all different browsers, we've created
this site with both a <A HREF="http://www.fakecorp.com/graf_idx.html">high
graphics</A> choice and a <A HREF="http://www.fakecorp.com/H2_idx.html">HTML
2.0</A> choice. Please choose the appropriate site for you.
After 15 seconds, the high graphics site (especially appropriate
for Netscape and Internet Explorer users) will load automatically
if your browser will support it.</P>
<H3>Enjoy Your Stay!</H3>
</DIV>
</BODY>
</HTML>
This page gives users the choice of either clicking to move directly
to their desired site or waiting for the high graphics site to
load using client-pull. Also, users with browsers that don't support
client-pull will be forced to click one of the choices, since
they won't automatically move on. Figure 30.5 shows how this page
appears in a browser.
Figure 30.5 : Your client-pull front door in Netscape Navigator.
The next page will be the "high graphics" index for
this site. You'll use client-side image map technology to link
users to the various parts of BigCorp's Web presence. In addition,
you'll add an Internet Explorer background sound and a background
image (see Listing 30.6).
Listing 30.6 graf_idx.html The
Graphical Index for the Business Site
<HTML>
<HEAD>
<TITLE>BigCorp's Index</TITLE>
</HEAD>
<BODY BACKGROUND="paper.gif">
<BGSOUND="welcome.wav">
<DIV ALIGN="CENTER">
<H2>Welcome to BigCorp!</H2>
<H5><A HREF="index.html">Index</A>
| <A HREF="products.html">Products</A> |
<A HREF="service.html">Customer Service</A>
| <A HREF="support.html">Tech Support</A>
|
<A HREF="about.html"> About BigCorp</A></H5>
<A HREF="help.html"><IMG SRC="main_map.gif"
ALT="BigCorp's Map Graphic"
USEMAP="#mainmap"></A>
</DIV>
<IMG SRC="news.gif">
<BLOCKQUOTE>
<P><A HREF="story1.html">BigCorp releases
new Pentium Pro Systems.</A> <B>August 2</B>
As the summer boils down to a footrace between popular computer
manufacturers, BigCorp makes the leap to Pentium Pro and multi-processing
Pentium Pro systems for the high-end server and graphics markets.
With clock speeds of up to 300 Mhz, the BigCorp systems should
lead the pack for weeks, at least.</P>
<P><A HREF="story2.html">Better paper towels,
less messy residue.</A> <B> August 3</B> BigCorp,
the largest global manufacturer of household paper products, has
announced the next step in paper towels at WipeCon '97.
The new design, based on patented advances in textiles (researched
on BigCorp's orbiting SolarLab deep-space project) should but
cloth towels to bed once and for all. "We're looking to take
paper towels into
the shower stall by year's end," said Wilhem Spotz, VP of
Clensing Technology.</P>
</BLOCKQUOTE>
<H5>Please send concerns about this server to <A HREF="mailto:admin.fakecorp.com">
the WebMaster</A>. For more information on BigCorp and BigCorp
products, call or write:</H5>
<ADDRESS>
BigCorp Customer Service<BR>
0001 Real Tall Building<BR>
Metropolis, USA 00001<BR>
888-BIG-CORP<BR>
</ADDRESS>
<H6>Pages and Content Copyright 1996 BigCorp Multimedia.
All rights reserved. Do not duplicate without permission.</H6>
<MAP NAME="mainmap">
<AREA SHAPE="rect" COORDS="18,12,140,33"
HREF="index.html" ALT="Back to Index">
<AREA SHAPE="rect" COORDS="17,44,245,65"
HREF="products.html" ALT="To Products">
<AREA SHAPE="rect" COORDS="97,87,327,147"
HREF="about.html" ALT="About BigCorp">
<AREA SHAPE="rect" COORDS="183,159,403,180"
HREF="service.html" ALT="To Customer Service">
<AREA SHAPE="rect" COORDS="265,192,403,213"
HREF="support.html" ALT="To Tech Support">
<AREA SHAPE="rect" COORDS="0,0,424,223"
HREF="help.html" ALT="Help with Map">
</MAP>
</BODY>
</HTML>
On this index page, I'm using a client-side image map to allow
users to move around on the site, as well as offering some typical
home page elements like news, addresses, and mailto:
links for more information. Using WebMap to determine the client-maps
coordinates gave the results in figure 30.6.
Figure 30.6 : The map definition file.
From there, it was as simple as plugging in the coordinates for
each shape of the client-map. I turned the client-map background
transparent, wrapped it in a regular clickable-image anchor (to
allow non-client-side browser to access a help page), and saved.
It's ready to go up on my Web site (see fig. 30.7).
Figure 30.7 : The finished index page.
One of the methods for HTML layout that's gaining a lot of popularity
on the Web is using HTML table tags (without borders) to give
the user more control over the page. For BigCorp's About page,
let's use HTML tables to layout some of the historical information
we're going to provide our users (see Listing 30.7).
| Note |
Again, I've changed the name of this file for saving on the CD-ROM. Changing its name to about.html will allow it to work correctly with the rest of the pages in this site.
|
Listing 30.7 bc_about.html Using
Tables for Page Layout
<HTML>
<HEAD>
<TITLE>About BigCorp</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<TABLE BORDER=0 WIDTH="500" CELLPADDING="10"
CELLSPACING="5">
<TR>
<TH COLSPAN="3" ALIGN="CENTER"><IMG
SRC="ab_logo.gif"></TH>
</TR>
<TR>
<TD WIDTH="40">
<A HREF="corphist.html">Corporate History Page</A>
</TD>
<TD>
<IMG SRC="mrbig.gif">
</TD>
<TD>
BigCorp started many years ago with a unique vision of the future.
Mr.
BigBucks, founder, explained some of those ideas in this story.
</TD>
</TR>
<TR HEIGHT="75"><TD COLSPAN="3" ALIGN="CENTER"><HR></TD></TR>
<TR>
<TD COLSPAN="2">
<A HREF="manfact.html">BigCorp Textile Manufacturing</A>
</TD>
<TD>
Get the inside scoop on our textiles division, plus contacts,
phone numbers and executive biographies.
</TD>
</TR>
<TR HEIGHT="75"><TD COLSPAN="3" ALIGN="CENTER"><HR></TD></TR>
<TR>
<TD COLSPAN="2">
<A HREF="compute.html">BigCorp Computer Manufacturing</A>
</TD>
<TD>
Here's information on the latest plant information and press releases
from BigCorp Computer, including information about retail outlets,
service centers, phone numbers and PR contacts.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this way, creative use of tables (especially without borders)
can give you amazing control over the layout of your page. The
more specific you want to be about where something appears, the
more specific you can be with attributes like WIDTH
and HEIGHT for rows and columns.
Tables are basically a way you can "compartmentalize"
each page-giving you rather exacting control over how and where
things appear (see fig. 30.8).
Figure 30.8 : Using a page-sized table for enhanced layout.
Your next step will be creating a frames interface for the product
pages. What we're interested in doing here is creating three basic
frames: a logo frame at the top, an icon interface for different
products along the left, and a main viewer window to the right.
This will allow users to quickly access all of BigCorp's products
using a familiar interface.
This sort of interface assumes you have a lot of different pages
to get to from this one viewer. I'll create an example of each,
but it'll be up to you to fill in with the many pages of information
you might want to offer on your company's products or your personal
interests.
First, let's create the banner document for the frame interface's
top row logo (see Listing 30.8).
Listing 30.8 prodlogo.html Logo
and Menu for the Top Frame
<HTML>
<HEAD>
<TITLE>Product Logo</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="CENTER">
<IMG SRC="prodlogo.gif">
<H5><A HREF="index.html">Index</A>
|
<A HREF="products.html">Products</A> |
<A HREF="service.html">Customer Service</A>
|
<A HREF="support.html">Tech Support</A>
|
<A HREF="about.html"> About BigCorp</A></H5>
</DIV>
</BODY>
</HTML>
Use Listing 30.9 for the next step of creating the icon interface
for the left side of your frame document.
Listing 30.9 prodicon.html Icon
List for Accessing Pages in main_viewer
<HTML>
<HEAD>
<TITLE>Icon List</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P>
<A HREF="prod_idx.html" TARGET="main_viewer"><IMG
SRC="bag.gif" ALT="To Index" BORDER="0"></A><BR>
Index<BR>
</P>
<P>
<A HREF="books.html" TARGET="main_viewer"><IMG
SRC="books.gif" ALT="Books" BORDER="0"></A><BR>
Books<BR>
</P>
<P>
<A HREF="pe.html" TARGET="main_viewer"><IMG
SRC="camera.gif" ALT="Personal Electronics"
BORDER="0"></A><BR>
Personal<BR>
Electronics<BR>
</P>
<P>
<A HREF="hunting.html" TARGET="main_viewer"><IMG
SRC="gun.gif" ALT="Hunting Goods" BORDER="0"></A><BR>
Hunting<BR>
Goods<BR>
</P>
<P>
<A HREF="sporting.html" TARGET="main_viewer"><IMG
SRC="sunglass.gif" ALT="Sporting Goods" BORDER="0"></A><BR>
Sporting<BR>
Goods<BR>
</P>
<P>
<A HREF="computer.html" TARGET="main_viewer"><IMG
SRC="computer.gif" ALT="Computers" BORDER="0"></A><BR>
Computers<BR>
</P>
</BODY>
</HTML>
Notice the use of the TARGET
attribute for the anchor, so that clicking these icons forces
a new page to appear in the main viewer window of your frames
interface. Also notice that I've used the Netscape-specific BORDER
attribute for IMGs. At least in Netscape (and compatible browsers),
this keeps those boxy clickable-image borders from appearing.
Luckily, since only Netscape-compatible viewers can see this frames
interface in the first place (and we also used a front door for
HTML 2.0 users), you're free to experiment a bit here.
Now, let's use Listing 30.10 for the product index page, which
will serve as the default page for the main viewer frame.
Listing 30.10 prod_idx.html Default
Index Page for main_viewer
<HTML>
<HEAD>
<TITLE>Product Index</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3>BigCorp's Product Index</H3>
<P>Use the icons on the left to choose different product
categories, or select them from the following list:</P>
<UL>
<LI><A HREF="books.html" TARGET="main_viewer">Books</A>
<LI><A HREF="pe.html" TARGET="main_viewer">Personal
Electronics</A>
<LI><A HREF="hunting.html" TARGET="main_viewer">Hunting
Goods</A>
<LI><A HREF="sporting.html" TARGET="main_viewer">Sporting
Goods</A>
<LI><A HREF="computer.html" TARGET="main_viewer">Computers</A>
</UL>
</BODY>
</HTML>
Pretty straightforward, huh? This page will be loaded automatically
with the frame interface (product.html).
It's also linked to the graphic bag.gif
in the file prodicon.html
so that the user can get back to the index page whenever he or
she wants.
Now, you need to create a page that will actually be loaded for
this example. Fortunately, you have already done this-quite some
time ago. Listing 30.11 is most of an example from using tables
with graphics in Chapter 15, "Adding
Tables to Your Documents."
Listing 30.11 computer.html A
Sample Data Page for main_viewer
<HTML>
<HEAD>
<TITLE>Computer Products</TITLE>
</HEAD>
</HTML>
<BODY BGCOLOR="#FFFFFF">
<H2> BigCorp's Computer Systems </H2>
<P>We use only the highest quality components and software
for all of our Wintel computer systems. Plus, if you don't see
a configuration you like, call (or email) and let us know. We'll
custom build to please!</P>
<DIV ALIGN="CENTER">
<TABLE ALIGN="CENTER" BORDER="1" FRAME=VOID
RULES="NONE" CELLSPACING="3"
CELLPADDING="3">
<CAPTION>BigCorp's Computer Systems and Specifications</CAPTION>
<TR ALIGN="CENTER"><TH>System 486<TH>System
586<TH>System 686
<TR ALIGN=""CENTER"><TD>486DX2-66 CPU<TD>120
MHZ AMD586<TD>200 Mhz Pentium Pro
<TR><TD>8 MB RAM<TD>16 MB RAM<TD>16 MB
RAM
<TR><TD>500 MB HD<TD>1 GB HD<TD>1.4 GB
HD
<TR><TD>14.4 Modem<TD>28.8 Modem<TD>28.8
Modem
<TR><TD>desktop case<TD>minitower case<TD>tower
case
<TR><TD>DOS/Win 3.1<TD>Windows 95<TD>Windows
NT 4.0
</TABLE>
</DIV>
<H2>Product Specifications</H2>
<P>The following table will tell you a little more about
our computer systems. Clicking on the picture of each will tell
you even more,
offering a full-size photo of the system and some suggestions
on
peripherals.</P>
<HR>
<TABLE BORDER CELLSPACING="2" CELLPADDING="2">
<CAPTION>Our System Configurations</CAPTION>
<TR ALIGN="CENTER"><TH>Photo</TH><TH>Name</TH><TH>RAM</TH><TH>Hard
Drive</TH><TH>Video</TH><TH>Expansion</TH><TH>Case</TH>
<TR ALIGN="CENTER"><TD><IMG SRC="6001.gif"></TD><TD>System
6001-60
</TD><TD>8MB</TD><TD>500 MB</TD><TD>1
MB PCI</TD><TD>4 PCI Slots</TD>
<TD ROWSPAN="2">
Desktop</TD>
<TR ALIGN="CENTER"><TD><IMG SRC="7001.gif"></TD><TD>System
7001-75
</TD><TD>16
MB</TD><TD>1.0 GB</TD><TD>1 MB PCI</TD><TD>5
PCI Slots</TD>
<TR ALIGN="CENTER"><TD><IMG SRC="8001.gif"></TD><TD>System
8001-120
</TD><TD>20MB</TD><TD>1.6 GB</TD><TD>2
MB PCI</TD><TD>5 PCI Slots</TD>
<TD>Tower</TD>
</TABLE>
</BODY>
</HTML>
In this example, the page computer.html
is linked to the icon computer.gif
in the prodicon.html file.
When the icon is clicked in the left side of the frames interface,
the above page will load in the main viewer.
Finally, you have enough components to demonstrate the product
frame interface. Here it is in Listing 30.12.
Listing 30.12 products.html Main
Frames Interface Page
<HTML>
<HEAD>
<TITLE>BigCorp's Product Viewer</TITLE>
</HEAD>
<FRAMESET ROWS="100,*">
<FRAME SRC="prodlogo.html" MARGINHEIGHT="10">
<FRAMESET COLS="20%,80%">
<FRAME SRC="prodicon.html" MARGINHEIGHT="25"
MARGINWIDTH="10">
<FRAME SRC="prod_idx.html" NAME="main_viewer"
MARGINHEIGHT="25" MARGINWIDTH="10">
</FRAMESET>
</FRAMESET>
</BODY>
</HTML>
Murphy's law seems to dictate that this would be the easiest page
to create. We've simply used two <FRAMESET>
definitions, with the columns definition nested within the rows
definition to create a three panel interface. And, with all of
this done, it looks something like figure 30.9.
Figure 30.9 : The product pages frame interface.
Continuing with the client-oriented Web site, let's create a customer
service form that's good for customers to send in data. Instead
of using a CGI script to handle the data, though, you'll do the
whole thing in JavaScript. After users have entered their preferences
and values, you'll output them to the page for their perusal.
If they like it, they can send it to you by mail. Sound good (see
Listing 30.13)?
Listing 30.13 service.html Main
Service Page, Using JavaScript for Sending Data
<HTML>
<HEAD>
<TITLE>BigCorp Customer Service</TITLE>
<SCRIPT>
<!--
function processForm (doc) {
if (doc.form1.os[0].checked)
newline = "\r\n"
else if (doc.form1.os[1].checked)
newline = "\n"
else
newline = "\r";
result_str = "";
result_str += doc.form1.name.value + newline;
result_str += doc.form1.address.value + newline;
result_str += doc.form1.city.value + newline;
result_str += doc.form1.state.value + newline;
result_str += doc.form1.zip.value + newline;
if (doc.form1.desktop.checked) result_str += "Desktop
computers" + newline;
if (doc.form1.notebook.checked) result_str += "Notebook
computers" + newline;
if (doc.form1.peripherals.checked) result_str += "Peripherals"
+ newline;
if (doc.form1.software.checked) result_str += "Software"
+ newline;
doc.form2.results.value = result_str;
return;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<IMG SRC="servlogo.html">
</DIV>
<P>In order that we might better serve you we ask that you
simply fill out this form. When you've submitted the form, the
results will appear in the text area at the bottom of the screen.
If everything looks alright, send it away.</P>
<FORM NAME="form1">
<PRE>
Your Name: <INPUT TYPE="Text" NAME="name"
SIZE="40">
Your Address: <INPUT TYPE="Text" NAME="address"
SIZE="60">
Your City: <INPUT TYPE="Text" NAME="city"
SIZE="20">
State:<INPUT TYPE="Text"
NAME="state" SIZE="2"> Zip:<INPUT TYPE="Text"
NAME="zip" SIZE="5">
<HR>
<H4>What products would you like more information about?
(Check all that apply)</H4>
<INPUT TYPE="Checkbox" NAME="desktop">
Desktop computers
<INPUT TYPE="Checkbox" NAME="notebook">
Notebook computers
<INPUT TYPE="Checkbox" NAME="peripherals">
Peripherals
<INPUT TYPE="Checkbox" NAME="software">
Software
<HR>
Please Choose Your Computer's OS:<BR>
<INPUT TYPE="Radio" NAME="os" VALUE="mac"
CHECKED> Macintosh
<INPUT TYPE="Radio" NAME="os" NALUE="unix">
Unix
<INPUT TYPE="Radio" NAME="os" VALUE="win">
DOS/Windows/Win95<BR>
<HR>
<INPUT TYPE="Reset" VALUE="Clear Form">
<INPUT TYPE="Button" VALUE="Submit" onClick="processForm
(document)">
</PRE>
</FORM>
<HR>
<FORM NAME="form2" METHOD="POST" ACTION="mailto:stauffer@rmii.com"
ENCTYPE="text/ascii">
<H4>Here's what your information will look like. If you'd
like to include a comment, please type it below the other information.
Then click below to mail it to us:</H4>
<TEXTAREA NAME="results" COLS="60" ROWS="10"
WRAP="soft"></TEXTAREA>
<INPUT TYPE="Submit" Value="Mail It Off">
</FORM>
</BODY>
</HTML>
Basically what this script does is take the information from the
first form, translate it into some simple text values, assign
those values to the textarea in the second form, and then allow
the user to edit the data (see fig. 30.10). The script uses the
result from the radio buttons in the first form to determine which
newline character to use for the textarea, depending on the user's
OS choice. Different OSes require different newline characters
to format text correctly in a textarea. This script solves that
problem.
Figure 30.10 : Client-side form submissions.
Then, when users click the second Submit button (the "send
it in" button), the data is sent via e-mail to the address
of your choice. In that way, you've avoided using the Web server
and CGI-BIN scripts for any of your form processing.
While this scenario seems like nothing more than beauty and cleverness
itself, there is one caveat-what to do with the e-mail when it
gets to your e-mail box.
The first problem is the fact that the e-mail message is still
encoded in that lovely POST
format that forms use to send messages to scripts. Figure 30.11
shows an example of a typical received message.
Figure 30.11 : The results of mailto : from POSTing.
It's not very pretty. The second problem is an extension of the
first-you're either going to have to process all of these e-mails
by hand or you'll need to write a program on your computer that
interacts with your e-mail program in some way. Either way is
probably fine for the small-business or home Web designer-at least,
you get the form data from users without requiring access to the
server.
If you're creating for a large corporate installation, though,
your best bet is still to use CGI-BIN scripts. If you don't know
C, Perl, or AppleScript (on Mac servers), then have a quick chat
with your IS folks.
Perhaps it's not the most glamorous of possibilities with HTML,
but many sites will find a need to include a repository of files
on their pages in order to better serve customers. In this example,
you'll create the support page for your site, using definition
lists to add your FTP-able files (see Listing 30.14).
Listing 30.14 support.html Adding
FTP to HTML Documents
<HTML>
<HEAD>
<TITLE>Product Support</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<IMG SRC="suplogo.gif">
</DIV>
<H2>Support Files and Resources</H2>
<P>The following files are available for download from BigCorp.
Included are fixes, patches and upgrades for various BigCorp software
products.
Any comments about this list can be sent to our
<A HREF="mailto:supportweb@fakecorp.com"> Support
WebMaster</A>.
Questions about computer product support can be sent to
<A HREF="mailto:questions@fakecorp.com">Support
Questions</A>. A
technician will mail you back within a few hours (weekdays).</P>
<H3>Available for Download</H3>
<DL>
<DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/12upd496.zip">
Updated for BigCorp Write 1.2</A>
<DD> This update adds support for additional file formats
from Microsoft and Word Perfect. Also fixes version 1.2 crashes
when used with serial printers, supports OLE 2.0 objects and offers
new embedded spreadsheet tools. Updates version 1.2 to version
1.2.4. Please read the enclosed ReadMe file. Type: PkZip archive.
<DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/HTMLad09.zip">HTML
Addition for BigCorp Write</A>
<DD> Now available for free (just the cost of the download)
is new HTML functionality for BigCorp Write. Add standard HTML
2.0 tags to your documents just as if you were word processing!
This beta version (0.9) has been fairly stable through our internal
testing, but we can't guarantee it won't completely destroy your
hard drive. Read the enclosed disclaimer (DISCLAIM.TXT)! Requires
BigCorp Write version 1.2 or higher. For
Windows.
<DT> <IMG SRC="file.gif"> <A HREF="ftp://www.fakecorp.com/pub/HTMLAddition.sit">HTML
Addition for BigCorp Write for Macintosh</A>
<DD> Same functionality as above, but for BigCorp Write
1.4 and above for Macintosh. Upgrade is PowerPC accelerated.
<DT> <IMG SRC="folder.gif"> <A HREF="support2.html">Additional
Files</A>
<DD> Printer drivers, templates, sample document and additional
tools for file compression; older fixes, patches and upgrades.
</DL>
</BODY>
</HTML>
It's pretty straightforward. You can use an FTP-style URL to access
files for downloading across the Internet to your users (see fig.
30.12). But, you don't necessarily have to follow the FTP style
for folders-especially if you want to offer files with your own
descriptions and icons. Notice for the folder at the bottom of
the page that you're actually accessing another HTML page where,
presumably, you've created another list of files for downloading.
Figure 30.12 : The sample support page offers files for download.
Here's a fun one. You may recall that you set up your client-side
image map on index.html to
point directly to the document help.html,
which is supposed to tell your users that they've clicked a client-side
map incorrectly (or, perhaps, that they don't have a map-capable
browser). But what if you want to offer a number of different
Help topics from this one page?
Using forms, frames, and JavaScript, let's create a page that
allows the users to select the type of help they'd like to receive.
Our default page will discuss the client-side map, so that users
who just "appear" at help get the information they need.
Otherwise, if they decide to look up help on their own, they can
simply use the Select menu in the top frame to choose the help
document they'll read-which will then appear in the bottom window.
This can have many applications outside of help files-using scripts
to manipulate pages gives you a great way to serve nearly any
type of document from within a frames interface. Product spec
sheets, public relations material, software documentation, or
just about anything else you can come up with.
The first file you'll create is the JavaScript/form interface
for the top half of your frames interface (see Listing 30.15).
Listing 30.15 helpform.html Scripting
for a Forms Interface
<HTML>
<HEAD>
<TITLE>Help Form</TITLE>
<SCRIPT>
<!--
function changePage(form) {
var choice=form.helppage.selectedIndex;
parent.main_viewer.location.href=form.helppage[choice].value;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<IMG SRC="helplogo.gif"><BR>
<FORM>
Choose the Help Topic You Want to View:
<SELECT NAME="helppage">
<OPTION SELECTED VALUE="maphelp.html"> Client-side
Map
<OPTION VALUE="usehelp.html"> Using Our Site
<OPTION VALUE="phonhelp.html"> Contacting BigCorp
<OPTION VALUE="dl_help.html"> Downloading From
Our Site
<OPTION VALUE="buy_help.html"> Ordering Products
</SELECT><BR>
<INPUT TYPE="button" Value="Get Help" onClick="changePage(this.form)">
</FORM>
</DIV>
</BODY>
</HTML>
The key to working with frames and JavaScript is the JavaScript
object hierarchy parent.main_viewer.
This is telling the script to look in "the frame called main_viewer"
of the "parent" document, which, once you're done, will
be the frames interface document (help.html).
All you have to do is assign a value to the frame's location.href
object variable, and the page is loaded.
Another concept you need to understand here is the "array"
in JavaScript. Why? Because it's how JavaScript stores the values
for a SELECT form element.
Every time you create a new SELECT
OPTION statement, that value
is stored in a new variable. But notice that there's nothing to
name the variable, since it would simply overwrite the last value
that was assigned to helppage.value.
(That's how you'd do it with some other form elements.)
So your browser creates an "array" of helppage
values. The first one gets called helppage[0]
(the one with the value "maphelp.html").
The next one gets called helppage[1]
and so on. The number is the "index" of the OPTION
array-it's how you access each individual option.
Another variable is also created, called helppage.selectedIndex.
It holds a number that tells you which index has been chosen.
So, in the previous script, I assign the value in selectedIndex
to a variable called choice,
and then I use choice to
access the value of the OPTION
that was chosen by your user. Then the value (in this case, the
URL of a help page) gets passed to the frame's location.href
variable, which causes a new page to be loaded. Cool, huh?
Next, you need to create some filler pages. You'll create a "default"
page that talks about the client map, and create one other example
to test your frames interface. Use Listing 30.16 for the client
map help page.
Listing 30.16 maphelp.html The
Default Help Document
<HTML>
<HEAD>
<TITLE>Client-Map Help</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<IMG SRC="helplogo.gif">
<H2>BigCorp Web Site Help</H2>
</DIV>
<P>Please choose the topic you'd like help with from the
menu at the top of this pages. If you've arrived here by clicking
on the graphic on our index page, read on.</P>
<H3>Help with BigCorp Graphical Maps</H3>
<P>BigCorp offers a number of different "graphical
maps" for navigating its site on the World Wide Web. These
maps use "client-side" technology, which means that
your Web browser program (the "client") needs to be
able to process the information in the different parts of the
graphic, thus allowing you to go directly to different parts of
our Web site.</P>
<P>Since you've arrived here, it seems your browser doesn't
support client-side maps. There are a couple of options. First,
we'd definitely recommend visiting <A HREF="http://www.microsoft.com/">Microsoft
Corp.
</A> or <A HREF="http://www.netscape.com/">
Netscape Corp.</A> and downloading the latest versions of
their advanced Web browsers. If this isn't feasible, or if you're
stuck using a text-based system, we recommend you visit our <A
HREF="http://www.fakecorp.com/H2_idx.html">HTML 2.0
compliant pages</A>.</P>
<P>If you want to continue to use this enhanced pages, our
final recommendation is to use the text links provided on most
pages, like those below (which are functional...use them to leave
this page.)</P>
<DIV ALIGN="CENTER">
<H5><A HREF="index.html">Index</A>
| <A HREF="products.html">Products</A> |
<A HREF="service.html">Customer Service</A>
| <A HREF="support.html">Tech Support</A>
| <A HREF="about.html"> About BigCorp</A></H5>
</DIV>
</BODY>
</HTML>
Here's another example of a help page that you can use to test
the frames interface. Let's create a page that "helps"
users by telling them how to order products from BigCorp (see
Listing 30.17).
Listing 30.17 buy_help.html Another
Sample Help Document
<HTML>
<HEAD>
<TITLE>Ordering BigCorp Products</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<H2>How to Order from BigCorp</H2>
</DIV>
<P>Find something on our Web site you'd like to order? Well,
there are a couple of ways to go about it. Most of the products
discussed online are also available through retail outlets. Or,
you can order directly from us, and we'll send nearly everything
out by the next business day.</P>
<UL>
<LI>To find a retail outlet for BigCorp Products, call 1-800-BIG-CORP
and hit "6" at the main menu.
<LI>To order directly from BigCorp, called 1-800-BIG-CORP
for electronics, books and computer goods. Sporting and hunting
equipment can be ordered by calling 1-800-BIG-FISH.
<LI>To order by mail, send a check or money order, including
appropriate handling charges and state sales taxes to: Order Fulfillment,
P.O. Box 001, Clearing City, MO 90009.
<LI>For a catalog of our products, send a letter with your
name, address and daytime phone number to: Catalog, P.O. Box 101,
Clearing City, MO 90009.
<LI>To order a catalog via the Internet, please send your
name, address and a daytime phone via an email message to
<A HREF="mailto:catalogs@fakecorp.com">catalogs@fakecorp.com</A>.
<LI>For Corporate Sales information, call 1-800-BIG-SALE
for information on creating a corporate account and requesting
a personal sales representative for your company.
</UL>
</BODY>
</HTML>
Finally, you need to create the frame interface page. This one
should be fairly simple (see Listing 30.18).
Listing 30.18 help.html The
Help Frames Interface
<HTML>
<HEAD>
<TITLE>BigCorp's Web Help</TITLE>
</HEAD>
<FRAMESET ROWS="150, *">
<FRAME SRC="helpform.html" MARGINHEIGHT="10">
<FRAME SRC="maphelp.html" NAME="main_viewer"
MARGINHEIGHT="5">
</FRAMESET>
</HTML>
Gotta love those frame documents.
With all of this said and done, you're ready to test your new
interface. When you load help.html,
you should see the logo and SELECT
menu in the top frame and maphelp.html
(the default help page) in the main_viewer
frame. Selecting a new help page from the menu and clicking Get
Help should change the document in the lower frame
(see fig. 30.13).
Figure 30.13 : The sample support page offers files for download.
|
