0. Basic Set-up

• Create a folder on the desktop (use your name if you like).
  
• Start a word doc, save it to the folder.
  
• Surf the web for some links on any topic of interest, copy paste 4 or 5 urls into the word doc.
  
• Download the new Mason logo to your folder.
  
  • put cursor over image
  • right click on mouse
  • select save as
  • select your folder on the desktop
  • click save

1. Create a table to have a header across the top.

• Open NVU.
• Put the cursor in the top left corner.
• Select the table icon.
• Select the Precisely tab.
• Put in one row, one collumn, 650 pixels, and border 0.
• Click OK.

• Once you have the table, put the cursor in the table and click the table icon on the toolbar again.
• Select the cell tab.
• Select a color by clicking on the box next to "background color" (a green might go with the Mason logo we'll put in later).
• Under "content alignment" select middle and center.
• Click OK.

• Put the cursor back in the table.
• Hit enter twice to create some space.
• Type in a title for your page (again, you can just use your name for now).
• Hit enter again for some more space.
• Highlight the text and hit the A^ icon to increase the size of the text.
  • Click file from top left corner.
  • Select save.
  • A little dialogue box appears for the title (which goes across the very top of the page)
  • Enter the name you'd like (Jim's Web Portfolio, for example)
  • When the save as box appears, select your folder on the desktop.
  • Type index.html in the dialog box
  • Click OK.

2. Create a table with two cells for a links bar on the left and a main table on the right.

• Put the cursor in the top left corner under the first table.
• Select the table icon.
• Select the Precisely tab.
• Put in one row, two collumns, 650 pixels, and border 0.
• Click OK.

• Once you have the table, put the cursor in the table cell on the left and click the table icon on the toolbar again.
• Select the cell tab.
• Select a color by clicking on the box next to "background color" (maybe yellow).
• On width put in 150 pixels.
• Click OK.

• Put the cursor in the left table, hit enter once for some space.
• Type in names for various pages in your site (might start with home or main, then week 2, week 3, week 4, etc. for responses and then links) and hit enter after each one.
• Highlight the text and make it a bulleted list by clicking the icon in the toolbar.

• Enter down to create some space.
• Space bar over and line up the cursor with your bulleted text above.
• Click the link icon in the top tool bar.
• Type your name in the top line under text.
• Type in mailto:your-email-address into the second line under location.

3. Insert content into main table.

• Put the cursor in the top left corner of the second table on the right.
• Select the table icon, cell tab, and then "top" under vertical alignment, if necessary.
• Enter down to create some space and line up the cursor with your bulleted text in the left table.
• Select the indent text icon from the toolbar.
• Type in a short page/site description (just freewrite to get some material in the space).

• Enter down to the bottom.
• Select the indent text icon from the toolbar and place the cursor about 3/4 the way to the right corner.
• Select the image icon from the toolbar.
• Browse for your folder on the desktop.
• Select the gmu logo.
• Type in GMU logo in the alternate text.
• Click OK.

***WARNING: When you browse to select an image, NVU creates a path to that folder and image on the desktop. When you upload the page this link won't work because the file and image are no longer on the desktop. If your html file and image file are in the same folder (both on the desktop and on the web), all you need to do is type the filename of the image (gmulogo.jpg, for example) into the dialog box. See the HTML Tutorial for more explanations of links.

4. Once the page looks satisfactory, save it again.

• Select file from top left corner.
• Select save.

5. Repeat this process to create a second page.

• Instead of entering a course description into the main table, create a bulleted list.
• Add in the links you gathered earlier.
• Create different link categories if necesssary.
• Select "home or main" from your bulleted list in the left table.
• Click the link icon and make the text a link back to the index page.
• Put index.html in the destination box.

• Once this page is satisfactory, save it to your folder as links.html.
• Go back to the index page.
  • In NVU select file in the top left, then open file.
  • Select the index file in your folder.
  • Click open.
• Select "link" from your bulleted list in the left table.
• Click the link icon and make the text a link back to the links page.
• Put links.html in the destination box.

6. Continue experimenting.

• Once you have two pages going and linked together, explore the program and try things out.
• For example, you can set the default link colors:
  • Select format, and then page colors and background.
  • Select use custom colors.
  • Click on the color boxes to select various link colors.
  • Click OK.
• Look over the NVU Tutorials from the Resources page for more possibilities.
• If you do something weird or that doesn't work, you can always select Edit, Undo.
• If you have questions, flag me down.

<< Back to Syllabus