Untitled Document

An Introductory Guide to NVU

I. How to: Access Your Network Folder on a PC

Step 1:
Right-click on ‘My Network Places.

Step 2:

Select ‘Map Network Drive.:

Step 3:

In the area marked ‘Folder,’ type: \\Portfolio\eport\“username” (ex: \\Portfolio\eport\cburgamy)

1a. Accessing Your Network Folder From a Mac
MAC OS X
1. Click on the Go menu on the menu bar
2. Select Connect to Server.
3. Enter 168.28.232.60 for the Server Address and Click Connect. 4. In the Connect to Server window, select Registered User and enter your username and password.
5. Click Connect.
6. In the Select the volumes to mount window, make sure Eport is highlighted
7. Click OK
8. The Eport drive should open on your mac, if not, double click it on your desktop.
9. Select the folder labeled with your username.
Mac OS 9
1. Click the Apple Icon on the menu bar
2. Select Chooser.
3. On the left side of the Chooser window,
4. select Appleshare
5. On the right side of the window select Server IP Address.
6. Enter 168.28.232.60 for the server address
7. Click Connect
8. Select Registered User at the login window and enter your username and password.
9. Click Connect
10. Select Eport
11. Click OK
12. Open the Eport drive that now appears on the desktop.
13. Select the folder labeled with your username.

II. Download a template (skip this step if you would like to create your own ePortfolio from scratch).

Steps below correspond with numbered arrows:

1. Go to Calvin’s website http://portfolio.agnesscott.edu/cburgamy

2. Click on the “template” button – left side of the web site

3. Right click on the template you like best and a menu will appear. You can save the link or target into your eportfolio folder.

III. Extracting the zip files

Steps below correspond with numbered arrows


Step 1:	Open your ePortfolio folder and right click on the “bntemplate#.zip” file.

Step 2:	A menu will appear and select “extract all.”

Step 3:	The Extraction Wizard window will appear and select the “next” button.


Step 4:	The “select destination” screen will appear, click on the “browse” button and navigate to your ePortfolio folder

Step 5:	Once you have selected your folder, click on “ok” and the window will disappear back to the Destination Wizard.


Step 6:	Select the “next” button and the extraction process will complete. Select “finish.”


Step 7:	When the ePortfolio main folder appears, navigate to your particular folder and open it to see your template (e.g., images# folder, 171.htm or 209.htm) files.

IV. Learning the NVU program:


Step 1:	To open NVU, select the icon from the desktop:


Step 2:	Once the program is open, close the Nvu Site Manager by clicking on the small “x” on the left -see arrow below

Step 3:
To open your template, go to “file” located to the top left of your menu screen and select “open.”

Step 4:

Navigate to your eportfolio folder and select your template file

Step 5:
Once the template appears in Nvu, open the “file” menu and save it as “index.html”

Step 6:

Now you are ready to see your template on the World Wide Web. Open a Browser (e.g., Internet Explorer or Mozilla) and type in your eportfolio address:

http://portfolio.agnesscott.edu/username

V. Adding and Changing Text in NVU

Overview: You will learn a detailed explanation for each text tool in the program.

Here are the different options in the order that they appear on the menu bar, going from top to bottom, left to the right.

Body text

This is where you decide whether it is normal body text or header text.

Color

This is where you change the color of the text. The color on the top square is what the highlighted text color will be.

Text size

To change the size of the highlighted text, click A down or A up on the upper bar to decrease or increase the size of the text.

Bold type

To put the highlighted text in bold, click the bold B on the lower row of the button bar.

Italics

To put the highlighted text in italics, click the italicized I on the lower row of the button bar.

Underlining

To underline the highlighted text, click the U on the lower row of the button bar.

1.2.3…

Add numbers or bullets to your web page.

Alignment

To move the text to flush left or centered, go to the four buttons on the far right of the lower row of the button bar, where you can select the alignment (left, center, right, justify). (If you do nothing, flush left is the default alignment.)

Class

You will not be using this option most of the time, since it deals with CSS.

Fonts

Click the menu that says “Variable Width” or a font face (like “Arial” or Times New Roman"). There will be a drop down menu and you can decide what font you would like from that menu. The fonts that a computer has changes depending on the computer, so a font that shows up on one computer you are working on may not show up if you change computers.

You can either:

a) Type everything in the table or window that you want on your page and then highlight the text and change the options.

or

b) Adjust the text options in the menu as necessary, and then type everything in the table/window that you want on your page.

Troubleshooting: If you try “b” and not all of the text is exactly the way you want it, try “a” to fix the portions of the text that aren’t the same as the rest.

VI. Inserting an Image

Overview: You will learn how to insert an image onto your page.

Reminder: You need to have a few saved images before you can start this endeavor.


Step 1:	Put the cursor in the place where you want to insert your image.

Step 2:	Click the "image" button on the button bar OR go to the "insert" pull-down menu and click "image."

Step 3:	You will get a dialogue box. You can use the "choose file" button to look around in your E-port Images folder that you have previously created to find the image file you want to insert. Once you choose your picture, there will be a box below your image that you need to check that reads “URL is relative to page location”.


	*Troubleshooting:* If you unable to check the box then first be sure to save your page. Next try and insert the picture again and then check the box.


Step 4:	The “Dimensions” tab allows you to change the size of the picture. Pictures look better if you resize them in another program, such as IrfanView, which you can download from our website along with a tutorial on how to resize and crop pictures.

Step 5:	Click the tab "appearance" at the top to choose the alignment of the picture relative to text with the buttons in the middle. (If you do nothing, the default alignment is flush left.) You can also change the spacing and borders of the image in this dialogue box.

Step 6:	To link the picture, the last tab labeled “Link” allows you to apply a link to the image. You can change whether there is a border around the picture to show that it is a link, as well as a “Choose File” option to navigate to the page or file that you wish to link to the picture.

Step 7:	Click "OK" and the dialogue box will close.

If you would later like to edit you image:

Option 1: Put your mouse over the image, click once to highlight the image, then clickthe "image" button again. You will get the same dialogue box, which you can now alter.

Option 2: Double click on the image and the dialog box will appear.

Hint: For faster loading time do not put large image files on your page. To learn how to Resize/Optimize your images go to: http://eportfolio.agnesscott.edu/tutorials.html#top

VII. Creating a Link

Overview: You will learn to make a link in your web page. One of the main features of the World Wide Web is a "hyperlink" which you click to go to another web page. To set this up, you will need the complete URL ("web-address") of the page you want to link.

Step1:
Type the words you will want to act as the link on your page. For example: Agnes Scott Webpage

Step 2:
Highlight those words with your mouse.

Step 3:
Click "Link" on the button bar OR go to the "insert" pull-down menu and click "link."

Step 4:

You will get a dialogue box with the highlighted words near the top of the box. The cursor will be flashing in the blank line in the middle where you should type in the URL where you want to send people.

Option 1: For our example, type the URL for the Agnes Scott Home Page: http://www.agnesscott.edu/

Option 2: You can link to an HTML in you E-port folder. Click “Chose File” and navigate to the other HTML file that you wish to link to

Step 5:
Click "OK" and the type you selected will be shown in underlined blue as an "active" link.

Reminder:

1) Do not type in the underlining yourself with the underline-format button. The "link" dialogue page will put in the blue underlining.

2) If you keep typing after setting up a link, the new typing might continue to show up in underlined blue, even though you do not want to make this another link. This appears to be a bug in NVU. To get around it, type a few words, then highlight the new text, click "link," make sure everything is blank in the http address space in the middle, click "OK" and the blue should turn off.

VII. Inserting a Table

Overview: You will learn how to insert a table into your web page. The "table" command is a good way to organize information clearly and legibly on your page. Tables can be inserted with or without borders.


Step 1:	Click the "table" button on the button bar (upper right) OR use the pull-down "insert" menu and click "table."

Step 2:	You will get a dialogue box that has a 6 x 6 square that you can use to choose your table dimensions by rows and columns (see image belowt).


Step 3:	For more options, click on the “Precisely” tab (see below, image 'b' ) for adjusting your number rows and columns, setting a border, and deciding what % of the window the table should fill (see below, image ‘a’). Hint: 50% is a good place to start.

	a.


	b.


Step 4:	The last tab is the “Cell” tab (see above, image ‘b’), which allows you to change the alignment of the table horizontally and vertically. You can also change cell padding, which is the distance between cell border and content, and cell spacing, which is the distance between the cells. Hint: To see examples of this, go to the tutorial “Cell Padding and Cell Spacing in Tables.”

Step 5:	Click "OK" and you will see the table with your chosen specifications appear on your screen

Step 6:	Now, type in the text for each block in your table. Put the cursor in the block in which you want to type and start typing.
Step 6:
Step 7:	To get more options for your tables, such as the background colors of individual cells or the entire table background color, the size, alignment, as well as the cell padding and cell spacing talked about before, you can change the Table Properties. *Option 1:* Hold your mouse arrow over the table, click the right button, and you will get a menu. Choose “Table Cell Properties” for the dialog box to change the options. *Option 2:* You can also get the dialogue box again by putting the arrow anywhere inside the table and clicking the "table" button.

Help Tips:

Reminder: Making a web page is not an exact science. Be patient and experiment. Don’t be afraid to ask questions; we at the TPS studio are here to help! (The TPS studio is open M-F, 8:30am – 5:30pm).

Calvin Burgamy x6059
Emily Gwynn x6313

DON’T FORGET!
The E-Portfolio website has guides to web design and creation, technology, and other helpful tidbits, so check it out if you need after hours help!

Want NVU ?
If you want to download NVU on your personal computer, go to http://etc.agnesscott.edu for instructions! Or if you are feeling confident: http://nvu.com

Save Your Work Often!!

For supplementary e-Portfolio tutorials we encourage you to go to http://eportfolio.agnesscott.edu/tutorials.html#top