Linking Between Frames and Windows


The real power of frames begins to emerge when you give a frame a unique name with the name attribute in the <frame /> tag. You can then make any link on the page change the contents of that frame by using the target attribute in an <a> tag. For example, Listing 16.1 includes the following tag:

 <frame src="/books/4/158/1/html/2/greeting.html" name="main" /> 


By the Way

Technically speaking, the name tag is outdated and has been replaced by the id tag. However, current web browsers still rely on name instead of id when it comes to identifying frames as targets. So, for now, you need to stick with the name attribute when identifying frames. Of course, it wouldn't hurt to use both attributes.


This code displays the greeting.html page in that frame when the page loads and names the frame "main".

In the code for the top frame, which is shown in Listing 16.2, you will see the following link:

 <a href="news.html" target="main"><img src="/books/4/158/1/html/2/news.gif" alt="" style="border-style:none" /></a> 


When the user clicks this link, news.html is displayed in the frame named main (the lower frame). To accomplish this sort of interactivity before the invention of frames, you would have had to use complex programming or scripting languages. Now you can do it with a simple link!

If the target="main" attribute had been left out, the news.html page would be displayed in the current (top) frame instead.

To save space, I haven't provided a listing of the news.html page; it's just a regular web page with no special frame-related features. You can see what it looks like in Figure 16.2, and you can see this whole frameset in the files located at http://www.samspublishing.com/.

By the Way

Want to open a page in a new window without using frames? Just use one of the following special names with the target attribute of the <a> tag (for example, <a href="popup.html" target="_blank">Click here to open the popup.html document in a new window.</a>):

  • _blank loads the link into a new, unnamed window.

  • _top loads the link into the entire browser window. Use this when you want to get rid of all frames or replace the entire window with a whole new set of frames.

  • _parent loads the link over the parent frame if the current frame is nested within other frames. (This name does the same thing as top unless the frames are nested more than one level deep.)

  • _self loads the link into the current frame, replacing the document now being displayed in this frame. (You'll probably never use this because you can achieve the same thing by simply leaving out the target attribute altogether.)

In Hour 3, "Linking to Other Web Pages," you learned that XHTML 1.1 did away with the target attribute for opening a page in a new browser window. In that hour you also found out how to use a JavaScript trick to work around the limitation. This workaround isn't necessary in the news.html page because it uses the XHTML 1.0 Transitional DTD, which still supports target.





SAMS Teach Yourself HTML and CSS in 24 Hours
Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)
ISBN: 0672328410
EAN: 2147483647
Year: 2005
Pages: 345

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net