|[ LiB ]|
The actual bookmall opens when the visitor clicks on the Bookmall link at the bottom of the index page. The bookmall is actually a simple HTML page that defines two frames , as shown here. The left frame loads a navigation page from which the visitor selects an option; the right frame holds the contents of the page specified by the selected link.
<HTML> <HEAD> <TITLE>Script 5.10 - Bookmall frame's page</TITLE> </HEAD> <FRAMESET COLS="175,*"> <FRAME SRC="Script 5.11.html" NAME="left" SCROLLING="no" FRAMEBORDER="1" NORESIZE> <FRAME SRC="Script 5.12.html" NAME="right2" SCROLLING="auto" FRAMEBORDER="1" NORESIZE> </FRAMESET> </FRAMESET> </HTML>
This is the point where you would cut and paste the special HTML links that each online bookstore provides you when you join its associates program. Of course, you would have to make a modification to each link to load it in the frame on the right (that is, you have to add the attribute TARGET="right2" ).
Figure 5.13 shows what the navigation page looks like when it is opened by the browser without the use of frames. The graphic image of the book is not a link; its only purpose is cosmetic. Each of the remaining links represents a different menu selection that will be loaded into the right frame (when the frames are enabled). Each button is green with gold lettering, but when the pointer passes over one of the buttons , it changes to a golden background with green lettering.
<HTML> <HEAD> <TITLE>Script 5.12 - Bookstore welcome page</TITLE> </HEAD> <BODY> <TABLE BORDER="0" WIDTH="590"> <TR> <TD> <CENTER> <IMG SRC="bstorelogo.jpg" BORDER="0" HEIGHT="78" WIDTH="636"> <P><H2>Hello and welcome to Jerry's On-line Bookmall!</H2></P> <P>Feel free to shop some of the finest online bookstores on the Web.</P> <P><FONT COLOR="red">Thanks for stopping by!</FONT></P> </CENTER> </TD> </TR> </TABLE> </BODY> </HTML>
Figure 5.14 shows what the welcome page looks like when it is opened by the browser outside of any frames.
Figure 5.15 shows what the bookmall looks like when visitors come to shop. As you can see, the combination of frames, rollover graphics, and simple HTML present an elegantly simple yet functional interface.
When the visitor is ready to go shopping, he simply clicks on one of the buttons representing an online bookstore. Figure 5.16 shows what happens if the user clicks on the AMAZON.COM button. As you can see, the amazon.com Web site is loaded into the right frame, and the visitor can begin shopping. Because the visitor enters the amazon.com site using the special links on your navigation Web page, you are credited with a portion of every purchase this visitor makes. Best of all, the visitor never really leaves your Web site. This makes it easy for him to jump between other bookstores or to load other pages where you may have added valuable content. This technique makes small Web sites seem much bigger than they actually are. By adding rollover links to other online businesses, you can easily expand the Web site to take advantage of a diverse set of business opportunities.
|[ LiB ]|