6. Using Frames
Using Frames in Sites
HTML frames have been around for quite a while. A frames page is a page that is segmented into two or more sections called frames. Each frame contains a separate page and can be configured with scrollbars and a frame border that can be either fixed or resizable.
If you’ve spent any amount of time discussing web design with other web designers, you’ve no doubt encountered what I call the “never use it” mentality. Web designers with this mentality maintain a list of design techniques they claim should never be used under any circumstance. The use of frames is a technique that appears on many of those lists, but as with any technique, frames do have some effective uses. The trick is in knowing when to use them.
When to Use Frames
One of the most common uses of frames is in separating navigation elements from other page content, especially when the navigation components require scrolling. The benefit of using frames in such setups is that you can scroll the page containing the navigation elements without scrolling the page containing the main content.
Modern sites will opt for using CSS for these scenarios because the use of frames can cause accessibility issues and problems with search engine indexing. However, not all HTML pages are designed to be used on the Internet. For example, some software discs contain HTML-based documentation that is designed to be viewed locally. The use of frames in this type of situation is fine. It’s also not uncommon to see frames used when creating HTML help documentation.
NoteIf you are designing your site to be HTML5-compliant, avoid frames. Frames are no longer allowed in HTML5. However, the use of inline frames is still valid. I’ll cover inline frames later in this chapter.
When Not to Use Frames
It’s generally a good idea to avoid the use of frames for sites that will be hosted on the Internet. The following are some of the drawbacks of frames:
• Search engines often index pages that are part of a frameset—When that happens, search results can link to pages that don’t include your navigation or other important page elements.
• They might not render the same way on all computers—Frames include window elements such as scrollbars that aren’t always the same size in every browser, thereby causing rendering problems in some cases.
• When a frames page links to another frames page, you end up with nested frames—This can be extremely frustrating for users of your site.
TipThere is a movement under way (and has been for quite some time) to replace frames with CSS. In fact, doing so is possible, and it works well in modern browsers.
You can read about a method of doing this at www.webreference.com/html/tutorial24/.
You must also take into account that the text size in browsers can be (and often is) adjusted by users with low vision and for other reasons. If your frames are designed for text of a certain size and a site visitor alters the text size in the browser, it can modify your site’s layout in unpredictable ways.
Now that you know when it’s okay to use frames and when you should probably opt for another technique, let’s talk about how to create frames pages in Expression Web.
Expression Web comes with a collection of CSS layouts that you can use in lieu of frames. You’ll find them in the CSS Layouts section of the New dialog when creating a new page.
Creating Frames Pages
Frames pages (as opposed to inline frames, which I discuss later) are actually made up of multiple pages. At the top level is the frameset page. The frameset page doesn’t actually contain any visible content. Instead, it contains HTML code that defines two or more frames and their layout.
To create a new frameset in Expression Web, do the following:
1. Select File, New, Page.
2. Select Frames Pages from the list of page types.
3. Select the frame layout of your choice from the list in the New dialog, as shown in Figure 6.1. For this example, I chose the Contents layout.
Figure 6.1. Expression Web gives you many frame layout choices.
It’s technically possible to have a frameset that defines only one frame. However, there’s really no point to this setup.
After Expression Web creates the frameset, you have a choice of either creating a new page for each frame or choosing an existing page to appear within the frame. To create a new page, click the New Page button shown in Figure 6.2.
Figure 6.2. When you create a frameset, you can choose to create a new page for a frame or use an existing page.
To use an existing page, click the Set Initial Page button to display the Insert Hyperlink dialog, where you can choose a page. You can also enter a URL to a location not in your site, as shown in Figure 6.3. After you click OK, the page or URL you specified is loaded into the frame.
Figure 6.3. In addition to choosing files in your site for frame content, you can enter a URL.
CautionIf your frame displays content from a site other than your own, you will be displaying web content not under your own control. Keep this in mind when designing your site.
I’ve almost never encountered a situation where showing content from another site in a frame was a good idea.
Configuring Frames
To configure frames in a frameset, right-click the frame and select Frame Properties from the menu. Alternatively, you can select the frame and select Format, Frames, Frame Properties. Either method displays the Frame Properties dialog shown in Figure 6.4.
Figure 6.4. All frame properties are easily configured using the Frame Properties dialog.
The following properties are configurable in the Frame Properties dialog:
• Name—The name of the frame can be used when you need to direct hyperlinks to open in that frame. Links with a target attribute of “main” open in the frame being configured (refer to the example shown in Figure 6.4).
• Initial Page—The initial page is the URL displayed in the frame when it is first loaded.
• Long Description—The long description specifies the URL of a file that contains a long description of what appears in the frame. This is used by screen readers.
• Title—The title is a short description of the frame’s contents. It is also used by screen readers.
• Frame Size Width and Row Height—Specifies the width and height of the frame. This can be relative to other frames in the frameset, a percentage of available window space, or absolute pixel dimensions.
• Margin Width and Height—Specifies the margins for the frame.
• Resizable in Browser—When checked, the frame can be resized by dragging the border in the browser.
• Show Scrollbars—Configures whether scrollbars are displayed. Can be set to the following: If Needed, Never, or Always.
If you set Show Scrollbars to Never and the frame’s content extends beyond the borders of the frame, any content outside the frame will be inaccessible by users of your site.
By clicking the Frames Page button shown previously in Figure 6.4, you can access properties for the frameset page, as shown in Figure 6.5. Adjusting the Frame Spacing value changes the width of the border between frames. To remove the border completely, remove the check from the Show Borders check box.
Figure 6.5. Properties for the frameset page are configured in the Page Properties dialog.
The Frame Spacing setting adds a framespacing attribute to the <frameset> tag in your page. The framespacing attribute is only recognized by Internet Explorer and is a nonstandard attribute. It will be ignored by other browsers.
Splitting Frames
To split a frame into two frames, select the frame and then select Format, Frames, Split Frame. Expression Web displays the Split Frame dialog shown in Figure 6.6, where you can choose to split the frame into columns or rows.
Figure 6.6. A frame can be split into two frames side-by-side or stacked one on top of the other.
When a frame is split into two frames, each of the two frames will be 50 percent of the width or height of the original frame.
For more information on adding tables to a page, see “Tables in Expression Web,” p. 96.
Deleting Frames
To delete a frame, select the frame and then select Format, Frames, Delete Frame. Expression Web removes the frame immediately without confirmation. If you remove a frame inadvertently, you can select Edit, Undo Delete Frame or press Ctrl+Z to restore it.
If you are considering splitting a frame, consider whether it might not be more appropriate to simply add a table to the existing page instead. Splitting frames can create a user interface for your site that is awkward to navigate.
Creating Alternative Content
Frames are a fairly old technology (they were introduced in Netscape 2.0) and are supported in all modern browsers. However, frames are one of the few HTML techniques that have no graceful fallback. When browsers encounter a tag they don’t understand, they simply ignore the tag. In most cases, that doesn’t present much of a problem, but in the case of frames, the page containing the frame tags doesn’t contain any content. It only contains tags that define the frames. For that reason, when a browser that doesn’t understand frames loads that page, it simply won’t display anything at all.
Fortunately, there is a way to specify alternative content for browsers that don’t understand frames. By using the No Frames view, as shown in Figure 6.7, you can specify content to be displayed for browsers that don’t support frames.
Figure 6.7. The No Frames view allows you to enter content to be displayed when a browser doesn’t support frames.
Keep in mind that your site will rarely (if ever) be visited by someone using a browser that doesn’t support frames.
The default message provided by Expression Web (shown in Figure 6.7) isn’t very useful, so you’ll likely want to add your own content. Therein lies one of the problems with frames. If you’re going to create content in the No Frames view that emulates your frames content, you may as well carefully evaluate whether the frameless content is suitable for everyone as a substitute for frames.
I’ve alluded to this before, but it’s worth repeating. As a general rule of thumb, when in doubt, don’t use frames.
Targeting Frames
Expression Web allows you to easily configure a hyperlink to target a particular frame. To cause a hyperlinked URL to display in a specific frame, follow these steps:
1. Insert a hyperlink.
2. In the Insert Hyperlink dialog, click Target Frame, as shown in Figure 6.8.
Figure 6.8. The Target Frame button in the Insert Hyperlink dialog makes targeting a specific frame easy.
3. In the Target Frame dialog, enter the name of the frame you want to target. You can also simply click the frame you want to target in the Current Frames Page representation, as shown in Figure 6.9.
Figure 6.9. Expression Web provides a visual representation of the current frames page. Clicking a frame causes the current hyperlink to target that frame.
Targeted Hyperlink Opens New Window4. Click OK to dismiss the Target Frame dialog.
5. Enter a URL for the hyperlink or select a page from the Insert Hyperlink dialog and click OK to insert the hyperlink.
Adding and Configuring Inline Frames
So far in this chapter we covered using frames inside a frameset page. Using this method, a single page is broken up into multiple frames. Another type of frame available to you in Expression Web is the inline frame. An inline frame is a frame that can be inserted into an existing page and can be any size you want.
For more information on layers, see Chapter 23, “Using Layers.”
Figure 6.10 shows an inline frame into which I have loaded the InformIT site. Notice the scrollbars that let you scroll around the entire page displayed by the inline frame.
Figure 6.10. An inline frame allows you to have a page within a page. In this case, the InformIT site is displayed inside an inline frame.
To insert an inline frame, place the insertion point where you want the inline frame and double-click on the Inline Frame control in the Toolbox. When you do, you are given the option of specifying an initial page or creating a new page for the frame’s content, as shown in Figure 6.11.
Figure 6.11. Selecting a page for display in an inline frame is performed just as it was with a frameset. You can specify an initial page or create a new page.
After you’ve added content in an inline frame, you can control that inline frame’s properties by right-clicking the inline frame and selecting Inline Frame Properties from the menu. Doing so displays the Inline Frame Properties dialog shown in Figure 6.12.
Figure 6.12. Inline frames are configured using the Inline Frame Properties dialog.
In most cases, you will want to display your own content inside an inline frame. The inline frame shown in Figure 6.10 displays an external site so you can more clearly see exactly what the inline frame does.
The options available in the Inline Frame Properties dialog are essentially the same as those available in the Frame Properties dialog previously shown in Figure 6.4. One notable exception is that the Inline Frame Properties dialog provides an Alternate Text text box for entering content to be displayed for users who cannot see inline frames.
As with frames pages, you can target an inline frame with hyperlinks by specifying the name of the inline frame in the target attribute of the hyperlink. This is a common way of updating a portion of a page when a link is clicked elsewhere on the page.
You can enter HTML code into the Alternate Text text box in the Inline Frame Properties dialog. By using HTML as alternate text, you can display alternate content that shares a look and feel with the rest of your site.
Tips for Frames
As I mentioned at the beginning of this chapter, plenty of designers will tell you that you should never use frames. I’m not one of them. However, you should carefully consider the possibility of using tables or other design elements such as CSS. If you decide that frames are the right choice for you, there are some general tips you should follow so that they don’t become a point of frustration for users of your site.
If you want some guidelines on when to use frames and when you might want to consider other options, see “Using Frames in Sites” earlier in this chapter.
Frame Borders
As you’ve seen in this chapter, you can configure a frames page so there are no borders on the frames. Before you choose to go borderless, you should carefully consider your site’s design. If you have user interface elements such as graphics that distinguish the frame from the rest of your page, removing the borders might be a suitable option.
Examine the page shown in Figure 6.13. The navigation links at the left side are in one frame, and the main content is in another. However, there’s no way to tell that it’s a frames page by looking at it. If I scrolled the content page, the navigation would remain in place. That might be what you want, but it also might be confusing to some users. Placing a border on the frame provides a visual indicator that the two parts of the page are separate.
Figure 6.13. Borderless frames can be confusing to users because there is no visual indicator that the frames are separate.
Resizable Frames
When adding frames for navigation elements, it’s often tempting to configure the frames so they cannot be resized. Depending on the site’s design, that might or might not be a good idea.
If the content in the frame consists of text, it can often be a bad idea not to allow users to resize the frame. Some users of your site might have adjusted the size of the text in their browsers. In some cases, this can cause your text to overflow the frame.
The page shown in Figure 6.14 is an example of bad design with frames. Notice that the Contact link is not fully visible because I have adjusted the text size in my browser.
Figure 6.14. Text inside a frame can overflow the frame if a user adjusts the text size in his browser.
When using frames in your site, be sure you test carefully. Adjust the size of the text in your browser and test your site again. The goal is to make your site look the way you intend for all site visitors. With careful testing and design, you can easily reach that goal.
Breaking Out of a Frameset
If you do use frames in your site, you run the risk of your frames page being displayed inside a nested frameset. Figure 6.15 shows an example of a nested frameset caused by a link inside a frameset linking to a frames page.
Figure 6.15. A nested frameset caused by a frames page linking to another frames page. Notice that there are two navigation frames, one belonging to the previous frames page.
The solution to this problem is to include a JavaScript snippet to force the frameset page to remove any nested framesets when it gets loaded. Simply include the following snippet inside your <head> section in the frameset page:
<script language="javascript" type="text/javascript">
if (window != top) top.location.href = location.href;
</script>