NetObjects Fusion Basics

From Documentation
Jump to: navigation, search

NetObjects Fusion Basics

NetObjects Fusion Website Design Software incorporates new technologies with the current browser environment to help you meet today's site building challenges. Using NetObjects Fusion you'll find it easy to build dynamic, content-rich websites that use the latest interactive technologies, including cascading style sheets (CSS3) and HTML5.

Creating and maintaining your Web site involves a variety of processes including adding pages to the site, changing page layouts, establishing the site’s appearance, maintaining links, and even uploading the changes to your Internet Service Provider (ISP).

NetObjects Fusion Views

NetObjects Fusion® is a site-oriented Web design application, providing the user with an intuitive framework for site creation. NetObjects Fusion uses a series of six views (Online View, Site View, Page View, Style View, Assets View, and Publish View), each giving the user a logical way of creating and managing Web site information and data. The intuitive nature of the NetObjects Fusion interface provides users with the potential for a rapid Web production cycle, increasing productivity and efficiency. Changes made in one view are automatically reflected in the others. You can go to any view at any time by clicking a button on the views bar at the top of the NetObjects Fusion window.

Online View

Online View

You see the Online View when you start NetObjects Fusion (if you haven't changed the settings on the Program tab of the Application Options dialog). The Online View offers a variety of resources to help you build successful websites. It includes services you can integrate into your website, content you can incorporate on your web pages, how-to information to enhance your website building experience, links to NetObjects and third-party resources, and much more.

Site View

Site View

Start with the Site View to create the hierarchical structure of a website or to import an existing website template. You can see a structural map of the website, which is a graphic view that shows how the pages relate to each other, or an outline view similar to Windows Explorer. You can quickly rearrange the pages of your website by dragging and dropping pages and sections. See Creating and Managing Sites.

Page View

Page View

Use the Page View to design web pages and add content. In the Page View you see the Layout area and MasterBorder of each page. The Layout area displays objects that are unique to that web page. The MasterBorder contains objects that repeat on a set of web pages, much as headers and footers appear in a word processing document. You can also preview the web page as it will appear in a browser and view and edit the HTML source. See Page View Basics.

Style View

Style View

A SiteStyle® defines the individual elements, including navigation buttons, banners, lines, and text that define the "look-and-feel" of your website. In the Style View you can create your own SiteStyle, or choose from pre-built SiteStyles to give your entire website a consistent look and feel. Applying a new SiteStyle to an existing website will completely alter the appearance of the website with one click. See Using SiteStyles.

Assets View

Assets View

Assets are everything that you use to build a website. They include the images, files, links, data objects, scripts and variables that you use in the design of your website. The Assets View gives you centralized control over these items. When you change an asset, NetObjects Fusion updates every reference to that asset throughout the entire website. See Working in Assets View.

Publish View

Publish View

When you are ready to publish the completed website, go to the Publish View to set up your publish profiles and publish your website to your hosting account with one click. See Publishing Your Site.

NetObjects Fusion Window

When you start NetObjects Fusion and create a new blank website, you'll see a window containing a Home page icon and the Standard toolbar docked at the top of the window and the Properties panel.

The title bar, menu bar, and views bar are at the top of the NetObjects Fusion window. The title bar shows the name of the current site.


About the Workspace

The workspace consists of the panels, toolbars, and menus available in NetObjects Fusion. To customize your workspace for maximum efficiency, you can dock, reposition, and modify these features. Generally, panels may be docked to any side of the workspace, or detached and left to float.

The panels available within NetObjects Fusion are listed on the View menu. Clicking the Close button on a docked or floating panel will remove it from the interface. You can open a closed panel by selecting the name of the panel from the View menu.

About Toolbars

When you go to Site view, the Views Bar is displayed. Additional toolbars are available in Page view.

You can move a toolbar by positioning the pointer over the grip handle and dragging it anywhere in the window. To dock the toolbar, double-click its title bar or drag it to the left, right, top, or bottom of the window.

A small triangle in the lower right corner of a tool button indicates the tool is one of a group. To see the entire group, point to the tool and hold down the left mouse button. A flyout containing the other tools in the group appears. As you move the pointer over each tool, a ScreenTip identifies the tool group and the name of the specific tool.

About Toolbars

To select a tool from a flyout, position the pointer over the tool and release the mouse button. The tool you select is displayed on the toolbar. For example, if you point to the Draw tool on the Page view Standard toolbox and hold down the left mouse button, you can draw a rectangle, rounded rectangle, ellipse, polygon, or line.

NetObjects Fusion contains the following toolbars:

  • Views: Allowing you to access any of the six different views within NetObjects Fusion immediately.
  • Text Format: Provides the most common used text editing functions.
  • Standard tools: The Standard toolbox contains the most common used actions such as adding text, images, tables, shape tools or Multi Layout Regions. Expand the options using the drop-down arrow to display more options for certain tools.
  • Common actions: Offer a quick way to invoke actions that are used frequently such as Save, Cut, Undo-Redo, and Spell Check.
  • Forms: The Forms toolbar contains the necessary controls for developing web based forms.
  • Full Screen: Increase the viewable area with the Full Screen toolbar, by removing all the floating elements to display just the tools you need at a particular time when you need optimum workspace. By default, the Full Screen toolbar is out of sight.
  • Timeline Mode toolbar: Offers you the possibility to enter the Timeline Mode, to create a new animation, or to set actions that trigger the Timeline animation.
  • Data Source Tools: Offer a quick way to invoke actions that help you navigate and work with data source contexts.

You can customize the existing toolbars or create new custom toolbars to display tools of your choice. You can add and remove buttons, hide or display toolbars, and move toolbars to any location on the workspace. The workspace you create can be saved and reused. See Optimizing Your Workspace. To hide and show toolbars, from the View menu choose Toolbars, Name of toolbar. A check mark on the menu indicates a toolbar is displayed.

About Panels

You can set the positioning of panels in your workspace so they are floating or docked. You can dock the panel by dragging the panel by its title bar until the positioning arrows on the screen are displayed. Holding the left mouse button while you drag, move the panel over the arrow that indicates the position where you would like to dock the panel. You can float the panel by dragging its title bar. While still holding the mouse button down, move towards the area where you want to place it and then release the mouse button.

Positioning Panels

When a floating panel is set to minimize and you move your mouse over its title bar, the panel will expand. When an auto-hidden floating panel loses focus, it automatically slides under its title bar. While a panel is auto-hidden, only its title bar will be visible in the workspace.To display an auto-hidden floating panel, move your pointer over its title bar or click on it. The panel will slide back into view.

Use the buttons in the lower left of the Page view window to open and close the Properties panel, Site Navigation panel, Object Tree, and CSS panels.

About the Properties Panel

When you click an object in Site, Page, or Style view, the properties panel changes to display the properties available for that object. Properties appear on buttons that also might change when the selected object changes. For example, when you select a text box in Page view, the Text Properties panel includes Text Box and Actions buttons.

When you double-click in the text box to edit the text, the Format button is added to the display.

To dock the properties panel, double-click its title bar. Repeat this action on a docked panel to make the panel float. To completely hide the properties panel, click its Close button. To show the panel again, from the View menu, select Property Inspector. A check mark on the menu indicates the panel is displayed.

Using the Zoom Tools

You can select the Zoom In or Zoom Out tool from the Standard toolbar in the Page view. The Zoom In tool is a magnifying glass with a plus sign; the Zoom Out tool has a minus sign.


You can reverse the function of the current Zoom tool by holding down the Alt key. For example, if the selected Zoom tool is Zoom In, pressing Alt changes it to Zoom Out. When you release the Alt key, it becomes Zoom In again.

Navigating in NetObjects Fusion

NetObjects Fusion provides several navigation tools, including buttons on the views bar, the Go menu, and shortcut menus.

Using the Views bar Buttons

You use the buttons on the views bar to move between views. See NetObjects Fusion Views.

Some of the buttons in the middle of the views bar change depending on the view. For example, in Site View and Page View you see a New Page button.

Page View

In the Publish View you see a Publish Settings and a Publish Site button.

Publish View

To see how the website will appear in the browser you specify in the Application Options dialog, click the Preview Site button.

Using the Go Menu

The Go menu provides all the navigation features in one place and shows equivalent keyboard shortcuts. A checkmark to the left of a command indicates the current view.

The Go menu commands vary slightly from view to view.

  • From all views you can go to any other view or the current view's subviews. From Page view you can also go to other pages.
  • Use the Go To command to find any named object in your website. To search the entire site for any named NetObjects Fusion item (a page, layout, SiteStyle, data list, and so on), choose Go To from the Go menu. In the Go To dialog, enter the name, or partial name, of the item you want to locate, choose Begins with, Contains, or Ends with, and click OK. If only one object meets your criteria, NetObjects Fusion opens the appropriate view or dialog to display the object. If several objects meet your criteria, NetObjects Fusion lists them so you can pick one.
  • Use the Last command the same way you use the Last button on the views bar to go to the last web page or view you were working on.
  • Use the Recent command to select from a list of the views and web pages you displayed during the current session.
  • Use the Preview command to launch your browser and display a preview of your website.

Using Context Menus

NetObjects Fusion provides context menus you open by right-clicking an item. The menu lists the commands you can use on the selected item. In all views and in dialog and properties panels, you can right-click an item and select What's This from the context menu to display a description of the item.

Choosing Colors

In NetObjects Fusion, whenever the properties panel includes a Color button, you can change the color of the selected object. For example, you can change the color of the page icons or the background in Site view, objects in Page view, or button text color in Style view.

To choose a color for a selected object:

  1. Click the Color button in any properties panel where it is offered. The Color Chooser appears.

The previous colors you selected from the panel are displayed in the Recent Colors boxes.

  1. Click the color and set the opacity you desire to assign to an object in the Color Chooser:

The Original and New boxes show the original color and the color you just selected. RGB and HTML hexadecimal values are also displayed.

  1. Click OK.

The new color appears in the selected object.

Working with Color Panels

When you choose colors for the objects in your website, you select from the panels offered in the Color Picker. You can use the Browser Safe Panel, which contains colors that are Web safe, the system panel used by Windows, a panel you import from another application such as Adobe Photoshop, or a custom panel you create.

Choosing a Color Panel

  1. Click the Color button in any properties panel where it is offered.
  2. In the Color Chooser, click More Colors to open the Color Picker.
  3. In the Color Picker dialog, clear the Only Web Colors check box.
  4. Select a panel from the drop-down list at the top of the dialog. If you choose Custom Panel and want to load an existing custom panel, see Loading a Custom Color. To create your own custom panel, see Creating or Editing a Color Panel.

The panel is displayed in the Color Picker until you change it.

  1. Click OK.

Loading a Custom Color Panel

  1. Click the Color button in any properties panel where it is offered.
  2. In the Color Chooser, click More Colors to open the Color Picker.
  3. In the Color Picker dialog, clear the Only Web Colors check box.
  4. Select Custom Panel from the drop-down list at the top of the dialog.

An all white panel appears.

  1. In the Open dialog, navigate to the panel you want to use, then click Open.

This panel is displayed in the Color Picker until you change it.

  1. Click OK to close the Color Picker.

Creating or Editing a Color Panel

  1. Click the Color button in any properties panel where it is offered.

The Color Chooser appears.

  1. In the Color Chooser, click More Colors to open the Color Picker.
  2. In the Color Picker dialog, clear the Only Web Colors check box.
  3. Click the color you want to assign to an object in the Color Chooser.

A blank panel appears.

  1. If the desired color is not shown in the Color Chooser, click More Colors to open the Color Picker.
  2. In the Color Picker, select a color range by:
    • Dragging the triangles along the slider.
    • Clicking inside the color slider.
  1. In the color field, click the color you want to assign to the object, or toggle outside the Color Picker dialog to select a color from the Page view window.

When you select a color, the color rectangle to the right of the color slider shows the new color in the top section of the rectangle and the original color in the lower half of the rectangle, and HSB, LAB, RGB, CMYK, and HTML hexadecimal values are also displayed.

If you clear the Only Web Colors check box and select a color, you might see a warning that the selected color is not Web safe. To avoid unexpected results in your site visitors' browsers, choose colors that are Web safe.

  1. If the desired color is not shown in the Color Chooser, click More Colors to open the Color Picker.
  2. In the Save As dialog, type a file name for the panel and click Save.

The new panel is displayed in the Color Picker until you change it.

NetObjects Fusion Folder Structure

The NetObjects Fusion files are divided in three categories. By default, when you perform a standard installation, NetObjects Fusion automatically creates three NetObjects Fusion folders located here:

Program Files

C:\Program Files (x86)\NetObjects\NetObjects Fusion. This is the NetObjects Fusion Installation folder. If you perform a custom installation, you may choose another location for this folder. Do not move or rename the NetObjects Fusion installation folder or any folders within it. If you need to relocate the NetObjects Fusion installation folder, you must uninstall and reinstall the program. NetObjects Fusion performs best when the application and its parts remain in the folder recommended during installation.

The subfolders of the NetObjects Installation folder are organized according to their use:

  • \Components contains the NetObjects Fusion Components, which are mini-applications that add functionality to your site. See Using NetObjects Fusion Components.
  • \FSI Updater contains files required to auto update NetObjects Fusion.
  • \Java contains Java applets and beans.
  • \NetObjects System contains files used by the program; do not delete or move these files.

Third Party Licenses.html contains important information about this version of NetObjects Fusion.

Note: Default profiles are stored in the NetObjects System folder.

User Site Projects and Profiles

C:\Documents and Settings\user_name\Documents\NetObjects Fusion. This is the default folder for all website projects and user profiles. All the websites you create are stored in this folder unless you change the location when you save your project. The default folder for new user websites organizes its files in two subfolders:

  • \NetObjects System folder. User Profiles are stored in the NetObjects System folder. This folder contains information such as user profile, output settings and website preferences. A unique profile is created for each account set up to use that workstation.
  • \User Sites contains all the websites you create. For each website, NetObjects Fusion automatically creates a subfolder within \User Sites to keep your projects organized. Each NetObjects Fusion website is saved with a .nod file extension. The site folder also includes an
  • \Assets folder where the assets originally included in the website template are saved, a
  • \Styles folder where all active SiteStyles associated with the .nod are located, a
  • \Preview folder where HTML sufficient for previewing but not for publishing is stored, and a
  • \Backups folder where backup .nod files are saved. After you publish the website, a
  • \Local Publish folder is added.

Note: Do not remove files or folders located within the \User Sites folder. Since NetObjects Fusion keeps track of assets and links, folder names and locations are very important. If you change names and/or locations using Windows Explorer or File Manager, NetObjects Fusion might not be able to track your assets and links properly.

Public Documents

C:\Users\Users\Public\Public Documents\NetObjects Fusion. This is the default folder where you CSS libraries, website templates, and SiteStyles are stored. These assets are necessary and shared by all local user accounts.

  • \Backup Manager Contains the website project backup files.
  • \Image Bank contains a collection of image provided for your use by NetObjects. New collections downloaded from the Online View are stored here.
  • \Legacy Styles contains retired local SiteStyles.
  • \Online contains files required to render the Online view.
  • \Styles contains a separate folder for each local SiteStyle, including the ones you create. See Using SiteStyles.
  • \Templates contains the AutoSites folder, which contains the Blank Site Template that is required to create a new website. See Working with Templates.
  • \WebFonts contains a curated set of decorative typefaces for use within NetObjects Fusion. Custom Web Fonts should be added to this folder.

Note: Do not delete or move the AutoSites folder. This folder contains files necessary for NetObjects Fusion to run correctly.