Using NVU To create your Career Portfolio For instructions on obtaining and installing NVU, please...
-
Upload
krista-rustin -
Category
Documents
-
view
226 -
download
8
Transcript of Using NVU To create your Career Portfolio For instructions on obtaining and installing NVU, please...
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