Thông tin tài liệu
Creating Complex Framesets <head> <title>Reason 4 - Out to Lunch</title> </head> <body bgcolor="#ffffff"> <h2><img src="happy.jpg" width="275" height="275" align="left">I'm out to lunch.</h2> </body> </html> The fifth page (reason5.html) looks like the following: <head> <title>Reason 5 - Boss's Office</title> </head> <body bgcolor="#ffffff"> <h2><img src="scared.jpg" width="275" height="275" align="left">The boss called me into his office.</h2> </body> </html> The last main page (reason6.html) appears as follows: <head> <title>Reason 6 - I Don't Work Here Anymore</title> </head> <body bgcolor="#ffffff"> <h2><img src="duh.jpg" width="275" height="275" align="left">I just got fired.</h2> </body> </html> Now you have the six pages that will appear in the main frame of the frameset. You're finally ready to build the frameset itself. Task: Exercise 14.3. Combining rows and cols file:///G|/1/0672328860/ch14lev1sec5.html (6 von 14) [19.12.2006 13:49:41] Creating Complex Framesets To remind you of the basic layout of the frameset that you'll create, Figure 14.15 is another look at the complete page. It provides a simple example of how you can combine framesets to create complex designs. Output Figure 14.15. The frameset with three frames: top, left, and main. [View full size image] Tip When you're designing complex frame layouts, a storyboard is an invaluable tool. It helps you block out the structure of a frameset, and it can be invaluable when you're adding hyperlinks (as you'll see in Exercise 14.5, "Using Named Frames and Hyperlinks"). In Figure 14.15, the right section of the screen is split into two horizontal frames, and the third frame at the left of the page spans the entire height of the screen. To create a frameset document that describes this layout, open your text editor and enter the following basic HTML structural details: <html> <head> file:///G|/1/0672328860/ch14lev1sec5.html (7 von 14) [19.12.2006 13:49:41] Creating Complex Framesets <title>Why I'm Away Frameset</title> </head> <frameset> </frameset> </html> Next, you must decide whether you need to use a rows or cols attribute in your base <frameset>. Look at your storyboardin this case Figure 14.15and work out whether any frame areas extend right across the screen or from the top to the bottom. If any frames extend from the top to the bottom, as in this example, you need to start with a cols frameset; otherwise, you need to start with a rows frameset. On the other hand, if no frames extend completely across the screen either vertically or horizontally, you should start with a cols frameset. To put it more simply, here are three easy-to-remember rules: ● Left to right, use rows ● Top to bottom, use cols ● Can't decide, use cols Note The reasoning behind the use of the "left to right, use rows" rule relates to how frames-compatible browsers create frames. Each separate <frameset> definition can split the screen (or a frame) either vertically or horizontally, but not both ways. For this reason, you need to define your framesets in a logical order to ensure that you achieve the layout you want. In Figure 14.15, the left frame extends across the screen from top to bottom. As a result, you need to start with a cols frameset by using the rules mentioned previously. To define the base frameset, enter the following: <frameset cols="125,*"> <frame src="choice.html"> <! loads the choices page into the left frame > <frame src="dummy.html"> <! this line is only temporary > </frameset> Writing this code splits the screen into two sections. The first line defines a small frame at the left of the screen that is 125 pixels wide, and a large frame at the right of the screen that uses the rest of the available space. As mentioned earlier today, the frameset document itself doesn't describe the contents of each frame. The documents specified in the src attribute of the <frame> actually contain the text, images, and tags displayed by the frameset. You can see an example of this tag in the second and third lines of the preceding code. The second line specifies the URL of the web page in the left frame (the choice.html page that you created earlier). The third line would display a web page named dummy.html (if you created one, that is), but we're just using this as a placeholder for the next exercise. file:///G|/1/0672328860/ch14lev1sec5.html (8 von 14) [19.12.2006 13:49:41] Creating Complex Framesets Task: Exercise 14.4. Nesting Framesets The next step in the process is to split the right frame area into two horizontal frames. You achieve this effect by placing a second <frameset> block inside the base <frameset> block. When one <frameset> block is nested inside another, the nested block must replace one of the <frame> tags in the outside frameset. In this case, you'll replace the line that loads the temporary dummy.html page (which doesn't really exist). To split the right frame into two frame areas, you replace the dummy <frame> tag with an embedded <frameset> block. This embeds the new frameset inside the area defined for the <frame> tag it replaces. Inside the <frameset> tag for this new block, you need to define a rows attribute, as shown in the complete code: <html> <head> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*"> <frame src="choice.html" <! this loads the choices page_into the left frame > <frameset rows="60,*"> <! the frame for column 2 > <frame src="away.html"> <! has been replaced > <frame src="reason1.html"> <! with an embedded > </frameset> <! frameset block > </frameset> The embedded rows frameset defines two rows, the first being 60% of the height of the embedded frame area and the second taking up all the remaining space in the embedded frame area. In addition, two <frame> tags are embedded inside the <frameset> block to define the contents of each column. The top frame loads away.html, and the bottom frame loads reason1.html. Note When used inside an embedded frameset, any percentage sizes are based on a percentage of the total area of the embedded frame, not on a percentage of the total screen. Save the finished HTML document to your hard drive as frameset.html. Test it using a frames-compliant browser. Also, if you happen to have a copy of a web browser that isn't frames-compliant, try loading the document into it. You shouldn't see anything onscreen. Task: Exercise 14.5. Using Named Frames and Hyperlinks file:///G|/1/0672328860/ch14lev1sec5.html (9 von 14) [19.12.2006 13:49:41] Creating Complex Framesets If you were to load your frameset.html page into a frames-compatible browser at this stage, you would see a screen similar to the one shown in Figure 14.15. Some of the text sizes and spacing might be slightly different, but the general picture would be the same. Although it looks right, it doesn't work right yet. If you click any of the hyperlinks in the left frame, the frames-compatible browser will attempt to load the contents of the file you select into the left frame. What you really want it to do is to load each document into the larger right frame. Earlier today, you learned about the target attribute, which loads different pages into a different browser window. To make the frameset work the way it should, you need to use a slight variation on the target attribute. Rather than the target pointing to a new window, you want it to point to one of the frames in the current frameset. You can achieve this by first giving each frame in your frameset a frame name or window name. To do so, include a name attribute inside the <frame> tag, which takes the following form: <frame src="document URL" name="frame name"> Therefore, to assign a name to each of the frames in the frameset.html document, you add the name attribute to each of the <frame> tags. Your frameset page now looks like the following, with the additions indicated with the shaded background: <html> <head> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*"> <frame src="choice.html" name="left"> <! this loads the choices page into the left frame > <frameset rows="60,*"> <! the frame for column 2 > <frame src="away.html" name="top"> <! has been replaced > <frame src="reason1.html" name="main"> <! with an embedded > </frameset> <! frameset block > </frameset> This source code names the left frame "left", the top-right frame "top", and the bottom- right frame "main". Next, resave the updated frameset.html file, and you're just about finished with the example. Task: Exercise 14.6. Linking Documents to Individual Frames file:///G|/1/0672328860/ch14lev1sec5.html (10 von 14) [19.12.2006 13:49:41] Creating Complex Framesets Once you've named the frames, you have to fix the links in the choice.html page so that they load the target pages in the main frame rather than the left frame. You might recall that the target attribute was used with the <a> tag to force a document to load into a specific window. You'll use the same attribute to control into which frame a document is loaded. In this exercise, you want to load a page in the main (bottom-right) frame whenever you click a hyperlink in the left frame. Because you've already named the bottom-right frame "main", all you need to do is add target="main" to each tag in the choice.html document. The following snippet of HTML source code demonstrates how to make this change: <p><a href="reason1.html" target="main">Reason 1</a></p> <p><a href="reason2.html" target="main">Reason 2</a></p> <p><a href="reason3.html" target="main">Reason 3</a></p> <p><a href="reason4.html" target="main">Reason 4</a></p> <p><a href="reason5.html" target="main">Reason 5</a></p> <p><a href="reason6.html" target="main">Reason 6</a></p> Alternatively, you could use the <base target="value"> tag because every tag in the choice. html document points to the same frame. In this case, you don't need to include target="main" inside each <a> tag. Instead, place the following inside the <head> </head> block of the document: <base target="main"> With all the changes and new documents created, you should now be able to load frameset. html into your frames-compatible browser and view all your HTML reference documents by selecting from the choices in the left frame. Tip After you get all your links working properly, you might need to go back and adjust the size of the rows and columns as defined in the <frameset> tags to get the layout exactly right. Remember, the final appearance of a frameset is still determined by the size of the screen and the visitor's operating system. Task: Exercise 14.7. Adding Your noframes Content file:///G|/1/0672328860/ch14lev1sec5.html (11 von 14) [19.12.2006 13:49:41] Creating Complex Framesets Although you have a frameset that works perfectly now, there's another feature you need to add to it. Remember, some people who visit your frames page won't be using framescompatible browsers. The following addition to the frameset page creates some content that they'll see when they open the frameset. Once again, open the frameset.html page. At this point, your code looks like the following: <html> <head> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*"> <frame src="choice.html" name="left"> <! this loads the choices page into the left frame > <frameset rows="60,*"> <! the frame for column 2 > <frame src="away.html" name="top"> <! has been replaced > <frame src="reason1.html" name="main"> <! with an embedded > </frameset> <! frameset block > </frameset> </html> Immediately after the last </frameset> tag and before the final </html> tag, insert the following <noframes> </noframes> element and content: Input <noframes> <body bgcolor="#ffffff"> <h1>I'm Away from My Desk, because </h1> <ul> <li>Reason 1 - <a href="reason1.html">I forgot my lunch at home.</a></li> <li>Reason 2 - <a href="reason2.html">I'm flirting by the water cooler.</a></li> <li>Reason 3 - <a href="reason3.html">None of your business.</a></li> <li>Reason 4 - <a href="reason4.html">I'm out to lunch.</a></li> <li>Reason 5 - <a href="reason5.html">The boss just called me in his office.</a></li> <li>Reason 6 - <a href="reason6.html">I just got fired.</a></li> </ul> </body> </noframes> When a user who isn't using a frames-compatible browser navigates to the frameset, she'll see the page that's similar to the one shown in Figure 14.16. Output Figure 14.16. This page appears when users view the frameset with a browser that isn't framescompatible. file:///G|/1/0672328860/ch14lev1sec5.html (12 von 14) [19.12.2006 13:49:41] Creating Complex Framesets [View full size image] Magic target Names Now that you've learned what the target attribute does in a frameset, you should know that there are some special target names you can apply to a frameset. You can assign four special values to a target attribute, two of which (_blank and self) you've already encountered. Netscape called these values magic target names. They're case sensitive. If you enter a magic target name in anything other than lowercase, the link will attempt to display the document in a window with that name, creating a new window if necessary. Table 14.2 lists the magic target names and describes their use. Table 14.2. Magic target Names target Name Description target="_blank" Forces the document referenced by the <a> tag to be loaded into a new unnamed window. target="_self" Causes the document referenced by the <a> tag to be loaded into the window or frame that held the <a> tag. This can be useful if the <base> tag sets the target to another frame but a specific link needs to load in the current frame. target="_parent" Forces the link to load into the <frameset> parent of the current document. If the current document has no parent, however, target="_self" will be used. file:///G|/1/0672328860/ch14lev1sec5.html (13 von 14) [19.12.2006 13:49:41] Creating Complex Framesets target="_top" Forces the link to load into the full web browser window, replacing the current <frameset> entirely. If the current document is already at the top, however, target="_self" will be used. More often than not, when you create links to other sites on the Web, you don't want them to open within your frameset. Adding target="_top" to the link will prevent this from occurring. file:///G|/1/0672328860/ch14lev1sec5.html (14 von 14) [19.12.2006 13:49:41] Floating Frames Floating Frames With Internet Explorer 3.0, Microsoft introduced a novel variation on frames: floating frames. This concept, which is a part of HTML 4.01, is somewhat different from the original frames idea that was introduced in Netscape. Floating frames have their advantages and disadvantages. One advantage is that you can position a floating frame anywhere on a web page, just as you can with an image, a table, or any other web page element. Browser Support for Floating Frames The authors of the HTML 4.01 frames specification included floating frames with some hesitation. According to the specification, you can use the <object> tag to achieve the same effect as floating frames, so the inclusion of this type of frame is questionable. Still, the tag is included in the HTML 4.01 specification, and all versions of Internet Explorer since version 3, Mozilla Firefox, Netscape 6 (and above), and Opera 5 (and above) all support it. Learning to use floating frames is worthwhile. Standard framesets enable you to specify alternative content that can be viewed when someone without a frames-compatible browser navigates to a frameset. Unfortunately, you don't have this option with the <iframe> element. If you include a floating frame on your web page and a user navigates to it with a browser that doesn't support them, he'll see absolutely nothing at all in the area where the frame should be. With that warning out of the way, here's a brief run-through of how to create floating frames. First, you define them by using the <iframe> tag. Like images, these frames appear inline in the middle of the body of an HTML document (hence the i in <iframe>). The <iframe> tag enables you to insert an HTML document in a frame anywhere in another HTML document. Table 14.3 shows how <iframe> takes the key attributesall of which, except for those indicated as Internet Explorer extensions, appear in HTML 4.01. Table 14.3. Key Attributes Attribute Description width Specifies the width, in pixels, of the floating frame that will hold the HTML document. height Specifies the height, in pixels, of the floating frame that will hold the HTML document. file:///G|/1/0672328860/ch14lev1sec6.html (1 von 3) [19.12.2006 13:49:41] . idea that was introduced in Netscape. Floating frames have their advantages and disadvantages. One advantage is that you can position a floating frame anywhere on a web page, just as you can with. included in the HTML 4.01 specification, and all versions of Internet Explorer since version 3, Mozilla Firefox, Netscape 6 (and above), and Opera 5 (and above) all support it. Learning to use floating. you want it to point to one of the frames in the current frameset. You can achieve this by first giving each frame in your frameset a frame name or window name. To do so, include a name attribute
Ngày đăng: 07/07/2014, 09:20
Xem thêm: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P54 pot, Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P54 pot
