CS 325 and Film 385: Web Development using Mozilla Nvu

Highlights of this lab:

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

:: 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 (In the following I selected the italics button to emphasize what modes).

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.

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

Creating Internal Links:

An Internal Link or "Bookmark", is a named location within a web page 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 background 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 ::

What I would like you to do for this lab is to develop and deploy a webpage using Nvu. I would like you to tell me a little bit about yourself (Please include a pic of yourself!...this is also to help me get to know you all a bit more), what you are studying, courses you are currently in, etc. 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.

The assignment is due Sept. 27 at 10:00am. I would like you to .zip all of your files and images and upload the zip file on Web-CT. The link is located in the Assignment folder under "Lab 2 - Nvu".

:: Online Source(s) ::