Using NVU

To create your Career Portfolio

For instructions on obtaining and installing NVU, please see the file:

Installing NVU

After installing NVU, you can find it on your Desktop

Or in the Start menu under “All Programs”

Or you may find a quickstart button on your taskbar.

Close the

“Tip of the Day”

window

NVU includes a “Site Manager” which is actually very useful.

But for today’s exercise, we wish to concentrate on the Editing features, so:

Click the little X

to close the Site ManagerInstead we will useMy Computer

which is a more capable file manager

Use of My Computer is described in the

File Management page

Now we have a broad, blank screen to create

the web page.

Note the tab, which says it is “untitled”

That’s because we haven’t saved it yet.

But we must keep track of our webpage files!

We need a file manager!

Click on Start…

… then click on My Computer to start the file

manager utility

My Computer is now open.

Click on the “Folders” button to get the two-

pane folders view

Scroll up to find

My Documents

Click to open it.

Then find

My E-Portfolio

Click to open it.

Your web files will appear in the right pane.

Website development requires good file management

You can return to My Computer at any time by clicking this button on the task bar

Let’s return to NVU by clicking on its icon in the taskbar…

NVU works much like a word processor, with editing and formatting buttons that should be

familiar if you use Word.

But NVU has also has features to make it a good web page editor

So just start typing!

Type in “E-Portfolio”

And press the ENTER key(on your keyboard)

This places the cursor on the line below.

Type in the career field you have chosen for this assignment.

Select both lines, then

Click the centering icon.

This will center your text on the page.

Click the “Larger Font Size” button twice.

This will make your text larger.

Click the “Larger Font Size” button twice.

This will make your text larger.

Click the “Larger Font Size” button twice.

This will make your text larger.

Select only the top line

Click the Larger Font Size icon twice

To make that text even larger.

Select only the top line

Click the Larger Font Size icon twice

To make that text even larger.

Select only the top line

Click the Larger Font Size icon twice

To make that text even larger.

Save this page!

It is NEVER TOO EARLY to save!

Click File

Then click Save As…

Type in a title

Make it pleasant, polite, and so that it gives the reader a clear idea of the page contents.

Then click OK

Click the down-arrow

for the “Save In…” box

Locate My Documents then

My E-Portfolio

and click on it.

This filename is

WRONG!

ERASE it and type in

“index.html”

NO OTHER name is correct for your home page. It must

ALWAYS be named “index.html”

Type in

“index.html”

And hit Save

Your index page is now saved.

It “knows” where it is!

Note that the title now appears on the tab

Let’sInsert a

Photograph!

Place the cursor at the end of the “r” in “Engineer”

Press the ENTER key TWICE

This will move the cursor down to a blank line

Click on the Image icon

Click “Choose File…”

Click the down-arrow

for the “Look In…” box

Locate My Documents then

My E-Portfolio

and click on it.

Click “Views” button,

then click Thumbnails

to see small versions of the pictures in this

folder.

Click on the picture

you want to add to your web page,

then click “Open”

Click on the picture

you want to add to your web page,

then click “Open”

Type in Alternate Text

(a few words to describe this picture)

then click “OK”

It is possible to avoid the alternate text by checking “Don’t use alternate text”

But alternate text is needed for a web page to be ADA-compliant, so using it is good, and

sometimes required

Note the little red disk-looking icon on the tab

for this page.

The red icon means that this page has not

been saved since it was last changed.

Click the SAVE button to update the index.html file on disk.

That way, if the power fails or the computer crashes, you don’t have to re-do this step

Save early,

Save Often!

Note that the red icon is gone.

Nothing has been changes since the page was last

saved.

We will make more changes soon, but for the

moment, our work is “safe”

Click the New button to create a new blank page

This will be our Mission Statement page

Note this this page is untitled

We will save it right away.

Click File, then Save As… just like you did for the Index page.

Type in the title: “My Skills” and click OK

BE SURE to note WHERE this page is about to be saved.

There is ONLY ONE good spot for it…….in your “My-E-Portfolio” folder

NOWHERE ELSE!

Again, NVU has copied your Title and is wanting to use it as a Filename.

That is WRONG!It contains S P A C E S (won’t work!)And CaPitAl LetTeRs (confusing!)

Erase “My Skills.html” and type in:“skills.html”

(no capitals, no spaces!)

Once the filename has been corrected,

Click Save

Start Typing your Skills

Use the “Select Larger Font” button to make the headers larger

Hit SAVE now an then as you are working, And again when you are done.

Linking your pages to each other

Click on the E-Portfolio… tab To bring up your index.html page

Linking your pages to each other

Click on the E-Portfolio… tab To bring up your index.html page

Linking your pages to each other

Place the text cursor below the photo, and type in: “My Skills”

My Skills

Linking your pages to each other

Select the words: “My Skills”

And click the Link button

Linking your pages to each other

Select Choose File

Linking your pages to each other

Select: skills.html

And click Open

Linking your pages to each other

Click: OK

Linking your pages to each other

“My Skills” is now blue and underlined, indicating that it has been converted into

a hyperlink.

Let’s see if it works!

Checking your Links

Click on Save, then on Browse

This “warning” box may pop up.If it does, click “Remember my choice…” and

then Launch Application

Checking your Links

Click on My Skills to see if the link works…

Your Index page will appear in your default web browser

Checking your Links

Click the Back button to return to your index page

Yes! The link works!

Click the NVU button on the taskbar to return to NVU

Creating an external hyperlink

Then Click the Link button

Move the cursor down, Type in “Career Description”

And select the words

Creating an external hyperlink

You COULD just type it in!If it is short, that might be the best way.

OK, so now we need a link…A URL…

A Web AddressTo enter in that little box

Most links are too long. Here is a better way.Go to your web browser and find the page…

http://www.sfcc.edu/

After a little web searching,I’ve found a description I like

and wish to link to.

But the URL is impossible! No way I could retype all that

without making a mistake.

How to deal? Just Click on the address to select it

Then Copy. (Either right-click and select Copy,

or press Ctrl-C)

After a little web searching,I’ve found a description I like

and wish to link to.

But the URL is impossible! No way I could retype all that

without making a mistake.

How to deal? Just Click on the address to select it

Then Copy. (Either right-click and select Copy,

or press Ctrl-C)

Click the NVU button

Right-Click in the Link Location box, and select Paste.

Click OK and congratulate yourself – You have captured a big, hairy link!

Be sure to check your Links!The web world is rife with error.

Click on Save, then on Browse

Click on Format,Then select

Page Colors and Background

Changing Background Color

Click on Use custom colorsThen select Background

Changing Background Color

Select a color and click OKI’ll try to match the color of my shirt.

Changing Background Color

You may “fine tune” your color, if you wish.

Note the previewShowing how text will appear with

this background color

It is possible to make very bad choices!

Be sure that the text is legible, and not too hard to read.

Changing Background Color

If your first choice doesn’t’work, you select another background color,

or change the text colors. Once you have colors you like, click OK

Well! That’s not quite what I had in mind..

Note that colors look much more intense when they are on a large screen. This is a bit hard to take.

Let’s try a background graphic!

Changing Background Color

Return to Format, then

Page Colors and Background to get to this menu again.

Background Graphic

For Background Image, Select

Choose File…

Background Graphic

Click on the View button, then Thumbnails to see small versions of each image.

Click on a graphic you think might work, then click Open

Note the previewAgain check to make sure your text

is legible.

This subtle graphic is much better than the solid purple, don’t you

think?

Background Graphic

If you like it,click OK

It may not be great art...

But it is getting to the point of being presentable.

More items will be needed to complete the

Career Portfolio

Consult your course syllabus for further

instructions.

Be sure to Save, Browse, and Check your Links before

uploading to your website.

And check it again after uploading, to make sure your

web copy works OK too.

This slideshow is intended to provide an overview of the basics of webpage editing using NVU.

We have barely scratched the surface.

NVU has many more options... Tables, forms, style sheets… you can include animations, music, video…

Thank you for your interest in the Career Portfolio!Jimmy Yawn - Elaine Casquarelli

Santa Fe Community College, Gainesville, FL2/08