|[ LiB ]|
Frames are created using the HTML <FRAMESET> and <FRAME> tags. The <FRAMESET> tag replaces the body section in an HTML page. This tag defines how your frames will be laid out and how space is allocated to each frame.
The following example can be used to create a HTML page using frames. This HTML page contains two <FRAME> tags inside a single <FRAMESET> tag. The <FRAMESET> tag defines two frames using the COLS="*,*" attribute, which instructs the browser to assign all available space to the frames. The first frame is named left and loads the specified page. Because the frameset used the COLS attribute to define two column frames, the first frame is the left column. The second frame is named right and is assigned a different page to load.
<HTML> <HEAD> <TITLE>Script 3.20 - Building your first frame </TITLE> </HEAD> <FRAMESET COLS="*,*"> <FRAME SRC="Script3.21b.html" NAME="left"> <FRAME SRC="Script3.21c.html" NAME="right"> </FRAMESET> </HTML>
For example, the following page defines a simple two-frame display:
As you may have noticed, an array is automatically created that contains an entry for each frame on the Web page, beginning with an index of 0 based on the order in which the frames are defined.
If you add the NAME="" attribute to the <FRAME> tag, you can also refer to individual frames by their assigned names. In the preceding example, which names the frames left and right , you could reference the first frame in the hierarchy as either parent.left or top.left .
The previous example showed a Web page that defined two frames. The following example shows the HTML page that is loaded into the left frame.
<HTML> <HEAD> <TITLE>Script 3.24 - Writing dynamic content</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="button1" VALUE="Click Me" OnClick="top.right.document.write('<H3>Hello world!</H3>')"> </FORM> </BODY> </HTML>
The following page shows you the HTML page that is loaded initially into the Web page's right frame.
<HTML> <HEAD> <TITLE>Script 3.25 - The initial content displayed in the right frame</TITLE> </HEAD> <BODY> <H3>This is the right frame.</H3> </BODY> </HTML>
Figure 3.24 shows how things look after you load the first HTML page and click on the Click Me button.
You already know that you can load Web pages into target frames using the HTML link tag as shown here:
<A HREF="link1.html" TARGET="right">Sample Link 1</A>
The first page contains the <FRAMESET> and <FRAME> tags and defines the overall structure of the Web site. In this case, two frames are defined and named left and right ; both are assigned 50 percent of the available display area in the browser.
The page that is initially loaded into the right frame is very straightforward and is shown below.
<HTML> <HEAD> <TITLE> Script 3.28 - Initial content loaded into the right frame </TITLE> </HEAD> <BODY> <H3>This is the right frame.</H3> </BODY> </HTML>
The page that will be loaded into the right frame when the button is clicked is equally straightforward, containing a single message formatted as an HTML heading as shown below.
<HTML> <HEAD> <TITLE> Script 3.29 - The new page</TITLE> </HEAD> <BODY> <H3>This is the new frame you just loaded!</H3> </BODY> </HTML>
The structure of the second statement is the same as that of the first statement except that it references a different frame (the parent.frame frame or the right frame).
Many people like to add links to other Web sites on their HTML pages. One of the disadvantages of providing your visitors with links to other Web sites is that they may follow them and never come back to your site. However, if you use frames, you can provide links to other Web pages without actually sending your visitors away. All that you have to do it load the other Web site into a frame located on your HTML page. In addition to keeping your visitors at your site and providing a very slick interface, you can give even a small Web site the appearance of being a huge megasite by doing nothing more than loading other URLs into your frames.
The following example creates a Web site using frames. The frame on the left provides a navigation menu; the frame on the top right displays your Web site's title or other useful information. The remaining frame is used to display the URLs of other Web sites.
The first page defines the layout of the frames. In this case, a <FRAMESET> tag divides the display into two columns , assigning 15 percent of the space to the first column and the remaining 85 percent to the second column. Next, a <FRAME> tag specifies the page that will serve as the navigation index. A second nested <FRAMESET> tag divides the space allocated to the second column into two rows and assigns 8 percent to the first row and the remaining 92 percent to the second row. Two frames are then defined. The first loads a local Web page into the small top frame, and the second loads the URL for a popular Internet search engine, www.yahoo.com, into the larger frame.
<HTML> <HEAD> <TITLE> Script 3.31- Loading other URLs into your frames</TITLE> </HEAD> <FRAMESET COLS="15%,85%"> <FRAME SRC="Script 3.32.html" NAME="left" SCROLLING="auto"> <FRAMESET ROWS="8%,92%"> <FRAME SRC="Script 3.33.html" NAME="right1" SCROLLING="auto"> <FRAME SRC="http://www.yahoo.com" NAME="right2" SCROLLING="auto"> </FRAMESET> </FRAMESET> </HTML>
The navigation page loaded into the left frame defines several links to other popular Internet search engines. In this case, since the links to these URLs are all loaded into the same frame, I chose to use HTML link tags with the target attribute:
<HTML> <HEAD> <TITLE> Script 3.32- Using the left frame as a navigation page</TITLE> </HEAD> <BODY> <P><B>Search Engines:</B></P> <A HREF="http://www.excite.com" TARGET="right2">Excite</A><BR> <A HREF="http://www.alta-vista.com" TARGET="right2">AltaVista</A><BR> <A HREF="http://www.yahoo.com" TARGET="right2">Yahoo</A><BR> </BODY> </HTML>
The page shown below is loaded into the top frame and is used to display the name of the Web site; this frame helps to give a polished look and feel to the Web site.
<HTML> <HEAD> <TITLE> Script 3.33- Adding a title frame to your Web site</TITLE> </HEAD> <BODY> <CENTER> <H2>Welcome to my Internet Search Engine Web Site.</H2> </CENTER> </BODY> </HTML>
Figure 3.26 shows what the initial display looks like when you first load this example. As you can see, by using frames and three simple scripts, you can create a Web site that provides users with access to a collection of popular URLs.
There are lots of ways to make money on the Internet. One way is to join associate programs with various Internet companies. In these programs, you get paid for every customer you lead to their Web site who then makes a purchase. For example, using a modified version of the previous example, you could easily create your own online bookstore with several pages that highlight books you think will attract customers; then you provide links to other online bookstores whose affiliate programs you have joined. Visitors to your site can purchase books or anything else that the other online company sells. In fact, tomorrow morning, I'll demonstrate how to build such a bookstore.
I placed the script inside the head section of the page so that it would execute as soon as possible. The first line in the script is an if statement that checks to see whether somebody is trying to load the page into a frame by checking the value of top.frames.length . If the condition is 0 or true , then the statement top.location=self.document.location tells the browser to set the page's location property to itself, thus preventing it from being loaded into a frame.
Anyone who tries to load this Web page into his frame will be surprised to see that your page not only is not loaded, but also that it has completely replaced his own Web page.
|[ LiB ]|