NetObjects Fusion

Essentials

Getting Started
Copyright
©2007 Website Pros, Inc. All rights reserved. This manual, as well as the software described in it,
is furnished under license and may only be used or copied in accordance with the terms of such
license. The information in this manual is furnished for informational use only, is subject to
change without notice, and should not be construed as a commitment, representation or warranty
regarding the performance of NetObjects Fusion by Website Pros, Inc. Website Pros, Inc. assumes
no responsibility for the consequences of any errors or inaccuracies in this manual.
Except as permitted by the license for this manual, no part of this publication may be reproduced,
stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
recording, or otherwise, without the prior written permission of Website Pros, Inc.
Trademarks
NetObjects, NetObjects Fusion, PageDraw, and SiteStyles are registered trademarks, and
AutoSites, Everywhere HTML, SiteStructure, and “The Web needs you” are trademarks of
Website Pros, Inc. These and other graphics, logos, service marks, and trademarks of Website
Pros, Inc. and its affiliates may not be used without the prior written consent of Website Pros, Inc.
or its affiliates, as the case may be. Flash® is a trademark or registered trademark of Macromedia,
Inc. in the United States and/or other countries. Macromedia, Inc. does not sponsor, affiliate, or
endorse Website Pros, Inc. or this product. All other brand and product names are trademarks or
registered marks of their respective holders.
This program was developed using NeoAccess: ©1992-1995 NeoLogic Systems, Inc. Portions of
this product were created using LEADTOOLS ©1991-1996 LEAD Technologies, Inc. All rights
reserved. International ProofReader™ text proofing software © 2004 Vantage Technology
Holdings, Inc. All rights reserved. Reproduction or disassembly of embodied algorithms or
database is prohibited. Java and all Java-based trademarks and logos are trademarks of Sun
Microsystems, Inc., in the United States and other countries. This product includes software
developed by the Apache Software Foundation (www.apache.org). ©1999-2004 The Apache
Software Foundation. All rights reserved. SSHTools - Java SSH2 API ©2002-2003 Lee David
Painter and Contributors.
Companies, names, and dates used in examples herein are fictitious unless otherwise noted.
Government Restricted Rights
For units of the Department of Defense, use, duplication, or disclosure by the Government is
subject to restrictions as set forth in subparagraph (c)(1)(ii) of the Rights in Technical Data and
Computer Software clause at DFARS 252.227-7013. Contractor/manufacturer is Website Pros,
Inc., 12735 Gran Bay Parkway West, Building 200, Jacksonville, FL 32258.
If the Commercial Computer Software Restricted Rights clause at FAR 52.227-19 or its
successors apply, the Software and Documentation constitute restricted computer software as
defined in that clause and the Government shall not have the license for published software set
forth in subparagraph (c)(3) of that clause.
Printed in the U.S.A.
NetObjects Fusion Essentials
Contents
Welcome to NetObjects Fusion Essentials

What’s In This Guide. . . . . . . . . . . . . . . . . . . . . . . . . 2

Conventions Used in This Guide . . . . . . . . . . . . . . . . . . . . . . . . 2

About the Sample Site . . . . . . . . . . . . . . . . . . . . . . . . 2

Getting Help. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1 Creating Your First Web Site

Creating a New Blank Site. . . . . . . . . . . . . . . . . . . . . 6

Adding Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Looking at Page View . . . . . . . . . . . . . . . . . . . . . . . 11

Adding Text to the Page . . . . . . . . . . . . . . . . . . . . . 12

Adding a Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Setting the SiteStyle. . . . . . . . . . . . . . . . . . . . . . . . . 18

Moving the MasterBorder and Layout Margins . . . 21

Setting Button Navigation Bar Properties . . . . . . . . 23

Previewing Your Site. . . . . . . . . . . . . . . . . . . . . . . . 24

Saving Your Site and Exiting . . . . . . . . . . . . . . . . . 26

Where to Go from Here . . . . . . . . . . . . . . . . . . . . . . 26

2 Touring NetObjects Fusion
Opening Your Site . . . . . . . . . . . . . . . . . . . . . . . . . 28

Site View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Standard Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Properties Palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Site View Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Setting Application Options. . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Viewing Current Site Options . . . . . . . . . . . . . . . . . . . . . . . . . .36
Site Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Page View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Page View Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Page View and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
Layout Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
MasterBorder Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Rulers, Handles, and Guides . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Site Navigation Palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
HTML Source View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48
Page Preview Tab. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50

Style View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Assets View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Publish View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Where to Go from Here . . . . . . . . . . . . . . . . . . . . . 56

3 Designing Site Navigation

Creating a New MasterBorder . . . . . . . . . . . . . . . . 58

Creating an ImageMap . . . . . . . . . . . . . . . . . . . . . . 60
 Adding Fly-out Submenus . . . . . . . . . . . . . . . . . . . . 67

Adding a Custom Navigation Bar . . . . . . . . . . . . . . 69

Where To Go From Here . . . . . . . . . . . . . . . . . . . . . 73

4 Placing Pictures in Text

Importing a Word File . . . . . . . . . . . . . . . . . . . . . . . 76

Adding a Picture Inside a Text Box. . . . . . . . . . . . . 78

Where To Go From Here . . . . . . . . . . . . . . . . . . . . . 84

5 Creating a Photo Gallery

Adding Pages for the Photo Gallery . . . . . . . . . . . . 86

Adding Photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Formatting the Thumbnail Page . . . . . . . . . . . . . . . 89

Formatting the Photo Pages . . . . . . . . . . . . . . . . . . . 93

Where To Go From Here . . . . . . . . . . . . . . . . . . . . . 99

6 Creating Dynamic Pages

Adding Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Using the Object Tree Palette . . . . . . . . . . . . . . . . 107

Adding Actions to Objects. . . . . . . . . . . . . . . . . . . 108

Adding Sound to the Background . . . . . . . . . . . . . 115

 Setting the HTML Output Option. . . . . . . . . . . . . 116

Previewing the Next Tour Page . . . . . . . . . . . . . . 116

Where To Go From Here . . . . . . . . . . . . . . . . . . . 117

7 Working with HTML Files

Importing an HTML File . . . . . . . . . . . . . . . . . . . 120

Referencing External HTML . . . . . . . . . . . . . . . . 124

Where To Go From Here . . . . . . . . . . . . . . . . . . . 130

8 Adding a Rotating Ad Banner

Placing a Rotating Ad Banner Component. . . . . . 132

Setting Rotating Ad Banner Properties. . . . . . . . . 134

Publishing Your Site . . . . . . . . . . . . . . . . . . . . . . . 138

Where To Go From Here . . . . . . . . . . . . . . . . . . . 141

9 Creating a Table
Creating a Table . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Adding Text to the Table . . . . . . . . . . . . . . . . . . . 145

Adding Links to the Table Text . . . . . . . . . . . . . . 148

Where To Go From Here . . . . . . . . . . . . . . . . . . . 149

1 0 Creating an E-Commerce Catalog
Adding Pages for the E-Commerce Catalog . . . . . 152

Adding Products . . . . . . . . . . . . . . . . . . . . . . . . . . 153

Formatting the List Page . . . . . . . . . . . . . . . . . . . . 157

Formatting the Detail Pages. . . . . . . . . . . . . . . . . . 160

Where To Go From Here . . . . . . . . . . . . . . . . . . . . 166

1 1 Layering Objects
Adding Overlapping Objects . . . . . . . . . . . . . . . . . 168

Setting the HTML Output Option . . . . . . . . . . . . . 171

Editing the Banner Text . . . . . . . . . . . . . . . . . . . . . 173

Previewing Your Site. . . . . . . . . . . . . . . . . . . . . . . 174

Where To Go From Here . . . . . . . . . . . . . . . . . . . . 174

1 2 Supporting Target Browsers

Importing a Formatted Document . . . . . . . . . . . . . 176

Clearing Imported Formats . . . . . . . . . . . . . . . . . . 178

Assigning a Standard Text Style . . . . . . . . . . . . . . 179

Checking the Browser and HTML Output Settings180

Adding Cascading Style Sheet Features . . . . . . . . 182

Adding a Paragraph Background . . . . . . . . . . . . . . . . . . . . . . 185
About Custom Text Styles . . . . . . . . . . . . . . . . . . 187

Where To Go From Here . . . . . . . . . . . . . . . . . . . 187

Welcome to NetObjects Fusion
NetObjects Fusion® Essentials is the essential tool for building effective Web sites.
Whether you are a professional Web site designer or designing a site for a small
business or your family, you can use NetObjects Fusion to design your site quickly
and easily.
Map out your site structure by dragging and dropping page icons. NetObjects
Fusion automatically creates and updates navigation and links. Lay out your pages
quickly by dragging text, graphics, and multimedia into place. Select from dozens
of SiteStyles®, or customize or create your own to apply a consistent visual theme
throughout your site.
Use the Photo Gallery tool to put your images on the Web in minutes. Select the
images you want to use, choose a display format, and NetObjects Fusion does the
rest. Your photo gallery is published to the Web for your friends and family to view.
Simplify the process of building your online store with NetObjects Fusion and
match your catalog with the look and feel of your Web site. With just a few clicks,
you can easily create a catalog, add products and images, and arrange them so that
navigation is effortless. Then, integrate credit card processing for an effective way
to deliver world-class products and services to your customers online.
NetObjects Fusion makes it easy for you to add dynamic content to your site
whether you want simple object animation or custom JavaScript actions. You can
have objects fly across the screen as the result of a site visitor’s action. Or you can
launch a sequence of animations at any given time. NetObjects Fusion contains
powerful message-based animation and interactive authoring capabilities that you
can use to access online resources.
Building your site is just the beginning. NetObjects Fusion provides direct access to
online resources that offer information and guidance for making your site
successful. You can learn to host and promote your site, set up an online store, track
site visitors, and build personal relationships with your customers. Templates,
hundreds of SiteStyles, and components and services that can add new power to
NetObjects Fusion and new features to your Web pages are available for you to
download.

1
Welcome to NetObjects Fusion

What’s In This Guide

This guide contains step-by-step instructions that provide the quickest path to
learning how to build Web sites with NetObjects Fusion.
As you work through the lessons, imagine yourself designing a commercial Web
site using some of NetObjects Fusion’s many features to add content to the site.
• In “Creating Your First Web Site,” you build a small site that provides the
framework for all the lessons that follow.
• “Touring NetObjects Fusion” provides more in-depth information about the
NetObjects Fusion design environment using the site you have just built.

Conventions Used in This Guide

NetObjects Fusion often provides multiple ways to accomplish a task. For example,
to display a page in Page view, you can click the Page button on the control bar,
choose Page from the View menu, or press Ctrl+3. Procedures in this guide
generally include the most convenient method, but other methods are usually
available. If you are most comfortable using menu commands, you will probably
find the item you are looking for on a menu even if it is not explicitly included in
the steps.
For readability, this manual presents all file names, paths, file extensions, HTML
tags, and URLs like this. Example names that you should replace with your own
information appear in bold italic. Keyboard key names and user interface elements
look like this, and items you are to type appear like this.
This manual, the NetObjects Fusion Essentials User Guide, and the online help
assume you are proficient with Windows 98, Windows 2000, or Windows XP. If
you need help using these systems, consult their respective user guides. This guide
also assumes you are familiar with the World Wide Web and its terminology.

About the Sample Site

NetObjects Fusion Essentials ships with a sample site for you to explore to see how
various features are implemented. This site is in the NetObjects Fusion
Essentials\Sample Sites folder. If you want to experiment with NetObjects Fusion,
create a new site based on this site template.

2
 Getting Help
NetObjects Fusion offers several options for getting online help.
For topic help, select Help Topics from the Help menu to launch the help system
and display the table of contents.

Click to move forward and

Click to return to backward through a
the last topic you sequence of related topics.
viewed.
Click a book to
see the topics it
contains; click a
topic to see
specific
information.

Click the underlined text in

an overview topic to jump
Open this book to to detailed information.
see keyboard
shortcuts.

To find information in the online topic help, click:

• a book on the Contents tab and then double-click a topic to see the information
it contains.
Use the >> button to move forward through topics in sequential order.
Use the << button to move backward through the sequence.
Click the Back button to return to the last topic you viewed.
Look at the topics in the Quick Reference book to find keyboard shortcuts.
• the Index tab and enter a keyword related to your topic.
• the Search tab and type the word or phrase you want to search for.
To see information about a specific item in any NetObjects Fusion window or a
control in a dialog or palette:
• Right-click the object and then select What’s This? from the shortcut menu.

3
Welcome to NetObjects Fusion

• Click the question mark icon in the title bar of a dialog or palette, then click the
item you want to learn about.
In either case, an explanation of the item pops up.

You can also highlight a menu command, then press F1 for an explanation, or if
you are in Style view, select an element and press F1.
For a summary of basic NetObjects Fusion concepts, choose NetObjects Fusion
QuickStart tips from the Help menu.

4
 CHAPTER 1

Creating Your First Web

Site 1
Imagine that you are the Promotions Manager for a small alpine adventure
company called Mountain Jacques, and one of the company’s most experienced
guides. You want to share your excitement about the services Mountain Jacques
provides. You know you can strengthen the business by enhancing communication
with customers, so you decide to create a Web presence for Mountain Jacques and
use NetObjects Fusion Essentials to build the site.
Your goals are:
• Make it easy for customers to learn about Mountain Jacques
• Make it easy for customers to contact the company
• Build excitement for upcoming events

In this lesson you learn to:

• Create a new blank site
• Add pages
• Add text
• Add a picture
• Set the SiteStyle
• Move the MasterBorder and Layout margins
• Use highlighted and rollover buttons
• Preview a site
• Save a site

5
Creating a New Blank Site

Creating a New Blank Site

You start with a new blank site.
1. From the Windows Start menu, select Programs>NetObjects>NetObjects
Fusion Essentials, or double-click the NetObjects Fusion Essentials icon on the
desktop.
Go directly to NetObjects Fusion. Do not choose the Site Wizard.
Online view appears.
2. From the File menu, choose New Site>Blank Site to display the New Blank
Site dialog.
You can change This is where you name your site file. NetObjects Fusion saves your site in a
the settings in the folder with the same name as the site, in the NetObjects Fusion Essentials\User
Application Sites folder.
Options for
NetObjects Fusion 3. In the File name field, type Mountain Jacques, then click Save.
to “Open to most
recently used file
at startup”. To
display the User Sites folder
Application
Options dialog,
choose Options>
Application from
the Tools menu.

NetObjects Fusion site

files have a .nod file
name extension

If file types are The site name appears in the title bar of the window. NetObjects Fusion
turned off in the automatically appends .nod to the site’s name to indicate a NetObjects database
Windows Explorer file.
Options dialog,
the .nod file
extension does not
appear.

6
 Chapter 1 Creating Your First Web Site

Title bar with site name

Control bar with view buttons

showing selected view

Select tool Tabs relating

Zoom tool to this view

Page icon

Properties
palette

Your new blank site will open in Site View by default. The control bar
highlights Site view to show it is selected. Site view is where you develop your
site’s structure. The “Touring NetObjects Fusion” section of this guide will
explain Site View and the other NetObjects Fusion views in more detail.
A page icon represents each page in the site. Your new site has one page—the
default Home page. The blue border shows it is selected.
To display the The Properties palette shows the name of the selected object, in this case, the
Properties palette, Home page.
select Properties
palette from the For information on any Properties palette option, click the question mark help
View menu. button at the top right of the palette, then click the option or its label. You can
also right-click the option or its label, then click the What’s This? button.

Adding Pages
In Site view you add pages. NetObjects Fusion adds new pages under the selected
page.
You are going to add four pages under the Home page.

7
Adding Pages

1. With the Home page selected, click the New Page button on the control bar four
times, to add four pages.
NetObjects Fusion adds four pages under the Home page, and names each
page Untitled1, Untitled2, and so on.

Selected page’s
name; appears
on page icon

Page title
appears in title
ScreenTip shows tab
name when you point to
the icon on the tab

The toolbar on the left shows the Select tool is selected.

You can hold the pointer over a tool in a toolbar or tab on a Properties palette
for a few seconds to see a ScreenTip. ScreenTips tell you the name of tools,
properties palette tabs, and other indicator icons.
ScreenTip showing 2. With the Home page selected, type Mountain Jacques in the Page title field of
tool name the Properties palette.
Now, when site visitors view the Home page in a browser, the browser’s title
bar displays Mountain Jacques instead of Home.
3. On the far left page, click the name Untitled1 to select the page name.
4. Type Mission, then press the Tab key to select the next page name.
5. Name the remaining three pages Events, Next Tour, and Contest.

8
 Chapter 1 Creating Your First Web Site

6. Press the Enter key to view the final page name on the Page tab of the
Properties palette.

Now you add pages under the Events page to describe upcoming events.
7. Click the Events page to select it.
8. Click the New Page button twice to add two pages under the Events page.
9. Name the two pages Activities and Highlights.
Next you add a page to advertise the contest prize.
10. Click the Contest page to select it.
11. Click the New Page button once to add a child page under the Contest page.
12. Name the page Wonder Lodge and press Enter.

9
Adding Pages

If the page name is too long to fit on the page icon, NetObjects Fusion displays
an abbreviated version of the name. However, the name will appear in full on
the browser window.

13. Double-click the Home page icon to open the Home page in Page view.

10
 Chapter 1 Creating Your First Web Site

Looking at Page View

Page view is where you design and add content to your pages.

Note: Illustrations in this manual show Page view with the grid turned
off. You can turn the grid on to assist in placing objects by
selecting Grid from the View menu or pressing CTRL+D.

Layout Page Banner showing page name Layout Properties

label name in top MasterBorder palette

Page view tabs

Standard toolbar
MasterBorder label Name of
page’s
Button navigation bar Layout
in left MasterBorder
Advanced Toolbar

Site
Navigation
palette
Vertical ruler
Text navigation bar in
bottom MasterBorder

Palette Launcher
buttons

The Home page opens in Page view. By default, NetObjects Fusion displays:
• Standard toolbar docked below the Page view tabs;
• Advanced toolbar docked in the left window border;
• Properties palette showing properties of the selected item
• Site Navigation palette, which you use to move between pages as you design
the site.
You can drag toolbars away from the Component Manager onto the workspace
and close the Component Manager to increase your desktop view. You can drag

11
Adding Text to the Page

the title bars of toolbars and properties palettes to move them, so some of the
screens in this manual may have a different appearance than yours.
Use the buttons in the lower left of the Page view window to open and close the
Properties palette, Site Navigation palette, and Object Tree palette.
The MasterBorder Page view is divided into two areas: MasterBorder and Layout. The
works like a MasterBorder is the top, bottom, left, and right margins of the page. Objects
header and footer, placed in the MasterBorder region are visible on every page. The MasterBorder
but on all four typically contains objects that repeat across many pages, such as navigation
sides of the bars and banners. The Layout typically includes the page’s unique content.
Layout.
To select the MasterBorder or Layout area, simply click inside it. When the
MasterBorder is selected, its label is red; when the Layout is selected, its label is
blue. The Properties palette always shows properties of the selected item.
The DefaultMasterBorder includes a banner in the top margin, a button
navigation bar in the left margin, and a text navigation bar and the Built with
NetObjects Fusion Essentials logo in the bottom margin.

Adding Text to the Page

You begin by adding a welcoming message to the Home page. In NetObjects
Fusion, everything on the page is an object, so to type text you add a text object.
1. From the Standard toolbar, select the Text tool.
2. Click inside the Layout and drag a wide text box starting near the top left corner
Text tool
of the Layout area.
Don’t worry about the size of the box. As you type, the text box grows to
accommodate the text, if needed.

12
 Chapter 1 Creating Your First Web Site

You can select

Undo from the
Edit menu to undo
any action since
the last time you
changed views.

The text box appears with hollow handles and contains a blinking insertion
point. The pointer changes to an I-beam when you move it over the text box,
indicating that you can type text.
Use standard 3. Type:
arrow, Backspace,
and Delete keys to Mountain Jacques
edit text. 4. Press Shift+Enter to force a line break.
Shift+Enter inserts a single line space instead of the double line space inserted
when you press Enter, and causes this text to break exactly where you want it to.
5. On the new line, type:
Experience the best nature has to offer...

13
Adding Text to the Page

While editing text, the Text Properties palette displays the Format tab, with
options such as Font, Size, and Color that you can use to format selected text.
The Font field shows the font is Arial. The Size field shows the size is 0, which
is the default body text size expressed as an HTML relative size.
6. Click outside the text box.
The height of the text box automatically adjusts to accommodate the text, and
the hollow handles disappear.

Text object showing

object outline.

14
 Chapter 1 Creating Your First Web Site

If necessary, to An outline surrounds the text.

turn on object
outlines, select 7. Click once anywhere on the text box to select it.
Object Outlines Solid handles surround the text object to show it is selected.
from the View
menu. The Text Properties palette displays the Text Box tab.

When the text object has solid handles, you cannot edit the text, but you can
move, resize, or delete the text box.
8. Double-click inside the text box so the hollow handles reappear.
9. Drag through all the text to select it.
The Text Properties palette displays the Format tab.
10. Click the Bold button.

Bold button 11. In the Size field of the Format tab, select 2.
If necessary, the text box enlarges to accommodate the text. You can also drag a
hollow or solid handle to reshape a text box.
12. If necessary, drag a text box handle so the text box is wide and the text occupies
two lines.
13. In the Paragraph section of the Format tab, click the Align Center button.

Align Center button The text changes accordingly.

15
Adding Text to the Page

Align buttons in Paragraph

section of Format tab.

14. Click outside the text box to deselect it.

16
 Chapter 1 Creating Your First Web Site

Adding a Picture
The Mountain Jacques art department created a graphic for the Home page.
1. From the Standard toolbar, select the Picture tool.
2. Place the pointer below the left side of the text object in the Layout area and
Picture tool
draw a box.
The size of the box doesn’t matter; NetObjects Fusion automatically adjusts the
box to fit the picture after you place it.
The Picture File Open dialog appears so you can locate the image you want to
place in the picture box.
3. With the Folder tab selected, navigate to the Mountain Jacques artwork in the
NetObjects Fusion Essentials\Tutorial folder, select ImageMap.jpg, then click
Open.

Folder tab

Thumbnail image of
selected file

The picture appears selected in the Layout area.

When the picture is selected, the properties palette shows Picture Properties.

17
Setting the SiteStyle

NetObjects Fusion
allows you to use
an External Image
Editor to
manipulate
images. To launch
the external editor,
right-click the
image and select
Open File in
External Editor.
List the external
editor to use in the
Program tab of the
Application
Options.

Image Properties Palette

You can crop or size a picture by dragging its handles.

Ctrl+drag copies • When the Display setting is Normal, you can drag any handle to crop the
the picture. If you picture.
accidentally drag
the picture instead • When the Display setting is Stretch, you can drag any handle to resize the
of the handle, picture.
select Undo Copy
• To restore a picture to its original size and shape, right-click it and select
Object from the
Restore Original Size from the shortcut menu.
Edit menu, press
Ctrl+Z to undo, or
right-click the
copy and select
Setting the SiteStyle
Delete Object A SiteStyle is a set of graphic, text, and Flash elements used throughout your site to
from the shortcut provide a consistent look. SiteStyle elements include the banner and buttons for
menu. navigation bars, as well as a type of bullet, a line, and colors for linked text. Each
SiteStyle also includes a set of text styles, such as a font and size for the body of the
page, and various combinations of text attributes for different sized headings.
The default SiteStyle doesn’t reflect Mountain Jacques’ image. Fortunately, the
Mountain SiteStyle is available.

18
 Chapter 1 Creating Your First Web Site

1. Click the Style button on the control bar to go to Style view.

Style view displays the elements of the currently selected SiteStyle.
Style

Text tab

List of SiteStyles
Elements of
selected
SiteStyle

Selected SiteStyle

2. Select Mountain from the list of Local SiteStyles.

19
Setting the SiteStyle

Text tab, where text properties

are set for a SiteStyle
Mountain banner style

Primary button styles:

regular, highlighted, and Secondary
rollover buttons

Data list icons

Click to show Page

Background Properties

Line style for

Mountain

3. Click the Set Style button on the control bar.

4. Click OK to close the confirmation message.
Set Style
5. Click the Page button on the control bar.
The Home page appears in Page view, displaying the Mountain SiteStyle.
The SiteStyle has a two-tone background. The left side of the background is
powder blue.
6. Choose Snap to Object Outlines from the View menu.
This way, when you drag an object toward another object, it aligns next to it
without overlapping.
7. Drag the text object upward to the top of the Layout and adjust it to be the same
width as the banner.

20
 Chapter 1 Creating Your First Web Site

8. Drag the picture upward so it is touching but not overlapping the bottom of the
text and is centered under the text box.

Moving the MasterBorder and Layout

Margins
You are going to remove extra space surrounding the banner and Layout objects.
This improves the DefaultMasterBorder, which is currently assigned to each page
in the site.
1. Select the banner and press the up arrow key several times to move the banner
pixel by pixel to the top of the page.

21
Moving the MasterBorder and Layout Margins

Drag handle for top

MasterBorder margin
upward

Drag handle for bottom

of Layout upward

2. Drag the handle for the top MasterBorder margin upward until the guide is even
with the bottom of the banner.
3. Click in the MasterBorder to display the MasterBorder Properties palette.
As you drag, the ScreenTip shows the ruler setting for the guide. This setting
also appears in the Top field of the General tab of the MasterBorder
Properties.
4. Drag the handle for the bottom of the Layout upward until the guide is even
with the bottom of the picture.
All the objects in the bottom MasterBorder move up when you release the
mouse button.
5. On the MasterBorder Properties palette, set the Left margin to 140.

22
 Chapter 1 Creating Your First Web Site

Button navigation bar

MasterBorder margin
settings

Setting Button Navigation Bar Properties

You can set up buttons that are highlighted as you pass the pointer over them in a
browser.
1. Select the button navigation bar in the left MasterBorder.
The Properties palette shows Navigation Bar Properties. Note that this button
navigation bar uses the Primary button style as specified in the Mountain
SiteStyle.
2. Click the Style tab on the Properties palette.

23
Previewing Your Site

3. In the Options section, make sure Highlighted and Rollovers are selected.

• Rollover buttons change to the rollover buttons shown in Style view as site
visitors pass the pointer over them in a Web browser.
• Highlighted buttons show the highlighted button style for the page being
viewed in a browser.

Previewing Your Site

You accomplished a lot in a short time, and you want to see how your site looks in a
Web browser. NetObjects Fusion helps you check your work by previewing it in a
browser as you develop your site.
• To preview your site, click the Preview Site button on the control bar.
The Previewing Site dialog appears showing progress messages as NetObjects
Fusion generates HTML for your pages.
Preview Site
NetObjects Fusion launches your Web browser and displays the page from
which you started the preview.

24
 Chapter 1 Creating Your First Web Site

Browser’s title bar shows

the name you typed in the
Page title field of the Site
view Properties palette

Banner, showing
current page name
Highlighted button
indicates current page

To select a The other pages have no content yet, but you can click the navigation buttons to
different browser view the pages and their style elements.
for previewing,
from the Tools Notice that all the MasterBorder margins are the same as the Home page. This is
menu, choose because, as shown in the MasterBorder Properties palette, all pages are
Options>Applicati currently assigned the DefaultMasterBorder.
on and display the
When you are done previewing, you can minimize or close the browser, or
Preview tab. You
can also select simply make NetObjects Fusion the active window again.
whether to preview
the current page
or the entire site.

25
Saving Your Site and Exiting

Saving Your Site and Exiting

You might want to take a break and continue building your site later.
• NetObjects Fusion automatically saves your site every time you switch views or
open a different page. To save your site manually at any time, select Save Site
from the File menu.
• To switch from Auto save mode to manual save mode, clear the Auto save
check box in the Application Options dialog.
• To exit NetObjects Fusion, select Exit from the File menu.
The Program tab of the Application Options dialog contains an option to
Compact database upon exit. When this option is selected, NetObjects Fusion
compresses the site to occupy less disk space, and verifies the integrity of your
site file.
• To continue, simply save your site and do not exit the program.

Where to Go from Here

You just created a site for Web publishing with NetObjects Fusion. “Touring
NetObjects Fusion” shows you how to open the site and acquaints you with
NetObjects Fusion’s views, toolbars, properties palettes, and other basic elements
of the program. Familiarity with the basic parts of NetObjects Fusion will help you
immediately begin using its features to enhance your Web sites.

26
 CHAPTER 2

Touring NetObjects Fusion 2

In this chapter you tour NetObjects Fusion. To see the items in this tour you must
first follow the steps in “Creating Your First Web Site” to create the Mountain
Jacques site you open and explore.
This chapter gives you information about:
• Opening your site
• Site view
• Standard toolbar
• Properties palette
• Site View menus
• Setting Application Options
• Viewing Current Site Options
• Site Outline
• Page View menus
• Text and text styles
• Layout properties
• MasterBorder properties
• Rulers and guides
• Site Navigation palette
• Links
• HTML Source view
• Style view
• Assets view
• Publish view

27
Opening Your Site

Opening Your Site

1. If necessary, start NetObjects Fusion Essentials.
• If the Mountain Jacques site is open, go directly to the next section, “Site
View.”
• If NetObjects Fusion is started and the Mountain Jacques site is not open,
choose Mountain Jacques.nod from the list of Site Projects in Online view
and then go to the next section, “Site View.”
• If the site is not on the list, choose Open Site from the File menu and
continue to step 2.
2. Navigate to the NetObjects Fusion Essentials\User Sites\ Mountain Jacques folder,
then select Mountain Jacques.nod.
If your system is
set to hide file
name extensions,
the site name will
not show the .nod
extension.

3. Click Open in the Open dialog, and if necessary, click OK.

The Mountain Jacques site opens.

28
 Chapter 2 Touring NetObjects Fusion

Site View
• If necessary, click the Site button on the control bar to go to Site view.

Site

Site view button New Page

Zoom In tool Preview Site

Select Print from Site view is where you build and edit the structure of your site.
the File menu to
print the The control bar contains a button for each of NetObjects Fusion’s six views, plus
SiteStructure buttons to create a new page, preview your site in a Web browser, and publish your
starting with the site.
selected page.
Standard Toolbar
By default the Standard toolbar is docked when you first start NetObjects Fusion.
You can use the Zoom In tool to enlarge the size of the page icons. Point to the tool
Zoom In Zoom Out and hold down the left mouse button to see the flyout containing the Zoom Out
tool tool tool. Select the Zoom Out tool from the flyout to reduce the size of the page icons.
You can drag any NetObjects Fusion toolbar by its double bar to undock it. Once
undocked, you can drag the title bar to move the toolbar, double-click the title bar
to dock it, or click the Close box to close it. To view the toolbar again, choose
Standard Tools from the View menu.

29
Site View

The next time you start NetObjects Fusion, the toolbar appears where it was when
you exited the program.

Properties Palette
Press F3 to show By default the Properties palette is open when you start NetObjects Fusion. You
and hide the can drag the title bar to move it, double-click the title bar to minimize it, and click
Properties palette. the Close box to close it. When closed, you can view it again by choosing
Properties Palette from the View menu.
Like the toolbar, the Properties palette appears where it was when you exited the
program.
To learn about any option on the Properties palette, either:
• Click the question mark icon, then click an option label.
• Right-click an option label, then click the What’s This? pop-up.
The Properties palette changes to give you information about the selected object.
The Page tab is where you set properties for the selected page.
Display the In Site view, the Page tab of the Properties palette shows the page name, title, type,
ScreenTip to see and currently assigned MasterBorder. You can also remove a page from the
the tab name. navigation bar so that site visitors can only access the page indirectly using links.

By default the page name appears on the banner and navigation button for the page.
To set a custom name for the banner or button, click the Custom Names button and

30
 Chapter 2 Touring NetObjects Fusion

type a new name in the Navigation button or Banner field. You can also open this
dialog using the Custom Names command on the Edit menu.
To type a two-line
button or banner
name, press Enter
after the first line.

To restore the original name to banners and navigation bar buttons, delete the entry
in the Custom Names dialog.
You can use the Management tab of the Properties palette to set page status to
Done to display visual cues of the page status or Don’t publish to exclude pages
being generated at publish time, color code pages with certain attributes, and add
comments.

Use the META Tag tab to enter META tags that can be applied to a single page,
several pages or all pages. Choose from the list of META tags available and type
information about your site in the text field. The META tags will appear
automatically within the <HEAD> tag of each page.
To apply META tags globally to your site, enter the META tags on the Home page
and select “Apply META tags to all pages”.

31
Site View

Site View Menus

The menus change depending on the view. The commands available in Site view
are generally available in other views, in addition to other commands.
• The File menu contains commands to open, close, and save sites, import and
export sites, documents, and templates, reference HTML files external to the
site, and print your site’s structure.
• The Edit menu contains commands to copy and delete pages, select a site
section, create a new page, edit custom names, and search for and replace text.
• The View menu contains commands to show and hide the toolbars and palettes,
set the Site view orientation so the Home page is either at the top (Vertical) or
at the left (Horizontal), set the Site view background color, and set page color
coding to MasterBorder or User Defined.
• The Go menu contains commands to show any view, search for a named object,
go to a particular page, go to the last view, select from a list of recent pages, and
preview.
• The Tools menu contains commands to spell check the site or selected pages,
re-optimize your site for maximum efficiency, and display the Application
Options and Current Site Options dialogs. You can also edit your NetObjects
Fusion profile and refresh the onscreen display.
You must be online • The Help menu contains commands to launch the NetObjects Fusion Help
to use some system and go to various pages on the NetObjects Web site. You can also obtain
commands on the version number, serial number, and copyright information from the About box.
Help menu.
Setting Application Options
1. From the Tools menu, choose Options>Application.

32
 Chapter 2 Touring NetObjects Fusion

The Options dialog appears showing the Program tab.

Default HTML editor

Browse to your favorite GIF and JPEG

editors and select them here. You can
select an image in Page view and open
it using these external editors.

Use the Program tab to set options that are in effect every time you launch
NetObjects Fusion.
• When Auto save is selected, NetObjects Fusion saves your site each time
you change the page or view, open a different site, or exit.
• To continue working where you left off when you next launch NetObjects
Fusion, select Open to most recently used file at startup and Open file to
most recent view.
• By default NetObjects Fusion compacts your site file and verifies the site
when you exit.
• NetObjects Fusion launches the specified external editors in Page view
when you select a referenced HTML file or image and choose Open File in
External Editor from the Object or shortcut menu.
• You can select a unit of measurement for the page width, height, Layout,
and MasterBorder.

33
Site View

2. Click the Preview tab.

The Preview tab is where you select the default browser for previewing your
sites, and whether to preview the current page or the entire site. You can also
specify the size of the browser preview window so you can approximate the
amount of content your site visitors can view on their screens.

34
 Chapter 2 Touring NetObjects Fusion

3. Click the Text tab.

• Use the Text tab to set the default font and size the browser uses when
previewing NetObjects Fusion sites as well as spell-check options.
• The International tab contains format settings for the date and time, decimal
notation, spelling dictionary, language sort order, and character set to use for
imported HTML.
• Use the Updates tab to specify when to check for program updates.
4. Click Cancel to close the Options dialog.

35
Site View

Viewing Current Site Options

1. From the Tools menu, choose Options>Current Site.
The Current Site Options dialog appears showing the General tab.

The General tab shows the name of the open site, the current SiteStyle, the
number of pages it contains, and the default settings for this site.
Use the Browser compatibility field to specify the target browsers you want to
support.

36
 Chapter 2 Touring NetObjects Fusion

2. Click the Change button.

The Browser compatibility section is where you select the browser versions
your site audience is most likely to use.
HTML generation is where you select the HTML standard NetObjects Fusion
generates.
• Dynamic Page Layout uses complex hidden tables to achieve the highest
level of layout accuracy across all browsers. This is the default setting.
• Regular Tables supports the lowest common denominator of browsers.
These pages achieve the least layout accuracy but the greatest browser
compatibility.
• Fixed Page Layout supports Microsoft Internet Explorer 4.0 and above and
Netscape Navigator 4.x. This option is suggested when using NetObjects
Fusion actions, and is required for layered or overlapping objects. Using
cascading style sheet positioning and layers, this option achieves the highest
level of layout accuracy with Microsoft Internet Explorer 4.0 and above and
Netscape Navigator 4.x.
3. Click Cancel.

37
Site View

• The Default section also shows the page width and height for new pages
you add to the site, the default character set, and the type of quotes.
• You can select the HTML or Cascading Style Sheets (CSS) standard for
formatting text.
• Use the HTML Options dialog to specify how you want NetObjects Fusion
to format tabs, spaces, line breaks, word wrap, letter casing, comments, and
other items in the HTML it generates for you.
• The Variable Options are a common feature for advanced users that require
the ability to use variable substitution in the generated code. You can add a
prefix and suffix to NetObjects Fusion’s syntax that will not conflict with
your custom defined variables.
• Use the META tags tab to type keywords for search engines and other
HTML META tag content such as the site’s author. These META tags will
be applied to all pages in your site if you have not added META tag
descriptions in Site view.
• The History tab shows the sites creation and last modification date. You can
enter comments in the Latest changes field of the Revision log section.
• Use the Backup tab to view and change the default backup folder, file
naming convention, and number of backups stored.
By default, NetObjects Fusion automatically creates a backup of your site
file when you exit the program, under the location and name specified.
4. Click Cancel.

Site Outline
1. Click the Outline tab under the control bar.
The SiteStructure appears on the Outline tab, showing the status of the selected
page or its children.

38
 Chapter 2 Touring NetObjects Fusion

Click
Click minus sign
column
to collapse view
heading
to sort
by
column

• To expand or collapse the view, click the plus or minus sign next to a page.
• To sort by column, click the column heading.
• To restore the original order, click the icon for the Home page.
2. Click the Structure tab to return to Structure view.
• To collapse this view, click the triangle under a page.
• To expand this view, click the plus sign under a page.

Page View
Page view is where you design your layout, add content and services, and set up
MasterBorders.
Page • Select the Home page icon, then click the Page button on the control bar to go
to Page view.

39
Page View

Ruler MasterBorder and Layout handles

Object
outline

Component
Manager

Position of
mouse
pointer
Palette
Launcher

• Use the Palette Launcher buttons to show or hide the Properties palette, Site
Navigation palette, and Object Tree palette.

Show/hide Properties palette

Show/hide Site Navigation palette

Show/hide Object Tree palette

40
 Chapter 2 Touring NetObjects Fusion

• Choose Page View Options from the View menu, or press F12 to display the
Page Properties palette.

Smart
Guides

Grid

• The View tab contains options to show and hide rulers and guides, grid,
labels, object outlines, and object icons, as well as options to set the snap to
guides, grid, and object outlines. It also includes an option to set the grid
width and height and use smart guides to assist with object alignment.
• The Page tab is similar to tabs in Site view where you set page name,
custom banner and button name, page status, and add comments.

Page View Menus

In Page view, the File menu includes commands to import or reference an HTML
page and import a Word, Rich Text Format (.rtf), or text document.
You can use the Undo command on Page view’s Edit menu to reverse most actions
since you last switched the page or view. The Edit menu contains the standard
commands to delete, move, copy, and paste objects. It includes commands to select
the next and previous object, Layout, MasterBorder, and page, as well as
commands to find and replace text.
The View menu contains commands to show and hide Page view’s toolbars,
Properties palette, Site Navigation palette, Object Tree palette, MasterBorder, page
labels, object outlines, object icons, rulers, guides, and grid. Use this menu to
control snapping to guides, grid, and object outlines, and to change the zoom factor.
Use the Go menu to go to each NetObjects Fusion view, each Page view tab, the
next, previous, parent, and child page, the last view, and recent pages. You can also

41
Page View

search for named objects, follow a selected link to its destination, and preview the
page or site.
Use the Object menu to manipulate selected objects. The Object menu contains
commands to align, distribute, arrange, size, show and hide objects. You can reduce
the Layout and MasterBorder to accommodate the largest object in them. You can
manipulate tables, open image files in an external editor such as a paint program,
and restore an image to its original size. Finally, you can add links and anchors and
insert HTML tags into selected text.

Page View and Text

NetObjects Use the Text menu to show and hide non-printing text such as paragraph and line
Fusion Essentials break characters. Use this menu to insert many types of objects, HTML code,
supports symbols, fields, and files into selected text objects.
cascading style
sheets. With You can change the text attributes of the standard HTML text styles supported by
cascading style NetObjects Fusion. The Edit Text Styles command displays the Text Styles dialog.
sheets, you can This dialog contains a drop-down list where you choose to apply the styles you are
specify text styles editing to the SiteStyle, site, or page.
and apply them to
a text object, a In Chapter 1, “Building a Site in 10 Minutes,” you added text and edited it using the
page, a site, or a Format tab of the Text Properties palette. Those edits applied only to that single
SiteStyle. text object. You can also edit text attributes in Style view, where they will apply to
the SiteStyle, and therefore throughout every site that uses that SiteStyle.

Layout Properties
• Click the Layout area so that the Layout label is highlighted and the Layout
Properties palette appears.

42
 Chapter 2 Touring NetObjects Fusion

The Layout Properties palette contains three tabs: General, Background, and
Actions.

The General tab contains the Layout name, which by default is the same as the
page name. This tab also contains the Layout area width and height, which you
can change, and shows the overall width and height of the page, which adjusts
automatically. The page width or height is the sum of the Layout plus the
MasterBorder. Changing the Layout size does not change the MasterBorder
size; it changes the page size.
• Use the HTML output section to change the HTML standard for publishing
this Layout. Do this only if you need a setting that is different from the
Browser compatibility setting selected for the whole site. These settings
are described in “Viewing Current Site Options” on page 36.
• Click the Show button to view a superimposed view of the HTML layout
that will be generated if a tables option is selected in the HTML output drop-
down list.
• This tab also contains options to make the Layout a form, center the layout
in a browser, and protect the layout from editing. You can use the HTML
button to insert your own HTML between the <HEAD> tags, inside the
<BODY> tag, or at the beginning or end of the page body.
The Background tab is where you select the color, picture, or audio for the
Layout background. The default setting, Automatic, uses the background color
or image specified in the SiteStyle, or if none is specified, the default
background for the browser.
The Actions tab is where you can assign pre-defined or custom actions, such as
a transition or motion, to the Layout when it is displayed in the browser.

43
Page View

MasterBorder Properties
• Click in the MasterBorder so the MasterBorder label is highlighted and the
MasterBorder Properties appear.

The General tab contains the name of the MasterBorder assigned to the current
page, and a button to add and edit MasterBorders.
This tab also shows the size of the Left, Right, Top, and Bottom margins of the
page, which you can change here, along with options to protect the
MasterBorder area from editing or allow just text editing within this area.
Changing these dimensions can change the overall page size, but does not
change the Layout size.
The AutoFrames tab is where you turn on frames for each MasterBorder
margin, and the Actions tab is where you assign actions to the MasterBorder.

Rulers, Handles, and Guides

The rulers appear in the unit of measurement set on the Program tab of the
Application Options dialog, accessed from the Tools menu. The default is pixels.
The horizontal top ruler shows the page width, which is 730 pixels when set to the
default. The vertical side ruler shows the page height, which is 555 pixels when set
to the default.
Each ruler contains two MasterBorder handles, one at either end, and one Layout
handle between them. Drag these handles to change the MasterBorder margins and
Layout size.

44
 Chapter 2 Touring NetObjects Fusion

Horizontal ruler

Guide handle Layout handle

MasterBorder handle
MasterBorder handle

You can create and You use guides to align objects. Click the ruler where you want to create a new
drag guide guide. Guides are color-coded:
handles if you
want. • When the MasterBorder is selected, guides you create are red and appear for all
pages with the current MasterBorder. When you align an object in the
MasterBorder area of a page, it is aligned to the exact position on all pages.
• When the Layout is selected, guides you create are blue and appear only on the
current page.
Drag a guide handle to move it. To remove a guide, drag its handle off the ruler.
Use the Undo command on the Edit menu to restore margin positions.

Note: You cannot drag a margin handle if the MasterBorder or Layout

will become too small to accommodate an object inside it, such as
a banner, button navigation bar, text, image, or other object.

Site Navigation Palette

• If necessary, click the Site Navigation palette button at the bottom of the Page
view window to open the Site Navigation palette.
Site Navigation
palette button

Double-click a page in this window to open it in Page view.

45
Page View

Links
1. Select the Built with NetObjects Fusion logo in the bottom MasterBorder of the
Home page.
Notice the small blue and white symbol on this image. This is the Link icon; it
means this image has a link associated with it. This and other object icons are
Link icon visible when Object Icons is selected on the View menu.
When you select the image, the Picture Properties palette appears.

2. On the General tab, click the Link button.

The Link dialog appears, showing the External Link settings.

46
 Chapter 2 Touring NetObjects Fusion

The external link information tells you that when site visitors click this
NetObjects Fusion logo, their browser takes them to a URL external to your
site—in this case, the NetObjects Home page at www.netobjects.com.
3. Select Internal link on the Link type list.

An internal link is a link to a page in your site.

4. Select Smart Link on the Link type list.

47
Page View

The Smart Link tab contains links relative to the current page, such as up a
level, next page, and previous page. These links automatically update as your
SiteStructure changes.
Select File Link as the Link type to enter the path and file name of a file to
download into the browser window when the site visitor clicks the link.
5. Use the Target drop-down to target where the link opens. You can choose
[None] to open in the same window, Existing to target an existing frame, or
Pop-up Window to load the page in a new browser window.
6. Click Cancel to exit the dialog.

HTML Source View

You can use the HTML Source view in Page view to view the HTML that
NetObjects Fusion generates, and to insert your own HTML or other code into
specific places in the code.
1. Click the HTML Source tab.

48
 Chapter 2 Touring NetObjects Fusion

Document Map

HTML Source Editor

The left side of this view is the Document Map. The Document Map lists each
function at the top. The Functions folder contains the JavaScript functions for
the rollover buttons in the button navigation bar.
2. Click the minus sign (-) next to the Functions folder to collapse it.
The Document Map lists all HTML tags on the page, with an identifying icon
next to each one.
• Click a minus sign (-) to collapse the tag list, and a plus sign (+) to expand
it.
• Click the X to close the Document Map. Right-click in the window and
select Document Map from the shortcut menu to restore it.

49
Page View

• Double-click an item in the Document Map to highlight its starting line of

code in the HTML Source Editor. For example, double-click the very last
item in the document map, <IMG> Picture3, to view the HTML code for
the ImageMap.jpg picture you added in Chapter 1.
• Drag the column divider to change the width of the Document Map.
The HTML Source Editor on the right side of the window shows the HTML,
JavaScript, or other code that comprises the page. This code contains complex
tables and is generated by NetObjects Fusion. It appears on a gray background,
and you cannot edit it. To make the code easier to read, NetObjects Fusion
shows each language element in a special color.
You can insert code into any white space in the HTML Source Editor. You can
also use the HTML button on many dialogs to insert HTML or other code into
the page.
You can click a blue plus (+) or minus (-) sign in the HTML Source Editor to
expand or collapse this view.
You can use the Find command on the Edit menu to find text in HTML Source
view. For example, you could type ImageMap in the Find dialog and click the
Find Next button to locate the HTML code for the ImageMap.jpg picture you
added to the Home page.

Page Preview Tab

In Page view, you can preview the current page without switching to another view
or launching an external browser.

50
 Chapter 2 Touring NetObjects Fusion

• Click the Page Preview tab to preview the current page.

Page Preview tab

Style View
1. Click the Style button to go to Style view.
If you followed the steps in “Creating Your First Web Site,” you have already
Style seen how to view and assign SiteStyles in Style view.
You can create your own SiteStyles and edit existing SiteStyles in this view.
The Style menu contains commands to create a new style, browse styles online,
add and remove styles, add SiteStyle sources, and edit style elements. To edit a
style, you must clear the Read only check box on the Style Properties palette.

51
Style View

In Style view, the control bar contains the Set Style button, which you use to
assign the style you are viewing to your site, and an Add Styles button, which
adds the current style to your Active SiteStyles list. You can browse and
download additional styles to use in your sites.

52
 Chapter 2 Touring NetObjects Fusion

2. Click the Text tab to view the text settings for the SiteStyle.

Use the Text tab in Style view to set text attributes for the HTML text tags and
objects supported by NetObjects Fusion Essentials.
When you specify text attributes for the Body text element, the attributes
automatically ripple through all the text objects that are on your pages. You can
edit each object to further specify its attributes.
You can format When you add text to the Layout, it automatically appears in the font and style
selected text in specified in Style view. You can override the style settings for the text object by
Page view using selecting the text and changing it on the Format tab of the Text Properties
the Properties palette.
palette. Such
formatting Ultimately, if no text attributes are set in the HTML sent to the browser, the
overrides text browser uses its own defaults. In NetObjects Fusion, there is always a SiteStyle
settings in the assigned, but often the text settings for the SiteStyles are Automatic, which
SiteStyle. means “Use the default.” The default is the browser setting unless it has been
overridden by a setting in the SiteStyle, site, page, or text object.
SiteStyles are available to every site on the system, so if you change a text
setting in a SiteStyle, you affect every site that uses the SiteStyle. You can

53
Assets View

change text attributes for just the open site using the Manage Styles command
on the Text menu in Page view.

Assets View
Assets view is where you manage all the assets in your site. Assets are any file you
place in your site, such as files containing images, sounds, movies, and so on.
Assets 1. Click the Assets button on the control bar.
Assets view appears with the Files tab selected.

The Files view shows all file assets known to the site. The columns in this view
tell you the asset’s file name, its type, whether it is currently in use, its path,
size, and creation date. The Verify Status column reports the results of the
Verify All File Assets command on the Assets menu, and tells you whether the
asset is actually in the location specified by the path.
You can click a column heading to sort by that heading, and drag column
dividers to change the column widths.
2. Click the Links tab.

The Links view lists all the links currently registered in the site, including the
default link targets. Although the button and text navigation bars contain links,
these are managed internally by NetObjects Fusion and are not listed here.

54
 Chapter 2 Touring NetObjects Fusion

The external link currently assigned in this site is the link to the NetObjects
Home Page, which you examined when you selected the Built with NetObjects
Fusion logo in “Links” on page 46.
The Data Objects and Variables tabs show data objects and variables used in the
site. The default entries are a data object named Sample and a variable named
MyAddress. Data objects define database information from either internal or
external sources. In Assets view you can create, edit, and delete user-defined
variables used within the site.
The Assets menu varies slightly depending on the selected tab. Generally it
contains commands to add a new asset, delete all unused file assets, open an asset,
and verify all assets.

Publish View
Publish view is where you set up publishing parameters and select whether to
publish locally to your computer for previewing how your site will look in a
browser window or remotely to your host provider’s Web server for public viewing.
• Click the Publish button to go to Publish view.
With NetObjects Fusion you can specify the directory structure you want to publish
Publish to your Web server. By default this structure is created in a special Publish directory
in the NetObjects Fusion Essentials\User Sites folder.

The Publish view window shows the directory structure that will be uploaded to
your server in the left pane, and the contents of your remote server directory in the
right.

Note: You must connect to your remote server to view the remote server
directory contents.

55
Where to Go from Here

Use the Arrange Files command on the Publish menu to select how local files
appear in Publish view and are sent to the Web server. This view shows publishing
by Asset Type, where assets are in one directory and HTML files are in another.
You can publish with a flat directory structure, where all assets and files are in
one directory, or by site structure, where all the HTML and asset files for a given
page are in a folder of the same name, and the index.html file, and all banners,
buttons, and other NetObjects Fusion files are in the root. Finally, you can create
your own custom directory structure.
The columns show the file name of the asset or .html file, its type, attributes, and
whether it was remotely or locally published, or modified.
The Publish view control bar contains the Publish Settings and Publish Site
buttons.
• Use Publish Settings to set up local and remote publish profiles.
• Use Publish Site to publish the site. In the Publish Site dialog you can select
the current page, several pages or sections, or entire site, and publish all or
changed assets only.
Use the Transfer Files to Server command on the Publish menu to transfer the
site to a Web server.
Use the View/Delete Server Contents command on the Publish menu to view
or delete files on the local or remote computer.
Because some NetObjects Fusion and third-party components must be
published inside the <HEAD> tag of the HTML page and others must be in the
body, you can specify the order in which to publish components using the
Publish Components command on the Publish menu.

Where to Go from Here

This completes your tour of NetObjects Fusion Essentials. Now you understand
how site development flows from view to view, and generally what you do in each
view. You also understand how to set options for the program and for the site.
All the concepts in this chapter are explained in detail in the NetObjects Fusion
Essentials User Guide, and in the online Help system.

56
 CHAPTER 3

Designing Site Navigation3

Now that you have built a SiteStructure and are familiar with basic NetObjects
Fusion features, you can set up site navigation so visitors can easily move between
pages.
To complete the lessons in this chapter, you must have followed the steps in
Chapter 1, “Creating Your First Web Site,” to create the Mountain Jacques site.
This lesson shows you how to:
• Create a new MasterBorder
• Create an Imagemap with linked hotspots
• Add Fly-out submenus
• Create a custom navigation bar

57
Creating a New MasterBorder

Creating a New MasterBorder

To make the Home page design unique, you can use the Mountain Jacques graphic
as a navigation aid instead of the button navigation bar. You add hotspots to the
button labels on the graphic and link them to the appropriate pages.
If you remove the Because the hotspots provide navigation aids for the page, you can remove the
navigation button button bar navigation from the Home page, but you want to keep it on all the other
bar before you pages. To accomplish this you create a special MasterBorder for the Home page,
create a new then remove its button navigation bar.
MasterBorder, you
remove the 1. Open the Mountain Jacques site.
navigation button
2. Display the Home page in Page view.
bar from every
page in the site 3. Click in an empty area of the MasterBorder, so the MasterBorder Properties
that uses the palette appears.
DefaultMasterBor
der.

The Name field shows the MasterBorder assigned to this page—

DefaultMasterBorder. This drop-down list shows all MasterBorders in the
open site.
NetObjects Fusion also provides a ZeroMargins MasterBorder, which sets all
margins to zero, so you can create pages with no borders.

58
 Chapter 3 Designing Site Navigation

4. On the General tab of the MasterBorder Properties palette, click the Add/
Edit button.

5. In the Edit MasterBorder List dialog, click the Add button.

6. In the Name field of the New MasterBorder dialog, type
HomeBorder
Leave it based on DefaultMasterBorder.

7. Click OK.
The new MasterBorder name appears on the Properties palette, and the Name
drop-down list now shows three MasterBorders, with HomeBorder selected.

59
Creating an ImageMap

8. Select the navigation bar in the Left MasterBorder, then press the Delete key.

This removes the navigation bar from the MasterBorder named HomeBorder,
which is assigned only to the Home page. The other pages still use the
DefaultMasterBorder, thereby retaining the button navigation bar.

Creating an ImageMap
An imagemap is a graphic with linked areas called hotspots.

60
 Chapter 3 Designing Site Navigation

1. On the Standard toolbar, click the Hotspot: Rectangle tool.

If the Rectangle tool is not showing, point to the Hotspot tool, hold down the
Hotspot
left mouse button, and select Rectangle from the flyout.
Rectangle
tool 2. Move the pointer over the picture.
A wide border surrounds the picture, which shows it is selected for adding
hotspots.

Wide border shows

picture is selected for
adding hotspots

3. With the wide border showing, drag a box around the Mission button on the
graphic.

Drawing a hotspot

The Link dialog appears.

4. Select Internal Link as the Link type.

61
Creating an ImageMap

5. In the SiteStructure select the Mission page.

6. Click Link.
The rectangular hotspot appears selected on the picture, and the Properties
palette shows Rectangle Hotspot Properties.

The hotspot and its

properties

7. Place the pointer over a handle. When the pointer changes to a double-sided
arrow, you can drag the handle of the hotspot to adjust its size.
8. Double-click the Rectangle Hotspot tool to prevent it from reverting to the
Select tool.
9. Drag a rectangle around the Next Tour button.

62
 Chapter 3 Designing Site Navigation

The Link dialog appears again.

10. In the SiteStructure, double-click Next Tour to create the link.
11. In the same way, draw hotspot rectangles around the Events button and link it
to the Events page, and around the Contest button and link it to the Contest
page.
To turn off hotspot
outlines, clear the
Show hotspots
check box on the
General tab of the
Picture Properties
palette.

12. Click the Select tool.

13. Right-click the banner and select Delete Object from the shortcut menu.
Select tool

Handle for top

MasterBorder

63
Creating an ImageMap

14. Drag the handle for the top MasterBorder upward until its ScreenTip says 20.

15. Click the Preview Site button on the control bar to preview the entire site, and
click the hotspots on the Home page to test the internal links.
Preview Site

64
 Chapter 3 Designing Site Navigation

The Preview tab in

Page view
previews a single
page only, so you
cannot use it to
test links.

Notice the button and text navigation bars on each page. The navigation bars on the
Mission and Next Tour pages include the Home page and the four pages on the first
level of the site. All the buttons are displayed in the primary button style associated
with the Mountain SiteStyle.

65
Creating an ImageMap

Home page and

first level pages
displayed in the
primary button
style

The navigation bars on the Events and Contest pages include the Home page, the
pages on the first level, and the child pages of the current page—Activities and
Highlights for the Events page and Wonder Lodge for the Contest page. The child
page buttons are displayed in the secondary button style associated with the
Mountain SiteStyle.

66
 Chapter 3 Designing Site Navigation

Child pages of
current page
displayed in
secondary button
style

Adding Fly-out Submenus

By default, a navigation bar includes the Home page, pages on the first level of the
site, and the child pages of the current page. Instead of showing child page buttons
on the navigation bar, you decide to use fly-out submenus. When a site visitor
moves the mouse pointer over a navigation bar button, the child pages will pop out.
1. Display the Events page in Page view and click the button navigation bar.

67
Adding Fly-out Submenus

The Navigation Bar Properties palette appears.

In the Navigation Structure section of the General tab, note that First Level is
selected. This means that all pages on the level under the Home page in the
SiteStructure are included in the navigation bar.
2. In the Multi level optionssection:
a. Leave Include Home page selected.
b. Clear Include Child pages to remove the child page buttons from the
navigation bar.
c. Select Include JavaScript submenus to display the child pages as pop-ups
when a site visitor moves the mouse ponter over the parent page button
3. Click the Advanced tab.
You can customize the Fly-out submenu button type or SiteStyle on this tab. For
now, you use the default settings.
4. Click the Preview Site button on the control bar to preview the site and test the
Fly-out submenus.
Preview Site

68
 Chapter 3 Designing Site Navigation

Current page
with child pages
displayed on
JavaScript
submenu

Adding a Custom Navigation Bar

The Highlights page of the site will feature photos of last year’s annual mountain
bike tour. To make it easy for site visitors to get additional information about
mountain biking, you can add a navigation bar button that links to the Specialized
Bicycle Web site.
1. Display the Highlights page in Page view.
2. Click in the MasterBorder.
3. On the General tab of the MasterBorder Properties palette, click the Add/
Edit button.
Because you want this link to appear only on the Highlights page, you create a
new MasterBorder.
4. In the Edit MasterBorder List dialog, click the Add button.
5. In the Name field of the New MasterBorder dialog, type BikeBorder.

69
Adding a Custom Navigation Bar

Leave it based on DefaultMasterBorder.

6. Click OK.
The new MasterBorder name appears on the Properties palette, and the Name
drop-down list now shows four MasterBorders, with BikeBorder selected.
7. Select the button navigation bar.
8. On the Navigation Bar Properties palette, select Custom and click Edit.
The Custom Navigation Bar dialog appears, showing the SiteStructure with
the Internal Link type selected. The Home page is already added to the
navigation bar on the right side of the dialog.

9. On the left side of the dialog, select the Mission page.

10. Double-click on the page name to add the Mission page to the navigation bar.

Add button

70
 Chapter 3 Designing Site Navigation

11. In the same way, click and add the Events, Activities, Next Tour, and Contest
pages.
Note that you can add pages on different levels of the site.
Using the Custom
option, you can
add pages from
different levels
into the same
button navigation
bar.

12. Select External Link from the Link type list.

13. In the New link text field, type www.specialized.com and click Save.
14. With the new entry highlighted in the External links list on the left, click the
Add button.

71
Adding a Custom Navigation Bar

15. Click the new entry in the Name column, type Specialized, and press Enter.

16. Click OK to close the custom navigation bar dialog.

The custom navigation bar appears in the MasterBorder.

72
 Chapter 3 Designing Site Navigation

17. Preview your site and test the links in the custom navigation bar.

Where To Go From Here

You just learned to create MasterBorders and use imagemaps and MasterBorders as
navigation aids when creating Web pages. You also learned to create a custom
navigation bar.
To learn more about MasterBorders, see Chapter 10, “Managing MasterBorders”
and Chapter 18, “Creating Navigation Bars and Banners” in the NetObjects Fusion
Essentials User Guide or the online Help system.
The next lesson, Chapter 4, “Placing Pictures in Text,” shows you how to import a
Word document into the Layout, add a picture inside its text box, and wrap the text
around the picture.

73
Where To Go From Here

74
 CHAPTER 4

Placing Pictures in Text 4

The Mountain Jacques mission statement was created using Microsoft Word.
Without changing the format, you can put the mission statement on the Mission
page and add a picture.
To follow the steps in this lesson, you must have created the Mountain Jacques site
described in Chapter 1, “Creating Your First Web Site.” You also must have
Microsoft Word installed on your system.
This chapter shows you how to:
• Import a Microsoft Word document into a page
• Add a picture inside a text box
• Align text around a picture
• Move a picture inside a text box

75
Importing a Word File

Importing a Word File

In NetObjects Fusion, a text box can be a container object. You can add and arrange
other objects inside it. When you move the text box, the objects remain in position
in the box. This makes it easy to arrange other objects around the text box on the
page.
Importing a Word file into the Layout area automatically creates a text box for you.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder.
2. Display the Mission page in Page view.

3. From the File menu, choose Import>Document.

Note: If you do not have Word installed on your system, this

option is not available.

76
 Chapter 4 Placing Pictures in Text

4. In the Import Document dialog, navigate to the NetObjects Fusion

Essentials\Tutorial folder, and select the Mission.doc file.

5. Click Open.
A progress message appears, and the Word document appears in the Layout.

77
Adding a Picture Inside a Text Box

6. Click in the Layout to select the text box, so the Text Properties palette shows
the Text Box tab.

Notice the text box has a wide border and does not show any object handles.
This is because the default option for imported text is Size Layout to Text.
When this option is selected, the text assumes the size of the Layout, and you
cannot resize the text box.
• You can clear the Size Layout to Text check box to view the familiar solid
object handles that indicate you can resize the text box. If you clear this
option, click the check box again to reselect it before you continue.
Now you can insert the picture into the text box.

Adding a Picture Inside a Text Box

1. Double-click inside the text box to display the Format tab of the Text
Properties palette.
Picture tool 2. Select the Picture tool from the Standard toolbar.
The pointer changes to a crosshair. When you move it over the text box, the text
box outline changes to a wide blue border. The crosshair pointer carries a wide
blue insertion point with it.

78
 Chapter 4 Placing Pictures in Text

Wide blue insertion point

You don’t have to 3. Place the wide blue insertion point just after the last word in the first paragraph,
draw a box to and click to launch the Picture File Open dialog.
place the picture.
Just click to
position the upper
left corner of the
image.

79
Adding a Picture Inside a Text Box

4. Navigate to the NetObjects Fusion Essentials\Tutorial folder and select mission.jpg.

5. Click Open.
The picture appears with its upper left corner at the insertion point location. The
picture is selected, and the Picture Properties palette appears.

80
 Chapter 4 Placing Pictures in Text

6. On the Picture Properties palette, click the Align tab. Depending on your
screen resolution, you may have to scroll to the Align tab in the Picture
Properties palette.

The icons on the Align tab show how the text aligns itself in relation to the
picture.
The default alignment is Top, which aligns the text at the insertion point with
the top of the picture.
7. On the Align tab, select Right wrap.
The text wraps around the picture, and the embedded object icon appears.

81
Adding a Picture Inside a Text Box

Blue and white embedded

object icon denotes insertion
point for picture in text box

This alignment is good, but you would like to move the picture up.
8. Move the pointer over the picture and press the mouse button, so you see the
wide blue border around the text box.
9. Start dragging slowly upward.
As you drag, the picture remains where it is, and the pointer displays the wide
blue insertion point.
10. Move the wide blue insertion point to the upper left corner of the Layout, at the
beginning of the text, and release the mouse button.
The picture moves up next to the top paragraph of text. The Alignment option
is still set to Right wrap, and now the picture is where you want it.

82
 Chapter 4 Placing Pictures in Text

11. On the Align tab, in the Space around object section, set Horizontal to 2 and
Vertical to 4.

83
Where To Go From Here

12. Click the Page Preview tab to preview the page.

Where To Go From Here

You just learned another way to use text boxes in page layouts, how to insert
objects into a text box, and how to align text around these objects.
For more information on text boxes, see Chapter Essentials, “Working with Text
Boxes” in the NetObjects Fusion Essentials User Guide and in the NetObjects
Fusion online Help system.
When you use text boxes to lay out pages, NetObjects Fusion generates lean
HTML. When you use the Size Layout to Text option, NetObjects Fusion
generates the leanest code because it eliminates HTML tables in the Layout portion
of the page. For more information on HTML output options, see Chapter 7,
“Controlling Published Output in the NetObjects Fusion Essentials User Guide and
in the NetObjects Fusion online Help system.
The next lesson, Chapter 5, “Creating a Photo Gallery,” shows you how to add a
photo gallery to your site.

84
 CHAPTER 5

Creating a Photo Gallery5

To show highlights of each type of activity Mountain Jacques offers, you decide to
display photos of previous trips. Using the NetObjects Fusion Photo Gallery tool,
you can create a professional presentation with little effort. In this chapter, you set
up a gallery that features photos of a Yosemite hiking trip.
To follow the steps in this lesson, you must have created the Mountain Jacques site
described in Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Create a photo gallery
• Add pictures to the gallery
• Format the thumbnails page
• Format the photo pages

85
Adding Pages for the Photo Gallery

Adding Pages for the Photo Gallery

Each photo gallery includes two types of pages: a thumbnail page, which displays a
small image of each picture in the gallery, and photo pages, which display one
image to a page. You add the thumbnail page and NetObjects Fusion automatically
creates the photo pages for you.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder.
2. Go to Site view.
3. Select the Activities page and add a new page.
4. Name the new page Hiking.
5. Display the Hiking page in Page view.

6. Select the Photo Gallery tool from the Advanced Tools toolbar and click in the
upper left corner of the Layout area.
Photo Gallery tool
It’s a good idea to start in the upper left corner of the Layout to allow as much
room as possible for the images. You can adjust the position later, if necessary.

86
 Chapter 5 Creating a Photo Gallery

If photo galleries 7. In the Add Photo Gallery dialog, type Yosemite as the name of the gallery and
are already choose Default as your profile.
associated with
the site, you may
see a larger
dialog. If this
happens, use the
Create a new
Photo Gallery
option.
8. Click OK.

Adding Photos
Before you begin After you add the gallery component, the next step is to add photos. You should be
to add photos, it’s looking at Open dialog window.
a good idea to
organize the 1. Navigate to the NetObjects Fusion Essentials/Tutorial/Photo Gallery folder.
pictures you want 2. Press Ctrl+A to select all four files in the folder and uncheck the “Use file name
to include into a
for title” check box.
single folder so
you can find them
easily.

You can select one, all, or as many files as you like.

3. Click Add.

87
Adding Photos

The files you selected are listed in the File Name column and the highlighted
file is shown in the Thumbnail Image Preview.

You can give each photo a title and/or caption or just let the picture speak for
itself.
4. Select HalfDome.jpg and in the Title field, type Half Dome.
5. In the Caption field, type Rising over 4,000 feet above the valley floor, Half Dome is
the most recognized symbol of Yosemite.

88
 Chapter 5 Creating a Photo Gallery

6. Select Campsite.jpg and enter Accommodations as the title.

7. For the last two pictures, enter Waterfalls and Mountain Jacques Guides as the
titles.

You enter the captions later, directly on the photo page.

For more 8. Select HalfDome.jpg and see the ALT Tag field is automatically populated with
information about the Title of your photo. Repeat to view the ALT tag text for the other three
these output pictures.
settings, see
Chapter 14, You use the Output Settings on the bottom Thumbnail Image and Photo Image
“Creating Photo tabs to balance display quality and download time so your site visitors are not
Galleries,” in the waiting a long time for your photos to appear. For this lesson, the default settings
NetObjects Fusion are fine.
Essentials User
Guide. Next you set up formats for the thumbnail page and the photo pages.

Formatting the Thumbnail Page

The thumbnail page shows a small preview of each image in the gallery. Site
visitors click a thumbnail to go to the photo page. NetObjects Fusion includes a
variety of templates you can use to display the thumbnails. For example your
pictures can appear in a film strip or a series of slides.

89
Formatting the Thumbnail Page

1. Click the Thumbnail Page tab.

2. From the Template list, select Slide.

Note the additional options. Each thumbnail template has options consistent
with its theme. As you change the settings, the result appears in the Preview
window.
3. Leave the Style set to Shadow.
4. Set Columns to 2.
Since you have four images in this photo gallery, this will arrange them in two
rows of two.
5. If necessary, clear Include title because you don’t want to display the title of
each image on the thumbnail page.

90
 Chapter 5 Creating a Photo Gallery

6. Click Done to see the Thumbnail page.

The thumbnails are bounded by a green border. You can change the order of the
images within the green border, but you cannot move individual templates
outside the green border.

91
Formatting the Thumbnail Page

7. Drag the photo gallery so it is centered under the page banner.

The files are displayed in the order in which they are listed in the File Name
column. You want to change the order to put the scenic photos first.
8. Click the Half Dome photo and drag it to the upper left position in the gallery.
9. In the same way, drag the campground photo to the lower left corner.

92
 Chapter 5 Creating a Photo Gallery

Use the red arrows for guidance as you drag.

10. On the Photo Gallery Properties palette, click the Configure button to return to
the Photo Gallery Properties Editor.

Formatting the Photo Pages

Each photo page can contain an image, a title, and a caption in a layout that you
choose. You also select a frame template for the photo that will be displayed in a
pop-up window and format the photo title and caption text. The layout and text
formats you select on the Photo Page tab are reflected on all photo pages. Changes
you make directly on a photo page apply only to that page.

93
Formatting the Photo Pages

1. Click the Photo Page tab.

When selecting a 2. Select a Layout.

layout, consider
the shape of your In each sample layout, the square with the X represents the photo, the bold line
photos and the represents the title, and the text block represents the caption. The pictures in this
amount of text you guide use the default layout, but you can experiment with other layouts.
want to include in
The layout you select applies to all photo pages.
the caption.
The text format 3. Click Format Title.
should match or
compliment the The Object Format dialog appears.
SiteStyle.

94
 Chapter 5 Creating a Photo Gallery

On the tabs of this dialog you select text formats for all the photo pages. As you
make changes, the new format is displayed in the preview window.

a. On the Character tab, set Font to Arial, Style to Bold, and Size to 1.
b. On the Paragraph tab, select center Alignment.
4. Click OK.
5. Click Format Caption.
6. On the Character tab, set Font to Arial, and click OK.
The text formats you select here for the title and caption apply to all photo
pages.
Next, you select a frame template for the photo.
7. In the Photo Frame section of the dialog:
Select a template a. Select the Simple border Template.
that is coordinated
to your SiteStyle. The corresponding template options appear.
b. Leave Border width set to 1.
c. Choose black as the border color.

95
Formatting the Photo Pages

8. Click Done to close the Photo Gallery Properties Editor.

You use the Save Profile option at the bottom of the Photo Gallery Properties
Editor to save the settings associated with a specific photo gallery so it can be
used for the next photo gallery created. For this lesson, we will not create a
profile.
For more Look at the Site Navigation palette. NetObjects Fusion added a page named
information about Yosemite to the site. The new page icon shows multiple pages and has the same
saving profiles, name as the photo gallery. This icon represents the photo pages. The actual
see Chapter 14, number of pages adjusts to accommodate as many or as few photos as you add
“Creating Photo to the gallery.
Galleries,” in the
NetObjects Fusion
Essentials User
Guide.
Thumbnail page
Photo pages

9. Double-click the photo page icon on the Site Navigation palette.

Photo page icon The first photo page appears.

You use the navigation buttons on the control bar to move to the next and
previous photo pages, and to add or delete a page. The three navigation buttons
below the banner provide a way for site visitors to move to the next or previous
photo, or back to the thumbnail page.
10. Click the Next and Previous buttons to display the Half Dome page.

96
 Chapter 5 Creating a Photo Gallery

Use these buttons in Page

view to navigate through
the photo pages and add
or delete pages

When you publish your

site, visitors use these
buttons to navigate
between photo pages and
back to the thumbnail
page

11. Press Shift and click the border of the photo gallery and each navigation button
on the page to select all of these objects.

97
Formatting the Photo Pages

12. Press the right arrow key to move the selected objects so they are centered under
the banner.

This centers the objects on all photo pages.

13. Click the Next button on the control bar to move to the waterfall photo page.
14. Click in the caption text field and type: Peak viewing time for waterfalls is in the
Next spring.
15. On the next two pages add the following captions:
a. Campground page: The Mountain Jacques staff takes care of your campground
reservations.
b. Guides page: K.C. and Jennifer lead the way on your daily hikes.

98
 Chapter 5 Creating a Photo Gallery

16. Preview the site.

17. Click the up arrow to return to the thumbnail page and then click an image to go
to the photo page. Use the left and right arrows to move between photo pages.
Your photo gallery is complete.

Where To Go From Here

You just learned how to put your digital images on the Web using the NetObjects
Fusion Photo Gallery tool. For more information about photo galleries, see Chapter
14, “Creating Photo Galleries” in the NetObjects Fusion Essentials User Guide and
in the NetObjects Fusion online Help system.
The next lesson, Chapter 6, “Creating Dynamic Pages,” shows you how to add
actions to objects.

99
Where To Go From Here

100
 CHAPTER 6

Creating Dynamic Pages6

Using Dynamic HTML on the Next Tour page will generate excitement for the
upcoming rock climbing expedition. To view objects in motion, your site visitors
must use Microsoft Internet Explorer 4.0 and above or Netscape Navigator 4.x.
To follow the steps in this lesson, you must have built the Mountain Jacques site
described in Chapter 1, “Creating Your First Web Site.”
This lesson shows you how to:
• Add objects
• Add and size text
• Use the Object Tree
• Add actions to objects
• Add sound to the background
• Set the HTML output option

101
Adding Objects

Adding Objects
First you add all the objects intended as targets of DHTML actions.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder.
2. Display the Next Tour page in Page view.

3. Make sure Snap to Object Outlines is selected on the View menu to make it
easy to place and move objects without overlapping other objects.
4. Select the Picture tool and click in the upper left of the Layout.
The Picture File Open dialog appears.
Picture tool

102
 Chapter 6 Creating Dynamic Pages

5. On the Folder tab, navigate to the NetObjects Fusion Essentials\Tutorial folder,

select girlclimber.jpg, and click Open.

6. Select the Picture tool and click to the right of the girl climber picture.

103
Adding Objects

7. In the Picture File Open dialog, navigate to the NetObjects Fusion

Essentials\Tutorial folder, select boyclimber.jpg, and click Open.

If the red 8. Drag the boy climber picture so that it is adjacent to the girl climber picture.
exclamation point
icon appears,
move the pictures
so they do not
overlap. With one
or more objects
selected, press an
arrow key to
nudge the selected
object.

104
 Chapter 6 Creating Dynamic Pages

9. Select the Text tool and draw a wide rectangle below the two pictures.

105
Adding Objects

10. Type the following:

Join the Mountain Jacques Special Rock Climbing Expedition June 9-16!

11. Drag through all the text, or triple-click anywhere in the text to select it.
12. With the text selected, on the Format tab of the Text Properties palette:
• Select +2 from the Size drop-down list.
• Click the Bold button.
• Click the Align Center button.
13. Click to place the insertion point after the word Jacques and press Shift+Enter
to force a line break.
14. If necessary, drag the edges of the text box toward the edges of the Layout so
the text occupies two lines.

106
 Chapter 6 Creating Dynamic Pages

Using the Object Tree Palette

1. Click the Object Tree palette button in the lower left corner of the Page view
window.
Object Tree button

Page name
Click the plus sign to
view the navigation
bar button names

Layout name
Highlighted name shows text
box selected in Layout
Objects in this Layout

The Object Tree shows the hierarchy of all objects on the current page, using
an outline view.
The MasterBorder section, labeled DefaultMasterBorder in the Object Tree,
shows all objects in the MasterBorder. The Layout section, labeled
NextTourLayout, shows all objects in the Layout.
2. In the Layout, select the picture of the girl climber.
The Object Tree highlights the name of the selected object so you can identify
it.
If this is the first picture you placed in this Layout, it appears under
NextTourLayout as Picture1.
3. In the Object Tree, click Picture1, or the name associated with the girl climber,
so it is selected.
4. Click in the name to select the text for editing.

107
Adding Actions to Objects

You cannot use 5. Type Girl to give the object a descriptive name.
ASCII or blank
characters in
object names.

6. Click Picture2, or the name associated with the boy climber picture, to select it;
click again in the name so you can edit it, then rename the picture Boy.

Adding Actions to Objects

Now you can add DHTML actions to animate the objects on the page.
1. Select the Girl picture in the Layout and click the Actions tab on the Picture
Properties palette.
2. Clear the Object initially visible in browser check box.

108
 Chapter 6 Creating Dynamic Pages

This means that when this page is loaded the object will not be visible.

Name of selected object

Clear to make object initially

invisible in browser

3. Click the Plus (+) button at the bottom left.

The Set Action dialog appears.

Name of action

When to perform action

Object doing the action

Action performed by object

The Name field shows the default action name, Action1.

109
Adding Actions to Objects

4. In the When field, click the arrow to display the menu, point to Page, then
select Page Loaded.

This means that Action1 will happen when the browser loads this page.
In the Action section, the Target field shows the action will happen to the
object named Girl, which was selected when you began formulating this action,
and is therefore the default target.
5. In the Message field, select Motion>Fly from the menu.
When you select an option from the message list, the appropriate parameters
become available.
6. In the Parameters field, select In From Bottom Left from the menu.

Action to perform

Parameter for action to

perform

110
 Chapter 6 Creating Dynamic Pages

7. Click OK.
The Actions tab for the Girl picture now shows the action you created,
described in a few words.

Select or clear check box to

enable and disable the action
Click plus and minus buttons
to add and delete actions

The check mark next to the action enables it.

The Action icon, a right-pointing triangle in a small pink circle, appears on the
Girl picture, indicating an action is assigned to it.
Action icon
To view object
icons, select
Object Icons from
the View menu.

8. With the Girl picture still selected, on the Actions tab of the Picture
Properties, click the Plus (+) button again.

111
Adding Actions to Objects

The Set Action dialog appears, showing Action2 in the Name field.

Click Target Browse button

to open Object Tree

9. In the When field, select Motion>Motion Ended.

10. Click the Target field Browse button (...) to display the Object Tree.

Select target from

Object Tree

11. In the Object Tree, select the Boy picture, then click OK.
Boy appears in the Target field of the Set Action dialog.
The target of the action is the Boy picture. When the Girl picture stops moving,
the Boy picture does something.
12. In the Message field, select Motion>Fly.

112
 Chapter 6 Creating Dynamic Pages

13. In the Parameters field, select In From Bottom Right.

Perform action when this happens to object

selected in Page view
This object performs the action

14. Click OK.

Now two actions are listed on the Actions tab for the Girl Picture Properties.

Click arrows to move selected action up or

down in list to change the order in which it
occurs

15. Select the Boy picture.

16. On the Picture Properties palette, click the Actions tab.
17. Clear the Object initially visible in browser check box.
18. Click the Plus (+) button at the bottom left.
The Set Action dialog appears.
19. In the When field, select Motion>Motion Ended from the menu.

113
Adding Actions to Objects

20. In the Target field, click the Browse (...) button, select Text1 from the Object
Tree, and click OK.
21. In the Message field, select Motion>Fly from the menu.
22. In the Parameters field, select In From Left from the menu.
When the Boy
picture stops
moving, the Text1
object flies in from
the left.

23. Click OK.

The Actions tab for the Boy picture shows a description of the action you
created, and the Action icon appears on the Boy picture.

114
 Chapter 6 Creating Dynamic Pages

Make the text 24. To complete the sequence, select the Text box you added to the Layout.
initially invisible
in the browser, so 25. On the Text Properties palette click the Actions tab.
the text does not 26. Clear the Object initially visible in browser check box.
appear before it
flies in.
Adding Sound to the Background
Adding sound to the background provides the finishing touch for this page.
1. On the Layout Properties palette, click the Background tab.
2. In the Sound section, select the Sound check box.
3. In the Background Sound dialog that appears, click the Browse button.
4. On the Folder tab of the Open dialog, navigate to the NetObjects Fusion
Essentials\Tutorial\Sounds folder, select NextTour.aif, and click Open.
5. In the Background Sound dialog, select the Continuous loop check box, and
click OK.

115
Setting the HTML Output Option

Setting the HTML Output Option

This option is The default HTML output option for an entire site is Dynamic Page Layout. You
discussed in can view this setting by choosing Options>Current Site from the Tools menu. The
“Viewing Current Browser compatibility field on the General tab shows the HTML output setting
Site Options” on for the entire site.
page 36 and
“Layout You can override this setting and manually set the HTML output option for a page
Properties” on on the General tab of the Layout Properties palette.
page 42.
• Most actions display correctly with the Dynamic Page Layout setting, and this
setting works with all browsers.
• Actions display most efficiently with the Fixed Page Layout setting, but this
setting only works with Microsoft Internet Explorer 4.0 and greater and
Netscape Navigator 4.x.
• Actions containing overlapping objects require the Fixed Page Layout setting.
For more
information on
HTML output
options see
Chapter 7,
“Controlling
Published Output”
in the NetObjects
Fusion Essentials
User Guide.

Previewing the Next Tour Page

• Click the Preview Site button on the control bar to preview the site.

Preview Site

116
 Chapter 6 Creating Dynamic Pages

To stop the sound,

click the Stop
button on the
browser, or switch
to another page.

To view the whole action sequence again without previewing, reload or refresh
the page, or navigate to the page from another page.
To preview in Page view, click the Page Preview tab. To stop the sound, click
the Page Design tab. To review the action sequence, click the Page Preview tab
again.

Where To Go From Here

You just created cross-platform Dynamic HTML.
For more information about actions, see Chapter 22, “Building Dynamic Pages” in
the NetObjects Fusion Essentials User Guide and the NetObjects Fusion online
Help system.
The next lesson, Chapter 7, “Working with HTML Files,” shows you how to
convert an existing HTML file into NetObjects Fusion format, and how to
reference and edit an HTML file that is external to NetObjects Fusion.

117
Where To Go From Here

118
 CHAPTER 7

Working with HTML

Files 7
To generate public interest and collect email addresses for advertising, Mountain
Jacques is sponsoring a contest and giving away a week’s lodging at a special
resort. To announce the contest, you import an HTML page created in another
program into the Mountain Jacques site. When you import an HTML page into a
NetObjects Fusion site, it is converted to NetObjects Fusion format, and you can
edit the page in Page view as usual.
A second HTML page provides information about accommodations at the lodge.
You reference this page from the Mountain Jacques site rather than importing it and
formatting it. This file will not be converted to NetObjects Fusion format. To edit
this file, you edit the original HTML.
To follow the steps in this lesson you must have built the Mountain Jacques site in
Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Import an HTML file
• Spell check the text on a page
• Reference an external HTML file
• Edit the referenced HTML

119
Importing an HTML File

Importing an HTML File

When you import an HTML file it is converted into NetObjects Fusion format so
you can edit the page in Page view.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder, and display the Contest page in Page view.
2. On the Contest page, click the Layout to select it.

3. Choose Import>HTML Page from the File menu.

4. In the File Open dialog, navigate to the NetObjects Fusion
Essentials\Tutorial\HTML folder.
5. Select Contest.htm and click Open.
NetObjects Fusion imports the HTML file with its referenced assets into a text
box in the Layout.

120
 Chapter 7 Working with HTML Files

Text inside text box

Text box and Layout are

initially the same size

6. Click once in the Layout to view the selected text box and Text Properties.
7. Clear Contents wrap to browser width. The warning icon disappears.

121
Importing an HTML File

With Size Layout to Text

selected, you cannot change
the size of the text box, so
handles do not appear on it

On the Text Box tab of the Text Properties palette:

• Lock height sets the minimum height for the text box in the browser.
• Size Layout to Text prevents resizing the text box, makes the Layout the
exact size of the text box, and generates lean HTML code.
• Contents wrap to browser width allows the contents of a text box to wrap
to the browser’s width. This option requires that the Layout is sized to the
text so no objects are outside the text box. It also requires that the page has
no MasterBorders, that is, the MasterBorder margins are set to zero, or the
ZeroMargins MasterBorder is selected.
• Text box is a form lets you place form objects inside a text box.
You can edit inside this text box just as you would any other NetObjects Fusion
text box.
To make sure you didn’t import a document with spelling errors, you check the
text on the page. NetObjects Fusion offers a choice of checking the whole site
or just the current page.
8. From the Tools menu, choose Spell Check>Current Page.

122
 Chapter 7 Working with HTML Files

NetObjects Fusion identifies a misspelled word and suggests a correction.

9. Click Change to accept the suggestion and click OK to acknowledge the

correction.
10. Click the Page Preview tab or the Preview Site button on the control bar to
preview the page.
Preview Site

123
Referencing External HTML

Referencing External HTML

When you reference an HTML file, the file remains external to the NetObjects
Fusion .nod file and is not converted to NetObjects Fusion format. To edit it, you
edit the HTML in the HTML Source tab of Page view or in an external editor.
1. Display the Wonder Lodge page in Page view.

2. Choose Reference External HTML Page from the File menu.

The Reference External HTML Page dialog appears.
3. Click the Browse button, navigate to the NetObjects Fusion
Essentials\Tutorial\HTML folder, select Wonder Lodge.htm, then click Open.

124
 Chapter 7 Working with HTML Files

The default settings in this dialog can remain unchanged:

• You import the head when your HTML file has scripts, META tags, or other
contents between the <HEAD> and </HEAD> tags that you want to retain
when NetObjects Fusion publishes the page.
• One HTML head is allowed per page. Every NetObjects Fusion page
contains a <HEAD> tag. You can select Append to Current <HEAD> to
include the contents of both heads in one, or you can select Replace
Current <HEAD> from the drop-down list to use only the contents of the
page you are referencing.
• NetObjects Fusion locates and manages the assets referenced by this HTML
file. NetObjects Fusion reads the IMG SRC tags and other associated asset
tags to find the images that go with this file and then modifies these file
names to work with the new page location.
4. Click OK.

In the Layout area, NetObjects Fusion displays a message showing the name of
the referenced HTML file, the date and time it was last modified, and its size.
5. Click in the Layout area to select the External HTML object and display the
External HTML Properties.

125
Referencing External HTML

Use the External

HTML Properties
to size the HTML
object, convert it
to NetObjects
Fusion format, or
edit the HTML
source code.

6. Click the Page Preview tab to preview the referenced page.

To avoid redundancy and save space, you can delete the “Wonder Lodge” text
at the top of the referenced HTML file, leaving the banner text to announce the
resort.

126
 Chapter 7 Working with HTML Files

7. Click the Page Design tab to return to the page Layout.

8. Double-click in the external HTML placeholder.
NetObjects Fusion displays the HTML file in the HTML Source tab of Page
view.

Click to place insertion

point at top of HTML
Source Editor

9. Click in the top of the HTML Source Editor to place the insertion point at the
beginning of the HTML source.
10. Choose Find from the Edit menu.
11. In the Find what field, type
Wonder Lodge

127
Referencing External HTML

12. Click Find Next twice.

The first Find locates the Wonder Lodge title inside the <HEAD> tag for the
page. The second Find locates the Wonder Lodge in the page body, which is the
one you want to delete.
13. Click Cancel to close the Find dialog.
14. Click once in the HTML Source Editor to deselect the text.
15. Drag through the text, including the line break tag, <BR>, to select it, and
delete this text from the page body:
Wonder Lodge <BR>

16. Click the Page Preview tab.

The Save Files dialog appears, telling you the file has been edited.

128
 Chapter 7 Working with HTML Files

You can see the

ExternalHTML1
object name in the
Object Tree under
WonderLodgeLay
out. To view the
Object Tree, click
the Object Tree
button.

External HTML1 is the name of the HTML object in the Layout.

17. Click the Save button.
The view switches to the Page Preview tab, showing the preview of the edited
HTML file.
The original file, NetObjects Fusion Essentials\Tutorial\HTML\Wonder Lodge.htm,
is now edited and no longer contains the top line of text.

129
Where To Go From Here

Where To Go From Here

You just learned to import and convert HTML files into NetObjects Fusion format,
where you can edit the file in Page view without changing the original file, and how
to reference an HTML file and edit it from Page view.
For more information on HTML files, see Chapter 23, “Referencing and Editing
External HTML” and Chapter 27, “Working with HTML Directly” in the
NetObjects Fusion Essentials User Guide.
The next lesson, Chapter 8, “Adding a Rotating Ad Banner,” shows you how to add
a NetObjects component, set its properties, and publish your site locally.

130
 CHAPTER 8

Adding a Rotating Ad
Banner 8
In this chapter you use the NetObjects Fusion rotating Ad Banner component to
place advertisement banners on the Contest page and link the banners to other
pages in your site. A component is a pre-built mini-application that adds
interactivity to your site without custom programming or scripting. With the Ad
Banner component you can assign links and transition effects to images.
To follow the steps in this lesson you must have built the Mountain Jacques site in
Chapter 1, “Creating Your First Web Site.”
For illustration purposes this chapter uses the Contest page developed in Chapter 7,
“Working with HTML Files,” where you imported the HTML contest flyer onto the
page. You can follow the steps in this chapter even if you did not import the HTML
file onto the Contest page.
This chapter shows you how to:
• Place an Ad Banner component
• Set properties for the component
• Publish your site

131
Placing a Rotating Ad Banner Component

Placing a Rotating Ad Banner Component

You are going to use the NetObjects Fusion rotating Ad Banner component to place
a series of advertisement banners on the Contest page. Each banner links to another
page when the site visitor clicks it.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion
EssentialsEssentials\User Sites\Mountain Jacques folder.
2. Display the Contest page in Page view.

You are going to replace the page banner with the rotating ad banner, so you
must create a new MasterBorder for this page.
3. Click in the MasterBorder.
4. Click Add/Edit on the MasterBorder Properties palette and click Add in the
Edit MasterBorder List dialog.
5. Name the new MasterBorder ContestBorder and base it on the
DefaultMasterBorder.

132
 Chapter 8 Adding a Rotating Ad Banner

6. Click OK.
Because you 7. Right-click the Mountain Jacques banner, then select Delete Banner from the
created a new shortcut menu.
MasterBorder for
this page,
changing it does
not affect other
pages.

From the View menu choose, Toolbars>Components tools> NetObjects

Fusion Components.
The NetObjects Fusion Components toolbar appears.

Ad Banner tool

8. Click the Ad Banner tool.

9. Starting in the upper left of the top MasterBorder where the banner was, draw a
Ad Banner tool
thin horizontal rectangle. The size doesn’t matter. NetObjects Fusion sizes the
box to the image.

133
Setting Rotating Ad Banner Properties

If you misplace the NetObjects Fusion places a picture placeholder where you drag, and selects it.
Ad Banner, you
can select Undo
from the Edit
menu and start
over.

The properties palette shows Rotating Ad Banner Properties.

Setting Rotating Ad Banner Properties

You can specify whether the ad banner is the size of the image, a standard banner
size, or a custom image size. You can specify the pause time in seconds between
banner transitions, and the total number of images to appear in the ad banner.
For each image you can specify the image filename, target URL of the link, and
transition effect.
1. On the Component tab of the Rotating Ad Banner Properties, select the
Image 1 property in the left column.
The right column shows the name of the default ad banner placeholder,
adbanner.gif. The filename appears in the Rotating Ad Banner field at the top
of the Component tab.

134
 Chapter 8 Adding a Rotating Ad Banner

You can drag the column divider on the Component tab to change the column
widths.

Browse icon

Automatic Resizing is disabled when

all images are the same size

2. Click the Browse icon in the right column to display the Picture File Open
dialog.
Browse icon
3. On the Folder tab, navigate to the NetObjects Fusion Essentials\Tutorial\AdBanners
folder and select WonderLodge.gif.

4. Click Open.
The placeholder image changes to the WonderLodge banner, and the picture
box resizes to accommodate it.

135
Setting Rotating Ad Banner Properties

5. Drag the Wonder Lodge banner to center it over the page content.

6. On the Component tab of the Rotating Ad Banner Properties, double-click

the URL for Image 1 property.
7. In the Link dialog that appears, set Internal Link as the Link type and double-
click the Wonder Lodge page.

136
 Chapter 8 Adding a Rotating Ad Banner

When a site visitor clicks the Wonder Lodge banner, the browser displays the
Wonder Lodge page.
8. On the Component tab, select Transition 1.
You can drag the 9. In the drop-down list to the right, select the Unroll transition.
column divider in
the properties
palette to widen a
column.

10. Double-click the Image 2 field in the left column of the Component tab.
To maximize 11. On the Folder tab of the Picture File Open dialog, navigate to the NetObjects
compatibility with Fusion Essentials\Tutorial\AdBanners folder, select RockClimbBanner.gif, then
browsers, it is best click Open.
if all the banners
are the same size. The Rock Climbing banner appears in the banner location.
12. Double-click the URL for Image 2 field.
13. Set the Link type to Internal Link and double-click the Next Tour page.
14. On the Components tab, select Transition 2, then select the Tear transition
from the drop-down list at the top.
Components do not display when previewing. You must publish locally or
remotely to view components.

137
Publishing Your Site

Publishing Your Site

Previewing creates a simplified version of the files and folders required for your
site so you can view it quickly in the browser. Publishing locally creates the files
and folders that you transfer to your Web server.
When previewing your site, placeholders appear instead of NetObjects
components. You must publish the site to view components.
Publish 1. Click the Publish button on the control bar to change to Publish view.

2. Click on the Publish Site button on the control bar.

The Publish Site dialog appears.
Publish Site
3. In the Save location section, select Local Publish from the Publish files to
drop-down list if it is not already selected.

138
 Chapter 8 Adding a Rotating Ad Banner

You can click the 4. Click Publish.

Pencil icon to view
the default NetObjects Fusion displays the Publishing Site dialog, showing status while
location to save copying files to the NetObjects Fusion Essentials\User Sites\Mountain Jacques\Local
files, which is Publish folder. It launches the browser specified on the Preview tab of the
NetObjects Fusion Application Options dialog, and displays the Mountain Jacques Home page.
Essentials\User
Sites\Mountain
Jacques\Local
Publish.

139
Publishing Your Site

When you publish 5. Click the Contest button to view the Contest page.
the entire site, the
browser always
displays the Home
page, unlike
previewing, where
the browser
displays the
current page.

The browser starts the Java applet required to display the rotating banner, and
the banner changes every 3 seconds as specified in the Rotating Ad Banner
Properties.
Note the transition effects you assigned between each banner.
6. Click the Rock climb with us! banner to view its link target, the Next Tour
page.
7. Click the Back button in the browser to return to the Contest page, or click the
Contest button on the button navigation bar.
8. Click the Wonder Lodge banner to view the Wonder Lodge page.
• If you are not online and click a remote link such as the NetObjects Fusion
banner, the browser displays a message telling you if it cannot connect or
cannot display the page.
• If you are online and click a remote link, the browser connects to the page
specified as the link target.

140
 Chapter 8 Adding a Rotating Ad Banner

Where To Go From Here

You just implemented a Web application using a NetObjects Fusion component in
your site. For more information about NetObjects Fusion components, see Chapter
25, “Using NetObjects Fusion Components” in the NetObjects Fusion Essentials
User Guide.
The next lesson, Chapter 9, “Creating a Table,” shows you how to create a table and
add text and links to it.

141
Where To Go From Here

142
 CHAPTER 9

Creating a Table 9
A table of scheduled events will keep visitors informed about Mountain Jacques’
upcoming activities. With NetObjects Fusion you can set up a table containing
events and dates, and link to pages containing other information.
To follow the steps in this lesson you must have built the Mountain Jacques site in
Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Create a table
• Add text to the table
• Format the table
• Add links to the text

143
Creating a Table

Creating a Table
You are going to create a table that is 5 rows by 3 columns, and place information
about upcoming tours in the table.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder.
2. Display the Events page in Page view.

3. Select the Table tool from the Container flyout of the Standard toolbar and
draw a wide rectangle in the Layout.
Table tool
The Create Table dialog appears.
4. In the Rows field, enter 5.
5. In the Number of columns field, enter 3, then click OK.
The table appears selected in the Layout. With the table selected, you can:
• drag a handle to resize the table.
• click the table border to select the table.
• drag the table border to move the table.

144
 Chapter 9 Creating a Table

Selected table

You can drag a handle to

resize the table

Adding Text to the Table

1. Double-click in the first cell in the first row and type Events.

Cell selected for text editing

When the cell is selected, the properties palette shows Cell Properties.
2. Press the Tab key to select the next cell in the row, then type Dates.

3. Press the Tab key again to select the last cell in the row, then type Availability.
4. Click outside the table to deselect the cell, then click the table border, or a
column or row divider, once to select the table.

145
Adding Text to the Table

5. Place the pointer on the left table border next to Row 1, until it changes into a
solid one-sided arrow pointing at the row.
6. Click once to select the row, so each cell in the row is outlined by a solid black
border.
7. On the Cell Properties palette, click the Cell tab.
8. On the Cell tab, select Cell is header.
This centers the text and changes all the text to bold.

Cell tab

9. To left justify the text, choose Left as the Horizontal alignment.

10. Double-click the first cell in the second row.
11. Type Rock Climbing
12. Press the Tab key to select the cell next to it and type June 9-16.
13. Press the Tab key to select the last cell in the row and type Open.
14. In the same way, fill in the complete table as follows:
Events Dates Availability
Rock Climbing June 9-16 Open
Kayak Mountain Lakes August 20-27 Closed
Mountain Bike Tour October 6-13 Open
Skiing and Snowboarding December 21-31 Open

146
 Chapter 9 Creating a Table

15. Click outside the table to deselect the cells.

16. Click the table border once to select the table.

On the General tab of the Table Properties palette set the following values:
• Set the Table border field to 8.
This enlarges the outer edge of the table.
• Set the Cell Padding field to 4.
This adds space between the text and the border of each cell.
• Set the Cell Spacing field to 5.
This adds space between cells.

17. Drag the table border to center the table near the top of the Layout.

147
Adding Links to the Table Text

Adding Links to the Table Text

1. Double-click the Rock Climbing cell to select the text for editing.
2. Drag through the Rock Climbing text to select it, then click the Link button on
the Cell Properties Format tab.
3. Create an Internal Link to the Next Tour page.

4. In the same way, select the Mountain Bike Tour text and link it to the
Highlights page.

5. From the Object menu, select Size Layout to Objects.

148
 Chapter 9 Creating a Table

The Layout automatically adjusts to the smallest possible size while still
allowing enough space for all the objects in the Layout and the MasterBorder.
6. Click the Preview Site button on the control bar to preview the entire site and
test the links in your table.
Preview Site

Where To Go From Here

You just used NetObjects Fusion’s table features to develop tabular information
with hypertext links for publishing to the Web.
For more information on tables, see Chapter 15, “Adding Tables” in the NetObjects
Fusion Essentials User Guide.
The next lesson, Chapter 10, “Creating an E-Commerce Catalog,” shows you how
to use the catalog tool to build an online store.

149
Where To Go From Here

150
 CHAPTER 10

Creating an E-Commerce
Catalog 10
In this chapter, you build an e-commerce catalog that includes products which will
assist hikers on expeditions. Using the NetObjects Fusion E-Commerce Catalog
tool, you can create an online store with products and descriptions that will match
the style of your site.
To follow the steps in this lesson, you must have created the Mountain Jacques site
described in Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Create a catalog
• Add products
• Add options
• Format the list page
• Format the detail pages

151
Adding Pages for the E-Commerce Catalog

Adding Pages for the E-Commerce Catalog

Each catalog includes two types of pages: a list page, which displays all catalog
items with a thumbnail image and summary of each product, and detail pages,
which display one product to a page. You add the list page and NetObjects Fusion
automatically adds the detail pages for you.
1. Open the Mountain Jacques.nod site in the NetObjects Fusion Essentials\User
Sites\Mountain Jacques folder.
2. Go to Site view.
3. Select the Home page and add a new page.
4. Name the new page Hiking Products.
5. Change the MasterBorder to DefaultMasterBorder.
6. Display the Hiking Products page in Page view.

7. Select the Catalog tool from the Advanced toolbar and click in the upper left
corner of the Layout area.
Catalog tool
It’s a good idea to start in the upper left corner of the Layout to allow as much
room as possible for the products. You can adjust the position later, if necessary.

152
 Chapter 10 Creating an E-Commerce Catalog

If catalogs are 8. In the Add E-Commerce Catalog dialog, type Products as the name of the
already associated catalog and choose Use catalog without a store engine as your store.
with the site, you
may see a larger
dialog. If this
happens, use the
Create a new E-
Commerce
Catalog option.

9. Click OK.

Adding Products
Before you begin After you add the catalog component, the next step is to add products. You should
to add products, be looking at the Products tab of the E-commerce Catalog Properties Editor.
it’s a good idea to
organize the
pictures you want
to include into a
single folder so
you can find them
easily.

1. Click on the Attributes tab if necessary.

• In the Name field, type in Fleece Jacket.

153
Adding Products

• In the SKU/Part Number field, type in MJ_01

• In the Price field, type in 59.99.

You can add product attributes such as size and color.

2. Click Add Option...
3. In the Group Name field, type Color.

4. Click OK.
The Edit Product Options dialog will appear. This is where you add specific
attributes.

154
 Chapter 10 Creating an E-Commerce Catalog

5. Click on New Option and type in Green.

6. Click Add Another and type in Blue.
7. Click OK to close the Add Option dialog.
8. Click OK to close the Edit Product Options dialog.
You can enter product descriptions to give your customers complete product
information.
9. Click on the Description tab.
10. Enter the following text:
a. For Brief Description, type Take the bite out of wind!
b. For Extended Description, type Wear Mountain Jacques Designs Fleece Jacket
alone or as a mid-layer to stay warm and cozy.

You enter product images on the Detail Image tab. This image appears as the
thumbnail image on the List page.

155
Adding Products

For more 11. Click on the Detail Image tab.

information about
these output 12. Click Browse to navigate to the NetObjects Fusion Essentials\tutorial\Catalog
settings, see folder
Chapter 20, 13. Select fleece.jpg.
“Creating
Catalogs,” in the
NetObjects Fusion
Essentials User
Guide.

14. Click Open.

You use the Output Settings on the Detail Image and Thumbnail Image tabs to
balance display quality and download time so your site visitors are not waiting a
long time for your photos to appear. For this lesson, the default settings are fine.
You can enter additional products by repeating steps 1 to 13.
15. At the top right of the E-Commerce Catalog Properties Editor, click Add.
The next line in the products list will be highlighted.
16. Enter the Product 2 information listed below on the Attributes tab.
Product 2 Product 3 Product 4
ATTRIBUTE TAB
Name Compass Family Tent Backpack
SKU/Part Number MJ_02 MJ_03 MJ_04
Price 9.95 199.00 59.99
Add Option Size Color Color
Add Option Value Small, Large Green, Blue Green, Blue
DESCRIPTION TAB
Brief Description Great for beginners! Our most popular tent! The perfect backpack!

156
 Chapter 10 Creating an E-Commerce Catalog

Product 2 Product 3 Product 4

ATTRIBUTE TAB
Extended Description The large numbers This family size tent With curved shoulder
make this easy to read offers over 20 square straps, this backpack is
compass great for feet of space and great for daytime hikes
children and adults. endures all types of or late night
weather. expeditions.
DETAIL IMAGE TAB
Add image compass.jpg tent.jpg backpack.jpg

17. Click Add and repeat the process for Product 3 and Product 4.
Next you set up formats for the List page and the detail pages.

Formatting the List Page

The list page shows a small preview of each product in the catalog. Site visitors
click a thumbnail to go to the detail page.
1. Click the List Page tab.
2. On the Layout tab, select a layout.

157
Formatting the List Page

3. Click the Display Items tab.

4. In the Product Items to Display column, highlight Name and click Format.
The Format Name dialog appears.
The label formats you select here apply to the List page only.
a. Delete the text Name and enter Item as the label name.
b. Click Format Label.
The Object Format dialog appears.

The text formats you select here for the labels apply to the List page only.

158
 Chapter 10 Creating an E-Commerce Catalog

• On the Character tab, set Font to Arial, Style to Bold, and Size to 0,
then click OK to return to the Format Name dialog.
5. Repeat Step 4 for the remaining Product Items to Display.
The label names should be Price, Description and Options.
6. Click OK when you have completed the step above.
7. Click Done to see the List page.

The thumbnails are bounded by a green border. You can change size of the
images within the green border, but you cannot edit product information or
change dimensions within the border.

159
Formatting the Detail Pages

8. Drag the catalog so it is centered under the page banner.

9. In the Properties Palette, make Overall Width 450, Vertical Space between
items 15 and horizontal space between items 15.
10. Click Apply.
11. On the Catalog Properties Palette, click the Configure button to return to the
E-Commerce Catalog Properties Editor.

Formatting the Detail Pages

Each detail page can contain an image and specific information about a product
such as price and part number. The layout and text formats you select on the
DetailPage tab are reflected on all detail pages. Changes you make directly on a
detail page apply only to that page.

160
 Chapter 10 Creating an E-Commerce Catalog

1. Click the Detail Page tab.

When selecting a 2. Select a Layout.

layout, consider
the shape of your The pictures in this guide use the default layout, but you can experiment with
photos and the other layouts.
amount of text you The layout you select applies to all detail pages.
want to include in
the caption. 3. Under Product Items to Display, highlight Name and click Format.
The Format Name dialog appears.
The label formats you select here apply to all detail pages.
a. Delete the text Name and enter Item as the label name.
b. Click Format Label.
The Object Format dialog appears.

161
Formatting the Detail Pages

The text format

should match or
compliment the
SiteStyle.

The text formats you select here for the labels apply to all product detail pages.
• On the Character tab, set Font to Arial, Style to Bold, and Size to 0,
then click OK to return to the Format Name dialog.
4. Repeat Step 4 for the remaining Product Items to Display.
The label names should be Price, Description, and Options.
5. Click OK when you have completed the step above.
Select a template 6. Click Done to close the E-Commerce Catalog Properties Editor.
that is coordinated
to your SiteStyle. You use the Save Profile option at the bottom of the E-Commerce Catalog
Properties Editor to save the settings associated with a specific catalog so it
can be used for the next catalog created. For this lesson, we will not create a
profile.

162
 Chapter 10 Creating an E-Commerce Catalog

For more Look at the Site Navigation palette. NetObjects Fusion added a page named
information about Hiking Products to the site. The new page icon shows multiple pages and has
saving profiles, the same name as the catalog. This icon represents the detail pages. The actual
see Chapter 20 number of pages adjusts to accommodate as many or as few products as you add
“Creating to the catalog.
Catalogs,” in the
NetObjects Fusion
Essentials User
Guide.

List page
Detail pages

7. Double-click the detail page icon on the Site Navigation palette.

Detail page icon The first detail page appears.

You use the navigation buttons on the control bar to move to the next and
previous detail pages, and to add or delete a page. The three navigation buttons
below the banner provide a way for site visitors to move to the next or previous
product, or back to the thumbnail page.
8. Click the Next and Previous buttons to display each product page.

163
Formatting the Detail Pages

When you publish your

site, visitors use these
buttons to navigate
between photo pages and
back to the thumbnail
page

9. Press Shift and click the catalog and each navigation button to select all of these
objects.

164
 Chapter 10 Creating an E-Commerce Catalog

10. Press the right arrow key to move the selected objects so they are centered under
the banner.

This centers the objects on all photo pages.

11. Click the Next button on the control bar to move to the Compass detail page.

Next

165
Where To Go From Here

12. Preview the site.

13. Click the up arrow to return to the List page and then click an image to go to the
detail page. Use the left and right arrows to move between detail pages.
Your catalog is complete.

Where To Go From Here

You just learned how to put your products on the Web using the NetObjects Fusion
Catalog tool. For more information about catalogs, see Chapter 20, “Creating
Catalogs” in the NetObjects Fusion Essentials User Guide and in the NetObjects
Fusion online Help system.
The next lesson, Chapter 11, “Layering Objects,” shows you how to use the Fixed
Page Layout publishing option to lay out and publish a page containing overlapping
objects.

166
 CHAPTER 11

Layering Objects 11
You want to show highlights of the last mountain bike tour on the Highlights page.
You can take advantage of NetObjects Fusion’s support of layered or overlapping
objects to arrange images on the page.
To view overlapping objects properly, your site visitors must use Microsoft Internet
Explorer 4.0 and above or Netscape Navigator 4.x. In NetObjects Fusion you can
choose from three HTML output options to support various browsers. You can
assign one publishing method to the whole site, and then select a different method
for individual pages, or regions of pages. For pages or regions that contain
overlapping objects, you must use the Fixed Page Layout HTML output option, so
browsers that support this feature can properly display your page.
To follow the steps in this lesson you must have built the Mountain Jacques site in
Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Add and manage overlapping objects
• Set the HTML output option
• Edit text on the banner
• Previewing your site

167
Adding Overlapping Objects

Adding Overlapping Objects

1. Open the Mountain Jacques site and display the Highlights page in Page view.

2. Select the Picture tool and click the Layout label in the upper left corner of the
Layout.
Picture tool
The Picture File Open dialog appears, showing the Folder tab.
3. Navigate to the NetObjects Fusion Essentials\Tutorial folder, select twobikers.jpg,
then click Open.

168
 Chapter 11 Layering Objects

4. Select the Picture tool again.

5. Click the lower right corner of the twobikers picture.
6. In the Picture File Open dialog, navigate to the NetObjects Fusion
Essentials\Tutorial folder, select mtnbiker.jpg, then click Open.

Overlapping object icon

To view object A red exclamation point warning icon appears on both pictures to show the
icons, choose objects are overlapping. Move the mouse pointer over this icon to see the
Object Icons from ScreenTip explaining it.
the View menu.
7. Select the Picture tool once more and draw a rectangle starting on top of the
lower left corner of the mtnbiker picture, dragging downward and toward the
left side of the Layout.
8. In the Picture File Open dialog, navigate to the NetObjects Fusion
Essentials\Tutorial folder, select girlbiker.jpg, then click Open.

169
Adding Overlapping Objects

For more, about

layered objects,
see Chapter 6,
“Page View
Basics” in the
NetObjects Fusion
Essentials User
Guide.

The red exclamation point icon also appears on the girlbiker picture to show it
is overlapping, or overlapped by, another object.
9. With the girlbiker picture selected, from the Object menu select Arrange
Objects, Send to Back.

170
 Chapter 11 Layering Objects

10. Select the twobikers picture and from the Object menu select Arrange
Objects, Bring to Front.

This rearranges the overlaps to expose more detail and cover more plain areas.

Setting the HTML Output Option

1. Click the Layout so the Layout Properties palette appears.

171
Setting the HTML Output Option

2. On the General tab, in the HTML output section, select Fixed Page Layout
from the drop-down list to ensure the browser correctly displays overlapping
objects.

For more on The red warning icons disappear from the overlapping objects.
HTML output, see
Chapter 7,
“Controlling
Published Output”
in the NetObjects
Fusion 7 User
Guide.

172
 Chapter 11 Layering Objects

Editing the Banner Text

Put a more descriptive title on the banner.
1. Select the banner so the Banner Properties palette appears.
2. Make sure the check box Use for Banner Title is not selected.
3. In the Banner Title field, change the text to read:
Mountain Biking <Enter>
Annual Tour Highlights

As you type, the text on the banner changes.

173
Previewing Your Site

Previewing Your Site

For portions of sites that use the Fixed Page Layout HTML output option for
layered objects, you must preview the site using Microsoft Internet Explorer 4.0 or
greater or Netscape Navigator 4.x, because other versions of browsers do not
support this feature.
• Preview your site.
You can select the
browser for
previewing on the
Preview tab of the
Application
Options dialog in
the Tools menu.

Where To Go From Here

You’ve seen how to use NetObjects Fusion’s HTML output options to successfully
satisfy site visitors with different browser versions.
Chapter 12, “Supporting Target Browsers” shows you how to use cascading style
sheet text formatting to enhance your site.

174
 CHAPTER 12

Supporting Target
Browsers 12
HTML code displays many types of text formatting and is compatible with all
browsers. CSS is a method of coding more complex formatting such as paragraph
borders, backgrounds, indents, and margins, but not all browsers can display these
formats. With NetObjects Fusion you can take advantage of some of the text
formatting features in the cascading style sheets (CSS) standard supported by
browser versions 4.0 and above.
Because some site visitors use browsers that support CSS and others do not, it’s a
good idea to experiment to discover how to best use cascading style sheets without
creating problems when older browsers display the pages. Even the 4.0 and above
browsers support CSS differently, so you must test each CSS feature you intend to
use with each target browser you want to support. Then you can decide whether the
site should use HTML formatting and support the broadest range of browsers
including the oldest versions, or implement the more powerful cascading style
sheet formatting and support only the newer browser versions.
To follow the steps in this lesson you must have built the Mountain Jacques site in
Chapter 1, “Creating Your First Web Site.”
This chapter shows you how to:
• Import a formatted document
• Clear the imported formats
• Assign SiteStyle text styles to the document text
• Add CSS text formatting to the page
• Set the target browser, HTML generation, and text format options

175
Importing a Formatted Document

Importing a Formatted Document

1. Open the Mountain Jacques site and display the Activities page in Page view.

2. From the File menu, choose Import>Document.

Activities.doc is a 3. In the Import Document dialog, navigate to the NetObjects Fusion
Microsoft Word Essentials\Tutorial folder, select Activities.doc, and click Open.
2000
document.You The text from the Activities.doc file appears in a text box in the Layout.
must have Word NetObjects Fusion retains the formatting of imported documents, so the
2000 or later
imported text appears with its previously set font and size.
installed to import
this document.
To view paragraph 4. Click once inside the text box to select it.
marks, turn on
Show Text
Invisibles on the
Text menu.

176
 Chapter 12 Supporting Target Browsers

The first
paragraph is
partially hidden by
the Layout label.
Turn Page Labels
off on the View
menu to reveal the
text.

The wide border indicates the text box is selected, and the Text Box tab shows
on the Text Properties palette. Size Layout to Text is the default setting for
imported documents and is selected on the Text Box tab.
5. Because it is easier to see the results of the following steps when this option is
not selected, clear the Size Layout to Text check box.

177
Clearing Imported Formats

When the text box

is selected and Text Box tab
resizable, solid
handles surround
it, and the Text
Box tab shows on
the Text Properties
palette.
Size Layout to Text

Clearing Imported Formats

1. Double-click inside the text box so hollow square handles surround it and the
Format tab shows on the Text Properties palette.
2. From the Edit menu, choose Select All, or press Ctrl+A.
All text in the text box is selected.
3. On the Format tab of the Text Properties palette, click the Clear button.
The Clear button removes all formatting in the imported document. With the
imported formats removed, NetObjects Fusion can display the text as specified
by the current SiteStyle.
The text changes to Arial, as specified on the Text tab for the Mountain
SiteStyle in Style view.

178
 Chapter 12 Supporting Target Browsers

Assigning a Standard Text Style

1. Double-click inside the first paragraph of text, “Rock Climbing,” to place the
insertion point.
The Format tab shows on the Text Properties palette.
2. Click the Style button and select Heading 1 (H1) from the display options.
The font changes to bold, size 3, as specified for the Heading 1 element on the
Text tab of the Mountain SiteStyle in Style view.

Double-click and place the

insertion point inside the
first paragraph
Format tab

Select Heading 1 (H1) from

the Style display options

Note: You can view the font and size setting for SiteStyle text by
selecting the Body element on the Text tab in Style view.
Unless you change it, the other elements derive their
format from the Body element.

179
Checking the Browser and HTML Output Settings

3. Set the remaining headings to the Heading 1 (H1) style.

Checking the Browser and HTML Output

Settings
The Activities page is a standard HTML page that displays properly with the
default HTML output settings. To view all the target browser and output options
you must open the Current Site Options dialog.
1. From the Tools menu, select Options>Current Site.
The Current Site Options dialog appears.

180
 Chapter 12 Supporting Target Browsers

2. In the Defaults section, Browser compatibility is set to Dynamic Page

Layout - All browsers.

Click the Change button to

view output settings

Text formatting is set to CSS

Note that Text formatting is set to Cascading Style Sheets.

3. Click the Change button.
The Browser Compatibility dialog appears, showing the default settings for
Browser compatibility and HTML generation.

HTML generation is set to

provide the best output for
the most cases

181
Adding Cascading Style Sheet Features

4. Ensure that your settings match the picture. Click OK twice to exit both dialogs.
5. In Page view, click the Page Preview tab.

Page
preview
shows
headings
using
standard
HTML
output

The Activities page displays showing the text and headings as specified in the
Mountain SiteStyle.
6. Click the Page Design tab.

Adding Cascading Style Sheet Features

You might want to use the CSS features as you would use conditional text in a word
processing program. You know that site visitors with browsers that support CSS
can view the CSS formats, but site visitors with older browsers see only the HTML
version. In this way you can support more browsers.

182
 Chapter 12 Supporting Target Browsers

Use the 1. In Page view, double-click inside the first paragraph of text, “Rock Climbing,”
Paragraph to place the insertion point.
Settings dialog to
access more 2. On the Format tab of the Text Properties palette, click the Format button.
formats, and to The Paragraph Settings dialog appears.
apply formats to a
whole paragraph 3. Click the Borders tab.
instead of selected
4. Select the Border option.
text or the text
box. 5. Change Width to 3 points.
6. Change the Color to dark blue, HTML #000066.

By default, all four sides of

the border are turned on
Border width in points

Click the color sample to

display the Color Picker and
select a different color

7. Click OK.
The border appears around the heading.

183
Adding Cascading Style Sheet Features

Paragraph border
in Page view

8. Click the Page Preview tab.

9. Click OK.

Warning:The paragraph border will not show up in the browser preview

if Text Formatting in Current Site Options is set to HTML. Text
Formatting must be set to Cascading Style Sheets (CSS).

10. Click the Page Design tab, then click the Page Preview tab.

Paragraph border in
browser preview

184
 Chapter 12 Supporting Target Browsers

Because the Text formatting option is CSS and not HTML, browsers that
support CSS can display CSS formatting features. If you are previewing with a
supported browser version, the paragraph border shows in the browser.
11. Click the Page Design tab.

Adding a Paragraph Background

The cascading style sheets (CSS) standard also supports paragraph backgrounds.
1. Double-click the first paragraph, “Rock Climbing,” again.
2. On the Format tab of the Text Properties palette, click the Format button.
3. In the Paragraph Settings dialog, click the Background tab.
4. In the Image section, click Browse.
5. In the Picture File Open dialog, navigate to the NetObjects Fusion
Essentials\Styles\Mountain\Images folder and select Background.gif.

Background.gif image

6. Click Open.
7. In the Paragraph Settings dialog, click OK.
The background appears in the heading.

185
Adding Cascading Style Sheet Features

CSS formatting, paragraph

border and background, in
Page view

8. Click the Page Preview tab.

The paragraph background shows in the browser because the Cascading Style
Sheets (CSS) text formatting option is still selected on the General tab of the
Current Site Options dialog.

CSS formatting shows

in browser preview

9. To view this page with HTML formatting instead, select

Tools>Options>Current Site, HTML, and click OK.
10. Click the Page Design and Page Preview tabs again to view the same page
without CSS support.

186
 Chapter 12 Supporting Target Browsers

Notice the large bold text from the Heading 1 SiteStyle element is preserved,
but the CSS background and border features are not.

About Custom Text Styles

You can select each heading and apply the border and background to it to make all
the headings the same.
You can set the However, there is an easier way. You can use the Edit Text Styles command on the
scope for a style in Text menu to create a custom style and use the Custom Style drop-down list to
the Edit Text Styles apply that custom style to each heading. Alternatively, you can edit the existing
dialog. Heading 1 style, but you must be careful to edit it for just this site and not the entire
SiteStyle. When you edit a SiteStyle element, it affects every site using that
SiteStyle.
For information on editing and creating text styles, see Chapter 12, “Designing with
Text” in the NetObjects Fusion Essentials User Guide. For information on editing
SiteStyles, see Chapter 17, “Using SiteStyles.”

Where To Go From Here

You navigate to all the pages in the Mountain Jacques site to confirm that you
satisfied the goals you set at the beginning of this guide. You created a site where:
• Customers can learn about Mountain Jacques and its activities
• Site visitors can easily contact the company
• The site generates excitement for upcoming events
In addition, you created a contest that encourages potential clients to send email,
and related businesses are advertising on the site!
For information about other NetObjects Fusion features, check the online help and
NetObjects Fusion Essentials User Guide.

187
Where To Go From Here

188
Symbols
.nod file name extension 6

A
actions
adding 111, 115
browser support 101
Ad Banner
component 132
properties 134
Assets view 54

B
banners
editing text 173
name 30
blank sites 6
browsers
compatibility 37, 180
CSS support 175
layered object support 167
supporting actions 101

C
cascading style sheets, see CSS
child page buttons 67
components 131
Ad Banner 132
control bar 29
CSS 175, 182
Custom Names 30

D
DHTML, see actions
documents
importing 76, 176
Dynamic HTML, see actions

F
files, importing 76

G
guides 45

H
help, online 3
hotspots
creating 60
HTML
Dynamic Page Layout 37
editing 127
Fixed Page Layout 37
importing files 120
output options 37, 116, 172
referencing 124
Regular Tables 37
Source view 48

I
imagemaps
creating 60
images
adding 17, 102
adding to text box 78
aligning 81
importing
documents 76, 176

J
JavaScript submenus 67

L
Layout area 12
properties 42
sizing 44, 149
line break 106
links 46
adding 148
blank 48
external 46
internal 47
smart 48

M
MasterBorders 12
properties 44
sizing 22, 44, 64
ZeroMargins 58
menus
Page view 41
Site view 32
Microsoft Word file
importing 76

N
navigation bars
button names 30
 button properties 23
custom 69
JavaScript submenus 67
NetObjects Fusion
exiting 26
starting 6
tour 27

O
Object Tree palette 107
online help 3
Options
preview 34
site 36
options 32
application 32
browser compatibility 37
HTML output 37
site 180

P
Page view 11, 39
HTML Source tab 48
menus 41
Page Preview tab 50
properties 41
switching pages 45
pages
adding 7
color coding 31
naming 8
setting status 31
photo galleries
adding pages 86
adding photos 87, 153
creating 86
photo pages 93, 160
thumbnail page 89, 157
photo pages 93, 160
photos
adding 87, 153
pictures, see images
previewing 24, 50
Properties palette 7, 12, 30
Publish view 55
publishing sites 138

R
rotating ad banner, see Ad Banner
rulers 44

S
saving sites 26
ScreenTips 8
Site Navigation palette 45
Site Settings 36
Site view 7, 29
menus 32
Outline tab 38
page icons 7
properties 30
Structure tab 39
sites
blank 6
compacting 26
creating 6
naming 6
new 6
opening 28
previewing 24, 50
publishing 138
saving 26
SiteStyles 18
sound
adding 115
spelling
checking 122
Standard toolbar 29
Style view 19, 51

T
tables
adding links 148
adding text 145
cell properties 145
creating 144
properties 147
text
adding 12
adding to tables 145
applying styles 179
clearing formats 178
CSS 182
formatting 15, 106
importing 76
line break 106
see also text box
wrapping 81
text box
adding images 78
properties 78, 122, 177
thumbnail page 89, 157
toolbars
Standard 29
tools
Zoom In 29
Tools menu
options 32
Site options 36

U
Undo command 41

V
views
Assets 54
Page 11, 39
Publish 55
Site 7, 29
Style 19, 51

W
warning icon 104, 169, 172

Z
zooming 29