Creating a Web Page with N-Vu

If you want to use a different web page editor, you are welcome to do so, such as Dreamweaver, Front Page, etc. )

NVU is a free open source and you can download the program by doing a google search. Hint; do not download from the nvu.com site.

 

Some items to keep in mind prior to starting


I. Creating the work


1) Open N-Vu – a blank document will be created. Set the title of the document by going to the Format menu and selecting “Page Title and Properties”. Add a title; the other information is not necessary.

Step 1

Click on Format>Page Title and Properties...

Step 2

Page title is what will appear on the top of the browser window. In the example above, the page title is "Dr. Chang's Homepage."

 

 

2) Saving your work, create a folder and save all of your work in that folder, example, you can have a folder labeled 'public_html.' Once you have a folder, go and save your file. If this is your first page, you should use “index.html or index.htm”. Other file names should be relatively short with only letters and numbers (some things to keep in mind regarding file names, 1. do not use spaces in your file name and do not use uppercase your file name).

 

3) Add text to your page by clicking, typing and formatting (just like a word processor). To change the background color select Format and Page Colors and Background. Select “Use custom colors” and click on the swatch for background.

Step 1

Format>Page Colors and Background...

Step 2

 

Click on the radio button Use custom colors: and from there, you can select on the Background and that will bring up a color palate and you will need to choose a color. Now, your background has changed colors.

 


4) You can add tables for more formatting options (e.g. two columns). Click on the Table button (or Insert menu: Table…). Select the number of rows and columns. If you want an invisible table, click on the Precisely tab and set the Border to 0 (zero – table will show up as red line which will not be visible in a browser). Try not to change the table size by dragging the table.

If you want to edit the table, either double click on the table and the table edit menu will appear or you might want to control>click on the mouse to have some additional options such as inserting or deleting columns and/or rows.

Step 1

Insert>Table...

Step 2

Select the type of table that you want, the example above is a 5X3.

Step 3

The table above is a 5X3

 

Step 4

Once your table appears on your document, double click on the table and a different menu will appear similar to the above image. Once this image appears, select the Table tab and keep a few things in mind. 1. Next to Height, leave it blank. 2. Next to Width, it should be 100 and next to both, it should be % of window.

If you want your border to be invisible, it should have the value 0 and if you want you border dark, you will need to place a larger value.

 

5) To make a link, set your cursor in the correct location and Insert menu: Link…. Type the text to display the link and enter the URL for the location to link to. For a link to another page in your site only include the folder an file names (e.g. “nextpage.html” a relative link). For a link to another site, include “http://” and the full URL (and absolute link).

 

6) To add a picture, you need to find a picture and save it as a separate file (e.g. mypict.jpg). Put this picture into the appropriate location in your web site. This could be in the same location as your html page, or in a folder called “images” or “graphics”. Then select Insert menu: Image…. For Image Location click on Choose File and select your image. You can set many properties of your image using this window (you can recall this window by double-clicking on any picture in NVu). To make your picture a hotlink, choose the Link tab and enter a URL for the file to link to (either a relative or absolute link).

 

Step 1

 

Insert>Image...

 

 

Step 2

d

Click Choose File...

Step 3

d

Locate your file

 

 

7) Save your work (often) and take a look at what it looks like in a browser by clicking on the Browse button.


8) Uploading to the site? TBA – when you are ready copy all your files to their same relative locations on your udrive in the folder public_html

To create an e-mail link, you will need to type in the text field, "mailto:tae.chang@csun.edu).

Some Web sites that will be of assistance, http://flamingtext.com/, http://www.animfactory.com/, http://www.google.com/ (and select the image icon).

In this assignment, you will have.

A homepage saved as 'index'

Text on the index page should include information about you, your teaching philosophy, this class and more. On your portfolio page, you should have a thorough description of each of the assignments.

Three graphics from the Internet on each page, and

Hyperlinks, 1) linking all of your pages and 2) email.

Hints: your file name should all be in lower case and you should not leave a space between any file names.  (examples of a good file names, "index," "daily_notes," "teaching_philosophy," and etc.)

Some recommendations to make your pages look outstanding, font, background, tables and etc.


II. Server, using Geocities, feel free to use any host such as CSUN or another

Go to Geocities.com and sign up for a free account.

After you have sign up for an account, you will see a page that looks similar to the following...

once you see a page similar to the one above, click on Build your web site now! (keep in mind that you have already built your site, you are now ready to upload your work.)

 

Once you see this page, there are a few tabs across the top, you will want to select the Manage tab.

 

 

Once you are in the Manage section, you will want to select Easy Upload

 

Once you select easy upload, then the following page will appear and it is similar to sending an email attachment. Here, you will want to select Browse... and then locate your file and then hit the Upload Files button. Go to your site to see your work. To find out your web address, type in http://geocities.com/userid. (whatever your userid is for geocities or yahoo, that is what you would place instead of userid)

 

 

 

 

Items to keep in mind...


Opening up a NV-U page

Please keep in mind that you will not be able to open your public_html folder and click on your file, (ex., index.html or portfolio.html) and expect it to open where you will be able to edit or work on. Instead, you will need to open up NV-u and then go to file and open. Then choose your file and it will open the file in NV-u where you can work.


 

If you go to your web site and it states 'forbidden' (if using CSUN as your server)
click on this link


If your ASSIGNMENT comes up 'forbidden,' complete the following... (if using CSUN as your server)

 

-If your Web site works (you are able to view your homepage and portfolio page), but the assignment links from the portfolio page doesn't work, you will need to do one of the following.

Option 1...

  • open up your udrive and get to the screen that has your assignment(s). Once you see your file, drag that file from your udrive onto your desktop. It should make a copy to your desktop. Now, you should have the same file in two locations, on your desktop and on your udrive.
  • Click on the file that you recently dragged on to the desktop once and then go to 'File' and choose 'Get Info.'
  • Click on the triangle next to 'Ownership & Permissions.' The triangle should be facing down.
  • You will see another triangle next to 'Details' and that triangle also needs to be facing down. Now that both those triangles face down, look where it states 'Access'
  • If next to access, it states 'No Access,' then click on the drop down menu and change the setting to 'Read & Write.'
  • Once you have change the access, you will want to get the file that is on your desktop and drag it over to your udrive and drop the file where the exact same file is located. Once you drop this file, it will ask you if you want to replace, because it contains the exact same file name and you will select 'Replace.'
  • Go to your portfolio page again and hit 'Refresh' or 'Reload' and check the link. It should be working now.

 

 

Option 2...


-If you complete an assignment from another computer and then
want to place it into your u-drive, please do the following...

 


Backing up your work

Keep in mind that you will always want to save your new work over the older version

When you back up your work from the u-drive to your storage device, no problem, simply open up your u-drive and open your public_html folder. Keep your public_html folder open and open your storage device. You should have two windows open, public_html folder and your storage device and select any or all assignments from your public_html folder and drag them onto your storage device.

 

When you back up your work from your storage device to your u-drive, you will need to make sure NOT to have your userid on the window. Instead, when your userid is showing, go inside your public_html folder and if public_html is on top of the window, then it is ok to move your work from your storage device to your public_html folder.

 

NVU- PC and NVU-Mac