Working with AutoFrames

From Documentation
Jump to: navigation, search

Working with AutoFrames

AutoFrames permit site visitors to scroll the body of the page while objects in the AutoFrame, such as navigation buttons, remain in view. You can set any or all of the MasterBorder margins as an AutoFrame.

Understanding Frames

Frames are an HTML mechanism you can use to subdivide the browser window into independent areas. When a site visitor scrolls the Layout, the frame doesn't scroll with it, so you can keep navigation buttons in view at all times. Frames can also reduce the amount of refreshing required by your visitor's browser.

Each frame displays its own content, which can include links, a form, regions, or any text, graphic, or media objects. Links within a frame can display a page, or display information in the same frame or a different frame. You can define targets for the links contained in one frame so they retrieve content into another frame.

A special type of HTML page called a frameset establishes the combination of frames and frame properties that make up the browser window display. The frameset specifies the number of frames, defines their size and placement, and specifies the pages or resources that make up their original or default content.

NetObjects Fusion supports two ways of creating frames.

  • You can use the Properties panel in Page view to set AutoFrames and add navigation controls, banners, text, graphics, links, and scroll bars. An AutoFrame frameset contains a body frame for the Layout area of the page and frames for one or more of the MasterBorder margins: Left, Right, Top, Bottom. An AutoFrame frameset cannot have more than these five frames and they must be in the specified positions.
  • If you require more than five frames or frames in different positions, you can manually code frames using HTML. See Examples of Page and AutoFrame HTML.
  • Not all browsers support frames. If you use frames, you might want to consider creating an alternate site for visitors with browsers that do not support frames. See Accommodating Browsers that Don't Support Frames and Directing Visitors to a Browser-Specific Page.

Within a frame, you can influence how variations in browser fonts affect your design. The Rows and Columns properties work within a frame the same way they work within a Layout. For information, see Optimizing HTML 4.01 with Tables Output.

Adding an AutoFrame

When you add AutoFrames, NetObjects Fusion applies them to the current MasterBorder and all pages that use that MasterBorder. Before you add AutoFrames, you might want to select or create a designated "framed" MasterBorder that you can apply to the appropriate pages. To apply different framesets to different pages, you'll need one MasterBorder for each frameset. As you develop these MasterBorders, follow these guidelines:

  • Objects in frames can t straddle frame boundaries, so check the corners of your page before you add AutoFrames. For example, if you have a banner across the top of the page that overlaps the left and top borders, resize it or move it before you turn on AutoFrames for either border.
  • To avoid scroll bars displaying when you don t need them, add a little extra room to margins you re going to set as frames or turn off scroll bars on the Frame Properties panel.See Setting Frame Properties.

See Creating a MasterBorder if you need help creating a MasterBorder.

To set a MasterBorder margin as an AutoFrame:

  1. In Page view, click an empty space inside the MasterBorder, or in the gray area outside the page.

The MasterBorder Properties panel appears.

  1. Click the AutoFrames tab.
  2. Click the button for each margin you want to set as a frame Left, Right, Top, or Bottom.

NetObjects Fusion adds a label Left, Right, Top, or Bottom to indicate a frame. In addition to the frame you select, the Layout area also becomes a frame.

If you add frames to more than one margin, the selection sequence is important because frames overlap each other in the order in which you add them. You can change the overlap sequence by clearing the AutoFrame option for all margins and then reselecting them in a different sequence.

Keep in mind that because enabling AutoFrames makes your page consist of at least three HTML pages, it can slow page loading.

Generating HTML Frame Borders

If you want site visitors to be able to resize the frame, on the AutoFrames tab of the MasterBorders Properties panel, select Generate HTML frame borders.

To set frames to be borderless in the site visitor's browser, clear Generate HTML frame borders. NetObjects Fusion turns off the borders for all frames in that MasterBorder.

To combine frames with borders and frames without borders on the same page, you must script the frames. See Examples of Page and AutoFrame HTML.

Setting Frame Properties

  1. In Page view, click the frame label or right-click in the frame and select Frame properties from the shortcut menu.

The Frame Properties panel appears.

You cannot change the name of the frame.

  1. Select a User scrollable option:
  • Yes. The browser always displays vertical and horizontal scroll bars in the frame, whether needed or not.
  • No. The browser never displays scroll bars, even if needed to display all objects in the frame. If the page content is larger than the frame itself, site visitors cannot see the entire page.

Due to the nature of browsers, links to anchors on a frame do not work if User scrollable is set to No.

  • Auto. The browser displays scroll bars if the size of the page content requires them.
  1. Select User resizeable frame so site visitors can resize the frame.

HTML frame borders must be visible so site visitors can drag them to specify a new size. If User resizable frame is not available, return to the AutoFrames tab and select Generate HTML frame borders.

  1. Clear Enable margin padding if you want to place objects at the frame border with no spaces.

Some browsers cut off content that does not have additional padding. Preview your page in several browsers to make sure it appears as you intended.

  1. If you are publishing using the HTML 4.01 with Tables, choose the most efficient table structure columns or rows. If you are publishing using HTML 4.01, this setting has no effect. See Controlling Published Output.
  2. Click the Background tab and in the Color field, select:
  • Automatic to set the frame background to the color specified by the current SiteStyle.
  • Transparent to eliminate the background color.
  • Color to select a background color from the Color Picker. The selected color appears in the box to the right of the Color field. To change the color, click the box and select a new color from the Color Picker.
  1. In the Image field, select:
  • Automatic to set the background to the image specified by the current SiteStyle.
  • None to eliminate the background image. Use this setting to remove the SiteStyle's background image from the frame.
  • Browse to select an image from the Picture File Open dialog. See Choosing an Image Format . If the picture is smaller than the frame, the browser tiles the image. If you select a picture with a transparent color, the background color shows through. To change the image, click the Browse button to the right of the field.

You can add an action to a frame using the Actions tab. See Building Dynamic Pages.

Targeting Links in AutoFrames

When a site visitor clicks a link placed within a frame, the browser has to know where to display the results. The frame that displays the retrieved content is the target of the link; when you specify which frame is to display the results of a link, you are targeting that frame.

  1. In Page view, select the object or text that you want to link.

The object's properties panel appears.

  1. Click the Link tool on the Standard toolbox.

The Link dialog appears.

  1. Select the type of link you are targeting: Internal Link, Smart Link, External Link, or File Link and set up the link. See Creating Links.
  2. In the Target area, click Existing and from the drop-down list choose the target frame in which you want to display the linked information.

You may not need to assign a target. NetObjects Fusion automatically targets most internal links for you.

  1. Click Link to close the dialog and create the link.
  2. Preview the page to test your targeted links.

Targeted links in framesets do not load the URL of the page into the browser Location input field. The browser sees the URL of the frameset, so title and location information about the page reflect the frameset rather than the page's content.

AutoFrames and Browser Refresh

When a site visitor clicks an untargeted link in a frame you created with AutoFrames, the browser either refreshes the entire page or only the content of the Layout area. This doesn't affect the appearance of the page, but for performance reasons you might not want the browser to refresh the entire page unnecessarily.

  • The browser refreshes the entire window if a framed MasterBorder contains a dynamic object, such as a banner or highlighted navigation button. The dynamic object, by definition, changes from page to page, so the browser has to load the new page. Rollover buttons do not change from page to page, so they do not affect the page refreshing.
  • The browser exits the frameset and displays the retrieved resource in the full browser window if the link retrieves a page with a different MasterBorder or an external HTML page.

If neither condition exists, the browser refreshes the body frame even if no target is assigned.