CS 325 and Film 385: Web Development using Mozilla Nvu

Highlights of this lab:

  • Nvu's Environment
  • Adding Links
  • Adding Images
  • Adding Tables
  • Assignment

Click here for a compressed folder of the lab demonstration files.

:: Nvu's Environment ::

Mozilla Nvu is going to make creating your HTML web pages easy. By default, when you first launch or open Nvu, the interface consists of the Document Window, where you can view in "normal", "html tags", "html source", or "preview" mode.

When creating your website in Nvu, you can select any one of these views to construct your page. The "normal" and "preview" view modes act similar to a text processor. You simply type what you want to see.

When in "html tag" mode, a yellow indicator, indicating what html tag you are currently using, appears next to the text or image, etc.

Finally, when in "source" mode, you simply see the html source. Note, you can add stuff in all modes and edit in all modes!

The tools we have available to us when constructing a page are numerous.

We have many options, including adding links, images, inserting tables, inserting forms (although the forms options leaves much to be desired), formatting text, previewing your page in a web browser, etc.

Before Proceeding:
Before you do any real work on your web page, create a web project folder for your website and save your HTML file in it now. If you don't you don't save HTML files where they belong in your website's structure before you add pictures and links to other pages then they will break when you publish your site or move your project folder.

:: Adding Links ::

Most HTML documents contain links to other documents both internally and externally. These links are defined by URLs (Uniform Resource Locators), which provide the location and filename of a document and the method used to access it.

Link Types:

There are three major types of links:

Internal Links (Anchors or Bookmarks)
Links within a document. They help in the navigation of large documents, meaning documents with a lot of content in them, i.e. "Go up to" type links.

Local or Relative Links
Links to documents on the local web server. Local links are relative URLs, related to the location of your document in the directory tree and the location of the file you are linking too, i.e. "sales/report.htm".

External or Absolute Links
Links to pages on other web servers. External links are always absolute URLs, such as "http://www.uregina.ca".

Creating Internal Links:

An Internal Link or "Bookmark", is a named location within a webpage that is the target of a hyperlink. In the URL, a bookmark is preceded by a number sign character "#".

To create a "Bookmark", follow these steps:

Creating Local Links:

Local or relative links are hyperlinks to documents within the Site Root on a web server. This type of link is created by:

Creating External Links

External Links are created by:

To test your page out in a web browser, click on the "Browse" button (Ya, I know....that is an awful name for this feature!!). Here is a completed webpage:

:: Adding Images ::

Nvu supports most all the supported image formats, as:

Inserting Images in Nvu:

To insert a image in Nvu:

Inserting Background Images in Nvu:

To insert a background image in Nvu:

:: Adding Tables ::

Tables are defined in terms of rows and columns, which when combined form cells. For instance, a Table consisting of three rows and five columns has 15 cells.

Inserting a Table:

To create a Table in Nvu:

:: Assignment ::

Develop and deploy a webpage using Nvu. Tell me a little bit about yourself. Say what you are studying, courses you are currently in, hobbies, etc. Also, please include your picture! This assignment will help me get to know you all a bit better.

You should have at least one page, an "index.html" page. Although not a requirement, you can have relative links on your site thus having multiple .html pages.

Marking Scheme:

The lab is due by the beginning of your lab section for Lab 2. Please submit by either:

Web publishing option:

All University of Regina students have space for a small personal webpage (~30MB). It is on a computer called hyperion. To put files on your webpage you can log on to hyperion with your @uregina.ca username and password (the same one you use for URCourses and normal computer labs) using any of several file transfer programs:

All files and folders inside your web project folder should be transferred to the folder called public_html on hyperion. Once your files are there and set up correctly, you can view them at this address:

:: Online Sources and Resources ::

  1. Mozilla Nvu's Official Web Depository
  2. Nvu Tutorials - The Site Wizard
  3. CS100 - UofR Introduction to Computer Science
  4. HTML 4 specification
  5. CSS specification
  6. HTML learning site