Download presentation
Presentation is loading. Please wait.
Published byKrista Rustin Modified over 10 years ago
2
Using NVU To create your Career Portfolio For instructions on obtaining and installing NVU, please see the file: Installing NVU
3
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.
4
Close the “Tip of the Day” window
5
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 Manager Instead we will use My Computer which is a more capable file manager Use of My Computer is described in the File Management page
6
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.
7
But we must keep track of our webpage files! We need a file manager! Click on Start…
8
… then click on My Computer to start the file manager utility
9
My Computer is now open. Click on the “Folders” button to get the two- pane folders view
10
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.
11
Website development requires good file management You can return to My Computer at any time by clicking this button on the task bar
12
Let’s return to NVU by clicking on its icon in the taskbar…
13
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
14
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.
15
Select both lines, then Click the centering icon. This will center your text on the page.
16
Click the “Larger Font Size” button twice. This will make your text larger.
17
Click the “Larger Font Size” button twice. This will make your text larger.
18
Click the “Larger Font Size” button twice. This will make your text larger.
19
Select only the top line Click the Larger Font Size icon twice To make that text even larger.
20
Select only the top line Click the Larger Font Size icon twice To make that text even larger.
21
Select only the top line Click the Larger Font Size icon twice To make that text even larger.
22
Save this page! It is NEVER TOO EARLY to save! Click File Then click Save As…
23
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
24
Click the down-arrow for the “Save In…” box Locate My Documents then My E-Portfolio and click on it.
25
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”
26
Type in “index.html” And hit Save
27
Your index page is now saved. It “knows” where it is! Note that the title now appears on the tab
28
Let’s Insert 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
29
Click on the Image icon
30
Click “Choose File…”
31
Click the down-arrow for the “Look In…” box Locate My Documents then My E-Portfolio and click on it.
32
Click “Views” button, then click Thumbnails to see small versions of the pictures in this folder.
33
Click on the picture you want to add to your web page, then click “Open”
34
Click on the picture you want to add to your web page, then click “Open”
35
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
36
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!
37
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
38
Note this this page is untitled We will save it right away.
39
Click File, then Save As… just like you did for the Index page. Type in the title: “My Skills” and click OK
40
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
41
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.
42
Linking your pages to each other Click on the E-Portfolio… tab To bring up your index.html page
43
Linking your pages to each other Click on the E-Portfolio… tab To bring up your index.html page
44
Linking your pages to each other Place the text cursor below the photo, and type in: “My Skills” My Skills
45
Linking your pages to each other Select the words: “My Skills” And click the Link button
46
Linking your pages to each other Select Choose File
47
Linking your pages to each other Select: skills.html And click Open
48
Linking your pages to each other Click: OK
49
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!
50
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
51
Checking your Links Click on My Skills to see if the link works… Your Index page will appear in your default web browser
52
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
53
Creating an external hyperlink Then Click the Link button Move the cursor down, Type in “Career Description” And select the words
54
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 Address To 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/
55
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)
56
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
57
Right-Click in the Link Location box, and select Paste. Click OK and congratulate yourself – You have captured a big, hairy link!
58
Be sure to check your Links! The web world is rife with error. Click on Save, then on Browse
59
Click on Format, Then select Page Colors and Background Changing Background Color
60
Click on Use custom colors Then select Background Changing Background Color
61
Select a color and click OK I’ll try to match the color of my shirt. Changing Background Color You may “fine tune” your color, if you wish.
62
Note the preview Showing 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
63
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
64
Return to Format, then Page Colors and Background to get to this menu again. Background Graphic For Background Image, Select Choose File…
65
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
66
Note the preview Again 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
67
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.
68
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, FL 2/08
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.