Working Smart with Frames

[ LiB ]

So much for the basics. Now for the fun stuff. What can you do to really take advantage of frames, and how can Dreamweaver help you? The following sections discuss some common strategies for dealing with frame usability and accessibility issues, as well as some handy uses for frames that you might not have thought of.

Making Your Frames Accessible

Usability experts might argue about the dangers and advantages of frames, but frames offer no more accessibility issues than any other navigation or layout method.

According to Section 508, § 1194.22(i):

Frames shall be titled with text that facilitates identification and navigation.

What does this mean in practical terms? Screen readers and other text-based browsers present a frame-based web page by listing the titles or names of the frames available, and allowing users to navigate between the frames. So it's crucial to supply meaningful information here. How do you do this?

For each frame tag in the frameset document, do the following:

Use the name attribute to identify the frame's purpose.
Use the title attribute to identify the frame's purpose (this can be the same as the name attribute or a slightly longer, more descriptive version of it).

Within each HTML document that will appear in a frame, do this:

Use the title tag to describe the contents of this page.
Where appropriate, start the body content with a descriptive heading.

Using these guidelines, the basic code for an accessible frameset document might look like this:

 <frameset cols="80,*">      <frame src="navbar.htm" name="navigationBar" title=  "Navigation Bar">      <frame src="main.htm" name="mainContent" name="Main  Content"> </frameset>

The relevant code for one of the framed documents (main.htm, for instance), might look like this:

 <html> <head>  <title>Walt's Widget World: Overview of    Widgetizers</title>  </head> <body>  <h1>Overview of Widgetizers</h1>  [etc] </body> </html>

Making Frames Accessible in Dreamweaver

Dreamweaver's accessibility tools make it easy to build accessible frame-sets every time. But you do have to remember to use them!

Before the Fact: Set Accessibility Options

Before you create your frameset, make sure you have accessibility options for Frames turned on (Edit > Preferences/Accessibility). When this is enabled, the next time you choose a Frame object from the Insert bar or use the New Document dialog box to create a frameset, or choose one of the Insert > HTML > Framesets commands to insert a prebuilt frameset, you'll be presented with a dialog box letting you assign a title attribute for each frame in the frameset (see Figure 10.6). Note that this dialog box assigns the title attribute for the frame tag. This is not the same as assigning a page title for documents within the frameset. Note also that you can't alter the frame names within this dialog boxyou can change only the titles.

Figure 10.6. The Frame Tag Accessibility Attributes dialog box in action.

If you create your frames manually (using one of the Modify > Frameset > Split commands), this dialog box won't appear.

After the Fact: Tweak Existing Framesets

After you've created your framesetwhether you've used Dreamweaver frame objects or defined your frameset manuallyuse the Property Inspector, the Selection Inspector, or the Edit Tag command to change properties as needed.

Use the name attribute wisely. Names such as leftFrame or bottomFrame might be fine and dandy for use in link targets, as in this code:
```
 <a href="main.htm" target="topFrame"> 
```
But names like this don't do anything to describe the frame's purpose in the layout, so they aren't very accessible. Instead, use names such as navigationBar, titleBanner , or mainContent . When you let Dreamweaver create frames for you, the default frame names aren't very descriptive. After all, Dreamweaver doesn't know which frame you'll be using as the navigation bar or title banner. So, after Dreamweaver has built your frameset, take a few moments to rename the frames. You can use the Property Inspector, the Selection Inspector, or the Edit Tag command for this.
Supply titles If you didn't have accessibility options for frames enabled before you started, or if you created your frameset manually, your frames still need titles. To do this, use the Tag Selector to select a frame tag and find the title attribute in the Attributes tab of the Tag Inspector (CSS/Accessibility category). You can also switch to Code view and right-click a frame tag, and choose Edit Tag to open the Edit Tag dialog box (Style Sheet/Accessibility category). Figure 10.7 shows these two methods of assigning frame titles.

Figure 10.7. Setting a frame title in the Edit Tag dialog box and Tag Inspector.
Set page titles and headings (where appropriate) Do this in the individual documents that will appear in the frameset. All pages should have their title tag set, using Modify > Page Properties or the Page Title field in the Document toolbar. Including a heading in the text is more of a suggested guideline than a required rule, and it really applies only to content page. (When is the last time you saw a frameset in which the navigation frame started with a big h1 -level heading that said Navigation?)

Making Your Frames Searchable

One of the oldest arguments against using frames is that search engines can't properly search them. Frameset documents have no body tag, and search engines don't read frame tags. So, any text or links contained in your framed pages will never be found. If you want anybody to find your website, that's a bit of a deal-breaker! But it isn't entirely accurate. You can easily make your framesets searchable by utilizing the noframes tag, which provides body content for any device that can't read frame tags. The code looks like this:

 <frameset cols="80,*">    <frame src="navbar.html" name="navFrame">    <frame src="intro.html" name="mainFrame"> </frameset>  <noframes>   <body>   [searchable body content goes here]   </body>  </noframes>

When frames first came on the scene and not all browsers supported them, web authors often put messages in the noframes content along the lines of "Your browser doesn't support frames, so you can't see our website." These days, smart designers use noframes to target search engines.

Working with noframes Content in Dreamweaver

Dreamweaver automatically adds a noframes tag to every frameset it buildsyou just need to take advantage of it. Access noframes content this way:

Open a frameset document and make sure you're in Design view.
Choose Modify > Frameset > Edit NoFrames Content.

The Document window changes to display the body section within the noframes tag, and you're ready to use any Dreamweaver tools to construct alternate page content for the frame-less (see Figure 10.8). The Tag Selector displays the noframes tag.

Figure 10.8. Editing noframes content in Design view.

When you're done working on your noframes content, choose Modify > Frameset > Edit NoFrames Content again to toggle back into regular frame-viewing mode.

You can also switch to noframes content if you're working in Code view by putting the insertion point within the noframes tag and then switching back to Design view.

What to Include in noframes Content

Search engines look through keywords and descriptions, page titles, and body content, and they follow links from the main page to all other pages in your site. Keywords, descriptions, and page titles are stored in the head section of the HTML document, so they work the same in frameset documents as they do in any document. But you want to put body content and links in your noframes area for the search engines to find. Text content is the most important because search engines don't look at images, but they do pay attention to image filenames and alt text.

To quickly get all relevant content from your framed pages into the noframes area, you can do this:

In regular (frames) view, click inside one of your framed pages and choose Edit > Copy.
Choose Modify > Frameset > Edit NoFrames Content to switch to noframes view.
Edit > Paste.
Switch back to regular view and repeat this procedure for all frames in your frameset. Remember, as long as you have included navigation links in your noframes content, the search engine will be able to navigate through the rest of your site from here.

For more on keywords, descriptions, and how to target search engines, see the section "Optimizing for Search Engines" in Chapter 7, "Utilizing Head Content."

Navigating Within Frames

As long as you're careful to target your links properly, setting up basic navigation within framesets is easy. But you can employ several strategies to dress up your framesets beyond the basicsand Dreamweaver, as always, can help you.

Changing Multiple Frames at Once

The user clicks a link in the navigation frame and a new page appears in the content frame. But what if you want that one user click to load a new page in the content frame and the banner frame? Sometimes you just need to change two frames at once, and the regular old anchor tag just isn't up to it. You need a little JavaScript to help out. The Dreamweaver Go To URL behavior lets you do it quickly and easily. Do it this way:

Open a frameset document with at least three frames (one to hold the navigation and two to be changed). Look at the Frames panel to remind yourself what the three frames are named. You'll need this information shortly.
Select the graphic or text that will become the link.
In the Property Inspector's Link field, enter javascript:; to create a null link (a link that goes nowhere).
With the link still selected, open the Behaviors panel (Window > Behaviors) and click the + to assign the Go to URL behavior.
When the Go to URL dialog box appears, all frames in your document will be listed. Select the first frame that you want to change (this is why it's important that you know what your frame names are) and click the Browse button to select the new page that should appear in that frame. Note that an asterisk now appears next to that frame name in the dialog box, indicating that you've set a new URL to appear there.
Do the same for the second frame that you want to change. Select it in the list and click Browse to set the link. If you want to change more than just two frames, keep selecting frame names and setting links.
When you're done, click OK to close the dialog box. That's it!

After you've inserted this behavior, if you examine your document in Code view, you'll see that Dreamweaver has inserted an MM_goToURL() function, which resets the page in each specified frame by changing that frame's location.

Navigating to Specific Pages Within Framesets

One of the usability issues with frame-based websites is that visitors can't bookmark specific pages within a frameset; they can bookmark only the frameset itself. This can be very frustrating, especially in large, information-rich sites where visitors want to head straight for certain content pages. Once again, it's JavaScript and the location object to the rescue, although for this you have no handy Dreamweaver behavior to fall back on.

How It Works

When you're linking to a specific page in a frameset, you essentially want the link to say, "Load index.html (the frameset page) and then also put catalog.html (the desired content page) in the content frame." You can do this by adding a URL parameter to the link, like this:

 <a href="index.html?page=content.html">

The URL parameter is everything that appears after the ? in the path . Of course, the browser doesn't know what page=content.html means. So, you then have to add some JavaScript to the framework page telling the browser that whatever page is named in the URL parameter should appear in the content frame.

Setting up the frameset document to parse URL parameters is the hardest part of the procedure. It involves creating the JavaScript that loads different content pages as needed. This JavaScript must be added as a function in the head section and a function call attached to the body tag. In Dreamweaver, do it this way:

Open the frameset document.
Examine the Frames panel to see what your frames are named. In particular, note the name of the frame that all content pages will be loaded into.
Select the frameset (make sure it's showing as bold in the Tag Selector at the bottom of the Document window).
Choose View > Head Content so that the gray head content area appears at the top of the Design view portion of the Document window. Click inside this area to activate it so Dreamweaver knows that you want to insert your first batch of code here.
In the HTML Insert bar, choose the Script object. When the Script dialog box opens, make sure the language is set to JavaScript and enter the following code in the Content field (see Figure 10.9):

Figure 10.9. Inserting a function that will use a URL parameter to determine frame content.
```
  
```
This code collects any URL parameters in a variable called myParameters . It then figures out what filename appears after the equals sign in the parameter, and it sets the location of a frame called mainFrame to that filename. In your code, you'll want to substitute the name of your content frame for mainFrame before proceeding.

For more on the Script object, see the section "Writing JavaScript in Dreamweaver" in Chapter 27, "Writing Code in Dreamweaver."

When you've checked your code and made sure that the correct frame name is in place, click OK to close the dialog box. A new script icon appears in the head content area of the document window.
This function must execute when the frameset is loaded, which means that the frameset tag needs to call it onLoad . With frameset selected, choose Modify > Edit Tag. When the Edit Tag dialog box opens, go to the Events > onLoad category. Select the onLoad event and enter the following in the content area (see Figure 10.10):

Figure 10.10. Inserting the function call that will execute the loadPage() function.
```
 loadPage() 
```
When you're done, click OK to close the Edit Tag dialog box.

When this code is in place, all you need to do is access it from any page that links to the frameset. Let's say that your main frameset page is called index.html, and you want it to load with a page called catalog.html in the content frame. The URL that appears in the browser's address field needs to say something like this:

 http://mydomain.com/index.html?page=catalog.html

You can try this out by previewing your frameset page in the browser and manually typing in the question mark and URL parameter. (If the specified page doesn't automatically load, double-check the JavaScript code that you entered in your script against the code listed here.)

To link to the frameset from another page in your site, do this:

In Dreamweaver, open the page that will link to your frameset. Select the text or graphic that should link to the desired page.
In the Property Inspector, click the Browse button that appears next to the Link field. Browse to your frameset document.
Before closing the Select File dialog box, click the Parameters button. Another dialog box opens. Enter the page for the parameter name, and enter the name of the content page as its value (see Figure 10.11).

Figure 10.11. Using the Parameters dialog box to assign a URL parameter for frame navigation.
Click OK to close the Parameters dialog box, and choose to close the main dialog box. In the Property Inspector, the Link field should now contain the URL and its parameters, separated by a question mark.

Note that you don't have to browse to create your URL and parameters if you don't want to. If you're comfortable typing things in by hand and understand the rules of URL parameters, you can just type into the Link field. (The rules are these: No spaces around the question mark or equals sign, and no quotation marks around the value.)

Also note that all of the previous samples assume that all files are in the same folder, although this isn't always the case. The URL parameter must contain an absolute URL or a URL relative to the frameset document. Dreamweaver doesn't help you figure that out. If your catalog page is in a subfolder called departments, for instance, the finished link will look like this:

 index.html?page=departments/catalog.html

Make It a Snippet!

If you use frames with any regularity, you might want to save the loadPage() function as a snippet for future insertion. Remember, though, that the function call must also be inserted every time this function is used, and the snippet will insert only the main function. You'll have to add the function call manually. You can do this in the Behaviors panel like this:

In the Tag Selector, select the body tag.
In the Behaviors panel, click the two-column display icon so all events display.
Find the onLoad event. In the column next to it, type loadPage() . Figure 10.12 shows this happening.

Figure 10.12. Using the Behaviors panel to add the event handler for the loadPage() function.

What About the Exchange?

As of this writing, no third-party extension is available on the Macromedia Exchange for direct frame navigation. New extensions are being posted all the time, however, so keep checking!

Allowing Visitors to Bookmark Pages

When you have the loadPage() script set up in your frameset document, it's easy to make sure that all pages are individually bookmarkable. Every time a user bookmarks a page, the browser bookmarks whatever is appearing in its address field. You just need to make sure that all internal navigation in your site uses URL parameters so that the address field always contains the framework page and its page parameter.

Keeping Pages in Frames

One of the big worries for authors of frame-based websites is this: What happens if users accidentally stumble on one of your framed pages, naked and without its parent frameset? This can easily happen if, for instance, a search engine finds one of your content pages and sends the user there. If your page contains no indication of what website it belongs in and (even more important) has no way of navigating back to the parent website, this user will never find you! Your content page will be an orphan in cyberspace . There are various strategies for heading off this disaster at the pass, ranging from automatic scripted solutions to simple navigation additions. The frame-wranglers out there refer to this as frame jamming or frame stuffing .

Quick and Easy: Navigation Footer

You can eliminate the orphan frame problem simply and quickly by always including navigation and identification somewhere in every framed page. An unobtrusive little footer like that shown in Figure 10.13, for instance, will ensure that any visitor to this page will know where the page belongs and how to get there. No scripting or other fanciness is required.

Figure 10.13. Additional navigation and identification in the footer of a framed page guarantees that this page will never be a dead end for visitors.

Quick Navigation Footers with Snippets

You can design your navigation any way you like, but if you just want to get it done fast, you might check out the snippets that ship with Dreamweaver. In the Snippets panel (Window > Snippets), check out the Navigation/Horizontal folder. The sample footer shown in Figure 10.13 was built in less than five minutes from the Pipe as Separator snippet, with a little modification.

Make Your Footer into a Library Item

Presumably, you're using framesets because you like their efficiency. After you've created your navigation footer, turn it into a Dreamweaver library item so you can easily drag and drop it into many pages and update it efficiently from the library.

See Chapter 27, "Writing Code in Dreamweaver," for more on snippets, and Chapter 21, "Building Dynamic Sites with Dreamweaver," for more on library items.

Add Some Scripting: Conditional Footer Information

With just a little bit of extra effort, you can streamline your framed pages by making the navigation/identification described in the previous section conditional so that it appears only if the page is being viewed without its parent frameset. The coding is slightly tricky, but it may be worth the effort for youand, as usual, Dreamweaver can provide help along the way.

Here are the basic steps:

Open a page that will normally appear in a frameset, and create the navigation/identification content that should appear if the page isn't in its frameset.
Now for the tricky part. Select the content you just created and switch to Code view. The code must appear without any line breaks, and all single quotes or apostrophes must be "escaped" by typing a backward slash (\) in front of them. You need to edit the selected portion of your code to meet these requirements. You can do this manually or by using Edit > Find and Replace. This code won't work:
```
 <table> <tr> <td>Joe's Website</td> </tr> </table> 
```
But this code will:
```
 <table><tr><td>Joe\'s Website</td></tr></table> 
```
Now select your cleaned-up code and choose Edit > Cut.
Leave the insertion point where it is, and in the Insert bar, choose the Script object.
When the Script Insertion dialog box appears, make sure JavaScript is the language chosen in the drop-down menu. Type the following (no typos) into the Content field (see Figure 10.14):

Figure 10.14. Creating a Script object to display conditional footer information.
```
  
```
Place the cursor between the two single quotes and choose Edit > Paste. This should put your cleaned-up code in the content window.
Now place the cursor in the No Script content field and choose Edit > Paste again. (Why do this? For accessibility, any JavaScript that causes page content to displaysuch as this scriptshould have a no-script alternative. If the user's browser isn't capable of interpreting the JavaScript, it will display the navigation by default.)
Click OK to close the dialog box. In Code view, this portion of your page should now look something like this:
```
 <script language="JavaScript">  </script> <noscript>    <table><tr><td>Joe\'s Website</td></tr></table> </noscript> 
```
Pay attention to the color coding in the code! If all is well, all of the code that you pasted inside the JavaScript (not the code in the noscript tag) should appear in one color and style. If it doesn't, you missed a hard return or single quote in there somewhere.
When you return to Design view, the conditional content will appear only as a gold script icon. To edit this script in the future, select its icon and, in the Property Inspector, click the Edit button. The noscript content will appear as normal in Design view.

This bit of scripting probably wasn't much fun, but you can save yourself some work in the future by making it a snippet.

To create a snippet that contains all the code you just inserted, do this:

In Design view, select the script icon that represents your conditional content, and copy it (choose Edit > Copy).
Open the Snippets panel (Window > Snippets) and right-click the JavaScript snippet folder. Choose New Snippet from the contextual menu.
When the Snippet dialog box appears, the code that you just copied should already be in the Content field. Give your snippet a name and description. Set its type to Block (see Figure 10.15). When you're done, click OK to close the dialog box.

Figure 10.15. Turning the conditional navigation into a snippet.
The next time you want to insert this content into a page, just drag and drop this snippet from the Snippets panel to the appropriate place in your document.

You can also create a snippet that contains only the JavaScript shell so that you can add different conditional content in the future. Do it this way:

Open the Snippets panel (Window > Snippets) and right-click the JavaScript snippet folder. Choose New Snippet from the contextual menu.
When the Snippet dialog box opens, give your snippet a name and description. Set its type to Wrap (see Figure 10.16).

Figure 10.16. Creating a more flexible conditional content snippet.
In the Insert Before content field, type the following:
```
 <script language="JavaScript"> <!-- if (self == top) document.write(' 
```
Make sure there are no empty returns following this text.
In the Insert After content field, type the following:
```
 '); //--> </script> 
```
When you're done, click OK to close the dialog box.

The next time you want to insert any conditional navigation into a frameset, do this:

In Design view, create the navigation or other element that should appear only if the page is not in a frameset.
Switch to Code view. Remove all line breaks and insert a backslash (\) in front of all apostrophes and single quotes.
Select all of the cleaned-up code.
Open the Snippets panel, select your conditional content snippet, and click the Insert button at the bottom of the panel. This wraps the JavaScript coding around your content.

Visit the Exchange

If you want a little help with your conditional navigation, you might try the Write If Frameset object, available on the Macromedia Exchange. This object works much like the wrapped snippet described in the previous section. It has the limitation that any code you insert must be free of returns and double quotes. It also requires the frameset tag to have an id attribute.

Frame-Jamming Scripts

You also have the option of automating the entire process so that whenever a page loads without its parent frameset, it automatically reloads itself inside the frameset. It's done by means of an automatically executing JavaScript. Unfortunately, Dreamweaver won't automatically write this script for you. But you have several other options for getting the frame-jamming code inserted, including building on the loadPage() script defined in the previous section and using any of the jamming scripts available on the Exchange.

Do-It-Yourself Jamming with loadPage()

Do-it-yourself frame jamming requires that your frameset document be equipped with the loadPage() function and function call described in the previous section. If you don't have that code in place, take a few minutes to go through that section now.

When your frameset document is set up, each content page that you want automatically jammed back into the frameset needs to have some scripting added to its head section. Do it this way:

Open the content page that you want to jam.
Choose View > Head Content so that the head content area is showing, and click in that area to activate it.
In the Insert bar, choose the Script object. When the Script dialog box appears, make sure that the language drop-down menu is set to JavaScript, and enter the following code in the Content field:
```
  
```
Substitute the name of your frameset document and your content page, where indicated in bold. Can you see how this script changes the location object to a new URL? And how the URL includes parameters which will be used by the loadPage() command in the main frameset?
When you're finished, click OK to close the dialog box. The script appears as a script icon in the head content area.

You can save this piece of code as a snippet to save yourself the trouble of retyping it in the future. But you'll always have to tweak it to specify the page names you need.

Visit the Exchange: Frame-Jamming Extensions

Not interested in doing all of this coding yourself? The Macromedia Exchange lists several extensions that insert frame-jamming code similar to the code presented here. These include Find Parent Frameset (Subhash Robin), Frame Jammer (Hal Pawluk), and Frame Stuffer (Hal Pawluk).

Getting Out of Frames

Navigating into a frameset is only half of the frames navigation story. Sometimes you also need to get your pages out of frames. This can be done automatically, through frame-busting JavaScripts, or manually through targeted links.

Frame Busting

Frame busting generally deals with problems in other people's frame-sets rather than your own. Have you ever seen one of your web pages tucked inside somebody else's frameset? That happens when the frame-set author, either on purpose or by accident , links to your page without proper targeting (see Figure 10.17). Because putting someone else's web page in your frameset can suggest that the other site is somehow a subsidiary of yours, lawsuits have been fought over this bit of sloppy Internet etiquette.

Figure 10.17. The Macromedia web-site, absorbed into someone else's frameset.

A simple bit of JavaScript added to your web page can guarantee that it never appears inside a frameset. Unfortunately, Dreamweaver won't automatically write this script for you. But you have several other options for getting the frame-busting code inserted.

Do-It-Yourself Frame Buster

The code for busting frames isn't complicated, so if you don't mind a modicum of typing, you can easily build a script and reuse it. Do it this way:

Open an HTML document where you want the frame-busting code inserted.
Choose View > Head Content so that the gray strip of head content icons appears at the top of the Document window. Click inside the head content bar to activate it.
In the HTML Insert bar, from the Script object group , choose the Script object.
When the Script Insertion dialog box appears, make sure JavaScript is the language chosen in the drop-down menu, and type the following into the Content field (see Figure 10.18):

Figure 10.18. Creating a script object containing frame-busting code.
```
  
```
Click OK to close the dialog box. The script appears as an icon in the head content area of the Document window. Your page is now busted!
To edit this script in the future, select its icon in the head content area and, in the Property Inspector, click the Edit button.

When you've done all this, you can save yourself the trouble of doing it again by saving the code as a snippet.

Visit the Exchange: Frame-Busting Extensions

If you'd rather take advantage of other people's busting code than write your own, the Dreamweaver Exchange lists several third-party extensions to insert frame-busting scripts. These include the Frame Buster (Rabi Sunder Raj) and Break Out Of Frames (Thierry Koblentz) objects, and the Bust Frames (Triptych) behavior.

Print-Friendly Pages

Another usability issue that plagues frame-based websites is the difficulty users have printing individual frames. Nothing is more frustrating to a user trying to print your content than to end up wasting printer ink and paper, accidentally printing a colorful , graphics-heavy navigation frame. The easiest fix to this problem is to provide a link to a print-friendly version of each content page. What's a print-friendly version? The content frame by itself, with no other banners or sidebars.

To create a print-friendly link, just do this (see Figure 10.19):

Figure 10.19. Creating a print-friendly link for a framed content page.

Create an unobtrusive text or graphic link that says something like "Click here for a print-friendly version of this page."
Using the Property Inspector, assign a link to the page itself, targeted to a blank window.

Creative Graphic Effects with Frames

Part of the fun of frame-based sites is being able to create unusual layout and graphic effects. The following sections cover a few of these, along with special instructions for using Dreamweaver to build them.

Letterbox Framesets

A letterbox frameset is an arrangement of frames that centers the page in the browser window, surrounded by background or border elements. Figures 10.20 and 10.21 show some different letterbox effects. In the first, the Macnab Design site floats in the center of a gray background, creating the same effect that multimedia CD-ROM presentations often have. In the second, more complex incarnation of letterboxing, the Web Monster home page sits in the middle of the browser window, surrounded by a striped border and black background. If the browser window gets small enough that not all of the main page shows, the striped border still hugs the edges so that the layout looks complete. As these examples show, the central portion of the letterbox can be fixed and surrounded by flexible borders, or the central portion can be flexible and surrounded by fixed borders.

Figure 10.20. The Macnab Design site uses a letterbox frameset to center its layout vertically and horizontally in the browser window.

Figure 10.21. The Web Monster site uses a complex letterbox frameset to surround its main layout with a border and background.

Do-It-Yourself Letterbox Frameset

Dreamweaver has no letterbox Frame objects, so you construct them manually using the various Modify > Frameset >Split commands. Do it this way:

Create a new document. In the New Document dialog box, choose Framesets/Fixed Top, Fixed Bottom.
Place the cursor inside the middle frame and choose Modify > Frameset > Split Frame Left to create a vertical frame division nested inside the horizontal division.
Alt/Opt-drag left or right from that vertical split to create a second vertical split. (At this point, check the Frames panel to make sure you've got one frameset split twice instead of a frameset nested inside another. If you've accidentally created the latter, choose Edit > Undo and perform the second split again.)
Position the horizontal and vertical divisions approximately where you want them, remembering that your layout will sit entirely in the center frame.
Open the Frames panel and select the outermost of the two nested framesets. In the Property Inspector, set the borders to None and the border width to 0. To create a fixed center frame, use the Property Inspector's proxy to set the top and bottom frames to Relative height and set the middle frame to a set number of pixels (your choice). To create a flexible center frame, use the proxy to set the middle frame to Relative height and set the top and bottom frames to a certain number of pixels.
Now repeat this process with the innermost frameset. Set the borders to None and the border width to 0. To create a fixed center frame, use the proxy to set the left and right frames to Relative and the center frame to a set number of pixels. To create a flexible center frame, use the proxy to set the middle frame to Relative and the left and right frames to a set number of pixels.
The outer frames won't have content, so they don't need scrolling. Select each of the outer frames (top, bottom, left, right) and set the Scroll drop-down to None. It's your choice whether you use scrolling for the center frame. (Neither site in Figure 10.20 or 21 used scrollbars in the center frame.)
Finally, because the outer frames will all be the same, you can use the same HTML file to fill each frame. Place the insertion point inside one of the outer frames, and save that file with a generic name such as bg.html. Set its background color to black, gray, or whatever color you want your background to be. Then use the Frames panel to set the Src for each remaining outer frame to the same file.

Visit the Exchange: Letterbox Frameset Extensions

If you like letterbox framesets enough that you might want to use them repeatedly, you might want to visit the Macromedia Exchange and download Project Seven's Letterbox Frameset extension. This command, which appears under the Modify > Frameset submenu, creates a fixed-center letterbox layout.

Splitting Background Graphics Across Frames

Some of the most graphically creative framesets on the web disguise their frame-ness through clever use of background color and images. Figures 10.22 and 10.23 show different uses of this technique. In the first example, one large abstract background graphic stretches across frames invisibly until the content area is scrolled. In the second, a photographic background appears across both frames, at full intensity on the home page and faded back in the other content pages.

Figure 10.22. A page from Lynda Weinman's site uses a very nonrectangular background graphic across a left-side navigation frame and right-side content frame.

Figure 10.23. The website for the movie Titanic places a photograph across the top navigation frame and bottom content frame.

Spreading graphics across frames doesn't work well in Netscape 4 because there is no way to make the graphic reliably align across frames.

The technique for doing this isn't hard, but it requires a little bit of thinking outside the box because most web graphics programs don't provide easy tools for making it happen. Using Fireworks and Dreamweaver, you can do it this way:

In Dreamweaver, create a frameset. Pay attention to the frame dimensions.
In Fireworks, create a new document with a large enough canvas size to cover both frames.
Create a background graphic that covers the entire canvas area.
Draw slice objects with the same sizes and positions as your frames. If necessary, adjust the background graphic to suit the slice sizes.
Optimize and export from Fireworks, choosing Export Images Only and Export Slices.
Back in Dreamweaver, assign each exported image to be the background image for a frame. Use CSS to assign background images if you want to control their tiling.

Exercise 10.1. Maximizing the Usability and Accessibility of a Frame-Based Site

In this exercise, you'll assemble a frameset from individual files and use the techniques covered in this chapter to make sure it's accessible, searchable, and easily navigable. Before you start, download the chapter_10 folder from the book's website at www.peachpit.com to your hard drive. Define a site called Chapter 10, with this folder as the local root folder.

Start by examining the files that will go into this frameset. The bearnav.html file contains the navigation bar that will sit at the top of each page. The bearbottom.html file contains an information bar that will sit at the bottom. The intro.html, coats.html, repair.html, and pals.html files contain content that will sit in the middle. The files are built using graphics that smoothly blend between frames, softening the rectangular frame shapes . Figure 10.24 shows how the assembled pieces will look.

Figure 10.24. The Bear Essentials main frameset as it will look when assembled.
You want your frameset to be accessible, so before creating it, take a moment to choose Edit > Preferences. Go to the Accessibility category and enable the option for Frames. (You can enable the other options as well, if you want.)
The initial content page is intro.html . Open this file. In the HTML Insert bar, find the Frame object that creates Top and Bottom Frames, and click it. This creates a frameset around the content page. (See how the center content area of the object's icon is blue? That means the current document will end up in that frame.)

While you're inserting, Dreamweaver asks you what titles to give your three frames. Title them like this:

Frame Name

Title

bottomFrame

Contact Frame

mainFrame

Content Frame

topFrame

Navigation Frame
After the frameset has been created, open the Frames panel (Window > Frames) and click anywhere in it to activate the frameset document. The Tag Selector should now begin with <frameset> . Choose File > Save Frameset. Save the file in your chapter_10 folder as index.html .
In the Frames panel, click in the topFrame area. This selects the frame tag that controls this frame in the frameset document. The Tag Selector should now say <frameset><frame> . In the Property Inspector, find the Src field and use the Browse button or point-and-shoot icon to link to bearnav.html . The top navigation bar should now appear in your Document window.
In the Frames panel, click the bottomFrame area. Use the Property Inspector to change this frame's src to bearbottom.html . Figure 10.25 shows how the page should look so far. The measurements are a little bit off!

Figure 10.25. The Bear Essentials frameset, with all elements in placebut the dimensions are slightly off.
You need to make the top and bottom frames large enough to show their contents, and no larger. In the Document window, examine the bottom bar picture. If you select one of the corner graphics, you'll see that they're each 42 pixels high. If you similarly examine the graphics in the top frame (you'll have to drag the frame divider down a bit to see the whole thing), you'll see that the title banner is exactly 150 pixels high. The bottom and top frames should therefore be exactly 42 and 150 high, respectively.

In the Frames panel, click the border around the frame diagram. This selects the frameset tag, where all frame dimensions are specified. In the Property Inspector's frameset proxy, select the top frame and set the row to 150 pixels. Then select the bottom frame in the proxy and set the row to 42 pixels. Finally, select the middle row and make sure the measurements are set to Relative. Figure 10.26 shows what the page should look like with proper frame dimensions.

Figure 10.26. The Bear Essentials frameset, with dimensions properly set.

Preview the frameset in a browser. It should look like Figure 10.24. Resizing the browser window should expand the middle frame without distorting the framing graphics.
The frameset is basically functional. Your next task is to make it accessible. The default frame names that Dreamweaver supplied are not very descriptive, so replace topFrame with navFrame , and bottomFrame with contactFrame . Replace mainFrame with contentFrame . (These names are very similar to the titles you entered earlier.)

Each frame must also have a descriptive page title. Currently, the content pages all have proper titles, but all other pages are Untitled Documents.) Assign page titles like this:

Frame/File

Page Title

navFrame/bearnav.html

Bear Essentials: Navigation Bar

contactFrame/bearbottom.html

Bear Essentials: Contact Information

These page titles serve accessibility and searchability needs, in that each mentions not only the page description but also the site name.
The frameset page should have keywords and a description in its head, but that's outside the scope of this exercise. See Chapter 8, "Building Tables," for more on assigning these.

Frame Name	Title
bottomFrame	Contact Frame
mainFrame	Content Frame
topFrame	Navigation Frame

Frame/File	Page Title
navFrame/bearnav.html	Bear Essentials: Navigation Bar
contactFrame/bearbottom.html	Bear Essentials: Contact Information

Assign links, using targeting, as follows (Figure 10.27 shows this happening):

Figure 10.27. Assigning a targeted link in the frameset.

Button	Link	Target
Bears	intro.html	contentFrame
Coats & Hats	coats.html	contentFrame
Repair	repair.html	contentFrame
Pals	pals.html	contentFrame

When you're done, check the results in the browser. You should be able to navigate to all four content pages without disturbing the frameset.
Now you need to add some noframes content to the frameset document to help search engines find the page. Start in the navigation frame. Select the table that contains the navigation bar and choose Edit > Copy. Then choose Modify > Frameset > Edit NoFrames Content, click inside the Document window, and choose Edit > Paste.

Choose Modify > Frameset > Edit NoFrames Content to return to normal frame viewing and select all the content in the main frame. Return to noframes editing and paste this content after the navigation bar.

Finally, do this one more time to get the contact information from the contact frame into the noframes area.

Note that the links in the navigation bar are still correct because the bearnav.html file and the index.html file are both in the same folder. If they were in different folders, the links here would have to be adjusted. Also note that it's not the most efficient practice to copy the entire navigation bar to the noframes area, graphics and all, although it is the quickest. To be more efficient, delete the navigation bar and manually enter a text version of the title and links.

Figure 10.28 shows how an efficient, graphics-free version of the noframes content might look in Design view.

Figure 10.28. The graphics-free noframes content for Bear Essentials.

Now you need to make sure that the framed pages properly link back to their parent pages. Close the frameset document and open intro.html (it's easier to work with the document when it's not being viewed through the frameset). In the table cell immediately below the page's text, insert a text-only navigation bar. You can use one of the Navigation snippets to build it, or you can create your own from scratch. When you're done, it should look like Figure 10.29.

Figure 10.29. The text-only navigation bar at the bottom of intro.html.

Where exactly should the links go? That depends on whether you want to link immediately back to the frameset or whether you want to let the visitor navigate among the content pages without returning to the frameset. For this page, link as follows:

Text	Link	Target
`Home`	`index.html`	`_top`
`Bears`	`intro.html`	`(none)`
`Coats & Hats`	`coats.html`	`(none)`
`Repair`	`repair.html`	`(none)`
`Pals`	`pals.html`	`(none)`

To test your frameless navigation, copy this navigation bar and paste it into coats.html, repair.html , and pals.html . Then try viewing any of these pages in the browser. You can navigate around quite happily without the frameset, or you can click the Home link and get the frameset back.

As an optional step, try making the navigation appear only if the page doesn't appear in its frameset. To do this, open intro.html (or any of the framed page files) and follow the steps in the section "Add Some Scripting: Conditional Footer Information," earlier in this chapter.
How about allowing visitors to link directly to individual framed pages? To do this, you must add the loadPage() command to the frameset. Open index.html and follow the instructions in the "Do-It-Yourself Jamming with loadPage() " section, earlier in this chapter.

When you've got the code in place, preview index.html in the browser. The intro page should display in the middle frame. Then manually revise the URL in the browser's address field to include ?page=repair.html and click the browser's Reload button. The frameset should load with the repair page in place.
How can you make use of this parameter passing? It's most useful when linking to the frameset from outside it. But you can also use it to help visitors bookmark framed pages. To do this, open repair.html and, in the right table cell, type the following:
```
 Click here before bookmarking this page. 
```
(To make the text look nice, choose Paragraph formatting and assign the note CSS style.) Select the text and link it to index.html?page=repair.html . Figure 10.30 shows this happening.

Figure 10.30. Adding a book-marking option to a framed Bear Essentials page.

Try this out in the browser. If you click the link, the page reloads with a revised URL in the browser's address field. If the visitor then bookmarks the page, the bookmark will call up this particular page.
Now, how about linking to a printer-friendly version of the page? Underneath the note you just entered, add a new paragraph:
```
 Click here for a printer-friendly version of this page. 
```
Select the text and link it to repair.html , with a target of _top .

[ LiB ]

Working Smart with Frames