Frame Basics

[ LiB ]

When you view a frame-based page in the browser, what you're really seeing is several HTML documents at once, loaded into the individual frames of a frameset. Figure 10.1 shows a frame-based page as it appears in the browser, along with a peek at its actual frameset structure.

Figure 10.1. A basic frame page.

Frames in the Browser

The frameset page contains no body tag. Instead, it consists of a frameset tag with several frame tags nested inside it, indicating how the page should be divided and what document should appear in each frame. The basic code structure looks like this:

 <frameset cols="80,*">    <frame src="navbar.html" name="navFrame">    <frame src="intro.html" name="mainFrame"> </frameset>

Any HTML page can appear in the frames of the frameset. No special coding is required for these pages.

Framesets can also contain other frameset tags, to create more complex layouts:

 <frameset cols="80,*">    <frame src="navbar.html" name="navFrame">    <frameset rows="134,*">       <frame src="banner.html" name="titleFrame">       <frame src="intro.html" name="mainFrame">    </frameset> </frameset>

The frameset and frame tags are part of the HTML 4 specification and have been supported by browsers starting with IE3 and NN4. Tables 10.1 and 10.2 list commonly assigned attributes for each tag.

Table 10.1. Commonly Assigned Attributes of the frameset Tag

Attribute Name	Description	Required?	Values
`name` `id`	Used for identification	No	Text string.
`cols rows`	Defines the number of columns or rows in the frameset	Yes	Comma-separated list, with one entry for each column or row. Each list element can be a pixel or percent value, or * for a relative value.
`framespacing`	Specifies the amount of space between frames (similar to cell spacing in a table)	No	Number of pixels.
`frameborder`	Specifies whether to display a border between frames	No	yes/no.
`border`	Specifies the width of the border between frames	No	Number of pixels.

Table 10.2. Commonly Assigned Attributes of the frame Tag

Attribute Name	Description	Required?	Values
`name` `id`	Used for identification	No	Text string
`src`	Specifies the page to display in this frame	Yes	URL
`frameborder`	Specifies whether to display a border around this frame	No	yes/no
`bordercolor`	Specifies the color of the border	No	Color
`marginwidth marginheight`	Specifies the gutter space between the frame edge and its content (similar to cell padding in a table cell)	No	Number of pixels
`noresize`	Specifies whether the user will be allowed to resize the frame (frames are resizable only if the borders are visible)	No
`scrolling`	Specifies whether scrollbars will appear around the frame	No	yes/no/auto

Linking within framesets requires the use of the target attribute as part of the link:

 <a href="mypage.html" target="mainFrame">

Table 10.3 lists the various targets that can be specified in links.

Table 10.3. Possible Target Values for Use with Frameset Navigation

Target Value	Description	Example
The name of any frame in the current frameset	Opens the specified document in the named frame.	`<a href="mypage.html" target="mainFrame">`
`_top`	Replaces all framesets, opening the document at the top level of the browser window.	`<a href="mypage.html" target="_top">`
`_parent`	Used within nested framesets, replaces the frameset that contains the link. This can be the top frameset or a nested frameset.	`<a href="mypage.html" target="_parent">`
`_self`	Opens the document in the same frame that contains the link (same as using no target).	`<a href="mypage.html" target="_self">`
`_blank`	Opens the document in a new browser window outside of the parent frameset.	`<a href="mypage.html" target="_blank">`

Frames in Dreamweaver

The coding for frames is not difficult, but like so much in HTML, frames can be cumbersome to deal with if you're just working with code. The Dreamweaver visual environment lets you easily create entire multi-document framesets and view and manage your framesets and framed pages with relative ease.

Creating Frames

In Dreamweaver, frame-based pages can be created manually or by using one of the prebuilt framesets that ship with the program. To create a frame-based page manually, follow these steps:

Create or open a document that has no framesets in it.
Choose Modify > Frameset > Split Frame Left, Split Frame Right, Split Frame Up, or Split Frame Down.

When you have a frameset created, you can further divide it by choosing the splitting commands again or by Alt/Opt-dragging from a frame edge.

To build a page using one of the prebuilt framesets in Dreamweaver, do one of the following:

Choose File > New and, in the New Document dialog box, on the General tab, choose from the Framesets category.
Create or open a document and choose one of the Frame objects in the HTML Insert bar; or, choose Insert > HTML > Frames > [any frameset].

Frames that Dreamweaver builds for you have many coding niceties already built in, such as setting scrolling and resize properties. Frames that you build yourself do not, so you have to be more careful to assign their properties wisely.

Working with Frames

The hardest aspect of working with frames is that you're always working on multiple pages at once (the frameset and the framed pages). Dreamweaver offers a variety of tools to make this easier for you, including the Property Inspector, the Frames panel (available under Window > Frames), and the Tag Selector (at the bottom of the Document window).

Frames panel (see Figure 10.2) This panel always gives you a visual representation of the frames in your current frameset. Clicking anywhere in the Frames panel activates the frameset document. Clicking in a particular frame in the panel selects that frame tag. Clicking the black border around the frames selects the frame-set tag.

Figure 10.2. The Frames panel, diagramming a nested frameset.
Tag Selector (see Figure 10.3) This handy item always tells you which portion of which open document you have selected. If the Tag Selector lists the frameset, frame , or noframes tags, you are working on the frameset document. If it lists only the body tag and its contents, you're working on one of the framed pages.

Figure 10.3. The Tag Selector, with a frame element in a frameset selected.
Property Inspector (see Figures 10.4 and 10.5) As always in Dreamweaver, use the Property Inspector to assign properties for whatever element is selected. For the most part, the inspector is self-explanatory. The method for setting frameset row and col properties, however, deserves a note. When a frameset tag is selected, the proxy icon on the right indicates how many rows or columns the frameset has been divided into. To set the size of that row or column, click it in the proxy and set the Value and Units fields.

Figure 10.4. The Frameset Property Inspector.

Figure 10.5. The Frame Property Inspector.

How Frameset Resizing Works

What happens when the browser window resizes? All framesets must fill the entire browser window. If you build your frameset the manual way (instead of using the prebuilt framesets), you are responsible for making sure that this happens.

If you want all rows or columns in your frameset to resize proportionally when the browser window resizes, set Units for all rows or columns in the frameset to Percent. You must also make sure that the numbers in the Value fields add up to 100% for the frameset.

If you want one row or column to stretch and others to remain fixed, set Units for the fixed rows or columns to Pixels and choose a number for the value. For flexible rows or columns, set Units to Relative and don't assign a value. At least one row or column must have a Relative value, or the frameset won't resize properly!

After you've made these unit/value assignments in the Property Inspector, you can safely resize frames by dragging their borders in the Document window.

Linking to Frames

Any time you want a linked page to appear within a specific frame or browser window, the link should be targeted . In Dreamweaver, use the Property Inspector to assign targets.