Frames Split Up Browser Screen for Navigating Ease
As your Web site expands, it can become increasingly difficult to navigate. But with pages that use frames, visitors can find their way without getting lost.
Frames separate a browser screen into several Web pages, allowing content to change in some areas while remaining fixed in others. Designers often use them to create a stable navigation bar containing links that, when selected, open corresponding Web pages in an adjacent content area.
A basic frame page, containing a navigation bar and main content area, consists of three separate HTML documents: one for the navigation bar, one for the content area and one for the actual frame document, which specifies how the browser should display the two other pages.
More complicated designs can include as many frames as you want. Before creating your frame document, design your other HTML pages as you want them to appear in their individual sections of the browser. In this case, the two documents are “navigation.html” and “main.html.”
Unlike other Web pages, the frame document does not include the body tag. The frameset tag is used in its place. Working within this tag, determine whether you want to place your frames side by side--using columns--or on top of one another--using rows--and add the appropriate attribute. Also specify the width or length of each frame using percentages or pixels.
In the following example, the first frame--which contains the navigation bar--expands to 25% of the browser screen’s width. The main content area in the second frame will assume the rest of the space. The “*” symbol tells the browser to place the remaining available space in that particular section:
The source attributes in the frame tags specify the two sections into which the document will be divided. The browser displays them in the order they appear in the code.
In addition to its file name, each document is given a frame name. This allows the two to interact. In this case, the links in the navigation will open a Web page in the main content area. Working with the HTML code for the navigation document, add a “target” attribute to each link tag and specify the name of the frame in which the link should open. The link created by the following code will open the Los Angeles Times’ Web site in the main content area:
For information on how to build your own Web page, visit the Los Angeles Times.
Although you establish the dimensions for each frame column and row within the frame document as in the first example, users can change frame sizes on their browser screens by dragging its borders with the computer mouse. To prevent them from doing so, include the “noresize” attribute in each frame tag. The tag will hold the navigation bar to a fixed size.
The browser automatically adds space between the frame border and its content. But you might want to adjust the amount with “marginheight” and “marginwidth” attributes in the frame tag. The value for each is set in pixels.
Although you may scroll each frame independently, you can omit scrollbars or frame borders by adding the “scrolling” and “frameborder” attributes to your frame tag. The tag separates the navigation bar from the main content area. But it won’t include bars or borders that could clutter your design. Scrolling bars can give users more flexibility, so you may want to consider sacrificing some of your site’s style to include them.
Most Web browsers support frames, but there are some older versions that do not. To let those without frame capabilities know what they are missing--and to possibly include a link to a non-frame version of the page--include the “noframes” tag with the frameset after all other frame tags:
This page must be viewed with a browser that supports frames.
In this example, the content contained within the “noframes” tags will appear in the browser if it cannot support frames.
*
Christine Frey is a freelance writer.
Building Your Own Web Page, A 10-part series.
1. Picking the right provider
2. Understanding HTML
3. More HTML
4. Adding links, photos and graphics
5. Creating forms
6. Using tables
Today: Navigating with frames
8. Getting yourself found
9. Making money on a personal site
10. Working with browser compatibility
*
Read installments online at https://www.latimes.com/webbuild
