1. No category

Nvu - Oakton Community College

Web Pages Made Easy
( and FREE! )
With
Nvu
Part 1: Introduction
Dann Foster
Information Technology Department
Oakton Community College
Fall 2007
81909000
Created by dannf
Page 1 of 14
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
81909000
Created by dannf
Page 2 of 14
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. Offcampus, 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
81909000
Created by dannf
Page 3 of 14
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
81909000
Created by dannf
Page 4 of 14
2.
3.
4.
5.
6.
7.
8.
9.
Click the File menu
Choose Open. A file management window will open.
Look for your H:\ drive
Look for your public.www folder (or subfolder) where the file you wish to
edit is stored.
Select the name of the file you wish to edit (remember you probably
named your home page “index”)
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.
When editing is complete, click the File menu,
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 preedited 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.
81909000
Created by dannf
Page 5 of 14
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
81909000
Created by dannf
Page 6 of 14
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.
81909000
Created by dannf
Page 7 of 14
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
a. Click the Table icon on the Composition Toolbar. The Table dialog
will appear
b. Click the “Precisely” tab
c. Set the following
values:
 Rows: 3
 Columns: 3
 Width 100 %
 Border: 0
d. Click OK
81909000
Created by dannf
Page 8 of 14
2. Merge the lower two cells of the left column
a. Click the mouse in either cell
b. Hold down the left
mouse button and drag
the mouse from one cell
to the next
c. Click the Table menu in
the Menu Bar
d. Click Join Selected
Cells
3. Merge the center and right
cells of the top row
a. Click the mouse in
either cell
b. Drag the mouse from
one cell to the next
c. Click the Table menu in
the Menu Bar
d. Click Join Selected
Cells
4. Merge the center and right
cells of the bottom row
a. Click the mouse in
either cell
b. Drag the mouse from
one cell to the next
c. Click the Table menu in
the Menu Bar
d. Click Join Selected
Cells
5. Narrow the width of the center cell
a. Click in the center cell
b. Place the mouse over the border
marker, as shown. The pointer will
change from an arrow to a doublearrow.
c. Drag the marker to the left. You can
adjust this again later to snug it up
against the edge of your photo.
81909000
Created by dannf
Page 9 of 14
6. Set the cell background color
a. Click in the upper right cell
b. Click the Format menu
c. Click Table Cell Properties
d. 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.)
e. Choose a subtle, light color (we will use
dark colored text and the contrast will
maximize readability)
f. Click OK
g. Repeat steps a. – f. for the lower left and upper right cells
7. Save your page
a. Click the Save icon on the toolbar
b. Input a Page Title, if prompted (page title is not the file
name; the title is what shows up in your bookmarks/favorites)
c. Name your page “index.htm” and
d. (if working on campus) save it to the h:\public.www folder
e. (if at home) save it to a local folder to move later
8. Insert Images: Logo
a. Place the cursor in the upper left cell by clicking in it
b. Click the Image Insert icon on the Composition Toolbar.
The Image Properties dialog
window opens.
c. Click the Choose File button to
open an image file dialog.
Notes on Selecting Images
Image files must be stored in
your public.www folder along
with the html files. Otherwise,
they will appear “broken” to
people viewing your page.
81909000
Created by dannf
Page 10 of 14
For this exercise, we assume you have saved the necessary image
files (Oakton Logo and a portrait image) to h:\public.www ahead of
time.
d.
e.
f.
g.
In the Select Image File window, click on the Oakton Logo
Click “Open”
The image will appear as a preview in the Insert Image dialog
Type “Alternative Text” for the image
i. Alt Text is a word or short phrase that describes the image.
In this case, type “Oakton Logo”
h. Click OK
9. Insert Images: Portrait
a. Click in the center cell
b. Repeat steps 8a through 8h, choosing your portrait file instead of
the logo file
c. After inserting the portrait image, you may, if necessary, repeat
step 5c to tighten the cell around the image.
10. Content Alignment
As you enter content into each of the cells you may find that text and
images are not defaulting to the top-left of the cells. You may fix this on a
cell-by-cell basis via the following steps:
a. Click in the desired cell
b. Click the Table menu
c. Click Table
Properties
d. Click the Cell tab
e. Check the box for
Vertical
f. Click Top on the drop
menu
g. Check the box for
Horizontal
h. Click Left on the drop menu (if not already chosen)
i. Click OK to close the Table Properties window.
11. Input Text
a. Refer to the “Sample Personal Homepage” image before Step 1 to
determine what text content to type into the open cells.
12. Font Style Formatting
After inserting text, you may drag the mouse across it to select it then
perform any of the following formatting changes.
a. Text Style: Font (Type Face)
i. Choose the desired face from the drop
menu.
ii. Always choose a common face like
Times Roman or Arial. For your page to
render properly, visitors viewing your
81909000
Created by dannf
Page 11 of 14
b.
c.
d.
e.
f.
g.
page must have the same font installed on their local
computers.
iii. Unlike Dreamweaver, there’s no way to declare 2nd or 3rd
choice faces without hard coding it.
Text Style: Bold, italic, underline
i. Use icons on the toolbar, or
ii. Additional styles, like strikethrough, are available under the
Format menu and Text Style
Text: Font Size
i. Click the little A or the big A to make
selected text relatively larger or smaller.
Text Style: (doc structure) Paragraph, Heading.
i. Larger and smaller Heading tags are
preferable to use of larger and smaller
Text Size even though the visual effect
is about the same. See “Quick Lesson 2”
on page 3
ii. Choose Heading 1 for the top banner
over the main area of text on a page.
iii. Use Headings 2-6 to mark various subsections. Structure content in a parallel
manner (if there are two main sections,
they should both be marked as Heading 2)
iv.
Font Color
i. Click the upper box to reveal a color
palette.
ii. Always choose colors that provide high contrast between
text and background
Lists
i. With the first item of a potential list
selected, click either the numbered list or bulleted list.
ii. Pressing Enter on the keyboard at the end of a list item will
produce the next number or bullet point
iii. Indents within a list are allowed
iv. Additional list formatting is available from the Format menu,
Lists and Numbering
Alignment and Indent
i. Full paragraphs can be selected
at a time to adjust indent/outdent or align the text left-rightcenter-justified.
ii. Aligning the text in one cell generally does not affect other
cells.
13. Links
Hyperlinks are the most common elements for making web pages
dynamic. They are the main means of navigating between or within pages.
81909000
Created by dannf
Page 12 of 14
a. Creating Hyperlinks
i. Select text or Image to make linkable
ii. Click the Link icon on the toolbar. The Link
dialog window will appear
iii. Type or right-clickpaste a URL in the Link
Location field
iv. If the link is to a local
page (likely in the
same folder as your
home page), click
Choose File
1. Click the file
name
2. Click Open
v. Click OK to finish
setting the link
About Relative and Absolute URLs
An Absolute URL is one that starts with “http://www. (etc.)” and
contains the exact name of the file, unless it’s the default file in
the folder.
A Relative URL contains just enough info to point the browser
from one file to another. If the link is to a file in the same folder as
the starting page, the relative link can consist of just the filename
because the server will know then only to look in the current
folder.
b. Creating Email Links (aka “mailto links”)
i. Select the desired text or image to become an
email link
ii. Click the Link icon on the toolbar. The Link
dialog window will appear
iii. Type or right-click-paste an
email addressin the Link
Location field
iv. Click the box for “The above
is an email address.
v. Click OK.
81909000
Created by dannf
Page 13 of 14
Appendices
1. Getting Nvu for your Home Computer
Nvu is a free program available for download and installation on your home
computer.
1. Go to http://www.nvudev.org/download.php
2. Look for the version of Nvu for your operating system (Windows, Mac,
etc.)
3. Click the name of the file
4. Save the file to your computer when prompted. Note where you save it.
5. Locate the downloaded file and 2x-click it to install it. Follow the prompts.
2. FTP (File Transfer Protocol)
FTP is an Internet method of moving data files (any kind) from one computer to
another. Web Browsers and client programs like FTPX or WS_FTP can be use
by people wishing to upload or download files between their computer and a
server.
More info at: http://www.oakton.edu/resource/it/ftp/
Web Authoring programs like Dreamweaver and Nvu have “publishing” functions
built in that can be set to FTP files between the computer you’re developing
pages on and the server that will host the pages,
3. References
http://en.wikipedia.org/wiki/List_of_Mozilla_Foundation_products
http://www.nvudev.org/guide/pdf/nvuug10r1.pdf
81909000
Created by dannf
Page 14 of 14

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz