|
|
In the beginning, a web browser had single window open in which it displayed a single web document. That changed when Netscape released version 2 of Navigator, which introduced frames. Frames were intended to be used as a navigational aid. One frame would contain an HTML file containing a menu of links to pages on a site and the other frame would hold the content. Click on a link in the menu and the corresponding document would be displayed in the other frame.
The key to using frames is to define a frameset which in turn defines the individual frames to be displayed in the browser window. For instance, let's say you wanted to create a frameset containing a frame for a menu of links to be displayed on the left side of the window. The menu frame is to be 135 pixels wide and the remaining area of the window will be used by the other frame. The following HTML defines the frameset for us.
<html> <head> <title>Frame Sample #1</title> </head> <frameset cols="135,*"> <frame name="menu" src="menu.html"> <frame name="body" src="welcome.html"> </frameset> </html>
The most siginificant difference between this HTML and what you've looked at so far is the absence of <body> and </body> tags, which have been replaced by the <frameset></frameset> tag pair. The <frameset> tag contains the cols attribute which tells the browser to divide the window vertically. The leftmost part will be 135 pixels wide. The asterisk indicates the right part will get all the space that's left. The space can also be specified in percentages.
Next, there are two <frame> tags that specify the name of each frame and the documents to be displayed in them when the page is first loaded. The resulting browser window might look like the following.
The HTML file containing the menu could resemble the following. The only thing new about the <a> tags is the target attribute, which tells the browser in which frame the document should be loaded. Leaving out the target attribute will cause the document to be loaded in the same window. Ordinarily, that is not a concern, but when using frames you must always specify the target if the document is to be loaded in a different frame.
<html> <head> <title>My Menu</title> </head> <body> <h3>Menu</h3> <a href="option1.html" target="body">option 1</a><br> <a href="option2.html" target="body">option 2</a><br> <a href="option3.html" target="body">option 3</a><br> <a href="option4.html" target="body">option 4</a><br> </body> </html>
There is nothing unusual or different about the web documents displayed content frame on the right. They are structured and have the same markup tags as the HTML files you've been working with so far.
The browser window can also be divided vertically, so you can place a navigation bar in a frame at the top of the screen and the main content in the area below. The following frameset example creates a frame named topbar. which is 150 pixels high, to hold the navigational links and a second frame called body to hold the content. The main difference between the two examples is the use of the rows attribute.
<html> <head> <title>Frame Sample #2</title> </head> <frameset rows="150,*"> <frame name="topbar" src="navbar.html"> <frame name="body" src="welcome.html"> </frameset> </html>
Frames seem to simple and straightforward, so why don't more web sites use them? Ah, for the answer to that you'll have to read on.