Text to be centered goes here.
Text to be indented goes here.
Try our irresistible cake! 
Try our veggies and then our irresistible cake! You can’t beat either one.
| First Cell | Second Cell |
| Third Cell | Fourth Cell |
| Fifth Cell | Sixth Cell |
| First Cell | Second Cell |
| Third Cell | Fourth Cell |
| Fifth Cell | Sixth Cell |
| First Cell | Second Cell |
| Third Cell | Fourth Cell |
| Fifth Cell | Sixth Cell |
| Default | Default |
| Right aligned | Set by row |
| Contents |
| Default | Default | Default | Default |
| Top aligned | Top aligned | Top aligned | Top aligned |
| Bottom aligned | Bottom aligned | Bottom aligned | Bottom aligned |
| Top aligned | Set by row | Set by row | Bottom aligned |
| Cats | Dogs | |||
| Male | Female | Male | Female | |
| Measured | 17 | 12 | 40 | 35 |
| 15 | 16 | 34 | 27 |
Specifying background colors Background colors, unlike background images, are extremely useful in tables. For plain tabular data display, they can be used to delineate different rows to increase readability, just as with the alternating lines of color on spreadsheet printouts. Background colors can also make headings stand out from the data, emphasize the bottom line, or fulfill just about any other kind of attention-grabbing need. Figure 11-22 shows a simple table containing only data, with the various parts emphasized by background colors. www.it-ebooks.info P1: FRU WY040-11 WY040/Crowder WY040-Crowder.cls August 17, 2004 21:47 Chapter 11 ✦ Harnessing the Power of Tables Figure 11-22: Background colors can emphasize cells. In Web design, table background colors really shine simply because you can make any cell be any size and color you want. How does this matter? It enables you to create color bars that are an integral part of the table. This, especially in situations where you’re going borderless, opens up all sorts of possibilities. A cell’s background color won’t show up in a Web browser unless there’s some content in the cell. So how do you get the color bar without spoiling it by covering the background color over with something else? The solution adopted by savvy Web designers has been devilishly simple — what you do is to create a special image that’s composed of nothing but a single pixel and set that pixel so that it’s transparent. The end result? An image that you can load into any cell without having to shrink it to make it fit into the cell, and which is invisible. The real beauty of this solution becomes apparent when you consider that you can deliberately alter the height and width values of any image, and that those values determine the size of the cell containing the image. Here’s a practical application of this technique that you can use on your own pages. Figure 11-23 shows a table composed of a series of color bars and a pair of images. The images are diagonal lines, and they’re placed in opposite corners of the first row of the table. The horizontal and vertical lines in the table are the kind www.it-ebooks.info 235 P1: FRU WY040-11 WY040/Crowder WY040-Crowder.cls 236 August 17, 2004 21:47 Part III ✦ Designing Web Layouts Figure 11-23: Color bars can be combined with images to produce dramatic effects. of color bars we’ve been talking about, where IttyBittyClear.gif is doing its work. Here’s the HTML code used to create that page:
The purpose, by the way, of setting the top color bar’s width to 100 percent is to ensure that the table automatically stretches or contracts to accommodate any screen resolution it’s viewed at. You may recall from the section on sizing tables that, whenever the total size of all the cells in a row adds up to more than 100 percent, as it does in this case because there are other cells in this row, the Web browser automatically compensates. This keeps the table from being sized inappropriately. Tip You could also set the width to some outlandishly large absolute value such as 99999 pixels, to get the same effect. Because the table is already set to the screen width, this does not cause the cell to actually go up to that size. Simply add your own content to the HTML code in the places indicated and you have a Web page that’s outlined in color. To add more rows so that the table can be expanded downward, simply copy the final TR element and its contents, then paste it in as many times as you need (we separated it with spaces above and below it in the example code so you can pick it out easily). Figure 11-24 shows how this outline looks when it’s filled with content. Color bars don’t have to sit on the fringes of the table, however. You can use them anywhere in a table. For instance, Figure 11-25 shows a newspaper style design for an e-zine (online magazine) where a thin vertical line separates one article from another. As in the preceding example, you can use this right away on your own site—just fill in the blanks and you’ll be ready to go. www.it-ebooks.info 237 P1: FRU WY040-11 WY040/Crowder WY040-Crowder.cls 238 August 17, 2004 21:47 Part III ✦ Designing Web Layouts Figure 11-24: The basic outline fills out well. Figure 11-25 shows the design where the first row, which holds the e-zine’s logo, is composed of a single cell that spans all the columns. The next row is composed of three cells, with the center one holding the invisible image and having a black background color. The cells on the outside hold the articles. The bottom row, as with the top row, is a single cell that spans the other three columns. We recommend using it for links to other pages in the site, but that’s up to you. This is the HTML code that creates the framework:
Note Because the color bar cell is set to 100 percent of the table’s height, the line extends all the way down the entire article, no matter how large or small it is. Figure 11-26 shows the basic outline when content is added to the cells. We have also added a cell padding of 3, which increases the size of the central line in addition to moving the text out from the edges. The same basic principles, of course, can be applied to more than just dividing two columns with a single line. Study the HTML code, let your imagination run free, and you’ll find a lot of different ways to use color bars and tables. www.it-ebooks.info 239 P1: FRU WY040-11 WY040/Crowder WY040-Crowder.cls 240 August 17, 2004 21:47 Part III ✦ Designing Web Layouts Figure 11-26: The newspaper style filled in. Summary If there’s a secret weapon in the Web designer’s arsenal, it’s tables. Tables can be used for a variety of purposes. This chapter introduced you to the following concepts and topics: ✦ Tables can contain any element that a Web page can contain. ✦ Tables are composed of rows, which are represented by the TR (Table Row) element. The rows are composed of cells, which are represented by the TD (Table Data) element. ✦ Tables can be set to take up either an exact size or a percentage size of the Web page. ✦ Borders show the edges of tables and their cells. ✦ Cell spacing sets the distance between cells. ✦ Cell padding sets the distance between the borders of cells and their contents. ✦ Alignment can be used within and outside of tables for special effects. ✦ Cells can be set to span more than one row or column. www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 12 C H A P T E R Organizing Your Site with Frames ✦ ✦ ✦ ✦ In This Chapter Designing frame layouts F rames are used to put multiple Web pages onscreen at the same time. Because each framed page resides within its own distinct and limited area of the screen, the effect is to create a seamless whole out of many parts. All the frames together are contained within a different kind of Web page called a frameset. Framesets themselves are never seen by a site visitor. Only their contents—which consist of the borders of the frames and the framed pages—are visible. The primary reason to use frames is to provide at least one area of the screen where the content remains stable while another area changes. The stable area keeps something important in front of your site visitors at all times. What this important item is varies from site to site. Most often, a special page showing a set of links to all the other pages in the site is kept in a small frame while the pages themselves are displayed in the remaining screen area. The small frame with links is commonly called a navigation frame because to navigate to any page in the site, visitors simply click one of the links. By keeping the links content available at all times, visitors are able to move about the site more easily than if they had to constantly return to the home page to locate a links listing. Although navigational content is the most common use for frames, frames are sometimes used for other types of static content, such as a legal notice or graphic that you want to always keep in your visitors’ field of vision. Designing Frame Layouts The first step in designing your framed screen is to determine how many frames you need in order to display your content. While that varies from one situation to another, a good rule of thumb is to use the minimum possible number of frames. Part of that statement is pure aesthetic opinion, and you may well www.it-ebooks.info 241 Creating framesets Setting targets for your links Customizing frame borders and margins Setting scroll bar options Avoiding frame problems ✦ ✦ ✦ ✦ P1: NEC WY040-12 WY040/Crowder 242 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts disagree with it. Still, it is a simple matter of practicality that every Web designer must face—there’s only a certain amount of real estate available on a computer screen. If you want to cram 20 or 30 frames into a frameset, it can technically be done, but the results won’t be anything that anybody will be able to use easily. Figure 12-1 shows a Web page that has far too many frames—it’s a horror that we created only so that it could serve as a bad example. Figure 12-1: Too many frames can make a screen confusing or even unusable. So, how many frames is right? Again, it depends on the needs of the particular Web site you’re working on, but most Web designers would hesitate to have more than three to five frames on one screen. The smaller the content, the more frames you can get away with, but the key is to figure out what you really need to make the framed site work. Analyzing functional needs Do you have a corporate logo that you want to keep in front of visitors at all times? Frame it. Do you have a set of links that must always be accessible without users’ having to scroll up and down or retrace steps via the Web browser’s Back button? Frame them. Bearing in mind that the purpose of frames is to maintain some type of unchanging content for part of the screen layout, you must take a good look at which parts of www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames your screen you want to lock into place and which parts of it can be left free to scroll in the normal manner. If you don’t have anything that really needs to be locked into place, then you don’t really need to be using frames at all. Creating navigation layouts The vast majority of framed pages on the Web exist for navigational purposes. With this approach, one frame holds a set of links that, when acted upon, change the contents of the other frame or frames. The most common arrangement is a two-frame setup in which the navigation frame is relatively small and the content frame takes up most of the screen. Figure 12-2 shows a left-sided navigation frame. Figure 12-2: The left-sided navigation frame is common on the Web. However, many designers use either the top or bottom of the screen to hold the navigation frame. Figure 12-3 shows the same Web site with a navigation frame on the top instead of on the left side. The right side is rarely used, but there is certainly no reason why it can’t be, especially if your Web site is meant for an audience whose native language reads from right to left. Some sites even have more than one navigation frame, depending on the needs of the material involved. It is even possible to load one frameset into a frame in another www.it-ebooks.info 243 P1: NEC WY040-12 WY040/Crowder 244 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts frameset. In that case, the second frameset may have its own navigation frame that works only within that smaller area (see the discussion on the _parent target in the section “Using reserved frame names” later in this chapter). Figure 12-3: The top-sided navigation frame is almost as popular. Setting up action or result layouts Frames are very useful when they are teamed up with JavaScript (see Chapter 16). Although HTML links can cause only one kind of change—a new file address is called upon—JavaScript programming is much more powerful than HTML alone. Figure 12-4 shows a Web site in which the top frame is used to enter values and the bottom frame is used to present the calculated results of those values. Creating Framesets Framesets are Web pages that define the areas of a Web browser’s screen that will contain framed pages. In order to do this, framesets work a bit differently from the usual Web page. To save you from having to flip back to Chapter 3, here’s the basic skeletal structure of a normal Web page. www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames Figure 12-4: JavaScript calculation pages often use frames to accept values and respond with results in separate screen areas. The most important way in which frameset pages differ from regular HTML pages is that the BODY element is replaced by the FRAMESET element. The FRAMESET element contains two or more FRAME elements. You could, in theory, have only one frame, but there’s no point to doing so—the result would be just one Web page onscreen, and you don’t need frames to do that. The following HTML code shows the outline structure of a frameset page: Unlike all the other elements in this listing, the FRAME element does not have an end tag. The tags are indented to visually emphasize their containment within the tags, but you do not have to indent them in your HTML code if you don’t want to. Because HTML doesn’t recognize leading white space, it’s the same to a Web browser if you indent or not. The FRAME element needs to have an src attribute that tells it what page to display in the frame. The name attribute is optional, but to use links in one frame to change content in another frame the attribute is required (see “Setting Targets for Your Links” later in this chapter). Note When a Web page is displayed in a browser, its title shows at the top of the browser. However, framesets contain multiple Web pages. Browsers solve this dilemma by showing the title of the frameset itself instead of the title of one of the contained Web pages. The previous frameset has a problem in that only one frame is shown. That’s because we need to specify the size of the columns and rows. Setting columns and rows The first choice you must make, as we noted earlier, is how many frames to have onscreen. The second is whether to set up vertical or horizontal frames, or both at the same time. The following example uses the rows attribute to create a pair of horizontal frames, each of which takes up half of the screen: Figure 12-5 shows an evenly divided pair of horizontal frames. To set a pair of vertical frames (columns) that each take up half the screen, you would use the same code, but substitute the cols attribute instead: Figure 12-6 shows the results of this code. www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames Figure 12-5: The rows attribute sets up horizontal frames. Figure 12-6: The cols attribute sets up vertical frames. www.it-ebooks.info 247 P1: NEC WY040-12 WY040/Crowder 248 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts If you want to have four columns, each one the same size, you could use the following code: Note The number of size values in the rows or cols attribute specifies the number of frames to be created and sets how large each will be. Because we have given sizes for four frames, there must also be four FRAME elements. You do not have to set up symmetrical frames. Any frame can be any size you want. You could, for example, set up the preceding four columns like this: If you are setting up symmetrical frames, however, you can’t use decimal points for your row and column sizes. The usual solution to this is to just drop any small amount of leftover pixels into one of the rows or columns. In the following code, it’s impossible to create three equally sized rows and still have everything totally equal, so the final row is 1 percent larger than the first two: This is a simple solution and the difference is virtually unnoticeable—very few people can tell the difference between two frames that are just a handful of pixels different in size. It’s common practice—and good programming procedure—to make sure that all the column or row percentages total 100 percent. However, if you fail to get the numbers exactly right, the Web browser used to view the frameset automatically compensates for your error. If you specified each of the three rows in the preceding example as 33 percent in size, for example, the Web browser would simply make each frame equal to one-third of the screen size (for more details on error correction by browsers, see “Mixing pixel, percentage, and relative sizing” later in this chapter). A frameset can contain both columns and rows at the same time by simply using both the cols and rows attributes. The following example, illustrated in Figure 12-7, makes eight frames by setting up two rows of four columns: www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames The first four frames are placed in the top row, and the next four in the second row. The frames in each row are placed from left to right. Figure 12-7: The rows and cols attributes can be combined to create a grid. Caution If you use both rows and columns in the same frameset, you must multiply the number of rows by the number of columns to determine how many frames are created. It’s a common error to add the numbers of rows and columns instead of multiplying them. The drawback to mixing rows and columns in this manner is that you’re limited to creating symmetrical grids. Thus, if you want to divide one column in half, you have to divide all of them the same way. Asymmetrical frame layouts are possible, www.it-ebooks.info 249 P1: NEC WY040-12 WY040/Crowder 250 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts however, and they are discussed later in this chapter in the section “Nesting framesets.” Mixing pixel, percentage, and relative sizing So far, we have used only percentages of screen size when setting the sizes of frames. However, there are two other options. You can state a precise and absolute size in pixels for a frame or use relative sizing. A frame that is relatively sized takes up all the space on the screen that isn’t occupied by other frames. If there’s half of the screen left for the relative frame to fill, then it takes up that half. If there’s only 10 percent of the screen available, then that’s how big the relative frame will be. It’s unusual to specify an exact size in pixels for all the frames in a frameset. It can be done, however, and Web browsers are smart enough to adjust for any difference between your intentions and the reality of the actual screen display. The following code, for example, sets up two columns so that they add up to an exact width of 1,024 pixels: If this frameset is viewed by somebody using a screen resolution of 1,024 × 768, it works perfectly. However, if someone else views it using a screen resolution of 640 × 480, it will still work. The Web browser realizes the frameset can’t fit on the screen and automatically resizes both frames so that everything fits into the available screen space. The resizing is done proportionally—each frame is shrunk by the same amount so that the layout remains intact. The same thing is true in reverse—if you specify a screen size that’s too small, then both frames are proportionally enlarged to fit. Although the HTML specification doesn’t include percentages that are too large or too small—it only tells Web browsers how to handle errors in absolute values—both of the major browsers handle percentage errors just as they do absolute errors. If you make three frames take up only 70 percent of the screen among them, the remaining 30 percent of the space is used up by providing 10 percent more screen width to each of the three frames. If you make two frames take up 140 percent of the screen between them, the excess 40 percent is taken up by making each frame 20 percent of the screen size smaller. Absolute values are commonly used in tandem with relative sizing. You might, for instance, specify that two columns are to be divided so that the first column is 200 pixels wide and the second one will be relatively sized, taking up all of the remaining space. To do so, you would write the following code: www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames The asterisk is the relative size character. Exactly how much space is allotted to the second column depends on the screen resolution a visitor to your site is using. If the display is 640 pixels wide, for example, then the second column will be 440 pixels wide (640–200). Figure 12-8 shows the results of this code on a 1024-pixel-wide screen where the size of the second column becomes 824 pixels wide (1024–200). Figure 12-8: Relative sizing enables you to specify an exact size for one frame and let the remaining frame take up whatever space is left. Note It’s not as easy to calculate exactly how relative sizes for rows will turn out, because every Web browser takes up some of the vertical screen space with its menus and icons—and the exact amount of vertical space depends on user preference settings. Some browsers also use up some of the horizontal screen space. For instance, when you click the History button in Internet Explorer, the History window opens on the left side of the screen. When that happens, the available space for columns is also affected. You can set relative sizes for multiple frames as well. To set up three rows in which the first is 200 pixels high and the other two each take up half of the remaining space, you would use this code: This means that, if the screen height is 768 pixels, the last two rows split the remaining 568 pixels, and each is thus 284 pixels high. For a screen height of 600 pixels, all three rows are 200 pixels high (400/2). If the screen height is 480 pixels, then the last two rows are each only 140 pixels high (280/2). If you want the center row to be the one with the absolute size, the code is modified like this: If none of the frames has a specific size, then all are proportionally distributed. The following code sample sets up four equally sized frames using relative sizing: The effect is the same as if each frame had been set using a value of 25 percent. You can also specify relative sizes by stating the proportions to be allotted to each frame. Thus, 2* is twice as much space as * and 3* is three times as much as *. To make a trio of columns in which the center column is four times as wide as the other two, write this code: Any combination of the three approaches can be used together. The following example shows how to make three rows in which the first row is 100 pixels high and the second is twice as high as the third: www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames Likewise, you can specify percentages for some frames while others are left to relative sizing. In this example, the first row takes up 35 percent of the screen height, and the second row is one-fifth of the height of the third row: You can mix all three techniques together, as in the following code: This sets the first row to one-quarter of the screen height, sets the final row to 80 pixels in height, and leaves the center row to take up all the remaining space. Preventing resizing The default behavior of Web browsers is to allow users to resize frames at will by dragging the frame border to a new location. Generally speaking, it’s preferable to leave your site visitors with this option intact. However, if there is some reason why your framed design would suffer if anything were changed, you can ensure that the frames cannot be resized simply by adding the noresize attribute to the FRAME element: Specifying frame names and contents Each frame must have a name if you are ever going to change its original content. Although you can put a Web page into a frame just by specifying it in the initial frame declaration, the only way to tell which frame to load a new Web page into is by using the frame’s name (see “Setting Targets for Your Links” later in this chapter). Note When we refer to the contents of a frame as a Web page, we are simply recognizing that most people use frames for displaying Web pages. However, there is nothing to stop you from putting any Web-displayable file into a frame. You could specify a JPEG image file, for example, for the contents just as easily as you could a Web page. You can even use another frameset as the contents instead of a normal Web page, although that’s pushing the capabilities of most Web browsers to the limit and begging for a crash. There are very few limits on creating frame names. There are some reserved names that you cannot use: _blank, _parent, _self, and _top. The first character of your www.it-ebooks.info 253 P1: NEC WY040-12 WY040/Crowder 254 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts frame name must be a letter (the reserved names are the only ones that don’t follow this rule). Beyond that, the name may contain letters, numbers, hyphens, underscores, colons, or periods. Table 12-1 provides examples of legal and illegal frame names. Table 12-1 Frame Naming Conventions Valid Name Invalid Name secondframe 2ndframe AboveTheOthers AboveTheOthers left-Side -leftSide a9q:-. a9q:-. ,?/ Although this means that you can create practically any names you want for your frames, it’s good practice to use descriptive names. MainDisplay, for example, is much easier to comprehend than something like Frame3. The name of the frame is an attribute of the FRAME element and is assigned by using the name attribute. So is the location of the Web page that will initially fill the frame; the location is shown by the src (source) attribute. The following line of code shows how the name and source are specified: Note The location of the Web page in the src attribute follows the same rules about absolute and relative URLs that the href attribute does in anchors (see Chapter 4). Figure 12-9 shows a genealogy Web site with two frames. The small top frame holds a Web page whose sole content is a graphics file that shows a fancy image of the family name. The larger bottom frame holds the event announcement page for the site. The frameset and contents were specified using the following code: The top frame is set to a height of 105 pixels because that gives the graphic in the Web page contained in that frame a little bit of room around it. The bottom frame is set to relative sizing, taking up whatever remains of the available vertical space. www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames Figure 12-9: This figure shows a framed genealogy Web site. Note Don’t forget that, if you want the frameset to be the default page for your site, you need to save it as index.html. Nesting framesets Framesets, in addition to containing frames, can contain other framesets. This technique is called nesting. Why would anyone want to do this? To overcome the basic limitation of frames—that they must be either horizontal or vertical. By nesting one frameset within another frameset, you can set one to vertical and the other to horizontal, resulting in a much more complex and useful screen layout. The skeleton structure of a nested frameset page shows that the internal frameset is equivalent to a regular frame: The genealogy page in the preceding example uses a simple pair of horizontal frames. That kind of setup maximizes the screen area that the main Web page has to sprawl out in, but it also means that frames aren’t being used to their full advantage. All the links for the site will have to be contained within the Web page itself, which also puts constraints on the layout, content, and functionality of that page. You could solve the problem by putting a set of links to other pages in the site into the top frame, but the tradeoff is that you must replace the logo graphic with the link set. If a second frameset is added, however, the top frame can remain as it is and site links can be placed to the side of the main page, as shown in Figure 12-10. This not only frees up the main page for any other type of content you want to add to it, but keeps the link listing constantly available as other Web pages are loaded into the main frame. Figure 12-10: A second frameset enables you to include more content. www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames This is the HTML code that achieves the modification: The containing frameset is still the same as before—it divides the screen into two rows with the top row containing the graphic. The content of the bottom row, however, is no longer a frame but another frameset. That frameset divides the bottom row into two columns. The left column is set to a width of 110 pixels, and the right column uses relative sizing. The left column contains a new Web page that has the links to the rest of the site. The right column contains the same page that used to take up the entire bottom row. Adding NOFRAMES content The NOFRAMES element has only one purpose—to provide some visible content for users of antique Web browsers or alternative browsing tools that don’t display framesets (the text-to-speech browsers used by blind people, for example). In this respect, it is much like supplying alternative text for images (see Chapter 8). Nobody knows how many people are using browsers that can’t handle frames, so you should always make some sort of provision for that possibility. The NOFRAMES element is not, as you might expect, contained within the FRAMESET element. Because it’s not a part of the frame scenario, but an alternative, it goes outside. The following HTML code shows where it fits: Within the NOFRAMES element, you enter everything you want to be displayed in case a browser that isn’t capable of showing frames is used to view the frameset page. That content depends upon your own site’s intentions, audience, and capacity. www.it-ebooks.info 257 P1: NEC WY040-12 WY040/Crowder 258 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts Many framed sites use a blunt and simple approach, as you see in this example: However it is better to provide a link to a version that doesn’t use frames: The contents of the NOFRAMES element can be as complex as any Web page. We’ll explore this in the following project. Setting Targets for Your Links It is possible that you could set up a framed site in which none of the contents of any of the frames ever changes, resulting in a simple, static layout that’s no different from a normal Web page except for the fact that it’s composed of multiple HTML files. However, people generally use frames so that their content can be altered. Targeting custom-named frames Generally, when someone clicks a link on a Web page, the new Web page simply replaces the old one on his or her screen. Frames are different, however. Different frames can be specified as the target for the link—the frame in which the link will open. Links between frames have a variety of different behaviors depending on what target is set for the link (see Chapter 4 for more information on creating links). The syntax for setting a link’s target is as follows: When you click a link that’s on a framed Web page and no target is specified, the linked Web page opens in the same frame that the link was in, replacing the linking page. If you specify another frame as the target, then the linked page opens in the specified target frame instead, replacing whatever is in that frame but leaving the linking page unaffected. For example, let’s say you have two frames, one of which is named frameone and the other frametwo, and you have a links page in frameone. If you used the following code in a link in frameone, then the linked page would open in frameone: Over The Rainbow www.it-ebooks.info P1: NEC WY040-12 WY040/Crowder WY040-Crowder.cls August 18, 2004 22:5 Chapter 12 ✦ Organizing Your Site with Frames In this case, the Web page named somewhere.html would be loaded over the links page in frameone, and there would be no effect at all on frametwo. However, if you gave an additional instruction by adding the target attribute to the code and specifying frametwo as the target, the results would be different: Over The Rainbow This would cause the Web page named somewhere.html to open in frametwo, leaving the links page in frameone intact. If you use a target name that doesn’t exist, the linked page opens in a new browser window. Note The following is the HTML code for the links page that was used in the navigation frame for the genealogy page in the preceding section: The main display area in that site’s frameset was a frame named mainpage, and each of the links in the navigation page is set to have that frame as its target. Without that target specification, the linked pages would all open within the narrow navigation frame. Using reserved frame names Each reserved frame name serves a special purpose. Table 12-2 explains what each of them does: Caution HTML is not case-sensitive, which means that FRAMENAME and framename are the same to it. However, that’s not the case with the reserved frame names; they must be all lowercase all the time. Three of the reserved frame names—_self, _top, and _blank—are clear and unambiguous. The _parent name, however, is a source of confusion to most Web designers. Most of the time, it acts just like _top. Only when one frameset is contained within another one does the difference become apparent. www.it-ebooks.info 259 P1: NEC WY040-12 WY040/Crowder 260 WY040-Crowder.cls August 18, 2004 22:5 Part III ✦ Designing Web Layouts Table 12-2 Reserved Frame Name Functions Frame Name Function _self Opens the linked Web page in the frame that holds the link. This is the same as the default linking behavior if no target is specified. _top Opens the linked Web page in the full browser window, obliterating all the frames. _blank Opens the linked Web page in a new instance of the Web browser. parent Opens the linked Web page in the next highest frame or window. We’re referring here not to the practice of creating nested frames in your HTML code, but to using a second frameset page as the contents of one of your frames. It doesn’t matter if it got there as the frame’s original content because you put it there using the FRAME element’s src attribute, or if a link from the original content loaded the second frameset into the frame. If a link in any of the frames in the second frameset has its target set to _parent, then the linked page appears in the frame that holds the second frameset, overwriting the second frameset but leaving all the frames in the first frameset intact. Customizing Frame Borders and Margins The borders that separate one frame from another are usually left alone. However, you do have several options you may want to pursue, such as changing the width or color of the border. The amount of space around the contents of frames is also open to manipulation. Setting border width The width of the borders between frames (in pixels) is set with the border attribute. Setting the value of border to 0 (zero) removes all frame borders, as shown in Figure 12-11. Any setting from 1 on up changes the width and is a matter of personal preference and should be determined by the needs of a particular Web site’s design. CrossReference You can create the same effect without using frames. To see how to use tables to create a layout of this sort, see Chapter 11. If we were to change the genealogy Web site so that it had borders that were 30 pixels wide, for example, it would pretty much ruin its appearance. The following change in the first FRAMESET element is all that’s required to mess up the site, as shown in Figure 12-12: |
