Using NetObjects Fusion Components

From Documentation
Jump to: navigation, search

Using NetObjects Fusion Components

Components are pre-built mini-applications that add interactivity to your site without custom programming or scripting. The Component Manager can be used to easily organize available components in Page view.

NetObjects Fusion components are installed when you install NetObjects Fusion. You can also download third-party components from third-party vendors. If you are a software developer and want to create your own NetObjects Fusion Components, sometimes called NFXs, you can use the Component Development Kit (CDK), available for free. For information, please send in a ticket at www.support.netobjects.com.

You cannot preview components in NetObjects Fusion. When you add a component to a page and preview, you see a placeholder graphic. To see how the component works, you must publish the site locally or remotely.

About the Component Manager

The Component Manager provides a way for you to organize your toolboxes and save space as you work in Page view. The first time you open your site in Page view, the Component Manager panel will be docked to the left of the page. The Component Manager can be docked, auto-hidden, resized, or grouped with other panels. If you close the Component Manager, it will re-appear the next time you add a component toolbox.

All NetObjects Fusion component toolboxes can be added to the Component Manager.

The Component Manager displays the components on three tabs:

  • Custom Components, which contains the NOF Components, the Online Services, and the Plug-Ins.
  • DB Components, which contains the Data-base Components.
  • Flash Components, which contains the library of all the Flash Components.

To add a component toolbox to the Component Manager:

  1. From the View menu, choose Components.
  2. Select the component toolbox you want to add.

The component toolbox will be displayed in the Component Manager,on the corresponding tab.

In the Component Manager, you view only the active toolboxes. You make a toolbox active by clicking on the toolbox and expanding it. Once you make a new toolbox active, the previous toolbox collapses.

Individual component toolboxes can be ungrouped by dragging their title bar away from the Custom Components panel. This will create a second Custom Components panel.

  • To view an object description, right-click on the component. A brief summary of the object will be displayed in the Component manager.
  • To view toolboxes in the Component Manager, click the up or down arrows.
  • To float a toolbox, drag the toolbox out of the Component Manager container and place it anywhere on the page.
  • To dock a toolbox, drag the toolbox out of the Component Manager container and dock any other side of page.
  • To dock a toolbox within another docked or floating component panel, drag the toolbox over the panel while pressing the Shift button.
  • To dock a toolbox back in the Component Manager, press Shift and drag the toolbox back into the Component Manager container.

About Components

NetObjects Fusion components are automatically available when you install NetObjects Fusion. These components appear on the NetObjects Fusion Components toolbox in Page view, and all are discussed in this chapter.

To add copies of the same component to a site, you must place a new component each time. Copying and pasting components can lead to site corruption.

Adding a Rotating Ad Banner

You can use the Ad Banner component to display a series of images within a banner. You determine which images display, associate a transition with each image, set the amount of time each image is displayed, and specify a URL linked to each image.

NetObjects Fusion supports .gif and .jpg images in components. See Choosing an Image Format.

To add an Ad Banner:

  1. In Page view, select the Ad Banner tool from the NetObjects NOF Standard Components toolbox.
  2. Click on the page where you want to place the Ad Banner.

An Ad Banner placeholder and the Ad Banner Properties panel appear.

  1. Specify the Banner Type.
  • Image Size. The Ad Banner is the same size as the images you select.
  • Standard Banner Size. Click Banner Size and choose from the drop-down list.
  • Custom. Enter a width and height for the Ad Banner.
  1. Enable or disable Automatic Resizing.

If Automatic Resizing is disabled, you must choose images that are the same size. If Automatic Resizing is enabled, Ad Banner resizes the larger images to match the smallest image. For best results, use images that are the same size.

  1. Set Pause Time to control how long each image is displayed.
  2. Enter the total number of images you want to use. You can use from 1 to 50 images.
  3. To select an image, double-click the Image row, select the image from the Picture File Open dialog, and click Open.
  4. Double-click the URL for Image row and in the Link dialog select a type of link for the image. See Creating Links and Anchors.
  5. Specify the link information and click Link.
  6. Click the Transition row and select a transition from the drop-down list. You can choose:
  • Column to draw increasingly larger columns of the new image onto the old image. The new image appears to slide in from behind the old image.
  • Fade to change one image into another by drawing a set of random pixels from the new image onto the old image.
  • Rotate to make it appear as though one image is rotating upward from below the other image.
  • Smash to drop the new image onto the old one. The old image appears to crumble under the weight of the new image.
  • Tear to make it appear as though the old image is ripped away to reveal the new image.
  • Unroll to place the new image on top of the old image and unroll it.

When the site displays in the browser, the sequence begins with a random image and its associated transition.

Repeat steps 7 through 10 for each image you want to rotate into the Ad Banner.

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

Adding DynaButtons

DynaButtons are Java buttons that link to another page on your site, other sites, or a specific file. You can place DynaButtons anywhere on your pages and assign up to 20 buttons to a DynaButton bar. In addition, you can assign up to 20 sub-buttons to each DynaButton. You can create sub-buttons for navigating from a main page to pages at a lower level.

When you publish the site, each button appears in the browser in the primary button style selected for the site and displays the name of the page to which it is linked. You cannot assign custom images to DynaButtons. The button's style is determined by your SiteStyle. To use custom images for buttons, use the Picture Rollover tool.

Because a DynaButton is an active link, the button appears active when a site visitor moves the mouse pointer over the DynaButton or clicks the button. The site visitor can click the DynaButton to go to the appropriate link.

To add DynaButtons and set properties:

  1. In Page view, select the DynaButtons tool from the NOF Standard Components toolbox.
  2. Click on the page to indicate the DynaButtons location.

A DynaButtons placeholder and the DynaButtons Properties panel appear.

  1. Select the buttons orientation vertical or horizontal from the drop-down list.
  2. Click the Number of Buttons row, specify how many buttons you want, and click the check mark.
  3. Double-click the number row, such as Button 1.

The Link dialog appears. You can link this button to another page, file, smart link, or external link. See Creating Links and Anchors.

  1. Specify the link information and click Link.

The details of the link appear in the right column of the button row.

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

Adding Sub-Buttons

If a DynaButton contains sub-buttons, the sub-buttons appear when a site visitor clicks the DynaButton. The sub-button shows information about the link associated with the button. For example, if a sub-button is linked to an external link, the sub- button displays the asset name for the external link.

To add sub-buttons and set the properties:

  1. In Page view, create a DynaButton as described in Adding DynaButtons.
  2. Double-click the Use Sub-Buttons row.

Yes appears in the right column and NetObjects Fusion adds a Number Sub-Buttons row under the Use Sub-Buttons row.

  1. To specify the number of sub-buttons, select the Number Sub-Buttons row, enter the number of buttons, and click the check mark.

The limit is 20 sub-buttons. The appropriate number of sub-button rows appear, numbered in sequential order.

  1. To define the link for each sub-button, double-click the appropriate sub-button row, such as Sub-Button 1,2. The first number, in this case the 1, identifies the button for which the sub-button was created, and the second number is the number of the current sub-button.

The Link dialog appears. See Creating Links and Anchors.

  1. Specify the link information and click Link.
  2. Repeat steps 4 and 5 to create and define each sub-button.

Adding a Go Menu

You can use the Go Menu component to easily create a drop-down navigation menu, with each menu item corresponding to a single page in the site.

  1. In Page view, select the Go Menu tool from the NOF Standard Components toolbox.
  2. Draw a box on the page where you want to place the Go Menu.

The Go Menu dialog appears.

  1. On the Menu Items tab, select a link type from the drop-down list and set up a link to the items you want to include on the Go Menu. See Creating Links.
  2. From the list on the left, select the specific items you want to include on the Go menu and click the right arrow to move them into the Link column. You can include up to 50 items on the menu.
  • To change the way an item is listed on the menu, double-click it in the Menu Item Name column and type a new name.
  • Select an item and click the Move up or Move down button to change the order of items on the menu.
  • To delete an item, select it and click Delete.
  1. Click the Button Format tab.
  2. Select one of the three formats. An example of each format is shown on the left.
  3. Click OK.
  4. To change the items included on the Go Menu or the button format, use the Go Menu Properties panel.

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

Adding a Google Search Component

With the Google Search Component, you can easily incorporate a Google Web Search module on your website and allow site visitors to search the World Wide Web directly from your site.

To add a Google Search component, you place the component on a page and then customize its appearance to complement your page design.

  1. In Page view, select the NOF Google Search tool from the Standard Component toolbox.
  2. Draw a box on the Layout to indicate where you want to position the Google Search Component.

The Google Search dialog box appears.

  1. Select the type of Google Search Component you want to add from the drop-down list in the Google Business Solutions fieldset.
  • Google Free Web Search searches the entire World Wide Web.
  • Google Free SafeSearch searches the entire World Wide Web while filtering adult content.
  • Google Free Web Search with site searchsearches the entire World Wide Web and specific domains.
  1. Choose the country you wish to use from the Select Country dialog.
  2. Configure the settings for the Google Search Component you have chosen as described below.

To configure the Free Google Web Search settings:

  1. In the Optional Customization of Results Page section, choose a background color for the Google logo.
  2. Enter text for the search button caption in the Search Button Caption text field. The default text that will appear on the search button is Google Search.
  3. Click OK to close the Google Search dialog.

To configure the Google Free Web Search with Site Search settings:

  1. In the Optional Customization of Results Page section, choose a background color for the Google logo.
  2. In the Target for search window field, select Existing if you want to show the search results in the existing window, or select Pop-up Window if you want to display the search results in a new pop-up window.
  3. Enter text for the search button caption in the Search Button Caption text field. The default text that will appear on the search button isGoogle Search.
  4. Click OK to close the Google Search dialog.
  5. Enter text for the search button caption in the Search Button Caption text field. The default text that will appear on the search button is Google Search.
  6. Click OK to close the Google Search dialog.

To configure the Google Free Web Search with Site Search settings:

  1. In the Google Search dialog box, specify the category names that you want visitors to be able to search, in the Enter domain(s)field, separating multiple category names with a semicolon.
  2. The category must be in the Google database.
  3. When the site is published, each category will be listed next to a radio button. Visitors will select the corresponding radio button to search the selected category.
  4. Customize the appearance of the search results page by configuring the Optional Customization of Results Page Settings.
    • URL (location) for your logo. Enter the URL for your logo. The logo will be displayed at the top of the search results page.
    • Alignment of your logo. Select one of the alignment options (Center or Left) for your logo in the Google Search Component from the drop-down list.
    • Google logo background color. Select one of the three options (White, Gray, or Black) for the background color of the Google logo from the drop-down list.
    • Background (BGCOLOR) color. Choose a background color for the search results page. Click the Browse button and select a color from the Color Chooser that best matches or complements your page design.
    • Text (TEXT) color. Choose a color for the search results text color. Click the Browse button and select a color from the Color Chooser.
    • Link (LINK) color. Choose a color for links. Click the Browse button and select a color from the Color Chooser.
    • Visited link (VLINK) color. Choose a color for displaying visited links. Click the Browse button and select a color from the Color Chooser.
    • Background URL. Choose a background color for URL list field. Click the Browse button and select a color from the Color Chooser that will appear.
    • Active link (ALINK) color. Choose a color for active links. Click the Browse button and select a color from the Color Chooser.
    • Important text color. Choose a color for displaying the links to URLs containing the search terms. These links appear below the excerpt containing the search terms found on each website listed on the Google Search page. Click the Browse button and select a color from the Color Chooser.
    • Faint text color. Choose a color to be used for the "Cached" and "Similar pages" links on the Google Search page text color. Click the Browse button and select a color from the Color Chooser.
  5. In the Target for search window field, select Existing if you want to show the search results in the existing window, or select Pop-up Window if you want to display the results in a new pop-up window.
  6. Enter the text that will appear on the Search Button in the Search Button Caption text field. The default text that will appear on the Search Button is Google Search.

The NetObjects Fusion News Ticker

The News Ticker Component adds a marquee that displays scrolling text quotes across a page either horizontally or vertically. You can use the News Ticker to inform site visitors of special promotions or events or to relay any type of noteworthy information. When adding a News Ticker, you can customize the attributes of the scrolling text such as its font, size, alignment, color, indentation, scrolling speed, and background color to complement your page design. You can add as many News Ticker Components as necessary on different pages of your website, and you can also place more than one News Ticker on a page.

Adding a News Ticker to a Page

To add a News Ticker to a page:

  1. In Page view, select the News Ticker tool from the Standard Components toolbox.
  2. Draw a box on the Layout to indicate where you want to position the News Ticker Component.

The News Ticker dialog box appears.

  1. In the News Ticker dialog box, add quotes to the marquee and configure the News Ticker settings.

To add quotes to the News Ticker marquee:

  1. In the News Ticker dialog box, click the Items tab.
  2. Click the Content tab.
  3. Replace the default "Title Goes Here" and "Body Goes Here" text with your desired title and body text.
  4. Click the Style button corresponding to the title and text to modify an individual quote's font, alignment, size, color, and style.
  5. Click OK to close the Style dialog.
  6. Click the Options tab to customize the settings of the current quote:
  • Background. Click the color box and select the background color for the marquee in the color chooser.
  • First line. Enter an indentation value (in pixels) for the first line of the body text.
  • Hanging. Enter an indentation value (in pixels) for body text other than the first line.
  • Padding. Enter a value (in pixels) for the amount of space between the quote's title and body text and the left side of the marquee. The maximum value is 1/2 of the scrolling area.
  • URL. To make a quote an active link, enter the URL to which you want to link the quote.
  1. Add a new quote by clicking New in the News Ticker dialog box and entering title and body text.
  • Use the up and down arrows to move a quote's position in the News Ticker.
  • To duplicate a quote, select the quote and click Duplicate.
  • To remove a quote from the marquee, select the quote and click Delete.

Configuring the News Ticker

To configure the News Ticker:

  1. In the News Ticker dialog box, click the Marquee tab.
  2. Customize the appearance of the News Ticker:
    • Background. Click the color box and select the background color for the marquee in the color chooser.
    • Orientation. Select the direction that the text will move. Choose Up from the drop-down menu for a vertical marquee that moves from the bottom to the top of the screen, and choose Left for a horizontal marquee that moves from right to left on the screen.
    • Spacing. Set the distance (in pixels) between the individual quotes in the marquee.
    • End space. Set the distance (in pixels) between the end of the last quote in the marquee and the beginning of the first quote in the marquee when the marquee repeats.
    • Speed. Enter a value or use the up and down arrows to increase or decrease speed at which you want the text to move. Select a value from 1 (the slowest speed) to 10 (the fastest speed). If you select a value greater than 10, the speed will remain at the maximum speed of 10.
    • Pause. Select the amount of time (in seconds) that each quote remains on the screen when it reaches the end of the display area before displaying the next quote in the marquee.
    • Script type. Select the output code you want the component to generate (Java Applet, DHTML, or Flash).

Using News Ticker Settings

When you create a News Ticker, you can save the marquee and its quotes so that you can save them for future use. By saving marquee settings, you can easily place the marquee on other pages or other sites without having to re-create the News Ticker or its contents.

To save quote settings:

  1. In the Quotes tab of the News Ticker dialog box, select the News Ticker that you want to save.
  2. From the File menu, select Save Settings.

The Save As dialog box appears.

  1. Enter a name for the News Ticker in the File name field.

NetObjects Fusion saves the News Ticker and its quotes as a News Ticker settings (.sts) file.

  1. Click Save to close the Save As dialog box.

To load saved quotes and add them to site pages:

  1. In Page view, from the Custom Components toolbox, select NetObjects News Ticker > News Ticker Component.

The News Ticker dialog box appears.

  1. From the File menu, select Load Settings.

The Open dialog box appears.

  1. Select the saved News Ticker (.sts file) you want to add to the page.
  2. Click Open to add the saved News Ticker to the page.

Loading Pictures onto Your Site

Use the NetObjects Picture Loader Component to load an image from a site other than your own. You can use this to place advertising banners if the banners are located on a server other than your Web server.

To load a picture from an external source:

  1. In Page view, select the Picture Loader tool from the NOF Standard Components toolbox.
  2. Draw a box on the page to indicate where you want to place the picture.

A placeholder and the Picture Loader Properties panel appear.

  1. Click the Image URL row and type the URL where the picture is located.

Be sure to type the complete URL.

  1. Click the check mark.

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

Adding Pictures That Roll Over

You can use the Picture Rollover component to create JavaScript rollovers for any image on your site. Because this component uses JavaScript, the colors of your images are not compromised.

To add pictures that roll over:

  1. In Page view, select the Picture Rollover tool from the NOF Standard Components toolbox.
  2. Draw a box on the page where you want to locate the pictures.

A picture placeholder and the Picture Rollover Properties panel appear.

  1. To specify the first image to display, double-click the Initial image row, select the image from the Picture File Open dialog, and click Open.

The Picture Rollover Properties panel changes and displays two new rows Mouse over image and Mouse out image.

  1. To specify the image to display when the mouse pointer moves over the image, double-click the Mouse over image row, select the image from the Picture File Open dialog, and click Open.

The images you select for rollover pictures are resized to the size of the first image you select. For best results, use images that are the same size.

  1. To specify which image to display when the site visitor moves the mouse pointer off the picture, double-click the Mouse out image row, select the image from the Picture File Open dialog, and click Open.
  2. To link the image to a specific URL, double-click the Link URL row.

The Link dialog appears. Because the entire image is treated as one object, you can link it to another page, file, smart link, or external link, such as another site. See Creating Links.

  1. Specify the link information and click Link.

The details of the link appear in the right column of the button row.

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

Adding Rotating Pictures

You can use the Rotating Picture component to display different pictures in succession in the same place on the page. For example, you could rotate among several images that advertise new products or current sale items.

To add a rotating picture, you specify the image to display and the number of seconds to pause before displaying the next picture in the sequence. You can also assign a link to each picture. NetObjects Fusion supports .gif and .jpg formats in components. See Choosing an Image Format.

To add pictures that rotate and set their properties: You can use the Rotating Picture component to display different pictures in succession in the same place on the page. For example, you could rotate among several images that advertise new products or current sale items.

To add a rotating picture, you specify the image to display and the number of seconds to pause before displaying the next picture in the sequence. You can also assign a link to each picture.

To add pictures that rotate and set their properties:

  1. In Page view, select the Rotating Picture tool from the NOF Standard Components toolbox.
  2. Draw a box on the page to indicate where you want to place the picture.

The Rotating Picture dialog appears.

  1. To add pictures and create a series of rotating images, click the add (+) button.
  2. Click the browse button and locate the image you want to add.
  3. To display descriptive text that appears when a visitor hovers the mouse pointer over the image, add your desired text in the Alt Tag field.
  4. To make the image a link, click the Link button. In the Link Target dialog, choose either an internal link to one of your site pages or enter the URL of an external site.
  5. Select the script type (DHTML or Applet) for the rotating image.
  6. To set the number of seconds each picture is displayed before moving to the next one, click the first check box in the dialog and specify the number of seconds to display each picture.
  7. Click the Randomize picture order check box to display the series of rotating images in a random sequence.
  8. To automatically resize the image to fit each visitor's browser, click the Scale picture to fit check box.
  9. Change an image's position in sequence of the rotating picture by moving its position in the list using the up or down arrows.
  10. Click the (-) remove button to delete images from the series of rotating images.
  11. Repeat steps 3 and 4 for each additional image.
  12. Click OK to close the Rotating Picture dialog.
  13. You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Adding an RSS Feed

With the RSS Feeds Component, you can place news aggregators on your pages and display various RSS news feeds on your site. RSS (Real Simple Syndication) is a format for delivering up-to-date news and content. RSS feeds are available on websites of major news organizations and other types of websites, and instructions on how to use the RSS feeds are typically provided on sites that make them available.

By adding an RSS feed to your site pages, you can provide visitors with information geared to their particular interests. For example, a website for a sporting goods store could display an RSS feed to provide the latest sports-related news and information for its customers.

Before adding the RSS Feeds Component, you should obtain the RSS feed information, which is typically a URL with an .xml or .rss extension, from the provider of the RSS feed.

Adding an RSS Feed to a Page:

  1. In Page view, select RSS Feeds from the NOF Standard Components toolbox.
  2. Draw a box on the layout to indicate where you want to position the RSS Feeds Component.

The RSS Feed dialog box appears.

  1. Enter the necessary information for subscribing to an RSS feed:
  • RSS feed. Enter the address (URL) of the RSS feed in the RSS Feed field. (This information can be found on the site that makes the feed available.)
  • Refresh rate. Select the check box if you want the RSS Feeds component to check for new items in the feed to which you are subscribing. You can choose to have the RSS Feed check for new items at 15-, 30-, or 60-minute intervals.
  • Proxy URL. The RSS Feeds component provides proxy scripts in PHP (xmlfetch.php) and ASP (xmlfetch.asp). These proxy scripts act as a gateway between the location on your Web site where the news information will be displayed and the news aggregators that offers the RSS feed. You do not have to make any modifications directly to these scripts but you will need to know their location.

An absolute URL contains the entire Web path to the page or it contains a Web path that starts from the site root.

Example of an entire Web path to a page is "http://www.site.com/folder1/page.html" and an example of a Web path that starts from the site root is "/folder1/page.html". Both links will work from any page from the site, and it doesn't matter under how many folders the page is located relative to the site root.

A relative path contains a Web path that is relative to the page where it is called from.

For example, "../scripts/page.php" will work only if the link is called from a page located in the folder that is on the same level with scripts folder.

The default location is /scripts/xmlfetch.php or if you are using ASP, /scripts/xmlfetch.asp and this indicates that the RSS Feeds component is located on the Home page.

If the RSS Feeds component is located on a page other than the Home page, the path would be: ../scripts/xmlfetch.php

In both cases you can use the absolute path.

For example, if you publish your website on a hosting platform that supports PHP without creating a separate site folder, the path to type in the text box would be: http://www.yourdomain.com/scripts/xmlfetch.php.

Substitute your domain.com for your actual live category name.

Server Script displays either ASP or PHP, depending on the Settings from the General tab of the Current Site Options dialog. The default xml fetch script for the language type that will be uploaded to your Web server. The script will parse the .xml data to your website.

  1. Customize the appearance of the news feeds on your site by setting the following options in the Layout fieldset:
    • Template. In the drop-down list, select the manner in which the feed information will be displayed:
    • RSS List presents the information in a list-like manner.
    • RSS Tree presents the information in a tree-like manner, which allows you expand the items and follow the links.
    • Style. To apply a custom CSS style to the RSS feed, type the name of the CSS style in the text box or select the style from the drop-down list. To create a custom CSS style that will be available for the component form object, see Using Style Sheets with Custom Components.
    • Loading message. Type the message to be displayed while the component retrieves the requested feed. The default message is "Loading..."
    • Link: Set the text for link to the full story, something like: "Read more.."
    • Show all items. Check this option if you want all the items in the feed to be displayed by the RSS Feeds Component.
    • Show links. If you leave the "Show all items" option unchecked, type in the number of items in the feed that you want to be displayed on the page.
    • Expand items. Check this option if you want all the items in the feed to be expanded.
    • Show logo (for expanded items). Check this option to display the logo of the organization from which the RSS feed originates. For example, if you are using an RSS feed from a major news organization, the organization's corporate logo will display in the expanded items list.
  2. Click OK to close the RSS Feeds dialog.

Directing Visitors to a Browser-Specific Page

The Screen Door component detects the visitor's browser type and redirects the visitor to a page targeted for that specific browser.

The Screen Door is not visible on the page. You might want to include information on the page to let site visitors know they are being directed to another page.

You can only include one Screen Door per page.

  1. In Page view, select the Screen Door tool from the NOF Standard toolbox.
  2. Draw a box in the Layout area of the page where you want to place the Screen Door. This component does not work when placed in a MasterBorder.

A Screen Door placeholder and the Screen Door Properties panel appear.

  1. Choose to pause or not pause before redirecting a site visitor. If you set Pause to Yes, enter the number of seconds you want to pause.
  2. Set up appropriate links for the default page and for each individual browser type. See Creating Links.

Adding a Site Map Button

Site Mapper is a Java navigation applet that site visitors can use to create an interactive map of a site. If your site is large, Site Mapper simplifies navigation by providing a detailed view of the site's levels. Using the site map, visitors can jump directly from page to page without using the page navigation controls.

The Site Map button provides three ways for visitors to view the site:

  • By structure, similar to Site view in NetObjects Fusion.
  • In an outline view
  • By searching for certain words

To add a Site Map button and set its properties:

  1. In Page view, display the page where you want to add the Site Mapper component. The Site Mapper does not show pages above this page in the site hierarchy.

If you place the Site Mapper component in a MasterBorder, you can place it on any page using that MasterBorder. It is recommended, however, that you place a Site Mapper component in the Layout of a single page in the site.

  1. Select the Site Mapper tool from the NetObjects NOF Standard toolbox.
  2. Draw a box on the page to indicate the location of the Site Map button.

The Site Map button and the Site Mapper Properties panel appear.

  1. To change the image displayed for the Site Map button, double-click the Image row, then select the image file you want from the Picture File Open dialog.

The selected image appears on the page.

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

Adding Time Based Pictures

You can use the Time Based Picture component to display different pictures at the same location on your page at the time of day you specify. You select the image to display and specify the hour at which to display it. The browser automatically displays the picture at the specified time. The picture remains on the page until it is time for the next picture to be displayed.

NetObjects Fusion supports .gif and .jpg formats in components. See Choosing an Image Format.

To add time based pictures and set the properties:

  1. In Page view, select the Time Based Picture tool from the NOF Standard toolbox.
  2. Draw a box on the page where you want to locate the picture.

A picture placeholder and the Time Based Picture Properties panel appear.

  1. Click the Number of Images row and specify the number of images you want to rotate.

You can use up to 24 images. NetObjects Fusion adds an Image, Start Time for Image, and URL for Image row for each image.

  1. To select an image, double-click the Image row, select the image from the Picture File Open dialog, and click Open.
  2. To create a link to the image, double-click the URL for Image row and in the Link dialog select a type of link for the image. See Creating Links.
  3. Click the Start Time for Image row and select a starting time from the drop- down list.

The start time determines when the image is displayed on your site. You can select one-hour increments from 12 a.m. to 12 p.m. The image is displayed until the next image's starting time. Be sure images have consecutive starting times.

  1. Repeat steps 4 through 6 for each image you add.

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

Adding Server Tags

The NetObjects Fusion Server Tag Library component provides you with server tags, allowing you to incorporate queries, actions, and other dynamic elements into your website or application. The tag libraries provide complete reference information.

NetObjects Fusion offers support for the following tag libraries:

  • ColdFusion
  • JSP
  • Struts

Before working with Tag Libraries, you should be familiar with tag functionality and requirements.

To add server tags and set the properties:

  1. In Page view, select a Tag Library toolbox from the NetObjects Fusion Components Manager.
  2. Click on the page where you want to place the tag.

A tag placeholder and the tag properties appear.

  1. Set the TAGTYPE to:
  • Start if it is a beginning tag.
  • End if it is a closing tag.

Tags that do not require a closing tag do not have the TAGTYPE attribute listed.

  1. Specify the tag attributes in the tag properties panel.

NetObjects Fusion does not verify the tags attributes and values you add, so be sure to use valid syntax. Many tags have attributes that require values for the tags to function correctly.

Displaying Toolboxes in the Component Manager

You can display toolbox objects as icons or text and icons. You also have the option to view object descriptions or remove the description field. Additionally, toolboxes can be stored in the Component Manager or can float.

Using the DB Creation Wizard

The DB Creation Wizard will assist you during the process of setting up flat file databases. Use the Database Creation Wizard to identify the location of the flat file database and to choose a publishing profile.

In the dialog that appears when clicking the Wizard button on the component's General tab, you may select a remote publishing profile from the "Publishing Profile" drop-down list.

The button, displayed to the right of the "Publishing profile" drop-down list, displays the possible actions or status:

  • Connect: Clicking on the Connect button will establish a connection to the hosting server listed in the Publishing Profiles.
  • Connecting: When the connection to the Publishing Profile is being established.
  • Disconnect: When the connection is canceled.

Selecting Cancel or switching publishing profiles while connecting to the server will cancel the connection process.

When NetObjects Fusion connects, the dialog window will display the Folder Tree structure of the website.

The "Path to Database" field displays the relative path to the flat file database; this path is relative to the folder where the site is published. The Auto Generate feature can be used to create a path that is two folder levels deep from the selected folder tree, and clicking the Auto Generate button also creates the flat file database. The unexplored folders will be grey-out.

To create a new folder, in which to place the flat file database:

  1. In the Folder Tree, select the directory, under which you want to create the new folder.
  2. Right-click on that folder.
  3. Click on the New Folder menu.
  4. The Input dialog appears.
  5. Type the name of the new folder.
  6. Click OK.

To change the name of the flat file database:

  1. In the Folder Tree, select the folder on which you want to create the flat file database.
  2. In the Name field, type a name for the csv file.
  3. Click on the Create Data.. button.

Configuring the Captcha Options

The Captcha field is of the type Captcha and cannot be changed. Use Captcha images to prevent automated form substitution. The Captcha option renders characters in a distorted form, asking the user to enter the presented characters.

  1. In the E-mail Page Properties panel,click the ... Click to edit button.
  2. In the E-mail page dialog, select Captcha in the field list.
  3. Configure the following options for the Captcha option.
    • Style. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, see Using Style Sheets with Custom Components.

  • Character Font: Select a character font from the drop-down list. The preview will display the Captcha image.
  • Background color: Set the color of the background image.
  • Foreground color: Set the color of the characters.
  • Number of characters: Use the arrow buttons to set the number of characters that will be displayed in the Captcha image
  • Space left between characters: Use the arrow buttons to set the distance left between two characters of a string.
  • Alignments: Select how you prefer the Captcha image to be displayed: horizontally, or vertically.
  • Top/Bottom padding: Use the arrow buttons to set the space between the image's borders and the characters.
  • Right/Left margin: Use the arrow buttons to set the space between the image's margins and the characters.