Design and Publish a Web Site


Nvu is a What You See Is What You Get web editor.  (In case you're wondering, "Nvu" is pronounced as "N-view".)

Goals of this Course

You will have set up a working website with multiple pages, including a homepage, a Site Map, and several additional pages. Your pages will contain images, multiple columns, 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.

Objectives

In this lesson, you will learn to create a 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 lesson. 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.

What You Will Need

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

    WARNING (16 January 2009): do NOT download Nvu from some random site on the Internet that you dug 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. If you have not set up a free web hosting account, please see my "Free Web Hosting set up guide" on Angel.


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 ....

The American School Counselor Association (ASCA)supports school counselors' efforts to help students focus on academic, personal/social and career development so they achieve success in school and are prepared to lead fulfilling lives as responsible members of society. ASCA provides professional development, publications and other resources, research and advocacy to more than 26,000 professional school counselors around the globe.

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.

Theoretically speaking, to see how your page appears in an actual web browser, click the "Preview" tab to enter Nvu's "Preview" mode. However, I found this feature doesn't work for me....but you are welceom to try it and see if this works for you. Return to the "Normal" mode before continuing.  The "Normal" mode is Nvu's WYSIWYG editor mode. We will use Normal view as our default 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.

Save

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.

Since this is the main page of your website, you should enter the name of your website here. For example, if I am publishing a personal web page, I might want to name my website "Tang's Website" (without the quotes). If you are publishing a school counselor web page, the site name should probablly be "School Counselor's Web Site" 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. I recommend that you save all your webpages in "My Web Sites" folder (which is under "My Documents" folder).  Please note that there are some folders already existed in My Web Sites folder, keep them. Especially the "images" folder, we will work with this folder later on. All your graphic files should go in there. 

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 New Web Page

I already covered the uploading and publishing steps is in my prior lesson, please follow the instructions in file---"Free Web Hosting set up guide" on Angel.

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.

Assignment3

Please give me your web address, so I can see your newly created webpage on the Internet. You should use drop box for this assignment. Just write down the webaddress in the drop box, you do not need to attach a word document. Please don't email me the assignment. 

Course Menu