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