Designing & Publishing a Site with Nvu

How to use this free standalone WYSIWYG web editor to create your first web site


How to Design and Publish Your Website with Nvu

by Christopher Heng, thesitewizard.com

Nvu is a WYSIWYG (What You See Is What You Get) web editor based on the built-in Mozilla Composer web editor that comes with the Mozilla Suite. It has far more features than the Mozilla Composer mentioned in my Mozilla Composer Tutorials, and like the latter, it runs under Windows, Macintosh and Linux.

This article guides you through the steps of creating your first web site using Nvu.

(In case you're wondering, "Nvu" is pronounced as "N-view".)

What You Will Need

You will need the following for this tutorial.

  1. You will need to have Nvu (obviously). There are versions of Nvu for Windows, Macintosh and Linux. Get the appropriate one for your system.

    Update (12 September 2008): Nvu has been officially discontinued and is no longer available for download. Please use KompoZer, a free updated version of Nvu (with a new name) instead. See the KompoZer tutorial, How to Design and Publish Your Website with KompoZer, for details.

    WARNING (16 January 2009): do NOT download Nvu from some random site on the Internet that you dig up from a Google search. Some of those sites are scam sites, asking for donations for Nvu or asking you to pay for some additional software. You don't even know if those downloads install some viruses or malware on your system as well. Always get software from their official sites only. Since there are no longer any official sites for Nvu, please use KompoZer instead. (KompoZer is really Nvu anyway. It's just a name change along with some fixes to remove bugs in Nvu. It's also free.)

  2. You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around — you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml

There are other things involved in getting your first web site up and running, such as getting your own domain name, making your website search engine friendly and promoting your web site. This tutorial however does not deal with those matters — it is strictly about designing (creating) and publishing (uploading) your website using Nvu. If you are a total beginner, you may want to consult my article How to Create / Set Up a Website for an overview of the entire process and all the things you will need.

Overall Goals of this Tutorial

By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, a Reciprocal Links page, an About Us page, and a Site Map. Your pages will contain images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.

More importantly, you will know how to use Nvu to create, design and publish your site so that you can design new sites any time you want.

Goal of this Chapter

In this chapter, you will learn to create a rudimentary web page and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.

Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.

Creating A Simple First Web Page

To give you an idea how simple it is to create a web page, first start up Nvu.

You will be greeted with a window that contains a menu (the top line of the window that says "File Edit View Insert..." etc), a few lines of toolbars (containing buttons like "New", "Open", etc), a left panel with a heading "Nvu Site Manager", and a large pane on the right-hand side that has a tab called "Untitled". This large pane is where you will design your web page.

Type the following into the Nvu. You don't have to do anything special — just start typing. Note that you can type whatever you wish — I'm just furnishing you a block of text as an example. For ease of explanation, though, I will assume that you have typed the text here in the rest of the tutorial. Don't let that stop you from being creative, though.

Shakespeare's Website

Double, double, toil and trouble; fire burn, and cauldron bubble. Fillet of a fenny snake, in the cauldron boil and bake; eye of newt and toe of frog, wool of bat, and tongue of dog, adder's fork, and blind-worm's sting, lizard's leg and howlet's wing, for a charm of powerful trouble, like a hell-broth boil and bubble.

When you type, you are typing into Nvu's "Normal" mode. You can see which mode you are using by glancing at the series of tabs at the bottom of the Nvu window.

To see how your page appears in an actual web browser, click the "Preview" tab to enter Nvu's "Preview" mode. Return to the "Normal" mode before continuing. I shall assume that you are using the "Normal" mode in this tutorial unless otherwise specified. The "Normal" mode is Nvu's WYSIWYG editor mode. When you type text in this mode, Nvu converts it into a HTML web document behind the scenes so that web browsers can recognize it as a web page. If you want to look at the HTML code that is generated from what you just typed, click the "HTML Source" tab at the bottom of Nvu. Remember to return to the "Normal" mode when you've finished admiring the code.

Now save the page onto your hard disk. Do this by clicking on the "File" menu, then the "Save" item on the menu that appears. A dialog box should appear asking you for the Page Title.

Note: For convenience, in future, I shall refer to this sequence of clicking on the "File" menu, followed by the "Save" item simply as:

File | Save

This means that you are to click on the "File" menu, followed by the "Save" item on the menu that appears. There are shortcuts to saving a file in Nvu, as there are for the many commands given in this tutorial. I shall, however, leave the discovery of minor things like that to you and concentrate on the main task of creating a web page.

As mentioned earlier, when you use "File | Save", a dialog box will pop up, asking you to give a title to your page. Since this is the main page of your website, you should enter the name of your website here. For example, if you are publishing a personal web page, you might want to name your website "Shakespeare's Website" (without the quotes) if your name happens to be Shakespeare. If you are publishing a company web page, the site name should be your company's name, such as "XYZ Company" or the like.

Once you've finished with the title, click the OK button or simply hit the Enter key.

A new dialog box, prompting you for a filename, will appear. Navigate to a directory (ie, folder) on your computer where you want to save your page. Type "index.html" (without the quotes) into the file name part of the dialog box. Do not accept the default name given in the dialog box. Do not use another name. Do not use capital letters in the name (ie, uppercase). Most web hosts expect the main page of your website to be called "index.html". If you change it, you may find that your website does not work as you expect.

After you've saved the file, you will be returned to the Nvu main window. Look at the top of the window to the window's title bar. Notice that instead of the words "untitled", the title that you typed in earlier now appears in the window title bar.

Uploading or Publishing Your First Web Page

Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that Nvu needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though — it's actually quite easy!

To publish the page, go to "File | Publish" (ie, the "Publish" item on the "File" menu). A "Publish Page" dialog box will appear asking you for more details.

When you've finished completing the information, click the "Publish" button. Nvu will proceed to connect to your FTP account on your web host and upload your pages. There will be a dialog box that pops up to tell you it is uploading your page. The box will automatically disappear when Nvu has completed its task.

If you get an error message from Nvu, reread the guide above and check all your settings. Most of the problems at this stage are caused by one of the settings not being correctly entered. If you are sure there are no errors in your settings but are still get an "Unknown publishing error", see my unknown publishing error FAQ.

Testing the Web Page

Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.

Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.

If you've entered the "publishing server" earlier correctly, you should see the page you created earlier in your web browser.

If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized across the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.

If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check your "publishing server" field. You may have published your page to a location that is not recognized by the web server as the default page to show when only your domain name is entered.

You can change the settings that you have just entered by accessing the "Edit | Publishing Site Settings" menu. Then click the name of your website in the left pane, under "Publishing sites". One possibility for the page not showing is that you did not specify the correct directory on your web site to publish your index.html page to. A more remote possibility is that your web host requires that your page be named something other than "index.html". This is very rare nowadays, so explore this last possibility only when you've ruled out all others. At worse, ask your web host's support department or check their documentation for help.

If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.

Next Chapter: Polishing Your Web Page

In the next chapter, you'll learn how you can improve that rudimentary web page by adding pictures, making font changes, etc.

Next: Nvu Tutorial Chapter 2: Adding Images, Changing Fonts, Changing Colours, Creating a Navigation Bar, Writing Your Content.

Copyright 2003-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard.com's Nvu Series

You are here: Top > Getting Started with Your Website > How to Create a Website > Nvu Tutorial 1: How to Design and Publish Your Website with Nvu

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Design and Publish Your Website with Nvu





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.