iFrame Suite Dreamweaver Extension

Manager |
Linker |
Scroller |
Jump Menu |
Pager

iFrame Suite Manager

The iFrame Manager allows for the building of iFrames into your page from the Extension interface. All iFrames are completely editable after insertion from the default source page to the dimensions and position.

Dreamweaver does not display iFrames in design view nor the iFrames content, however if the iFrame is absolutely positioned as described below, it will appear as an outline ( the same as layers do ) and can be dragged, resized and moved around with a mouse or the keyboard arrow keys when selected.

Accessing the Interface

Access the Interface by clicking on the iFrameManager flyout from the 4Level category under the Commands Menu.

Extension Access

The Interface

Roll over the options for a description

Creating a new iFrame

After accessing the extension as described above from the commands Menu it's just a matter of making the desired selections, naming the new iFrame and and clicking the Add iFrame button.

For Standard Positioning the iFrame will be inserted where the current position of the cursor is. If the cursor is blinking inside of a table cell the iFrame will be placed inside this cell.

Launch	the iFrame Manager interface from the Commands Menu "4Level" category.
Browse	to the page desired to display inside the iFrame.
Type	in any message you wish to appear for NN4 browsers ( optional )
Check	or uncheck the Absolute Pos checkbox depending on which you prefer.
Type	in the iFrame dimensions and position.
Select	( if desired ) the border and Scrollbars options
Type	in a name for the iFrame in the Frame Name field. No spaces or special characters ( required )
Press	the Add iFrame button.

A new iFrame with your settings will be applied to the page.

note: The iFrame Name field "must" be filled in in order to create a new iFrame.

Editing an existing iFrame

You can edit any of the iFrames at any time after insertion. You can edit any of the attributes that are currently defined to the iFrame.

Launch	the iFrame Manager interface from the Commands Menu.
Select	the name from the iFrame List for which you choose to make edits.
Make	any changes to the dimensions if needed.
Press	the Add iFrame button.

Converting the attributes

You may change the type of attributes used from standard to absolute ( or vice versa ) of a previously inserted iFrame.

If you have an iFrame that has been previously inserted with absolutely positioned (style ) attributes and wish to convert it to the standard type you can follow these steps to achieve this.

Place	the cursor where you desire the iFrame to be located. ( table cell, in a <p> or <div> tag etc... )
Launch	the iFrame Manager interface from the Commands Menu.
Select	the iFrame you wish to change from the iFrame List.
Uncheck	the Absolute Pos checkbox.
Make	any changes to the dimensions if needed.
Press	the Add iFrame button.

The iFrames "outline" will disappear from Dreamweaver design view and is placed where the cursor was before launching the extension. This occurs because Dreamweaver does not render iFrames as it does other elements such as layers unless it is absolutely positioned.

The same procedure applies for converting from standard attributes to absolute positioning except you would check the Absolute Pos checkbox.

Example of the absolutely positioned options
Interface Screenshot 1

If the Absolute Pos "is" checked the following selections will be made available.

Top: The positioning from the top of the document window.
Left: The positioning from the left of the document window.
Z-index: The stacking order of the iFrame element. [ Works the same as a layer <div>]

Example of the standard positioning options
Interface Screenshot 2

For Standard Positioning the iFrame will be inserted where the current position of the cursor is. If the cursor is blinking inside of a table cell the iFrame will be placed inside this cell.

If the Absolute Pos is "not" checked a dropdown appears, replacing the absolute positioning selections. It contains the standard iFrame positioning attributes options from which to choose.

Align:

Left
Center
Right

The Width and Height work the same for both types. Percentage values may be used for either the absolute or the standard positioning.

Example: 50% or 80%.

Which to choose

Choosing the positioning type depends on your design and what you wish to accomplish.

Standard Positioning

This type of positioning works the same as positioning other inline HTML elements such as an image in a <p align="left"> tag and will align the iFrame to the left, center, or right of the page.

Absolute Positioning

With absolute positioning the iFrame will stay at the coordinates specified regardless of the other elements on the page or browser size.

This method is handy if would like to manipulate the iFrames attributes via javascript. It becomes scriptable as a Layer would in that you can dynamically move or show/hide the iFrame by changing the style attributes in the script.