- How to Create Frame Documents
- How to Use Targets in Frames
- How to Create Nested Frames
One of the most significant developments that Netscape has contributed is the introduction of frames. Using frames gives you the power to divide the reader's browser window into multiple panes. You can display different HTML documents in each. More importantly, you can control the display of one frame from another.
This allows you to create banners, menus, and button bars that don't scroll off the page. For example, you could create a frame for your company logo at the top of the page and a frame for a button bar for navigation at the bottom. A third frame in the middle of the page would display the actual contents of the HTML documents. The top and bottom frames would never disappear from view.
There are a lot of possibilities with frames, and in this chapter, you'll learn the basics of using frames with Netscape browsers. Understanding how to use frames requires some new ways of thinking about HTML documents. If things start to get a little confusing, be patient and take time to reread each section. With a little practice, you'll be working wonders with HTML and frames.
How to Create Frame Documents
The first thing to understand about frames is that they use an entirely new kind of HTML document, called a frame document. Frame documents control the layout and appearance of the frames. Frame documents don't contain any other HTML content.
Once you've built your frame document, you can fill the frames with regular HTML documents. But before we get too far ahead of ourselves, let's concentrate on creating a very simple set of frames.
In this section, we'll create an empty frame document. Actually, the frame document is not empty. It will only appear empty when viewed with the browser, because we won't be putting any regular HTML documents inside. This section will give you a chance to understand how frame layout works.
Tip Sheet
- You can divide the window into vertical frames by using COLS in place of ROWS in the <FRAMESET> tag.
- You can nest one <FRAMESET> tag inside of another to create more complex frame layouts. You'll learn more about extending frame layouts later in this chapter.
- Open a new document in Notepad, and type in <HTML>. Press Enter, then type in <HEAD>. Press Enter again.
- Type <TITLE>My First Frame Document</TITLE>, then press Enter. On the next line, type </HEAD> and press Enter one more time.
- So far, this looks just like a normal HTML document. Here's where things get different, though. Instead of typing <BODY>, type <FRAMESET>. The <FRAMESET> tag instructs Netscape that this is a frame layout document.
- Place the cursor inside the <FRAMESET> tag and type ROWS="*,*,*". This creates three horizontal frames of equal relative height. The asterisk character instructs the browser to give the frame all the remaining space in the window. Because there are three asterisks, Netscape will give each frame one-third of the available space.
- On the next line, type <FRAME NAME=frame1 SRC="blank.html">. This assigns the name frame1 to the first frame in your document. The SRC attribute tells the browser to display the HTML document named blank.html in this frame. Normally, you would place a real HTML document in the SRC attribute. For this example, we'll just use blank.html, a made-up file name that doesn't really exist. Press Enter when you're finished.
- Type <FRAME NAME=frame2 SRC="blank.html"> and then press Enter. On the next line, type <FRAME NAME=frame3 SRC="blank.html"> and press Enter again. Now we've created three empty named frames.
- Type <FRAMESET> and press Enter. Then type < /HTML>.
- Save your document in Notepad as myframe.html.
- You have now created a very simple frame document that contains three empty frames. If this document were viewed in Netscape, it would look exactly like the document shown in the monitor in the center of the page. It may not look like much right now, but in the next section, you'll learn how to make your frames come alive.
How to Use Targets in Frames
Now that you've created a frame document, you're ready to start filling those frames with HTML content. In this section you'll learn how to place HTML documents in frames. More importantly, you'll learn how to update frames with new documents, including how to update the contents of one frame from another.
Tip Sheet
- For more information on hyperlinks, refer back to Chapter 6.
- You can use _SELF in place of the actual target name if the hyperlink updates the current frame. If most of your links update the current frame, using _SELF can be easier than having to specify the exact frame name each time.
- Frames are updated using targets. Targets are simply hyperlink tag extensions that contain a frame name. Targets specify which frame the hyperlink should update.
- Before we go any further, we'll need to create a few HTML documents that contain hyperlinks using targets. Launch Notepad and open a new document. Then type <HTML> and press Enter.
- Type <HEAD> and press Enter. Then type <TITLE>Document A</TITLE> and press Enter. Finally, type </HEAD> and press Enter again.
- Type <BODY> and press Enter. Then type <H1>Document A</H1> and press Enter.
- Type <P> to start your first paragraph. Then type Top Frame: and press Enter.
- Here's where we'll start placing hyperlinks with target attributes. These three hyperlinks will allow the user to display different documents in the top frame. Type <A HREF="a.html" TARGET="frame1">A</A>. This link will load a.html (the document you're creating right now) into the frame named frame1. In the frame document you created in the last section, frame1 was the top frame.
- Press Enter, then type <A HREF="b.html" TARGET="frame1">B</A>. This link will load a document named b.html into the top frame. Press Enter again and then type <A HREF="c.html" TARGET="frame1">C</A>. As you've probably guessed by now, this hyperlink will load c.html into the top frame. Press Enter again.
- Type <BR> to force a line break and press enter. Then type Middle Frame: and press Enter again.
- Type in all three hyperlinks again, only this time, change the target to frame2. This will instruct the browser to load the documents into the middle frame.
- When you're finished, type <BR> to force another line break and press Enter. Then type Bottom Frame: and press Enter again. Type in the hyperlinks again, with the target set to frame3. When you're finished, press Enter and type </P> to close the paragraph. Then press Enter again.
- Type </BODY> and then press Enter. Then type </HTML>.
- Save this document as a.html. Make sure that you save it in the same folder as myframe.html, which you created in the last section.
- Repeat this process two more times, and save the files as b.html and c.html. To save a lot of typing, you can simply change the <TITLE> and <H1> tags at the top of the document and save the existing file under a new name. Just choose Save As from the File menu and type in the new file name.
- Open myframe.html in Notepad. Place the cursor inside the SRC attribute of the first <FRAME> tag, and change the URL from blank.html to a.html. Change the URLs for the next two <FRAME> tags to b.html and c.html, respectively.
- Choose Save from the File menu to save the changes to myframe.html.
- Launch Netscape and open myframe.html. Three frames will appear. Each of your three HTML documents, A, B, and C, will appear in a different frame.
- Now try clicking on the different hyperlinks and see what happens. You can load A, B, and C into any of the three frames. You can even fill all three frames with the same document.
Extending Your Frames
In the beginning of this chapter, you learned how to create a very simple frame document. Now we'll take a look at the attributes you can include inside the <FRAMESET> and <FRAME> tags to gain finer control over the layout and appearance of your frames.
Tip Sheet
- Avoid setting frames with absolute sizes. You have no control over the overall size of the user's Web browser, and your specified absolute sizes may be adjusted to values you did not anticipate. Use relative and percentage sizes whenever possible. If you must use an absolute size for one of your frames, be sure to use relative sizes for the others.
- If you want to create text that can be viewed by browsers that do not support frames, place a <NOFRAMES> and </NOFRAMES> tag pair between the <FRAMESET> and </FRAMESET> tag pair. Any HTML code that you place between the <NOFRAMES> tags will be ignored by frames-capable browsers. This will allow you to place a warning as well as a link to a version of your HTML document that does not require frames-capable browsers.
- Open your frame document, myframe.html, in Notepad.
- The current <FRAMESET> tag specifies that three horizontal frames, also known as Rows, of equal relative size should be created. You can change the horizontal frames to vertical ones by replacing ROWS with COLS.
- The asterisks indicate relative sizes for each frame. Currently, each frame has a relative size of 1. You can change the relative size of any frame by placing a number in front of the asterisk for that row. For example, replace ROWS="*,*,*" with ROWS="*,2,*" to make the middle frame twice as big as the other two frames.
- You can specify an absolute size for each frame by replacing the asterisk with a number. This number specifies the size of the frame in pixels. The browser will attempt to size the row to your specification, but it may adjust the size in order to fit all of the frames into the browser window. To specify an absolute size for the middle frame, type ROWS="*,25,*".
- You can also specify the frame size as a percentage of the overall window size. For example, you can set the three frames using percentages by typing ROWS="10%,60%,30%".
- Frames automatically appear with scroll bars inside when necessary, so that users can scroll through the contents of each frame. If you want a frame to be nonscrolling, type SCROLLING="no" inside the individual <FRAME> tag. If scroll bars are disabled, the user may not be able to read all of the contents in the frame.
- Frames are also usually resizeable. The user can ad-just the size of the frame by clicking and dragging on the frame's border. You can prevent frame resiz-ing by including the NORESIZE attribute inside the <FRAME> tag.
- Frames are also usually resizeable. The user can adjust the size of the frame by clicking and dragging on the frame's border. You can prevent frame resizing by in-cluding the NORESIZE attribute inside the <FRAME> tag.
How to Create Nested Frames
You have already learned how to create frame documents, fill them with HTML content, and target them with hyperlinks. However, there is still one cool frame trick that we haven't covered yet-nesting frames. It is possible to nest <FRAMESET> tag pairs to create frames within frames. In this section, you'll learn how it's done.
Tip Sheet
- You can learn even more about Netscape frames by reading the Netscape online documentation at http://home.netscape.com/assist/net_sites/frame_syntax.html.
- You can nest as many layers of frames as you like, but keep in mind that too many frames will make the HTML documents inside difficult to read and navigate. In practice, it's usually a good idea to only have two frame layers at most.
- Open a new document in Notepad, and type in the lines as shown.
- Type <FRAMESET ROWS="*,*"> to divide the screen into two frames. Then press Enter.
- Type <FRAME SRC="a.html" NAME=frame1>. This will place the document a.html in the top frame. Now press Enter again.
- Instead of inserting another <FRAME> tag, we'll nest another <FRAMESET> tag pair, using COLS instead of ROWS. This will have the effect of splitting the bottom frame into two separate frames. Type <FRAMESET COLS="*,*"> and press Enter.
- Now, we'll create the frame declarations for the two nested frames. Type <FRAME SRC="b.html" NAME=frame2>. Then press Enter and type <FRAME SRC="c.html" NAME=frame3>. Then press Enter again.
- Close the nested <FRAMESET> tag by typing </FRAMESET>, and then press Enter. Then close the first <FRAMESET> tag by typing <FRAMESET> again and pressing Enter. When you're finished, type </HTML>.
- Close the nested <FRAMESET> tag by typing </FRAMESET>, and then press Enter. Then close the first <FRAMESET> tag by typing <FRAMESET> again and pressing Enter. When you're finished, type </HTML>.
- If you open newframe.html in Netscape, you'll notice that it looks a lot like the first frame document you created, but with one major difference: The bottom two frames are now aligned side by side instead of one on top of the other.
|
