Websites typically have one or more pictures on their pages. Even if you're not creating a site with lots of graphics, you will still have at least one image on it: your logo. In fact, as I'm sure you have noticed when you created your home page in chapter 1 of this NetObjects Fusion 11 tutorial, the web editor has already created a default logo for your page. You will learn how to modify that logo (or "banner" as the editor calls it) as well as add any other pictures you may want.
Since this is the second chapter of the NetObjects Fusion 11 (or "NOF 11" for short) tutorial, I will assume that you're familiar with the things I taught in the first chapter. If this is not true, please start with chapter one before continuing, otherwise you'll feel very lost here. In fact, if you have never designed a website before, I strongly recommend that you read How to Make / Create a Website: The Beginner's A-Z Guide before doing anything else. There's more to making a website than using an editor.
By the end of this chapter, you will have customised ("customized" in US English) your logo to suit your own requirements as well as added any other images you want on your home page.
Before you start this chapter, you should get the pictures you want to use on your web page ready. These can be drawings that you made yourself using a picture-drawing computer program or photographs that you took.
For those not sure about how you can create a logo for your site, you may want to read the article How to Create a Logo for Your Site the Quick and Easy Way. However, bear in mind that in NetObjects Fusion, the logo displayed on the top of your web pages comprises not only the picture you use, but also the text you enter into the Banner field of the Custom Names dialog box for each page. (Refer to chapter one if you've forgotten what this Banner field and Custom Names dialog box is.) As such, if you put your website's name in your picture, and then also put it in the Banner field, your site name will appear twice in your logo. You'll have to decide yourself how you're going to solve this. For example, one way is to put the site name in your picture, and put some page-specific title in the Banner field.
(Don't worry if the above paragraph confuses you. Just create your picture and follow the steps below. If the end result is not to your liking, you can always change it later. In other words, you don't have to understand a word I said in the above paragraph to do this tutorial. You can fix things later.)
Important: all your pictures must be saved in either the JPG, PNG or GIF formats. Do not use any other format, or they may not be displayed correctly on your visitors' browsers.
It doesn't matter where you save those pictures. Later when you insert them into your web page, NetObjects Fusion will copy them into the appropriate location in your website's folder.
Start up NetObjects Fusion. Near the top of the window, you should be able to see a section that says "Open an Existing Site". Under that line, you should see the name of your website. Click that name once.
Click the "Style" button on the toolbar near the top of the NetObjects Fusion window.
Look at the rightmost column of the NetObjects Fusion window. You should be able to see a panel labelled "Style Properties". Click the checkbox labelled "Read-only" to remove the tick. The "Read-only" checkbox prevents you from making changes to the existing style. If you don't remove this read-only checkbox, you won't be able to change the default pictures that come with this particular SiteStyle.
Near the top of the window, you should see the current logo/banner in a section labelled "Banner". Click the current picture once.
The panel on the rightmost column should change. It should now be labelled "Default Properties". Somewhere in that window, you should be able to find a line that says "Banner image". Under that line, there is a text field containing the filename of the existing picture, along with a button labelled "Browse" beside the field.
Click the Browse button.
A dialog box entitled "Picture File Open" will appear. Navigate to the place where you saved the image, and click the picture once. You should see a preview image of that logo on the right-side of the dialog box. Click the "Open" button.
The banner should now be replaced by your picture. To see how it looks like on your page in NetObjects Fusion, click the "Page" button on the toolbar to switch to Page view.
If the result is not to your liking, and you prefer to use a different picture, click the Style button again. Click the picture as before, followed by the Browse button that you clicked earlier. This will allow you to switch to a different picture. You can do this as many times as you like, till you get a picture that suits the existing site design.
Note: if you've changed your mind about replacing the banner, and want to revert back to the original image used in this SiteStyle, click the Browse button. The dialog box should show you the images folder of your current SiteStyle. Go up one folder (by clicking the "Up" arrow button near the top of the Picture File Open dialog box). Doubleclick the "banner" folder. Click the picture in that folder, followed by the "Open" button. Your logo will now be replaced with the one that came with the SiteStyle.
To add pictures to your web page, do the following.
Switch to Page view. You can do this by clicking the "Page" button on the toolbar.
In the last chapter, you clicked the blue "A" icon on the toolbar to create a text box. Look at the same toolbar. Next to that "A" icon is an icon that is supposed to look like a picture frame. Hover your mouse over that icon and a tool tip window with the word "Picture" should appear. Click that button.
Your mouse cursor should now change to the cross-shaped cursor (sometimes referred to as a crosshair cursor) that you met in chapter 1. Use it to draw a box for your picture, the same way you did for the text box previously. That is, click the spot on the page where you want your picture to appear, and drag the mouse cursor diagonally to form a box. Don't worry about the size of the box. NetObjects Fusion will change its size to fit your picture if it's too small.
The "Picture File Open" dialog box should appear. Look for your picture and click it once to select it. Then click the "Open" button on the lower right of the dialog box.
If you don't like the current position of the picture on the page, you can drag it to a spot you like.
If you want the picture to appear sandwiched between (say) two paragraphs of text, I find it easier to put each paragraph in its own text block. That way, each block can be moved independently, and you can put the picture block in between them.
Save your work by clicking "File | Save Site" from the menu. If you will remember from chapter 1, this means that you are to click the "File" item from the menu bar, and the "Save Site" item from the drop-down menu that appears.
Publish your modified web page to your web host the same way as before, by clicking the "Publish Site" button on the toolbar. This time, since you've already configured everything in chapter 1, you only need to click the "Publish" button in the "Publish Site" dialog box that appears to upload your page.
Once again, after you publish your page, make sure that you check your web page in a web browser. Just because the page appears the way you want in NetObjects Fusion, doesn't mean that it will appear the same way in a real web browser.
If the various elements on your web page no longer appear in their correct positions in a web browser, it's possible that the replacement of the banner with your own logo, or the addition of some other image on your page, has caused the other elements on the page to be resized or repositioned. For example, you may find that the left column of your website has mysteriously moved to the right side when displayed in a browser.
Don't panic. What you need to do is to look at every element on your page in NetObjects Fusion (not a web browser) and try to spot the element that is no longer in the correct position. While the change may be jarring in a web browser, it may appear only as a subtle difference in NOF, so take your time to look for it. (A cool head helps, so stay calm.) For example, one or more elements may have been resized by NetObjects Fusion or perhaps slightly repositioned, so that they now overlap (or come too close to overlapping) another element.
To fix the problem, click that object once. This will put the resizing borders around that object. To resize the object, move your mouse over one of the dots along the borders and drag it to change the size of the object. Alternatively, if the object can be repositioned, and you prefer to move it to a new location, drag it accordingly.
In the next chapter, you will learn how to change the fonts used for your text, put words in bold or italics, underline them, as well as change the font foreground and background colours of your web page.
Copyright © 2010-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All NetObjects Fusion Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add Images and Logos to Your Website with NetObjects Fusion 11
