CS 325 and Film 385: Web Development using Mozilla Nvu
Highlights of this lab:
- Nvu's Environment
- Adding Links
- Adding Images
- Adding Tables
:: 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.
:: 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.
There are three major types of links:
- Internal Links (Bookmarks)
- "Anchors". 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 Links (Relative)
- 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 Links (Absolute)
- 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 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:
- Select text in the document you would like to create a link to.
- Select the "Anchor" button and follow the instructions.
- In the Anchor Name field, input the name of the bookmark. You can include spaces in the bookmark name, however spaces in the name are not standard HTML practice and Click OK when you have chosen a name.
- In the "html tag" mode you will notice that your anchor was applied when you see the tag and anchor icon beside the text that indicates a Bookmark has been applied.
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:
- Selecting the content you wish the user to Click as a link
- Using the "Link Button" specify the location of the page.
Creating External Links
External Links are created by:
- Selecting the content you wish the user to click as a link
- Using the "Link Button" to input the URL of the link into the Link field.
- NOTE: Do not forget to enter the entire link URL, i.e. "http://...."
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:
- Graphic Interchange Format uses a maximum of 256 colours, and uses combinations of these to simulate colours beyond that range. The GIF format is best for displaying images such as logos, icons, buttons and other images with uniform colours and tones. GIF images come in two different versions and have some extra functionality that JPEGs do not. You can save GIF images in GIF 87 or GIF 89a format. GIF 89a has the following features that GIF 87 and JPEG files do not.
- Interlacing: If you save a GIF 89a image as interlaced, the browser will be able to display the image as it loads, gradually getting crisper and clearer until it has loaded. Interlaced GIFs have slightly larger file sizes than non-interlaced GIFs, so you will have to decide whether the interlacing effect is worth the extra download time for your images.
- Transparency: With GIF 89a format images you can set a single colour to be transparent, that is, it will allow the background colour or image to show through it. Transparency is most commonly used to make the rectangular background canvas of an image invisible; this feature can be very effective in web page design.
- Animated GIFs: GIF 89a images can also be animated using special software. Animated GIF images are simply a number of GIF images saved into a single file and looped. Netscape Navigator and Microsoft Internet Explorer both display animated GIFs, but many other browsers cannot, and may not be able to display even the first image in the loop. Animated GIFs also take longer to download, therefore, use animated GIFs with caution.
- JPG, JPEG:
- Joint Photographic Expert Group is the best format for photographs because JPEG files contain millions of colours. JPEG images don't give you the option of including transparency or of interlacing images, but they do allow you to specify the degree of file compression so that you can create a balance between image quality and file size. A new addition to the JPEG format is Progressive JPEG. Progressive JPEGs boast superior compression to regular JPEGs. They also give you a wider range of quality settings, and support interlacing.
- Portable Network Graphic is a new file type developed in part with the Internet in mind. There are two PNG sub-types, PNG-8 and PNG-24 (the file type extension remains .png for both.) Both use the same compression method and support alpha channels or variable transparency, meaning areas of the image can be partially transparent, similar to tinted windows. PNG-8 is limited to 256 colours (8-bit colour depth) and PNG-24 can have up to 16 million colours (24-bit colour depth.) Unfortunately, neither Netscape Navigator nor Microsoft Internet Explorer offers full support for PNG images. As a result, using PNG images for your web site at this time is not recommended.
Inserting Images in Nvu:
To insert a image in Nvu:
- Click the image button.
- Click the browse button and navigate to the image you wish to use.
- select "don't use alternate text" and click "OK".
Inserting Background Images in Nvu:
To insert a background image in Nvu:
- Click on "format" in the file menu and select "Page Colours and Backgrounds".
- Click the browse button and navigate to the image you wish to use as a background image.
- The Document Window displays the background where you can continue to modify the text, links, etc.
:: 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:
- Click the table button and select how many cells, columns, and rows you want.
- You can edit the cell properties by clicking on cells, rows, and columns and/or right-click to see available options (such as merge cells, create more cells, etc.).
:: 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 the week of September 22 at the beginning of your lab section. You will submit by:
- ZIPing all of your files and images. I will collect your zip file at the beginning of lab... OR
- Publishing your page in your uregina.ca web space. I will archive all existing webpages automatically at the beginning of lab.
Marking Scheme (out of 1.5%):
- .5% for a page with a title, picture of you, and one paragraph about yourself.
- .5% for presentation - color scheme, pictures, layout, elements of contrast, impact, etc.
- .5% for technical complexity - correct use of several HTML elements, use of internal, relative or external links, publishing page with your uregina.ca account, embedded elements, etc.
:: Online Sources and Resources ::
- Mozilla Nvu's Official Web Depository
- Nvu Tutorials - The Site Wizard
- CS100 - UofR Introduction to Computer Science
- HTML 4 specification
- CSS specification
- HTML learning site