Fusion Views

So, you have the world's greatest web design program and now you want to use it.   Well, neither of us has the time or energy to go over everything NetObjects Fusion has to offer.  So, this lesson teaches some of the more important things you can do in each view.  Speaking of views, if you need help, follow this advice:

Seek and you shall find - Ask questions and you shall find it sooner.

"Hey Rick, I have a question... What is a view?"

Good question, NetObjects Fusion guides you through creating a web site, by taking you through the five stages you need to follow: Site view, Page view, Style view, Assets view and Publish view.  A link to each view is located at the top of your Fusion window and they look like what you see below:

Each view allows you to perform a variety of tasks for optimum development of your site. 

Okay, enough of the small talk, let's get down to business.  I am going to run you through NetObjects Fusion in 17 (yes, 17) easy steps.  So put away the Tae Bo videos and let's start stepping.

The black (normal) text explains in more detail, information about each view. The greenish bolded text, is exactly what step you need to take.

1

  
  In and Outta Site view

It all has to start somewhere and for Fusion, it starts with Site view.  Site view is just what it says, "a view of your site."  A "bird's eye" view that is.  When you start a new site in NetObjects Fusion, it opens up in Site view.

Step one is to create a new web site.  This means that you need to turn the computer on, double click on the NetObjects Fusion icon and start a new site.

When you create a new web site with Fusion, Site view opens with only one page in view - the Home page (see below).  All new sites must have a home page and this page cannot be deleted.

2

  
  Adding New Pages to your site

Now that we are in Site View, we can go to step two and add a page to our site. 

Add a new page by clicking on the New button at the top right of your Fusion window.

Each time you add a page, it is placed to the right of the last page added.  Remember, whenever you add a page to the site, it shows up below the currently selected page as one of its children.  As seen below:

Go ahead and add two more pages - giving you a total of three. 

3

  
  Naming Pages

Whenever you add a page in Fusion, it automatically names the new page "Untitled."  So, unless you want to confuse your viewers, you may want to create a new name.  Step three is to rename the pages you just created by doing the following:

Move your mouse over the title name until a box outlines the name "Untitled."  Then, single click inside this box. 

This brings up a text cursor and highlights the current text, allowing you to edit it. 

Type in and name the pages: First, Second and Third.

4

  
  Moving Pages

You can move pages at any time by dragging and dropping them in the new location.

As you move the page over the Target page, a colored outline  highlights the Target page and a triangle appears.  

Wherever the triangle is pointing, is where your page is going to go.  To the left or right makes it a sibling and if the triangle is at the bottom of the page, it becomes a child.

Whenever you move a page in Site view, Fusion automatically updates all of the links within the site.

 

That's it for Site view - Let's go on to Page View

5

  
  Building your site, page by page

First, go to Page view by clicking on the button  located at the top left of your Fusion window:

From Page view you get something along the lines of what you see below.

6

  
  Moving to different pages

There are a couple of ways to move between your pages in Page view: the Navigation Buttons and the Site Navigation Window.

Navigation Buttons
The page navigation buttons are located at the bottom of your NetObjects Fusion window.

Each triangle or arrow button takes you to a different page as explained below:

Up -  takes you to the parent page
Down -  takes you to the child page
Left -  takes you to the previous page (same level)
Right -  takes you to the Next page (same level)

Try it.

Site Navigation Window
Just to the right of the Page Navigation buttons, is the Site navigation button.

By clicking on this button, you open the Site Navigation Window. 

This window shows all of the pages on your site.  To show the child pages, just click on the plus symbol next to the page.  To hide the child pages, click on the minus symbol next to the page.

To go to a page, double click the page you want to open.

Try this one too. 

Isn't this exciting?  You're doing great!

7

  
  Adding text

Add text to your page by first selecting the Text Tool below:

Text Tool Button

         

You then draw a small box on the page.  You do this by clicking where you want the box to start, holding down the mouse button, then dragging it down and to the right where you want the box to end.

A text box appears.

In the text box, type or paste in your text.

The box wraps to the width of the text.

In order to edit your text, you need to double click on the text box.  This brings up the text cursor and lets you to type inside the box.  To further edit your text - colors, size, font etc. use the Text Properties palette as described below.

 

Text Properties
When you place a text box, the Text properties palette appears.

If the properties palette is not visible:

Go to View and select Properties Palette and then double click the text box.

Using the Text Properties palette - you can make all of the changes and adjust the text directly.

If you want to edit just the text box (such as add a background color), you only need to click on it once.  This brings up another Text Properties palette for making changes to your text box.

When placing your text box and graphics, be sure that they do not overlap.  In order for this to work using Nested Tables, you need to keep all your graphics and text boxes from overlapping.  If an object does overlap, you will see this symbol:   If you do see this symbol, your page will not look right in a browser and you need to move the boxes so they don't overlap.

 

8

  
  Adding a graphic

Now add a graphic by selecting the Picture Tool.

Picture Tool Button

 

Once the Picture Tool is selected, you need to draw a small box on your page where you want the graphic to be inserted.

Don't worry about the size or exact location, the box adjusts to the size of the chosen graphic and you can always move the image after it has been placed. 

After you have done this, the picture file opens.  

Choose the image from a file located on your hard drive.

You may also choose a graphic you previously added to the site by clicking on the Image Assets file.

9

  
  Wrapping text around a Graphic

Sometimes you want to add a graphic to your text and you don't want big gaps between the text and the graphics.  You can let the text wrap around your picture. 

You can do this following the same steps for adding a graphic - only add your graphic to a text box.

How? Before you click to place the first corner of the box, move your mouse over the text box.  You'll see a small gray bar inside the text box showing you where the box will be placed.  Now click in the box and drag.

At first, it may not look the way you want, but we are going to change that in a second. 

Now, select the image (or right click on the image and click on the picture Properties palette).  Then, click on the align tab and change to Left or Right Wrap.

Experiment with a few of the different alignments.

10

  
  The Banner and Navigation Bar

A banner is a large graphic (usually at the top of the page) that displays the name of the page.  It is used as a title bar to help visitors understand where they are on your site. The banner  uses the name you gave to the page.

To change the text that is displayed on the banner, you will have to go back to Site view.  Let's do this real quick.

Click on the Site view button.

When you open Site view, the Properties palette, should also be visible. 

If the Properties palette is not visible:

Go to View and select Properties Palette

Now click on the Custom Names button.

When you click on the Custom Names button, you will get this window:

In the banner section, type in a new name for that page. 

Click OK and then go back to Page view.

You will see that the banner has been changed automatically.

11

  
  Navigation bar Highlight & Rollovers

A navigation bar is a row or column of buttons or text (your choice), that are automatically linked to other pages in your site.  Here is an example of a navigation bar.

You can change the actions of your navigation bar by using the  Navigation Bar Properties Palette.

Access the palette by right clicking on the navigation bar and selecting the Object properties.

You will see a palette that looks something like this.

Before we go any further, I would like to touch briefly on the "Options" button.  Take a look at the Properties palette.  In the Display field you will see "First level."  This refers to the level your navigation buttons are linking to. 

You can change this by clicking the "Options" button on the Navigation Bar Properties palette.  This brings up the Nav Bar Display.

This is more advanced information, but I want you to know where to look when the time comes. 

Okay, back to basics.  Look again at the Navigation Bar Properties palette.  Notice on the Bottom you see two check boxes:

Use Highlighted Buttons
Use Rollover Buttons

Mark both of them.

Your Navigation bar now has Highlighted and Rollover buttons.  

Experiment a little and use the preview button to see what they do.

That's it for Page view - Let's go on to Style View

12

  
  Getting creative in Style view

Okay, let's take a look at Style view. 

Click on the Style button on the control bar.

When you do that (click on the Style button), NetObjects Fusion opens into Style view and you will see something like this:

13

  
  Applying a SiteStyle

When you apply a SiteStyle from Style view, NetObjects Fusion automatically applies style elements to your entire site. 
And this is how you do it:

First, browse through the list on the left of the Site view page and click on Shimmer Lake. 

Each time you make a selection, the elements of that Style appears to the right.

Next, click the Set Style button seen below or choose Set Style from the Style menu.

NetObjects Fusion then applies the selected style to your site.  

Click OK to accept the changes.

Now go to Page view and look at the new Site Style. 

If you don't like it - just repeat the process.

Now let's learn a bit about editing the SiteStyles.

14

  
  Editing a SiteStyle

You can edit any element of an existing style to customize it.  Lets' learn how to make these changes:

Editing the Banner font

Select the SiteStyle of Choice.

For this tutorial I am using the Shimmer Lake SiteStyle. 

Double click on the banner.

This dialog appears:

To change the text, click Text Settings and set text options.

Click OK

Editing the Button font

Select the SiteStyle of Choice.

Double click the Primary or Secondary Navigation Bar. 

The following dialog appears:  

To change the regular button text:

Click the first Text settings button and set the text options by clicking the Set button.

Change the font to Times New Roman

Click OK and there you have it.

Now go back to Page view and see the results .

Now let's see if we can get a grip on our Assets.

15

  
  An eye (or view) on your Assets

In the Assets view, you can change all your images and links in one place. So, if you change a link or a picture here, you change it on the whole site.

As powerful as it is - the truth is, you may never need this mode.  Actually the truth is more like you will rarely use this mode.  So, I won't go into it in this lesson.  But, if you want to know all there is to know about Assets view or any other view, simply click on one of the links below:

Let's now move on to the final stage - Publish view.

16

  
  Preparing to publish

When you publish your site, NetObjects Fusion generates the HTML pages, associated assets and allows you to send these to your server over the Internet or onto your computer's hard drive.

Go to the Publish view if you want to publish your site.

Click the Setup button on your control bar as seen below:

This brings up the following dialog:

Within this dialog box you can change all settings you need to publish your site.

If you are doing this for the first time and wish to publish your site to a server in the future, you need do the following:

Contact your system administrator or ISP to get the following information:

1.  Name of the remote server
2.  Name of directory where files will be placed
3.  User Name and password to connect via FTP

After you have the necessary information, do the following:

Click the Server Locations tab on the Publish Setup dialog box.

Click Remote Publish Server and then click the Edit button.

The following dialog appears:

Type the name of the remote server in the Remote Host field.

Type in the Base directory if needed (see below).
If you need to enter a directory name, you don't need to use a slash unless you're specifying a subdirectory.  For instance:

If target directory is named "mysite" just type "mysite." 
If it is a subdirectory named "personal" type mysite/personal. 

You may want to specify a subdirectory to publish your site remotely for testing.

Type your username in the Name field.

Type the password in the password field.

Click the OK button.

Now you are ready to publish your site.

17

  
  Publishing your site

When you have filled in all the settings, you can start publishing   your site.  There are two ways you can publish:

1.   Publish to your computer's hard drive - Local

2.  Publish to your server - Remote

To publish, click the publish button.

After you have done that, the Publish Site dialog appears.

Click on the Location dropdown box to to choose between remote or local publishing.

You might want to start by publishing your site locally.  This allows you to check and review your site prior to sending it to the web where everyone and their dog can see it.

 

After choosing your location, you have 3 Publishing options:

Entire Site
This selection publishes your entire site.

Site Section
This selection allows you to choose a site section and publish just that section's parent and child pages.

Selected Page Only
This selection allows you to choose any particular page on your site to publish.

For the first time you publish, you will need to choose "Entire Site," otherwise all of your files won't go to the server.  In the future you can upload and publish one page or section at a time.

If you need to upload your whole site in the future, checking on "publish changed assets only" on the Publish Site palette, will only upload the HTML files, not the graphics.  This can save a lot of time.

 

Choose "Entire Site" and click OK and let the magic happen. 

NetOjbects Fusion then generates the HTML and associated assets.

Okay, you're all set - great job.  I hope you enjoyed it.

Now go play.