CS 325 and Film 385: Web Development using Mozilla Nvu
Highlights of this lab:
- Nvu's Environment
- Adding Links
- Adding Images
- Adding Tables
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 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.
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:
- 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 webpage design.
- Animated GIFs: GIF 89a images can also be animated using special software. Both Photoshop and the GIMP are able to make animated GIFs. 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, some older browsers do not properly support PNG images, especially the transparency feature. Other browsers interpret the colors in a PNG in a platform specific way, so you may find that matching colors is difficult. As a result, you must be cautious when using PNG images for your web site.
Inserting Images in Nvu:
To insert a image in Nvu:
- Put the image where you want it in your project folder.
- Click the image button.
- Click the browse button and navigate to the image you wish to use.
- Check off the button that says: "URL is relative to page location"
- 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 ::
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.
- 1 For attending the lecture.
- 0-1 For using a variety of techniques - correct use of
several HTML elements, use of internal links, multiple pages
with relative links, working links to external pages, styles,
layers, publishing page with your uregina.ca account, embedded
- 0-1 For creativity, skill, and originality, etc.
The lab is due by the beginning of your lab section for Lab 2. Please
submit by either:
- Publishing your page in your uregina.ca web space. The lab instructor will archive
all your public web files at the beginning of lab. OR
- Placing your web page design folder in your DropBox folder. You may compress the folder if you wish.
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
:: 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