Page View Basics

From Documentation
Jump to: navigation, search

Page View Basics

Page view is where you add text, graphics, and other objects to develop page design and add content. You can use a variety of tools, object properties, and layout aids (such as rulers, guides, and grids) to add and arrange objects on the page.

Exploring Page View

You use the tabs between the views bar and horizontal ruler to see different views of the page. Use:

  • Design view to add objects to the page.
  • Preview to view the current page in the selected browser.
  • Code view to look at and edit the page's HTML code. See Working in HTML Source View.
  • Page Preview to view the current page in Microsoft Internet Explorer.

MasterBorder and Layout Area

In NetObjects Fusion, a page consists of a Layout area and a MasterBorder area. The Layout area is the body of the page. It contains objects that are unique to that page. The MasterBorder is the page margins. MasterBorders contain objects, such as navigation bars, that appear on multiple pages. You can define multiple Layouts and MasterBorders, then assign one of each to a page. See Working with MasterBorders and Working with Layouts.

Setting Up the Page Design View Display

Use the Panel Launcher buttons in the lower left corner of the NetObjects Fusion window to open and close the Properties panel, Site Navigation panel, Object Tree panel, and the CSS Panels. See NetObjects Fusion Window, Using the Site Navigation panel and Using the Object Tree panel.

Use the commands on the View menu to show or hide Page Design view elements.

Use the Components commands on the View menu to show and hide the components toolboxes.

  • Show and hide panels and toolbars as described in About Toolbars.
  • Use the More Panels command to show and hide the other available panels.
  • Use the Workspace command to display one of the available workspaces. NetObjects Fusion comes with two predefined workspaces: Basic and Advanced, and with a Default workspace that saves the current Fusion layout. By default, NetObjects Fusion will open with the Advanced workspace displayed.
  • Use the MasterBorder command to hide the MasterBorder. This provides more onscreen area for you to work on the page Layout.
  • Use the Page Labels command to show and hide the Layout and MasterBorder labels and margin lines.
  • Displayobject outlines to help you control object size and position.
  • Use the Object Icons command to display or hide the indicator icons.
I link.gif Link icon indicates the object has an associated link.
I anchor.gif Anchor icon indicates the object has an anchor point to which you can link.
I HTML.gif Script icon indicates the object has associated HTML or scripts.
I HTMLtg.gif HTML tag icon indicates the text has an HTML tag inserted at this point.
I embed.gif Embedded object icon indicates the embedded object's insertion point.
I action.gif Action icon indicates an action is associated with the object.
I error.gif Warning icon indicates a potential layout problem or other error condition. A ScreenTip identifies the problem. You cannot hide this icon.
I qmark.gif Question mark icon indicates and empty navigation bar. You cannot hide this icon.
  • Select Rulers & Guides from the View menu to show and hide rulers and guides.
  • Select Grid from the View menu to show and hide grids.

Setting Page Properties

You set the following properties on the Page section of the Properties panel:

  • Page name. Name assigned to the page that is used on the page icon in Site view and the banners and navigation bar buttons generated by NetObjects Fusion. See Renaming Pages.
  • Page title. Text that appears in the title bar of the browser window when it displays this page. When site visitors bookmark this page, the page title is used. The title is also emphasized in search engine queries.
  • Custom Names. See Using Custom Button and Banner Names and File Extensions.
  • Page type. Shows whether the page is a normal page or a stacked page. You cannot change this setting; it is determined by how the page was created. For information about stacked pages, see Data Publishing.
  • MasterBorder. Shows the MasterBorder assigned to the page. You can change the Default MasterBorder by selecting ZeroMargins from the drop-down list.
  • Exclude From Navigation. Removes the page from the site navigation. The page is published and typically accessed using links. See Creating Links.

Displaying Pages in Page view

You can display a page from Site view, or move between pages in Page view using the Site Navigation panel or the Go To command on the Go menu. For information about the Go To command, see Using the Go Menu.

Displaying a Page from Site View

From Site view, to display a page in Page view:

  • Click the page icon, then click the Page button on the views bar.
  • Double-click the page icon.
  • Click the page icon, then from the Go menu, choose Page.

Using the Site Navigation panel

The Site Navigation panel displays the SiteStructure.

  1. In Page view, click the Site Navigation panel button.

The Site Navigation panel appears.

  1. Double-click the page you want to open.

NetObjects Fusion displays the page you select.

Setting Page Size

The size of a NetObjects Fusion page is defined by the combined size of the MasterBorder and Layout area. The size is 960x555 pixels. You can redefine the default page size on the General tab of the Current Site Options dialog. See Changing General Settings.

You can change the size of an individual page by adjusting the size of the MasterBorder area, the Layout area, or both.

To resize the Layout and MasterBorder areas:

  1. With the rulers showing, drag a Layout or MasterBorder handle to change the area's height and/or width. Use the far right MasterBorder handle to change the size of the right MasterBorder and the bottom MasterBorder handle to change the size of the bottom MasterBorder.
  2. To set Layout size precisely, enter values in the Layout Width and Height fields on the General tab of the Layout Properties panel. For precision MasterBorders, enter values for the left, right, top, and bottom margins on the General tab of the MasterBorders Properties panel.

You cannot make a Layout or MasterBorder smaller than the objects it contains. You cannot lock the size of a Layout or MasterBorder. If you add an object that is larger than the Layout or MasterBorder, the area expands to accommodate the object.

Using Object Tools

  1. In Page view, select the tool you want to use.
  2. Draw a box to position the object.

For some objects, you must select a file from the Open dialog. The object appears on the page with the appropriate properties panel. The options displayed on the properties panel vary depending on the object.

  1. Set the object properties.

After you use a selected tool to place an object on the page, the Selection tool automatically becomes active. To use a tool repeatedly to add several objects, double-click it to keep it active. This does not work for the Form area tool or the Component tools.

Page View Toolbars

Toolbars allow you to access and organize commands quickly and easily. You can customize the existing built-in toolbars or create new toolbars. You can add and remove buttons, hide or display toolbars, and change the location of toolbars.

You can customize built-in toolbars by adding and removing command buttons, but you cannot delete them. You can, however, delete the custom toolbars that you create. Page view includes Standard, Common Actions, Text Format, and Form toolbars. For general information about using toolbars, see About Toolbars.

Toolbars are presented in two modes:

  • Docked. A toolbar is considered to be docked when it is attached to one edge of the working area. You can dock a toolbar to the left, right, top, or bottom edge of the window. When you drag a toolbar to the edge of the window, the toolbar snaps into place.
  • Floating. A toolbar is considered to be floating when it not attached to any edge of the working area. When floating, a toolbar may be placed on top of other objects or other floating toolbars. When floating, the grip handle disappears.

The name of the toolbar will be visible on its title bar when the toolbar is in a floating state. It also displays two buttons on the title bar: the Toolbars Options button and the Close button. You can resize a floating toolbar (icons will be rearranged on the toolbar) and move it anywhere on your screen.

To display a toolbar:

  1. From the View Menu, select the toolbar name you want to display from the menu.
  2. Right-click on any of the toolbars. A context menu containing the names of the available toolbars will appear. Select the name of the toolbar and it will be displayed in the workspace.

You can add and remove buttons on toolbars. To do that:

  1. Click the Toolbar Options button on the toolbar you would like to add or remove buttons. The Toolbar Options button is located on the title bar if the toolbar is floating, or to the right side if the toolbar is docked.
  2. From the Add and Remove Buttons menu select the toolbar you want to modify.
  3. From the list of buttons that appear, select or deselect the button option.
  4. You can also reset the toolbar to its default state, by selecting the Reset Toolbar option.

You can move both a docked or floating toolbar within the workspace. To move a toolbar:

  1. Drag the toolbar by its grip handle if it is a docked toolbar, or by its title bar if it is a floating toolbar.
  2. While still holding the mouse button down, move the toolbar to the new destination. If you drag the toolbar to the edge of the working area, it will dock to the edge.
  3. Release the mouse button.

Enabling Page Scaffolding

Websites are commonly based on grid systems for content alignment and scaffolding. It’s an efficient way to rapidly construct a website. NetObjects Fusion has implemented a grid system based on a width of 1160px with 14 columns and 30px gutters.

To enable gutters:

  1. In Page view, click View > More Panels and select Page View Properties.


NetObjects Tip: You can also click F12 to open the Page View Properties.

  1. Check the option for Gutters.

NetObjects Tip: You must also enable either width or height grid lines to show gutters.

You can alter the gutter sizes by typing in the number, in pixels, for the width you would like them to be.

Dragging and Dropping Objects

  1. In Windows Explorer, select the file you want to place.

You can drag and drop any file you can place with an object tool.

  1. Drag the file into the NetObjects Fusion window and drop it on the page.
  2. Set the object's properties.

Reusing Assets

By treating object files as assets, NetObjects Fusion provides you with a convenient way to replace or update multiple instances of an object. Reusing assets can also reduce the number of files stored on the server. Instead of adding multiple copies of a file in several locations, you add the asset once and then select from the list of existing assets when you want to place another instance of the asset. To place an asset:

  1. In Page view, choose the appropriate tool and draw a box to specify where you want to place the asset.

The File Open dialog appears.

  1. Click the Assets tab to see a list of current assets.
  2. Select the asset you want to place and click Open.

NetObjects Fusion places the asset on the page and opens the appropriate properties panel. In Assets view, you can replace all instances of this asset in your site using a single command, or add file assets. See Managing Assets.

Adding and Modifying Alt Tags

To make pages load faster, some visitors set up their browsers so they do not display images. To ensure that your pages provide the information you want to convey regardless of how the site visitor's browser is set up, use alt tags to provide descriptive text that appears when images are not displayed. You can add an alt tag to image, Java, drawn shape, generic plugin, QuickTime, Shockwave, audio, and video objects in the Alt Tag field of the properties panel.

To add or modify an alt tag, on the object's Properties panel, type a descriptive name in the Alt Tag field.

Editing Objects and Assets

You can edit objects created in other software applications from within NetObjects Fusion. In Page view, right-click the object and select Open File In External Editor from the shortcut menu. In Assets view, you select the Asset, and then from the Asset menu, select Open File in External Editor. If the correct application does not open, the file type of the object or asset is probably not associated with the correct application. You can set external file editors for HTML and Image files on the Program tab of the Application Options dialog. See Setting Program Options.

Selecting an Object

In NetObjects Fusion you might not always be aware of making a selection, but in Page view something is always selected. For example, when you switch from Site view to Page view, the Layout Properties panel appears. You might not see evidence that the Layout is selected, but it is indicated by the properties panel. To find out what has been selected at any time, check the properties panel.

Using the Selection Tool

Click the Selection tool on the Standard toolbox.

  • Click an object to select it. Click elsewhere to deselect it.
  • Drag a marquee around multiple objects, or Shift+Click each object you want to select. Shift+Click selected objects one-by-one to deselect them.

Using the Object Tree panel

The Object Tree panel provides a convenient way to select objects, especially if you are working with layered or hidden objects.

  1. In Page view, click the Object Tree panel button in the lower left corner.

The Object Tree panel appears.

  1. Click an object in the Object Tree panel to locate it on the page.

Selection handles appear around the object on the page.

Renaming an Object

If you add several of the same type of objects to a Layout or MasterBorder, NetObjects Fusion numbers each object in the order in which you placed it. You can rename the objects for easy identification. These names are only for use by NetObjects Fusion; they do not affect the final website.

  1. In Page view, click the Object Tree panel button in the lower left corner.

The Object Tree panel appears.

  1. Select the name of the object, then click again and type a new name. Some objects cannot be renamed.

Resizing an Object

Click an object and drag the selection handles to resize the object. If the Display property of a Picture is set to Normal, you cannot make the image larger. To make multiple objects the same size:

  1. In Page view, select the objects by Shift+Clicking each one or by drawing a marquee around them.
  2. From the Object menu, choose Size Objects:
    • Width, to make the objects the same width.
    • Height, to make the objects the same height.

The selected objects size to match the largest object you select.

Moving or Copying an Object

  • Click and drag an object to move it.
  • Press Ctrl, then click and drag an object to copy it.
  • To prevent an object from dropping into a container, such as a Layout Region or text box, select the object and press Alt while moving it over a container.
  • You can move or copy objects from Layout to Layout in Page view using the Cut, Copy, and Paste commands on the Edit menu.

To specify the position of an object before you paste it, click the page and then use the Paste command. The upper-left corner of the pasted object appears at the point where you click the page.

Aligning and Distributing Objects

In a Layout or Layout Region, you can align two or more objects to each other and distribute three or more objects equidistant from each other. You can also align and distribute objects relative to the Layout or Layout Region.

  1. In Page view, select the objects you want to align by Shift+Clicking each one or by drawing a marquee around objects in the Layout.

If you select different types of objects, the Multi-Object panel appears. If the object properties appear, click the Position tab.

  1. If you want the objects to align or be distributed relative to the Layout or Layout Region in which the objects are placed, select Relative to Layout.
  2. In the Align section, specify the horizontal and vertical alignment.

When aligning objects, NetObjects Fusion uses the object furthest in the direction you specify as the reference point. For example, if aligning left, the leftmost object is used; the topmost object is used when aligning top. When centering objects, NetObjects Fusion chooses the average distance between the selected objects as the center point.

  • Select an option from the Horizontally section to align objects left or right sides, or to center them. If you select Relative to Layout, the objects align to the right or left side of the Layout, or are centered in the Layout, one on top of the other.
  • Select an option from the Vertically section to align objects top or bottom sides, or to center them. If you select Relative to Layout, the objects align to the top or bottom of the Layout, or are centered in the Layout side-by-side.
  • Select Horizontally or Vertically from the Distribute section to make selected objects equidistant.

Object alignment can have an impact on preserving your design and optimizing your code. See Optimizing HTML 4.01 with Tables Output.

Grouping Objects

In a Layout or Layout Region, you can group two or more objects to each other. Grouped items are treated as a single object and can easily be copied, as well as aligned to create consistent design. To group multiple objects:

  1. In Page view, select the objects by Shift+Clicking each one or by drawing a marquee around them.
  2. From the Object menu, choose Group Objects > Group.

The Group will appear in the Object Tree.

Object alignment can have an impact on preserving your design and optimizing your code. See Optimizing HTML 4.01 with Tables Output.

Locking Objects

You can prevent objects on a site from being altered by locking specific attributes, such as an object's content, size, and position. This feature is useful if the site will be edited by multiple users. By locking objects, you can control which aspects of the site's content and layout can be modified.

  1. To lock an object, right-click on the object and select the Protection option from the shortcut menu.

The shortcut menu will display a protection option specific to the object you have selected. For example, Text Protection will appear on the shortcut menu when you right-click on a text box, and Picture Protection will appear on the shortcut menu when you click on an image.

The Protection dialog appears.

  1. Select the attributes you want to protect:
    • In the Protect from field, select options to prevent the object's content (e.g., table cells, text, images) from being changed. You can also prevent the object from being deleted or copied elsewhere on the site.
    • In the Protect Size field, you can retain the object's current height, width, and aspect ratio by selecting the corresponding check boxes.
    • Lock an object's horizontal and position on the page by selecting the appropriate check boxes in the Protect Position field.
    • Click All to select all protection options, or clear all selected check boxes by clicking None.
  2. Click OK to establish the protection options.

Adding, Moving, and Deleting Guides

Use the page guides to align objects vertically and horizontally. You can add as many guides as you want to either the MasterBorder or the Layout area. MasterBorder guides are red, Layout area guides are blue. Guides associated with a MasterBorder appear on all pages that use that MasterBorder. Guides you create are saved with the site. To:

  • Add a guide, select the Layout or MasterBorder, and click in the ruler or hold down the Ctrl key while you drag an existing guide.
  • Move a guide, click its arrow on the ruler and drag it.
  • Delete a guide, click its arrow and drag it off the ruler.
  • Show or hide a guide, select Rulers & Guides from the View menu.

Aligning Objects Using Smart Guides

Use the smart guides to position an object vertically and horizontally without using page guides. Smart guides are convenient when you want to align one image or object with another that is already set.

  • To show smart guides, select Smart Guides from the View menu.
  • To use smart guides, select and move an object in Page view.

Object alignment can have an impact on preserving your design and optimizing your code. See Optimizing HTML 4.01 with Tables Output.

Snapping Objects to Grids, Guides, and Each Other

Use the Snap feature to align objects exactly. When you select a Snap to command, NetObjects Fusion creates a "magnetic" attraction between the selected object and the grid, guide, or other objects. Forcing objects to snap to grids, guides, and each other makes your HTML code more efficient.

To force objects to snap to:

  • Guides, select Snap to Guides from the View menu.
  • Grids, select Snap to Grid from the View menu.
  • Other objects, select Snap to Object Outlines from the View menu.

Make sure the item you are snapping to is visible in Page view. See Setting Up the Page Design View Display.

Layering Objects

NetObjects Fusion supports HTML 4.01 and HTML5. Both of these HTML outputs display overlapped objects correctly. See Publishing with HTML 4.01.

To overlap objects:

  1. In Page view, on the General tab of the Layout Properties panel, select HTML 4.01 in the HTML output section.
  2. Place two or more objects in the Layout or a Layout Region.

Objects are layered in the order in which you place them. To change the layering order, see Rearranging Layered Objects.

Rearranging Layered Objects

  1. In Page view, click the Object Tree panel button in the lower left corner.
  2. In the Object Tree panel, click the object you want to move.

Handles appear around the object on the page.

  1. Click and drag the object up or down the tree to move it to a different layer, or from the Object menu, choose Arrange Objects and select:
  • Bring Forward to bring the object up one layer.
  • Bring to Front to bring the object to the top of the layer.
  • Send Backward to send the object down one layer.
  • Send to Back to send the object to the bottom layer.