|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
First, a few words about the content of Figure 7.1 and about how the frames are created. Frames are created by the FRAMESET elements. The first FRAMESET divides the window horizontally into two frames, the top one 90 pixels high, the second occupying the remainder of the window height. A second FRAMESET subsequently divides the second of these frames vertically into three parts, the first occupying 10% of the available width, the remaining two 45% each, for a total of 100%. Note how a FRAMESET can divide a region either horizontally (ROWS) or vertically (COLS), but not both at the same time. The FRAME elements indicate, via the SRC attributes, which HTML documents should be loaded and displayed in each of these frames—the resulting document is shown in Figure 7.2. Also note how each frame is given a unique name via the NAME attribute. This allows each frame to be uniquely addressed by elements invoking hypertext links. This is discussed in more detail later in this section. Some browsers do not understand frame elements and ignore all these elements and attributes. An example is shown in Figure 7.3: The noncommercial Mosaic browser does not understand frames and displays the NOFRAMES content instead. Targeting Data to Named FramesFrames are only useful if their content (such as the placeholders shown in Figure 7.2) can be updated or replaced by other documents or data. This is only possible given a way of identifying each frame, so that you can direct a retrieved document to a specific location. This identifier is provided by the FRAME element NAME attribute value. These names, which must be unique within a collection of framed documents, identify each individual frame. In the example in Figures 7.1 and 7.2, the top frame is named “topbar,” the right hand frame “main-r,” and so on. Figure 7.1 A simple example document illustrating the use of the FRAMESET, FRAME, and NOFRAMES elements. Also listed are the contents of the documents initially referenced by the FRAME elements.
fig7-1.html
<HTML>
<HEAD><TITLE>Simple Frame Test Document</TITLE></HEAD>
<FRAMESET ROWS=“90, *”>
<FRAME NAME=“topbar” SRC=“direct.html”>
<FRAMESET COLS=“10%, 45%, 45%”>
<FRAME NAME=“navi-bar” SRC=“left.html”>
<FRAME NAME=“main-l” SRC=“middle.html”>
<FRAME NAME=“main-r” SRC=“right.html”>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
<H2 ALIGN=“center”>So, You Don’t Support Frames, Eh?</H2>
<BLOCKQUOTE>
<P>So you don’t like frames. Well, too bad for you!
</BLOCKQUOTE>
<HR>
<DIV ALIGN=“right”>
<EM>Stupid Document Trick Number 13</EM>
</DIV>
</BODY>
</NOFRAMES>
</HTML>
direct.html
<HTML>
<HEAD><TITLE>Simple Frame Test Document</TITLE></HEAD>
<BODY>
<DIV ALIGN="center">
<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH="100%">
<TR><TD COLSPAN="6" ALIGN="center">
<B><FONT SIZE="+1">C</FONT>ATEGORIES</B>
</TR><TR>
<TD ALIGN="center">Beasts
<TD ALIGN="center"><A HREF=".">Birds</A>
<TD ALIGN="center"><A HREF=".">Fish</A>
<TD ALIGN="center"><A HREF=".">Parrots</A>
<TD ALIGN="center"><A HREF=".">Cheese</A>
<TD ALIGN="center"><A HREF=".">Piston Engines</A>
</TR>
</TABLE>
</DIV></BODY></HTML>
left.html
<HTML>
<HEAD><TITLE>Category Navigation</TITLE></HEAD>
<BODY>
<B>Beasts</B><BR><BR>
<A HREF="dogs.html" TARGET="main-l">Dogs</A><BR><BR>
<A HREF="cats.html" TARGET="main-r">Cats</A><BR><BR>
<A HREF="nada.html">Frogs</A><BR><BR>
<A HREF="nada.html" TARGET="blobby">Deer</A><BR><BR>
<A HREF="nada.html">Snakes</A><BR><BR>
<A HREF="nada.html">Mice</A><BR><BR>
<A HREF="nada.html">Rats</A><BR><BR>
<A HREF="nada.html">Snakes</A><BR><BR>
</BODY></HTML>
middle.html
<HTML>
<HEAD><TITLE>Middle Frame Placeholder</TITLE></HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR><BR>
<H2 ALIGN="center">Placeholder For Middle Frame</H2>
</BODY></HTML>
right.html
<HTML>
<HEAD><TITLE>Right Frame Placeholder</TITLE></HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR><BR>
<H2 ALIGN="center">Placeholder For Right Frame</H2>
</BODY></HTML>
These names are arbitrary, but are generally chosen to be easy to remember—an author will refer to these names often, so it is best to choose ones that are meaningful.
Individual frames can be targeted by A (hypertext anchor) or FORM elements taking a TARGET attribute. This attribute takes, as its value, the name of the frame to which the data should be sent. Looking to Figure 7.1, you will note that the anchor surrounding the word “Dogs” in the file left.html contains the attribute TARGET=“main-l.” Selecting this anchor retrieves the document dogs.html and displays it in the leftmost large frame. Similarly, selecting the link “Cats” retrieves the file cats.html, but directs this file to the frame labeled “main-r.” The document resulting from selecting these two links is shown in Figure 7.4. Figure 7.5 shows the HTML listing for the documents referenced by the activated hypertext links. Indeed, the two documents were retrieved and placed into the specified named frames.
Figure 7.5 HTML documents dogs.html, cats.html, and nada.html referenced by the hypertext links in the framed document listed in Figure 7.1. dogs.html <HTML> <HEAD><TITLE>My Wife Loves Dogs</TITLE></HEAD> <BODY> <H1 ALIGN=“center”><FONT FACE=“arial black”> My Wife Loves Dogs!</FONT></H1> <BLOCKQUOTE> <FONT FACE=“arial”> She loves dogs, and I want to get a cat. This leads to enormous debates over the advantages and disadvantages of each of these wonderful animals. But as yet, there is no resolution to this difficult question. </FONT> </BLOCKQUOTE> </BODY></HTML> cats.html <HTML> <HEAD><TITLE>Cats are Best</TITLE></HEAD> <BODY BGCOLOR="#cccccc"> <H1 ALIGN="center"><FONT FACE="verdana"> Cats are King</FONT></H1> <BLOCKQUOTE> <FONT FACE="courier"> So what's the problem with cats? They eat mice, which is probably good, given all the mice in our house. They purr and like to sleep by the hot radiators. They are generally friendly. So -- what's the problem? </FONT> </BLOCKQUOTE> </BODY></HTML> nada.html <HTML> <HEAD><TITLE>Nothing</TITLE></HEAD> <BODY> <BLINK><CENTER><B><FONT FACE="arial"> N<BR>O<BR>T<BR>H<BR>I<BR>N<BR>G<BR> <BR><BR> H<BR>E<BR>R<BR>E<BR> </FONT></B></CENTER><BLINK> </BODY></HTML> No TARGET Specified If no TARGET is specified, the retrieved document replaces the frame from which the hypertext anchor (or FORM submission) was sent. Thus, if the link “Frogs” is selected, the document nada.html is retrieved and replaces the left-hand side navigational bar. The document resulting from selecting this link is shown in Figure 7.6. Specifying an Empty FRAME A frame can be “emptied” using the special about:blank URL. On Netscape Navigator 3/4 and Internet Explorer 4, this URL produces a blank browser page, filled with the browser’s default background color. Thus, from within a frame, the URL about:blank will empty the frame and leave it empty.
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
)
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}