Web Pages Made Easy

( and FREE! )

With

Nvu

Part 1: Introduction


Dann Foster

Information Technology Department

Oakton Community College

Fall 2007

Creating Web Pages with Nvu

Introduction

Nvu (pronounced “N-view”) is a free, open source, WYSIWYG web authoring program that grew out of the Mozilla Project, an initiative that began with Netscape and expanded to include such related applications as

·  Thunderbird email program

·  Firefox browser

·  Camino browser (Mac)

·  Seamonkey (application suite like Netscape; replaces Mozilla All-in-one suite)

·  A wide variety of related applications and development tools.

Nvu was based off the original Netscape Composer, morphed into a standalone program and for awhile was hoped to be re-folded into the Mozilla/SeaMonkey suite as the ‘nextgen’ web authoring component. This proved to be unworkable and it remains as a standalone. It is alternately known as Komposer, which is a semi-official release intended to address some known bugs while Nvu development is on hold. Nvu is available on Windows, Mac and Linux. As a standalone program it can be installed on campus without interfering with current Thunderbird email settings.

Nvu is not as sophisticated a program as Dreamweaver and some others but it can be used to edit most HTML pages created in other programs. If you’ve been using Dreamweaver on campus and would prefer not to invest in a home copy for remotely updating and uploading your web pages, Nvu may be the tool for you.

See the appendix for information on downloading and installing Nvu on your home computer.

Goals

This guide is intended to introduce the following skills:

· Starting a new web page.

· Using Nvu to open, maintain, and save existing pages (including those created with other programs)

· Related skills:

· Inserting graphics and tables

· Adding Text

· Formatting Text

· Creating links

· Saving pages to Oakton's server

Quick Lesson 1: Web Pages vs. Text Documents

In the background…

Behind a web page is essentially a simple text, or ASCI, document that happens to have codes inserted within the text. By just adding the following codes…

<html<head<title</title</head<body</body</html>

…into a text document (plus saving it with the extension .htm) you can make it

readable on a web browser. It may be boring and static, but it will be readable.

Add a few more codes and you can tell a web browser to display the text in

certain ways (bold, centered, etc.), to insert a picture in a certain place, to make

selected text act as a hyperlink, and other actions.

When you work with a WYSIWYG editor like Nvu, all those codes that

make a text document work like a webpage are happening behind the scenes. Just like when working with a Microsoft Word document, you can drag the mouse to some text, click the italics button, for instance, on the formatting

toolbar, and the html document hidden in the background tags the selection like:

<i>word</i>. On the webpage, your word looks like word.

Quick Lesson 2: Use of HTML

Formatting Appearance vs. Structure

Generally speaking, any significant appearance “coding” should be done with stylesheets rather than HTML. HTML is best used for document structuring— declaring doctype, laying out the head and body code, using headings to ( e.g., <H1> ) to delineate the content of a doc, configuring table data, linking, metatags and other elements that provide organization and basic function to a web page. Stylesheets then could be used to set font styles, colors and more complicated elements of appearance.

While many appearance aspects can be set with HTML (and, frankly, often are for simple pages without causing a lot of problems), proper markup technique adds to the accessibility and usability of a web page and helps it to be renderable in formatsranging from standard browsers to portable media.

Quick Lesson 3: Where Personal Web Pages are Stored

URLs, Page Storage & File Naming

Everyone at Oakton—Faculty, Staff, Students—have personal space on the network for saving files. On campus, this space is mapped to the H: drive. Off-campus, this space is accessible via FTP (see Appendix).

Everyone’s H: drive contains a sub-folder named Public.www. This special folder is where users can place all files they desire to be available via the Web. If a user creates a sub-sub-folder under Public.www, files place there will also be publicly available.

“Index” Pages & Personal Home Pages

A home page is the “main page of a Web site. Typically, the home page serves as an index or table of contents to other documents stored at the site.” (webopedia.com)

Home pages should be named “index.htm” (or -.html). The web server looks for pages with this name in the public.www folder or subfolder and displays it as the default page. If a folder contains no file named index, a linkable list of all files in that folder will be displayed.

Such a linkable list can be handy in some circumstances but creating a home page with links to desired files is the generally preferred method of managing multiple web pages.

Personal home pages are viewable by going to http://www.oakton.edu/~userID.

Example 1:

If instructor jsmith saves his home page as index.htm to his h:\public.www\ folder, his students can view it at http://www.oakton.edu/~jsmith

Example 2:

If instructor jsmith saves his home page as mywonderfulpage.htm to his h:\public.www\ folder, his students can view it at http://www.oakton.edu/~jsmith/mywonderfulpage.htm. Note that by not naming the page “index” jsmith’s students have to type in the filename of the page even if “mywonderfulpage.htm” is the only file in the folder.

Getting Started

On campus, Nvu can be launched from the Windows Start menu:

All Programs > NAL > G. Internet > Web Design > Nvu 1.x

On your home computer you may have an icon on your desktop screen.

Starting a New Web Page

Launching Nvu will start you off with a blank page.

Opening an Existing Web Page

In all likelihood you will frequently want to open and edit an existing web page. It’s important to update your web materials regularly so they remain relevant and helpful to those who visit.

To open, edit and save an existing page (working on campus),

1.  Launch Nvu

2.  Click the File menu

3.  Choose Open. A file management window will open.

4.  Look for your H:\ drive

5.  Look for your public.www folder (or subfolder) where the file you wish to edit is stored.

6.  Select the name of the file you wish to edit (remember you probably named your home page “index”)

7.  Click “Open” at the bottom of the file management dialog window. The file should open and you can begin to edit. See the main learning exercise of this document for use of the Nvu editing tools.

8.  When editing is complete, click the File menu,

9.  Choose Save.

Note: If you wish to back up a file before you edit it,

1.  Perform steps 1-5 as above

2.  Right-click on the desired file name.

3.  Choose Copy from the popup menu

4.  Right-click in an empty area of the file management window

5.  Choose Paste from the popup menu. A copy of the file will be added to the file list. You can use this file to restore the pre-edited version of your web page.

To open, edit and save an existing page off campus

1.  FTP the file from your public folder on the network to a local drive.

·  See FTP in the Appendix for instructions on using an FTP client or the Publish function within Nvu.

2.  Perform steps 1 – 9 above

3.  FTP the file from your local drive back to the public folder on the network.

Screen/Tools Overview

Following are the basic web construction tools found on the Nvu screen. The steps for using these tools (those that are relevant to basic page construction) are covered next in the Learning Exercise.

Main sections of the Nvu program screen:


Beginning users should focus on just a few areas but be aware of others. Like with Dreamweaver, Nvu allows the novice web author to start slowly, create some basic but serviceable pages, and add tools and skills as needed. Still, it’s handy to have an overview of the whole package for a better idea of the potential.

Each of these major sections can be hidden or revealed using the View > Show/Hide menu. If there is an area, such as the Site Manager whose “real estate” could be used for some thing else, close it and open it as desired.

Top: Menu Bar (locked in place)

Contains menus like typical Windows programs- File, Edit, View, etc.

Toolbars can be customized by right-clicking and

Second from Top: Composition Toolbar

This is a mixed use toolbar partly similar to the Dreamweaver Insert Objects panel. It contains icons representing very common web page elements, such as for inserting images, tables and links. It also contains icons for frequently used program functions such as Save or Print (also available via the File menu).

Third row from Top: Format Toolbars (2)

The Format Toolbars are akin to Dreamweaver’s Properties Panel (default view). Most of the tools found here affect how text is rendered. Here you can

·  Set font size, style, header tags, color

·  Indent/outdent, align, justify

·  Create numbered or bulleted lists

Other icons relate to such tools as layers and styles.

Lower Left: The Site Manager

A “site” is a collection of related web pages generally saved in the same directory. This panel lists all the pages and linked files associated as a “site” with the page you’re currently editing.

As with Dreamweaver, it is not necessary to create an entire site before working on a single web page or two.

Bottom: Edit Mode

Four modes are available. Click any one to change to that mode.

Normal: WYSIWYG. Invisible elements like table borders show but not code.

HTML Tags: WYSIWYG plus icons representing key tags

Source: Shows the HTML only

Preview: WYSIWYG without the invisible elements like borders. Use the Browse button for a more accurate rendering of the final page.

Learning Exercise

In this exercise the learner will construct a personal home page emulating the basic Oakton template.

Below is the general layout of an Oakton faculty home page. Administrators and staff can adjust the content as appropriate.

The page contains

·  Banner/Header with logo and universal links

·  Navigation bar with links of specific interest to this user’s visitors, particularly to sub-pages for his class materials

·  A main content area with personal contact information and a Welcome letter/intro to site visitors.

While such a page can be built off a template and be a part of a web site, for this exercise it will be constructed as a standalone page which links to related pages stored (mostly) in the same folder.

Use of Table for layout

A table with invisible borders is used to layout the elements of the page. Content is placed within cells of the table so that changes in browser dimensions will not affect appearance to visitors.


Steps for building the Home Page

  1. Insert the table
  2. Click the Table icon on the Composition Toolbar. The Table dialog will appear
  3. Click the “Precisely” tab
  4. Set the following values:

·  Rows: 3

·  Columns: 3

·  Width 100 %

·  Border: 0

  1. Click OK
  1. Merge the lower two cells of the left column
  2. Click the mouse in either cell
  3. Hold down the left mouse button and drag the mouse from one cell to the next
  4. Click the Table menu in the Menu Bar
  5. Click Join Selected Cells
  1. Merge the center and right cells of the top row
  2. Click the mouse in either cell
  3. Drag the mouse from one cell to the next
  4. Click the Table menu in the Menu Bar
  5. Click Join Selected Cells
  1. Merge the center and right cells of the bottom row
  2. Click the mouse in either cell
  3. Drag the mouse from one cell to the next
  4. Click the Table menu in the Menu Bar
  5. Click Join Selected Cells
  1. Narrow the width of the center cell
  2. Click in the center cell
  3. Place the mouse over the border marker, as shown. The pointer will change from an arrow to a double-arrow.
  4. Drag the marker to the left. You can adjust this again later to snug it up against the edge of your photo.
  5. Set the cell background color
  6. Click in the upper right cell
  7. Click the Format menu
  8. Click Table Cell Properties
  9. Click the rectangular button next to Background Color. A color palette appears.

(You can also click the lower square on the color icon instead of steps 6b, 6c and 6d.)

  1. Choose a subtle, light color (we will use dark colored text and the contrast will maximize readability)
  2. Click OK
  1. Repeat steps a. – f. for the lower left and upper right cells
  1. Save your page
  2. Click the Save icon on the toolbar
  3. Input a Page Title, if prompted (page title is not the file name; the title is what shows up in your bookmarks/favorites)
  4. Name your page “index.htm” and
  5. (if working on campus) save it to the h:\public.www folder
  6. (if at home) save it to a local folder to move later
  7. Insert Images: Logo
  8. Place the cursor in the upper left cell by clicking in it
  9. Click the Image Insert icon on the Composition Toolbar. The Image Properties dialog window opens.
  10. Click the Choose File button to open an image file dialog.