Frames

Chapter ten of Creating Web Sites: The Missing Manual deals with the use of frames in a Web site. There is a problem created when you want an element to appear on each page of your Web site. To show the item on each page copy and pasting is required. A way to fix this problem is to use frames which allow you to show more than one Web page within the same browser.

Frame Basics

Frames operate by dividing a browser window into two or more areas; with a different HTML page appearing in each area. To build a frame, first a frameset document must be created to hold the smaller Web pages and define the way a browser window is divided.

A frameset page is constructed differently from a typical HTML document. The document still begins with an html tag and has a head section to define the title however a body tag is not used after that. A frameset tag is used to separate the page into frames. A noframes tag is then used to provide the content that appears when a frame is not viewable.

There a number of reasons a browser may not be able to support frames:

• The browser is extremely old
• It is a mobile browser like those used for small devices like cell phones and PDA.
• The surfer is visually impaired and is utilizing a screen-reading program.

Defining the Frameset

The information within the frameset is where the bulk of the frameset is located. This is where the browser window is split into columns and rows of defined sizes. The width of the columns are specified using the cols attribute. The row height is defined using the rows attribute. The measurement of columns and rows can be given using percentages or the exact pixel size. When using exact pixel sizes the browser will proportionately fill the remaining frames. An asterisk (*) can be used to indicate to the browser to fill the rest of the frame's space.

Frames are rectangular shaped regions and cannot be altered to create sophisticated shapes. There is a way around this; a background-image property could be used to create the appearance of a shaped frame.

Putting Documents in a Frameset

The frame source needs to be defined in order to add content to the frame. The frame source consists of an HTML document with these contents. Each row and column is defined using a single frame tag. Frame tags are placed within each frameset.

A page is linked to a frame by setting attributes within the frame tag. The src attribute lists the Web page file name. The source for a frame is added the same way the source the an image or hyperlink is added. The file name is included in the same folder as the page. A relative or absolute path can also to used. The name attribute is how a frame title is named to describe the frame.

Frames are shown in browsers using the title which defines the frameset page.

Targeting Frames

When working with frames, your browser must be instructed to open the target page in the Main frame. This is done adding a target attribute to an anchor tag. The target attribute provides the name of the frame where the page is to be displayed.

A base tag is used to set a target frame and apply it to each link within a page.

There are also four target names used for special situations:

1. _top which opens the target page into a top level window. It is like opening the target page URL in a browser address box.
2. _parent which is used to open the target page in a frameset containing a new frame.
3. _self which is used to open the target page in the current frame.
4. _blank which opens the target in a new pop-up window.

Building Better Frames

When building more complex sites nested frames need to be used.

Frame Borders and Resizing

A noresize attribute can be used to lock frames so they will not move even when the window size does. This is a way of determining as a designer how the page will look.

Borders can be changed using the border attribute of the framset tag. The width of the border attribute changes the measurement of the border bar; this is done in pixels.

Scrolling

Frames have scroll bars if the content within the page grows larger than the size of the frame. To keep from having more than one scroll bar on a page you need to keep the content down. Another way of dealing with this is to use the scrolling attribute and set it to no so that there is no scroll bar for that specific frame area. There should always be at least one scroll bar on your page.

Handling Browsers That Don't Support Frames

In order for surfers who cannot view frames you can set their browsers to view each frame as one page at a time. This is done by copying the HTML from the menu htm file into the noframes portion. The noframes portion of the document will resume where the HTML document stopped.

Better URLs for Framesets

There is less flexibility with frameset pages because they combine many pages into one URL. One way to deal with this problem is to create more frames pages but this involves creating many more frameset pages. If you alter the layout of your website this will involve a great deal of updating. Web designers usually add JavaScript code to each page to handle this problem.

Nested Framessets

Nested framesets are used to divide and subdivide a browser window. The only issue with nested framesets is figuring out what the order to use when dividing a page.

A good way to break down large pages is to use topic links. These links can be added using bookmarks.

Dreamweaver has built-in tools that make it easier to work with frames.