Nvu Tutorial

This Nvu tutorial teaches how to create and edit web pages using the free Nvu web authoring software. It covers downloading and installing Nvu, getting familiar with the interface, editing an existing HTML page, adding formatting, and creating internal and external links within pages and between pages. Specific functions of the toolbar buttons are described. The tutorial provides step-by-step instructions for tasks like inserting anchors, linking to anchors and other pages, and using tabs to edit multiple pages simultaneously.

Uploaded by

Zangie Santos

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

128 views6 pages

Nvu Tutorial

Uploaded by

Zangie Santos

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 6

Nvu Tutorial: by Tim VanSlyke

In my HTML tutorial, you learned to create a page using html codes. In this tutorial you
will see how much easier it is to create Web pages using Web page editing software. I
have chosen a free Web page editing
application called “Nvu.” Nvu is called a
“complete Web authoring system”
because it not only helps you create Web
pages, but also serves as system for
managing your Web site.

How to download and install Nvu:

Nvu is available for Windows, Linux and Macintosh computers. You can download it for
free from the Nvu Web site: http://www.nvu.com/ . Click the “downloads” link and
then choose the file appropriate for your computer.

Getting Started:
Open Nvu now and take a few minutes to familiarize yourself with the tool bars and the
main menus. If you point at an item with your mouse, a label will popup telling you the
item’s name.

Above is a screen shot of Nvu’s composition toolbar. Similar to a word processor toolbar,
the Nvu composition toolbar features buttons for the most common tasks you will use
when creating Web pages.
Here is a list of each button and its function:
• New: Opens a new blank page.
• Open: opens a saved page.
• Save: saves changes to your pages.
• Publish: after you have set up a connection to your Web hosting account, you can
publish your pages using this button.
• Browse: allows you to preview your page-in-progress in your Web browser.
• Anchor: Inserts an anchor into your page. Anchors allow you to create hyperlinks
within a document, so, for example, if you have a lengthy document, you could
create a table of contents with items that can be clicked and will take the reader to a
location elsewhere in that page.
• Link: This button creates a link or hyperlink that connects your page to internal
pages (other pages in your site), as well as external pages (pages at other addresses).
• Image: Inserts an image in your page.
Nvu tutorial by Tim VanSlyke
• Table: Inserts a table into your page.
• Form: Opens a drop-down menu with common form elements that can be inserted
such as: check-box, text-box, etc.
• Spell: Starts the spell checker.
• Print: Drop-down menu with print and page setup functions.

Below the composition tool bar are more items for formatting text. We will discuss many
of these as we begin using Nvu to develop pages for your site.

Getting to Know Nvu

To begin getting to know Nvu, let’s start by opening the index.html document we created
in the html tutorial. To do this, follow these steps:
1. In Nvu, click the Open button on the composing toolbar or choose Open from the
File menu.
2. In the “Open HTML file” dialog, locate your Web site folder, open it and select the
index.html file.
3. Click Open
You should now see your file in
the Nvu editing area.
To see how you can now edit your
documents try highlighting the
“Welcome to my Web page” text
and applying some formatting to it.
For example, you could make it You can make changes
red and bold. You can increase or in the editing area just
decrease the font size, etc. as you would a word
processor.
You may not want to have a link to
Google right at the top of your
page. If you like, you can highlight the line and hit backspace or delete to get rid of it.
Now, place your cursor at the end of the last line and hit enter to add a new line. Type on
the new line: “About Me” and then hit enter again. If the text is still centered, use the
alignment function on the formatting tool bar to
set the alignment to align left.
On the next line type a few sentences about you.
Allow the text to wrap naturally. When you are
finished, play with the various formatting features to make the text appear as you would
Nvu tutorial by Tim VanSlyke
like it. Finally, save your page. And click the “browse” button on the composing toolbar.
This will open your HTML file in a Web browser for you to preview.
Just for fun, lets create a footer at the bottom of your page.
1. Place the cursor on the last line and then hit enter a few times to add some lines.
2. In the Insert menu choose Horizontal Line to add a line.
3. Below the line type: “This page was created by (type your name)”.
4. If you would like to help support Open Source software you can also insert a small
“Made with Nvu” button at the bottom of your page by choosing Insert : Smart
Widgets : Made with Nvu button.
As you can see, simple Web page editing is fairly straightforward with Nvu. The following
mini-tutorials will introduce you to a number of Nvu’s features and provide you with the
skills you will need to create the Web pages for your site.

Links and anchors

You can create two types of links in your Web pages: internal or external. External links,
when clicked, will lead to an external Web site such as the link we created to Google in
the HTML tutorial. Internal links can lead either to other pages within your site, or allow
you to jump to a point within the same page. This latter is accomplished with the use of
anchors.
External Links
In this tutorial we will create a link to your favorite educational Web site.
Follow these steps:
1. Open a Web browser and find an
educational Web site that you would
like to share with your students.
2. When you have located your site,
click the URL in the browser’s
address bar to highlight the address. Click the
In the Edit menu click Copy. Link button
3. Return to Nvu and type something
like, “Check out this great resource:
(type the name of the Web page
here). I am an ESL teacher, so I
have chosen “The ESL Independent Study
Page,” created by Michael Krauss at Lewis and
Clark College in Portland, Oregon.
4. Highlight the name of the Web site you typed in
your page.
Nvu tutorial by Tim VanSlyke
5. Click the Link button on the composition toolbar.
6. In the Link Text dialog, click in the Link Location field and use your right mouse
button to paste the URL. (On a Macintosh with no right mouse you can do the same
with a control-click).
7. Once you have successfully pasted the link, click OK.
You can test your link by saving your file (click the Save button) then click the Browse
button to open your file in a Web browser.

Setting Anchors
Anchors are a useful way to set places on your page which can be linked to from other
places within the same page, or when you
want the user to jump to a specific place
when coming from another page. The
following two mini-tutorials will teach you
how to set anchors on your page and then
create links to those places.
In the editing window click at the top of the
page to place your cursor to the left of the first word.
1. Click the Anchor button in the composition toolbar.
2. Type the word “top” in the Anchor Name dialog.
3. Click OK.
You should see an anchor symbol on your page. Now go to the bottom of the page and
click next to the first line of your footer. Follow the steps above to add an anchor there
that you call “footer.”
Once you have added some anchors you can see how to link to them by following these
steps:
1. At the bottom of the page add a line and then click Align Center on the formatting
toolbar.
2. Type the word “top.”
3. Highlight the word then click the
Link button.
4. Click the inverted triangle to access a
dropdown menu with a list of named
anchors. Choose the item: “#top.”
The link will now jump back to the top of
the page. You can test this by using the
browse button, but you may not see anything
happen until there is more content on the page that will make the user scroll downward.
Nvu tutorial by Tim VanSlyke
Using this method, you can see that it would be fairly simple to create several sections on
a single page with anchors at each section. Then you could create a table of contents at
the top of the page, with links to each anchor.

When you try this out in your Web browser, you will probably see that there is no link
back from the empty schedule page to the index page. Let’s add a link there now.
One great feature of Nvu is its
tabbed editing window that
allows you to load multiple
pages. Try it now by clicking
the Open button on the
composing toolbar, or by
choosing Open from the File
menu. Locate your
schedule.html file and open it.
You will see that it loads in a
second tab in Nvu’s editing
window.
You can easily switch to various
documents by using the tabs at
the top of the editing screen.
Nvu tutorial by Tim VanSlyke
Now follow the same steps you used earlier to create a “Home” link that connects back to
the index.html page. You have created your first Web pages with a simple navigational
system.

To learn more about Nvu. See the documentation that comes with the program, or visit
the Support page on the Nvu Web site: http://nvu.com/support.php