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 aides, such as rulers, guides, and grids, to add and arrange objects on the page.

This chapter describes:

• MasterBorder and Layout areas
• Setting up the Page view display
• Displaying pages in Page view
• Setting page size
• Adding objects to the page
• Editing objects
• Positioning objects
• Layering objects

MasterBorder and Layout Areas

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.

Setting Up the Page View Display

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

• Show and hide palettes and toolbars.
• 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.
• Display object outlines to help you control object size and position.
• Use the Object Icons command to display or hide the indicator icons.

1.  Link icon indicates the object has an associated link.

2.  Anchor icon indicates the object has an anchor point to which you can link.

3.  Script icon indicates the object has associated HTML or scripts.

4.  HTML tag icon indicates the text has an HTML tag inserted at this point.

5.  Embedded object icon indicates the embedded object's insertion point.

6.  Action icon indicates an action is associated with the object.

7.  Warning icon indicates a potential layout problem or other error condition. Move the mouse pointer over the warning icon to display a ToolTip that identifies the problem.

• 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

To display the Page Properties palette, from the View menu, select Page View Options and click the Page tab.

Displaying Pages in Page View

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

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

Moving Between Pages in Page View

Move between pages in Page view using the page navigation buttons, the Site Navigation window, or the Go To (Ctrl-G) command on the Go menu.

The Page Navigation buttons and button for displaying the Site Navigation window are at the bottom of the NetObjects Fusion window.

Using Page Navigation Buttons

To move between pages using the page navigation buttons:

• On a child page, click the Parent page button to display its parent page.
• On a parent page, click the Child page button to display its first child page.
• Click the Previous page button to move to the preceding sibling page.
• Click the Next page button to move to the next sibling page.

Using the Site Navigation Window

The Site Navigation window displays the SiteStructure.

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

The Site Navigation window appears.

 

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

Setting Page Size

The size of a NetObjects Fusion page is defined by the combined size of the MasterBorder and Layout area. The default page size is 600x555 pixels. You can redefine the default page size setting in the Preferences dialog.

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:

• 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.
• To set Layout size precisely, enter values in the Layout Width and Height fields on the General tab of the Layout Properties palette. For precision MasterBorders, enter values for the left, right, top, and bottom margins on the General tab of the MasterBorders Properties palette.

Adding Objects to the Page

You can use the tools on the toolbars, or drag and drop files onto the page to place objects.

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 palette. The options displayed on the properties palette vary depending on the object.
    
3. 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 is not true for the Component tools.

Page View Toolbars

Page view includes Standard, Advanced, Form, and Components toolbars. Internal Page components are on the NetObjects Fusion Components toolbar. If you install third-party Page components, associated toolbars are listed on the View, Toolbars, Component Tools menu.

Standard Toolbar

Advanced Toolbar

Components Toolbar

Form Toolbar

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.
    
2. Drag the file into the NetObjects Fusion window and drop it on the page.
    
3. Set the object's properties.

Importing Pages

In Page view, you can import a page authored elsewhere, convert it to NetObjects Fusion format, and edit its contents as you would any other page. You can import files with .htm, .html, .jsp, .rtf, or .txt extensions.

If you prefer not to convert an HTML page to NetObjects Fusion format, you can place it as an object.

Note: Because of variations in HTML code, not all pages import exactly as you see them. Unpredictable results can occur if the page contains incorrect HTML. Non-HTML, such as JavaScripts and CGI scripts, does not import. However, assets such as Java applets, Shockwave, and other media do import. If NetObjects Fusion cannot parse the HTML, it is imported, but appears as external HTML.

1. In Page view, display the Layout on which you want to import the page.
   
   It is easiest to import a page into a Layout that contains no content, because objects from the imported file will overlay existing objects.
    
2. From the File menu, choose Import Page. The File Open dialog appears.
    
3. Select the type of file you want to import from the Files of type list.
    
4. Select a file from your hard disk or LAN. To use a file on a CD-ROM, copy it to your hard disk. To reuse an HTML file already included in the site, select it from the HTML Assets tab.
    
5. Click Open.

NetObjects Fusion places the contents of the file on the current page, beginning in the upper left corner of the Layout area.

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.
    
2. Click the Assets tab to see a list of current assets.
    
3. Select the asset you want to place and click Open.

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

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 Java, drawn shape, generic plugin, QuickTime, Shockwave, audio, and video objects in the AltTag field of the properties palette.

Microsoft Internet Explorer 3.x and 4.x and Netscape Navigator 4.x display alt tag text in a ToolTip when site visitors point at an object, so make sure every alt tag is appropriate for a ToolTip.

To add or modify an alt tag:

• On the object's Properties palette, type a descriptive name in the AltTag 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 Object menu. In Assets view, you select the Asset, and then from the Asset menu, select Open Asset. If the correct application does not open, the file type of the object or asset is probably not associated with the correct application.

For example, to edit a .gif image, right-click it in Page view and select Open File in External Editor. If Microsoft Internet Explorer opens rather than an image-editing application, you must change the application associated with .gif files. For example, you can change the associated application to NetStudio 1.0.1, the image editor included with NetObjects Fusion 4.0.

To set the application associated with a specific file type in Windows:

1. Double-click the My Computer icon on your Windows Desktop.
    
2. From the View menu, select Options.
    
3. Click the File Types tab.
    
4. For every image file type in the list, click Edit and choose the appropriate Content Type.
    
5. Click OK to close the Options dialog and close the My Computer window.

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 palette appears. You might not see evidence that the Layout is selected, but it is indicated on the properties palette. To find out what is selected at any time, check the properties palette.

Using the Selection Tool

Click the Selection tool on the Standard toolbar.

• 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

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

1. In Page view, from the View menu, choose Object Tree.
   
   The Object Tree appears.
    
2. Click an object in the Object Tree 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.

• In Page view, from the View menu, choose Object Tree. The Object Tree appears.
• Select the name of the object and type a new name.

Resizing an Object

Click an object and drag the selection handles to resize the object. If Display is set to Normal, you cannot make the object 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 Objects menu, choose Size Objects:
    
3. Width, to make the objects the same width.
4. Height, to make the objects the same height.

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

Positioning Objects

Moving or Copying an Object

• Press Ctrl, then click and drag an object to copy it.
• Click and drag an object to move 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.

If you want 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 the objects. The Multi-Object Palette appears.
   
    
2. 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.
    
3. In the Align section, specify the horizontal and vertical alignment.
    
4. Select an option from the Horizontally section to align objects' left or right sides, or to center them on top of each other. 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.
    
5. Select an option from the Vertically section to align objects' top or bottom sides, or to center them next to each other. 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.
    
6. Select Horizontally or Vertically from the Distribute section to make selected objects equidistant.

Note: Object alignment can have an impact on preserving your design and optimizing your code.

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, 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.

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.

Layering Objects

NetObjects Fusion supports CSSP+Layers, CSSP, and Layers, forms of HTML output that displays overlapped objects correctly. Site visitors using Microsoft Internet Explorer 4.x or Netscape Communicator 4.x can see objects overlap other objects.

To overlap objects:

1. In Page view, on the General tab of the Layout Properties palette, select CSSP+Layers in the HTML output section. If your site visitors use only Netscape Navigator 4.0 and above, select Layers; if they use only Microsoft Internet Explorer 4.0 and above, select CSSP.
    
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, read the following section.

Rearranging Layered Objects

1. In Page view, from the View menu, select Object Tree.
    
2. In the Object Tree, click the object you want to move. Handles appear around the object on the page.
    
3. 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:
    
4. Bring to Front to bring the object to the top of the layer.
5. Bring Forward to bring the object up one layer.
6. Send to Back to send the object to the bottom layer.
7. Send Backward to send the object down one layer.

For complete documentation, please click here.

 

NETOBJECTS
FUSION
DOCUMENTATION

Site View

Page View

Site Styles

Stylizer

Assets

Publish