Bookmark this page by pressing control-d.

Nvu Tutorial

How to make changes to your website's text, links and more by yourself, for free, using free Nvu software.

1. OVERVIEW
2. INSTALLING NVU
3. CONFIGURING NVU
4. USING NVU
5. START UP NVU
6. SELECT THE PAGE YOU WISH TO EDIT
7. EDIT THE PAGE
8. MAKING LINKS
9. PUBLISH YOUR CHANGES
10. VERIFY THAT CHANGES WERE MADE
11. CONCLUSION

1. Overview

Nvu is free software available for Windows, Mac, and Linux platforms.  It lets you easily edit your website’s text just as if you were using a word processor.  It’s really easy to use!  You can get Nvu at www.nvu.com (popup).

This tutorial assumes you’re comfortable with web surfing, you’ve used a word processor, you know how to navigate your hard drive, and you’re comfortable installing new software.  This tutorial takes about 15 to 20 minutes.  Subsequent sessions with Nvu should take even less time.  Though the screenshots used in this tutorial were taken on a Mac, the Windows and Linux versions look pretty much the same.

If you have a broadband connection things will go more smoothly.  However, you can also use Nvu with a dialup connection as long as you’re already online before you start using Nvu.

WARNING: don't use Nvu for editing web pages that are dynamic (they end with .php, .jsp, .asp, or .cfm). Use it only for editing .html web pages. Editing dynamic web pages in Nvu will erase any non-HTML programming.

2. Installing Nvu

Go to http://www.nvu.com/download.html (popup) and select the version specific to your operating system. Save the download to your hard drive and then install it as you would any other software.

Once the installer starts, accept all the default options, and just click Next Next Next until you’re finished and Nvu is installed on your computer.

3. Configuring Nvu

Before you can use Nvu to edit your website, you need to tell it how to connect to your website’s hosting server (aka the FTP server).  You’ll need your hosting service’s username and password, which you might have in your email archives from either your hosting service or your web designer.

If you have firewall software running on your computer (McAfee firewall, ZoneAlarm, Windows firewall, etc.), you’ll need to configure your firewall to allow Nvu to access the internet.  Refer to your firewall software manual for instructions on how to do this.  You can also simply disable your firewall whenever you use Nvu, but this is not an ideal solution.

Launch Nvu.  Close the little popup windows with tips of the day, etc., until you’re looking at just the main Nvu interface.  Then do this:

1. Click on Edit in the top menu then select Publishing Site Settings.  A window will popup with several empty fields for you to fill in.
2. In Site Name put in the name of your website.  This field is just for your reference so you can call it whatever you like.
3. In the next box, HTTP address of your homepage, enter the URL of your website like so:  http://www.yourwebsite.com (be sure to put in http://www. at the beginning and not just yourwebsite.com, and substitute your website’s actual name where I’ve written yourwebsite.com).
4. In the next field, Publishing Address, you’ll need to enter your website’s “FTP address”.  This is something you can get from your web designer or hosting company.  If your website is located in a subfolder, you’ll need to enter a forward slash after the ftp address and type the name of the subfolder.  Here are some examples of what typical ftp addresses look like:
   
   ftp.mywebsite.com
   ftp.mywebsite.com/public_html (this shows a hypothetical “public_html” subfolder)
   66.96.67.12
   66.96.67.12/www (this shows a hypothetical “www” subfolder)
   
   If you can’t easily find out from your hosting company or your web designer what your FTP address is, you might want to just try ftp.yourwebsite.com, ftp.yourwebsite.com/www, and/or ftp.yourwebsite.com/public_html, as it’s usually one of those three.

5. Now enter your website’s FTP user name and password in the Username and Password fields.  You can get this information from your web designer or your hosting company.  You might have this information in an email from your hosting company that was sent when you first ordered hosting services.  The username and password fields are case-sensitive.  Make sure the Save Password box is checked off or else Nvu will ask you for your password every time you use it.  Click OK.
6. Now click on the Tools menu and select Preferences (on Mac it’s under the Nvu menu, and on Linux…if you’re using Linux you probably don’t need a tutorial).
7. Find and click the radio button labeled “Retain original source formatting”.
8. Click OK.

Your copy of Nvu is now set up for you to use.  Unless you suffer a hard drive crash or get a new computer, you should never again have to follow these eight steps.

4. Using Nvu

Once your copy of Nvu is configured as per the preceding section, you can proceed to edit your website’s pages.  The way it works is this:

• Start up Nvu.
• Select the page you wish to edit.
• Edit the page.
• Publish your changes.
• Verify that changes were made.

5. Start Up Nvu

Double-click on the Nvu application icon in order to run it.  In Windows it’s also probably in Start/Programs.  In Mac it’s in Finder/Applications.  But you probably already know how to run programs or you wouldn’t be attempting to edit your own website!

6. Select the Page You Wish to Edit

In Nvu, you edit pages one at a time.  First you need to connect to your website by clicking on the arrow that’s to the left of the name of your site in the Nvu Site Manager.  The Nvu Site Manager is basically the bottom left-hand section of Nvu.  In the picture below, the red arrow shows you where to click.

After you click the arrow, it points downwards and below it is displayed the contents of your website’s hosting server (ie all the pages, files and folders that make up your website).  You can edit any of the pages you see by double-clicking on their names.  Most website home pages are called index.html, index.htm, index.php, etc.  If the page you want to edit is contained within a subfolder, you should double-click the subfolder to get to the pages it contains. 

If you get an error message after clicking the arrow, it may be that you haven’t configured Nvu correctly.  Go back to the Configuring Nvu section on page 1 and confirm that your configuration settings have been entered correctly, with no typos.

The picture on the next page shows what happens within the Nvu Site Manager after you click the arrow.  Notice that there are a lot of page names and folders displayed.  Note that your website will contain different page names and folders than the example.  But the point is that with these pages and folders displayed, you know that Nvu has successfully connected to your hosting server, and you can now go on to edit any of the pages by double-clicking on one of them.

Not sure what the page that you want to edit is called?  You can go ahead and just double-click on all the pages on your list and eventually your page should come up.  However, if your site has hundreds of pages, this might not be the best way to go about things.  If this is the case, use your browser to go to the page you want to edit, then look in the browser’s URL area, pictured below.  In the example below, the page is called onlinestore.html and it’s located within the services folder.

Once you’ve found the page you want to edit and double-clicked on its name within the Nvu Site Manager, you’re ready to move on.  Pages will always end with one of the following suffixes:  .htm, .html, .shtml, .php, .asp, .jsp, and/or .cfm.  Images will always end with one of these suffixes:  .gif, .png, .jpg, .jpeg, and more rarely .bmp or .tif.  If you see a file in the Site Manager that doesn’t end with one of these suffixes, it’s either a folder, or else it’s a file that you can’t do much with in Nvu.

7. Edit the Page

Nvu is actually a fully-fledged website creation program.  However, this tutorial only covers two of its basic functions—editing text and creating links.  If you want to learn how to add pictures, tables, or create new web pages, you’re on your own!  For these more advanced functions, refer to Nvu’s help contents, user guide, the nvu.com website, or see the Conclusion at the end of this tutorial.

Editing text in Nvu is very much like using a word processor.  You just click the cursor in your web page where you want to type and start typing!  In general, this will be an area where there is already text in your site.  The picture below shows the area of Nvu where you edit your website.

You can use your keyboard’s delete key to delete text, and the arrow keys to move around.  You can select text and then boldface, italicize or center it.  You can make text larger or smaller and change its font or color.  You can create bulleted or numbered lists.  These functions are all accomplished within Nvu’s text formatting toolbar, which looks very much like a typical word processor toolbar.  The picture below shows the text formatting toolbar circled, with a red arrow pointing at it.

One thing you should know about editing web pages is that when you press Enter, sometimes there will be two line feeds instead of just one.  If this happens and you only want there to be one line feed, hold the Shift key down when pressing Enter.

8. Making Links

In order to make a link to another website or to another page within your own website, first select the text that you want to turn into a link then click the Link button (it’s one of the graphic icons above the text formatting toolbar, as you can see in the picture in the previous page).  A window will pop up, and you should type the URL of the website you want the link to go to.  Be sure to use the http://www. prefix or else your link won’t work.  If you want to enter the URL of a specific webpage, that works too.  Just remember to use the http://www. prefix. 

If you want the link to go to a different page on your own website, just use the formula above, substituting your own target web page URL.  If you’re unsure what the URL of your target web page is, simply surf to it in your web browser (not in Nvu), and take a note of the page’s URL as described in step 6 above.  You don’t have to use the http://www.mywebsite.com/ prefix when linking to pages within your own website.

To make a link to an email address, instead of the http prefix, use mailto: and then put in the email address, like this -- mailto:julian@crunch42.com. Note that there are no spaces between the colon and the email address.

9. Publish Your Changes

When you’re done making all your text edits, you need to publish your changes.  If you don’t publish your changes, they won’t register on the copy of your website that is live on the internet.  Publish your changes by clicking the Publish button (it’s one of the picture icons all in a horizontal row at the top of Nvu).  You can also click File then select Publish.

If everything went fine you should see a message about publishing being successful.  If you see a message saying that publishing failed, check the following then trying clicking the Publish button again:

1. Is your firewall software blocking Nvu from accessing the internet?  If it is, set the firewall to allow Nvu.
2. Click on Edit in the top menu then select Publishing Site Settings, then in the popup window click on your site.  Now verify that all your configuration information has been entered correctly.  Be sure there are no typos and your username and password are capitalized correctly.

If you’re still having problems, contact your web designer or nerdy friend for help. If you’re done editing pages, go on to step 10.  If you want to edit more pages, go back to step 6.

10. Verify that Changes Were Made

Open up your browser and load the page you just published and verify that the changes were made.  Be sure to click the Reload/Refresh button a couple of times if you don’t see your changes.  If you’re using AOL, your changes might not show up for a day, so try to use Explorer or Firefox instead of AOL to view your pages.

If you want to make changes to more pages, simply repeat steps 6 through 10.

11. Conclusion

Once you’re comfortable making text changes, you may want to explore Nvu’s other functions.  Start with the obvious things like the buttons to Print or Spell Check.  Then move on to the Insert and Format menus.  The Insert menu is where you can insert pictures, tables, horizontal rules, and more. 

The configuration process may be a little confusing and time-consuming the first time you do it, but the learning curve for actually editing your website’s text and links is very small.  If you’ve used a word processor much at all, a lot of Nvu should come second nature.

With Nvu you may never have to pay a web designer again to keep your website up-to-date.  However, if you want help making your website more effective, or setting up complex functionality, please consider hiring Crunch42 Web Services.  Visit crunch42.com for more information.

ENJOY!

<< Back to list of articles