• home
  • forum
  • my
  • kt
  • download
  • Frames

    Author: 2007-08-09 11:23:34 From:

    Frames don't just divvy up screen space like the tables you learned about in the previous tutorialframes actually present multiple Web pages simultaneously within one browser window. Using frames, you can divide a browser screen into sections and display a different Web page within each one. Each separate Web page appears within its own border, or frame. An additional page, called a frameset, serves as the host for all these pages. The frameset tells the browser how to apportion screen space and which pages to display in each section.
    While frames can create interesting effects, they also come with serious disadvantages, all of which you'll learn about in the next section. If you decide to use frames, read on to learn how to create and manage them. Or check out the alternatives mentioned at the end of this tutorial.

    In your travels around the Web, you have probably seen pages that present a mix of never-changing parts (typically a menu on the side or top of the page) and a main section that changes depending on the link you've clicked. Welcome to the world of frames.

    Frames don't just divvy up screen space like the tables you learned about in the previous tutorialframes actually present multiple Web pages simultaneously within one browser window. Using frames, you can divide a browser screen into sections and display a different Web page within each one. Each separate Web page appears within its own border, or frame. An additional page, called a frameset, serves as the host for all these pages. The frameset tells the browser how to apportion screen space and which pages to display in each section. A simple frames page is illustrated in Figure 6-1.

    While frames can create interesting effects, they also come with serious disadvantages, all of which you'll learn about in the next section. If you decide to use frames, read on to learn how to create and manage them. Or check out the alternatives mentioned at the end of this tutorial, on Section 6.5.1.

    While frames do offer an interesting way to divide a Web page, many Web designers hold their noses or shake their heads disapprovingly when looking at a site that uses frames. Some of their objections are aestheticakin to modern fashionistas who cringe at the big hair trends of previous decades. Other objections stem from frame-specific technical disadvantages, like the problems they create for search engines (more about that in a moment). And yet for some people, frames remain a helpful tool. What follows is a quick pros-and-cons tour so you can decide for yourself.

    Figure 6-1. This frames page displays three different HTML pages. As a viewer clicks links in the frame on the left, different pages display in the main window on the lower right. The banner at top and menu on the left never change.


    Some advantages of frames:

    • Frames save you from having to add a navigation menu to every page of your site. Using frames, you can save loads of time by creating the menu just once and placing its Web page in a frame.

    • With frames, you can feature a page from another site, but display it surrounded by your own banner and menu offerings. This way, visitors may not even know they've left your site.

    • With only one part of the browser window updating, readers don't need to reorient themselves, as they might on a site where every page changes. Using frames, menus and border elements remain constant.

    Unfortunately, the drawbacks that come with using frames seem to outweigh the advantages. Many Web design veterans who have used frames end up redesigning out of frustration. Common causes of disenchantment include:

    • Not all browsers can display sites that use frames. Visitors instead see an empty page or a message declaring that the browser they're using doesn't support frames. (These browsers are a tiny minority and include versions of Internet Explorer before 3.0 and pre-2.0 Netscape. Others are Mosaic 1.0 and Lynx, which displays framed pages as separate documents. And Opera lets you decide whether or not to view frames.)

    • Many search engines have a hard time indexing (cataloging) content on sites that use frames. The reason? Each frame is actually a separate HTML file, and some search engines will mistakenly index only one framesay, the one containing a bannerand ignore the content in the other frames. When people use the search site, their results would include only links to your banner frame and not to the important stuff elsewhere on your site.

    • Web surfers won't be able to bookmark certain pages in your site. Say a reader has been merrily clicking away and is viewing deeply buried content in a frame when she bookmarks (or adds a favorite page to) her browser. The problem is, the browser won't necessarily save what she's looking at. As far as the browser is concerned, she hasn't left the frameset page (the page coordinating all the other, individually framed pages). So, when she clicks her bookmark later, she'll see the initial frameset page rather than the one she was looking at when she saved the bookmark.

    • Printing frames is difficult, as most browsers can't tell which framed pages to print. If you've ever tried to print a page and ended up with only a picture of navigation buttons, frames were probably to blame.

    If you're still game, or if you're just curious to learn more about how your Web forefathers and mothers designed many of their sites, read on.

    When you build a site that uses frames, you're actually creating multiple Web pages for each browser window your viewers are looking at. Coordinating these pages can get confusing, but FrontPage helps by letting you create and edit framed pages directly from within the frameset. The program also lets you insert an alternative page for visitors whose browsers don't support frames.

    6.2.1. Creating Frames

    FrontPage simplifies the process of creating frames with its frames pages templates. These are canned frameset pages, each with a different layout, that include buttons and other aids to help you fill the frameset with pages.

    To get started using one of these templates, select File New to display the New task pane. Within the task pane, click "More page templates" and then click the Frames tab. Here, you'll find FrontPage's templates for frames. To preview and read a quick summary about each template, click each template. Then pick the frames template you want to use and click OK. FrontPage creates the empty frameset, as shown in Figure 6-2.

    To help you fill the empty frames, FrontPage adds two buttons to each frame. You use the buttons to select or create the first page viewers will see when they come to your site.

    Figure 6-2. FrontPage's Banner and Contents frames template creates this empty frameset. When you select pages to load into each of these three frames, you'll see them here in Design view. At that point, you'll be editing four separate HTML documents all at once within the same window.


    • Set Initial Page. Click this button if you have an existing Web page you'd like to load into the frame.


      Note: Don't let the terminology here confuse you. "Initial Page" means the page that initially loads in the frame. But if you haven't created it yet, you can click New Page (which will then become the initial page).
    • New Page. Click this button to create a new Web page to load into the frame. FrontPage creates a new blank page and displays it within the frame, so you can edit it. Later, when you save the frameset, FrontPage prompts you to save any new pages.

    That's all you need to do to get started creating a group of pages that use frames. Section 6.2.3.4 shows you how to add more pages to a frameset, but first you need to save your new frames.

    6.2.2. Saving the New Frameset

    Once you're done creating your new framed pages, you save them by first saving the frameset and then saving any new pages that you added. With the frameset open in Design view, save it as you would any other Web page (Section 1.4).

    When you save the frameset, FrontPage first prompts you to save each new page you've created, one by one, and provides a diagram on the right side of the Save As dialog box, as shown in Figure 6-3, to help you keep track of what you're saving.

    Figure 6-3. When you save new frames pages, FrontPage shows you which page you're saving, by highlighting it within the diagram on the right side of the dialog box. The frameset page is last but not least.


    Pick a name for each new page and enter it into the File Name box. Since you may be looking at more than one dialog box (one for each new page, plus one for the frameset), make sure you know which file you're naming. Most people find that naming the frameset Index1.htm or default.htm works well, since it's usually the first page of their site. (See Section 10.5.1 for details on naming a site's home page.)

    6.2.3. Modifying Frames

    Frames are just like any other design element on your site; if you don't like the way they look, FrontPage gives you lots of ways to change their appearance. For example, if the proportions of your frames look a little off, you can change the way they're laid out by using the Frame Properties dialog box (which is what you'll use to make most frame-related modifications). To get started making changes, first select a frame, then right-click it and select Frame Properties (or select Frames Frame Properties).

    6.2.3.1 Adjusting frame dimensions

    The quickest way to modify the size of an individual frame is to drag and reposition its border. However, the Frame Properties dialog box gives you some better options. The Frame size boxes let you set precise dimensions by typing them in. Frames can use both percent and pixel values, like tables (Section 5.2.2).

    You can also use relative sizing, which lets you control the size of a group of elements, by assigning dimensions that are proportional to each individual element.

    For example, a banner at the top of a page might have a relative height of 1, while a vertical menu below it has a relative height of 4. This means that the banner takes up one-fifth of the vertical window space while the menu takes up four-fifths.

    The best bet? Stick with percentage or relative dimensions. This way you know your page will look more or less the way you intendedno matter what a viewer's browser size or screen resolution.

    6.2.3.2 Frame scroll bars: To show or not to show

    On some pages, like the one shown in Figure 6-1, scroll bars can mar and clutter up an otherwise lovely composition. To get rid of these unsightly controls, adjust the Show Scrollbars setting. You can choose to show them Always, If Needed, or Never. Before you make this change in Frame Properties, take a good look at the frame in question. If a viewer will definitely need to scroll, hiding the scroll bar is cruel and counterproductive, so weigh your priorities. You also might want to edit the dimensions of your frame (explained in the previous section) so that scroll bars aren't necessary.

    He that taketh can also giveth. Bestow the power of frame resizing on your readers, enabling them to solve the problem themselves by moving frame borders around within their browser. To do so, in Frame Properties, turn on the "Resizable in Browser" checkbox.

    6.2.3.3 Hiding frame borders

    Even without scroll bars, frame borders look clunky and obvious. If you want to elevate your game and do like the professionals do, hide your frame borders (see Figure 6-4).

    Figure 6-4. Compare this page to its border-showing twin in Figure 6-1. Hiding borders makes a page look sleek, unified, and more professional.



    Tip: To change the amount of space between a frame border and its content, use the margin settings in the Frame Properties dialog box.


    With the frameset open, select Frames Frame Properties and click Frames Page on the lower right. Turn off the Show Borders checkbox in the Frames tab.

    You can set the width of your borders on the Frames tab, too. The Frame Spacing field controls border thickness in pixels. This setting applies to visible and invisible borders. If you've hidden your borders, frames are still separated by the number of pixels you enter here.

    6.2.3.4 Splitting frames

    If you need to add a frame to a frameset, you have to split an existing frame in two to make room for it. To do so, first click in the frame. Then select Frames Split Frame. Specify whether you want to split the frame into rows or columns, and click OK. A new blank frame appears.

    6.2.4. Creating a No Frames Page

    Not all browsers are on good speaking terms with sites that use frames. The typical response from browsers that can't handle frames is to show a big blank page. Fortunately, FrontPage is capable of helping you reach across this browser divide. Take a look at the Views buttons on the lower-left corner of the document window. Just when you were getting bored with your choices, a new option appears there called No Frames. You can see it in Figure 6-2. Click the No Frames button, and a terse message appears: "This page uses frames, but your browser doesn't support them." This message, which is just an alternate view of your frameset, will appear in browsers that don't display frames. If you'd like to let these browser owners down a bit easier, reword the message. If you don't want to lose them, create an alternate site that doesn't use frames, enter a message about that alternate site here, and include a link to it.

    Okay, so you know how to create a frameset and change its appearance. What about the pages your frameset displays? You'll probably want to edit these initial pages you created earlier in this tutorial and you might also want to add a few new pages. This section shows you how.

    6.3.1. Editing Pages

    To edit any page that's already part of a frameset, just open up the frameset page and click the page you want to edit. You can also open individual framed pages on their own, as you would any other Web page, and edit them within the full document window.

    6.3.2. Creating Additional Pages

    Say you created a frameset that contains three frames. Eventually, you'll want to display more pages than just those initial three pages. For example, the frameset in Figure 6-1 features a large window on the lower right. As a viewer clicks menu items in the frame on the left side of the screen, the large frame on the lower right displays different pages. So if you were building this site, you'd want to create new pages for each menu link on the left-side frame.

    Fortunately, adding new pages to a site that uses frames is easy. Just create additional pages the same way you'd create any other page (Section 1.2.1). The next section shows you how to create the links between existing pages and any new pages you've created.

    POWER USERS' CLINIC
    Using Save As to Add Pages

    If you really want to see how this page appears in the frameset as you create it, and you like to live on the edge, you can use a slightly riskier method: FrontPage's Save As feature. This approach lets you edit directly through the frameset while you're creating your page. All you'll do is replace the content of an existing page (the one currently open in the frameset) and save it as a new page.

    To do this, select all the content within the desired frame (Press Ctrl+A or select Edit Select All) and delete it. (Be careful not to click Save or Save Page at any point during this procedure.)

    Enter content for the new page and, when you're done, select Frames Save Page As. Enter a name for the new page and save the file in the appropriate folder.

    A hyperlink within a frame is more complicated than the usual plain vanilla hyperlinks you first learned about in Tutorial 1. A link that appears within a frameset must tell the browser not only what page to open, but where to open it. Or, as FrontPage would put it, you don't just select the hyperlink destination, you also identify the target.

    6.4.1. Setting Targets for Frames

    The target attribute of a hyperlink specifies what frame the new page will open in. Open up the Hyperlink Properties dialog box (by clicking the Hyperlink button on the Standard toolbar) to edit the target.

    Within the Hyperlink Properties dialog box, click Target Frame. The Target Frame dialog box appears, sporting a new feature called "Current frames page" (see Figure 6-5).

    Depending on what template you've chosen, FrontPage makes an intelligent guess at what your target frame should be (based on the template's automatic settings). But you can override this choice and select any one of your frames to serve as the hyperlink's target. Just click the diagram to make a selection or enter the frame name in the Target Setting field. If you select Whole Page from the list on the upper right, then the new page will take up the entire browser window, replacing your frameset completely. The regular hyperlink target selections also still appear here, and you're free to choose any of them instead. For example, if you wanted the hyperlink to launch a new browser window, the Target Frame dialog box gives you that option (see Tutorial 3 for a refresher on hyperlinks).

    Figure 6-5. The Target Frame dialog box displays an interactive diagram of your frameset. Click the frame in which you want the linked page to load.


    Perhaps you've grown fond of the idea of guiding your visitors with the constant, reassuring presence of frames. Maybe you're already confidently envisioning one page, majestically sitting atop every page on your site, while the other pages below it scurry about, making brief appearances as they're summoned by link clicks. And then you snap out of it, alarmed at the thought of having to deal with so many different frames. If that sounds familiar, you may want to consider using a kind of pseudo-frame solution: inline frames.

    An inline frame allows you to insert a frame within a regular Web page. Doing so is kind of like placing a window in your Web page that lets viewers see and scroll through the content of another pagethe one you place in the frame.

    The biggest problem with inline frames is that, like regular frames, not all browsers support them. So be sure to create a No Frames page (Section 6.2.3.3) for inline frames as well.

    6.5.1. Adding an Inline Frame

    You can add an inline frame to any Web page. To do so, place your cursor where you want the frame to appear and select Insert Inline Frame. Select (or create) pages to appear in the frame, just as you would for any frame: click the Set Initial Page button to select an existing page, or click the New Page button to create a new one.

    6.5.2. Modifying an Inline Frame

    You can enlarge or reduce the size of your inline frame by selecting it, then dragging one of its small square handles until it appears just as you want it.

    Use the Inline Frames Properties box to modify other inline frame settings (like your scroll bar preference or the alternate text for browsers that don't support frames). To open it, move your cursor over an edge of the frame. When your cursor turns into a regular white pointer, double-click. Or click once to select the frame, then right-click and select Inline Frame Properties. The choices in this dialog box work just like the ones you learned about earlier in this tutorial on Section 6.2.3. One option you have here that you don't get in other Frame Properties dialog boxes is Alignment. Use this to set alignmentleft, right, or centerof the frame within your page. Other alignment choices let you line up the frame with a line of text just like you can do with a picture (as explained on Section 4.3.2.4).

    Maintaining navigation bars and menus on your site often turns into a full-time job. That's why so many people were originally attracted to frames in the first place. But as their charm (the frames, not the people) wore off, Web designers started looking for other options. Fortunately, FrontPage has got you covered and is ready to help you out with two tools that you'll learn about later in this book:

    • FrontPage Link Bars. Let FrontPage do your work. Link bars are site menus and navigation links that FrontPage creates and updates for you. As you'll see when you read more about site navigation in Tutorial 10 (Section 10.4.1), you have to set up a navigation structure for link bars to function properly, but after that, FrontPage does all the work.

    • Included Content. This special feature lets you take content from one page and include it within another or many other pages. Because you edit this content only on its original page, included content is a great way to create one navigation menu that you can insert on many pages. Make a change once on the original page, and FrontPage automatically updates all other pages that "include" this menu content. Section 11.3 shows you all the details.

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Basics (8)

    New

    Hot