The World of Iframes

[ LiB ]

Frames are not supported by Netscape 4.

Like a regular frame, an iframe (or inline frame) defines a rectangular area inside a browser window that displays a portion of another document. Unlike standard frames, however, iframes exist within ordinary HTML documents, inside the body tag, just like any other page element (image, table, and so on). Figure 10.31 shows a sample of an iframe at work. Iframes are useful for many of the same reasons standard frames are: They allow partial page contents to change without reloading the entire page, they allow certain page content to scroll while other content remains stationary, and so on. They also have the same accessibility requirements as frames. They're part of the HTML 4 specification and are currently supported by all major browsers.

Figure 10.31. An iframe allowing portions of one document to show inside a rectangular window in another.

Iframes in Dreamweaver

Dreamweaver only partially supports iframes. Iframes cannot be inserted within Design view, they don't display in Design view, and their properties don't appear in the Property Inspector.

Creating Iframes

The two mechanisms for inserting iframes are the Tag Chooser and the Floating Frame object. To insert an iframe into a page using the Tag Chooser, do this:

1. Create the document that will hold your main layout, determining where in the page layout you want the iframe to appear. This should be a rectangular area, which can be placed inside a table cell or CSS layer, or anywhere other HTML block elements (such as images and paragraphs) can be placed.
   
   
2. Create another document to be viewed inside the rectangular area of the iframe. The entire layout of this document does not need to fit inside the iframe area, but if the layout is larger than the iframe area, it will have to scroll.
   
   
3. In the main document, place the insertion point where the iframe should appear. At this point, you have your choice of inserting the iframe with the Tag Chooser or the Floating Frame (Code view only) object.
   
   
4. Choose Insert > Tag to access the Tag Chooser. From the HTML Tags/Page Elements/General category, choose iframe and click Insert.
   
   
5. The Edit Tag dialog box opens. In the General category, assign any properties desired, using Table 10.4 for reference.
   
   

   Table 10.4. Main Attributes of the iframe Tag

   Attribute	Values	Required	Description
   src	Absolute or relative URL	Yes	The file that should appear in the iframe area
   width height	Number, in pixels	Yes	The width and height of the iframe rectangular area
   scrolling	true, false	No	Whether scrollbars will appear in the iframe
   marginwidth marginheight	Number, in pixels	No	The gutter between the edges of iframe area and its content
   border	true/false	No	Whether a visible border surrounds the iframe
   align	left, right, top, middle, bottom	No	How the iframe aligns with surrounding content

   
   
6. When you're done assigning properties, click OK to close the Edit Tag dialog box and then Close to close the Tag Chooser. Your iframe won't display in Dreamweaver Design view, but a look at Code view will show you that it's there.
   
   

To insert an iframe using the Floating Frame object, prepare your files as specified in steps 12, and then do the following:

1. Switch to Code view. Within Code view, place the insertion point where you want the iframe to appear.
   
   
2. In the HTML Insert bar, choose Floating Frame from the Frames object group . (This object is available only from within Code view.)
   
   

This inserts the iframe tag with no properties, so it won't be functional unless you assign properties separately.

Working with Iframe Properties

After the iframe is created, you can use the Tag Inspector or the Edit Tag dialog box to examine and set its properties. Iframes can't be seen in Design view, but can they be selected using the Tag Selector.

You can select an iframe from within Design view. Just click in the Document window where the iframe should be, and it will appear in the Tag Selector. Of course, if you can't see the iframe, you might have trouble clicking exactly where it isor even remembering exactly what it is. And unlike many other invisible elements ( form tags, for instance), iframes themselves don't display any little gold invisible element icon in Design view. But you can insert a comment between the opening and closing tags of your iframe to help you find it because comments do show gold icons. Do it this way:

1. Go to the Preferences/Invisible Elements dialog box and turn on the icon for Comments. This tells Dreamweaver to display comments as a gold icon when invisible elements are showing.
   
   
2. Switch to Code view and place the insertion point between the opening and closing iframe tags.
   
   
3. From the Common Insert bar, choose the Comment object. This inserts the framework code for a comment. Type a few words inside the framework, such as "iframe goes here."
   
   

From now on, whenever invisible elements are showing, you can select the gold comment icon, and the Tag Selector will display the iframe tag. Click the tag indicator in the Tag Selector to select it, and you can set its properties.

To set iframe properties, choose Modify > Edit Tag to open the Tag Editor, or use the Attributes tab of the Tag Inspector. Iframe properties are detailed in Table 10.4.

Visit the Exchange: Iframe Extensions

Iframes are useful little items and are fairly popular. Several extensions are available on the Macromedia Exchange to help insert and edit them.

[ LiB ]