The Basics
of Web Page Construction using Nvu
You will need quicktime (a free application which works on Mac or PC) to view the movie examples of these directions.
Choose any of the following
steps or work through all of them:
-
Create a folder on your desktop or disk.
Be sure you put all images and webpages you create in this folder. It will
make your life easier, later.
-
Open Nvu: (If you don't have Nvu, it is
a free download at http://net2.com/nvu/. Do not click on the green download button but scroll down to be sure you download
the version for your computer)
-
Under FILE -"new" then choose
"A blank document" from the pop-up menu
-
Remember to save your file often, either
to your desktop or to a disk.
-
You should name your file something simple
with no spaces or odd characters and with the ".html"
extension
-
NOTE!: If at anytime you stop and save your
file, you may have trouble reopening it if you do not have a window open
in Nvu (a window will automatically pop open when you open the program).
If this happens, just quit Nvu, restart it and you can open your file then.
2. Adding a title Movie
Version
- Type a title for your page
- Highlight the title (usually by holding down the mouse and
dragging the cursor over the title)
- Center it (the lines toward the right of "Body Text",
middle bar on top of window)
- Choose a font (in "FORMAT")
- Choose a type size ( in "FORMAT")
3. Choosing colors Movie
Version
- Under FORMAT select "page colors and backgrounds"
- Click on "Use Custom Colors" - click (or maybe
right click) on the color next to the text or background you want to change
colors for
- Choose background color, Normal text color, Link color,
visited link color
- Don't be alarmed if you don't "see" these changes
on your page: Try saving your page and then going to FILE, "browse page"
4. Add your email address
Movie Version
- Where ever you want on your page, type in your email address
or an equivalent phrase (i.e. Contact Dr. Dixson)
- Highlight your email text
- Click on the link icon (chain link) on the top bar of the
window
- Type in "mailto: YOURADDRESS@holmes.ipfw.edu"
(for example: dixson01@holmes.ipfw.edu or another email address such as dixson@aol.com)

5. Create two to five subheadings
or category titles (the following are possible examples): Movie
Version
Remember you can highlight these and use the FORMAT to change the font, size,
style (underlined, bold etc.) and text color.
For COM 310:
- Unit One
- Unit Two
- Unit Three
- Family Research Project
- Unit Four
- Unit Five
- Unit Six
- Final Project
For COM 582:
- conclusion from literature
- qualitative method and results
- observational coding method and results
- survey method and results
- experimental method and results
For COM 512
Research paper:
Undergraduates
- Conclusions drawn from the literature
- Proposed methods
Graduate
- Conclusions drawn from the literature
- What I did
- What I found
6. Put a horizontal bar between
each category: Movie Version
- put cursor where you want the bar
- click on INSERT (top menu bar) and "horizontal line"
- double click (or right click) on the bar for a drop down
menu to change the width, thickness etc. of the bar (always have the bar as
a percentage of the window so it adapts to the screen of the viewer)
7. Place an anchor in front of
each category title Movie Version
- highlight the category title or subheading
- click on the image of the anchor in the menu bar at the
top of the Nvu window (or you can go to INSERT and "named anchor"
to get the same results)
- click "ok" for title (or you can change the name
of the anchor if you like)
- do this for each category title

8. Create an internal navigation
bar (to make it easier for your readers to "jump" to the part
of the page they want) at the top of the page Movie Version
- type text for each category or subheading across the top
of the page (can use the same subheadings you just put on the page)
- highlight an individual category in that navigation bar
- click the link on top navigation bar
- if is not already showing, click on arrows to right of bar
for name
- select the one you want
- click "ok"
9. Add a graphic Movie
Version
- first find a graphic (unless you already have one saved
to disk or desktop):
- download it and save it to the disk or desktop folder you
created earlier (to download, click on the image and hold (or right click
for pcs) until a menu comes up. In that menu choose, save as an image or picture
file)
- BE SURE THE IMAGE IS SAVED TO THE SAME FOLDER AS
YOUR WEBPAGE BEFORE YOU INSERT IT INTO YOUR WEBPAGE!
- back on your page, put your cursor where you want the image
- click on insert image (or the image icon on top Nvu menu
bar)
- In the drop down menu, do the following:
- click on "choose file" to find your image
(on your disk or desktop)
- double click on image file (or click "open")
- you can supply alternate text - a name for the image
for those systems who "speak" the page
- check the box which state "URL is relative to page
location"
- at this time you can change the dimensions etc. by using
the file tabs within the drop down menu
- click "ok"
- if you need to resize your image - the easiest way is to
"grab" the lower right hand corner and move it toward or away from
the center of the image, that way you keep the proportions of the image the
same.
- REMEMBER: you must upload this image separately
when you upload your webpage
10. Inserting other links Movie
Version
- type in the name of a page you want to add a link for, i.e.
IPFW's home page
- highlight the text you want to link
- click on the "link" icon on the bar
- type in the URL address, remember to put in the entire address,
i.e. http://www.ipfw.edu
- click "ok:"
11. Uploading your page and images
into your webspace
You may use any webspace you choose
To use your IPFW webspace, follow the directions under "How
to Access My Webspace" on the ITS
webpage (it's a good idea to print this page so you have it as you proceed)
- these directions tell you to do the following:
Either: If you are using a campus
student-access lab Windows computer: you will have a I: drive
containing your Web space in the form of a folder named for your username.
Files can be copied, deleted, edited, etc. as you would in any other folder.
Or If you are uploading your files from home
or another place not on campus use the Web-based interface Movie
Version
- Go to: https://my.ipfw.edu/
- You will be asked for your network (i.e., student-access
lab) username and password.
- To access your web folder from my.ipw.edu:
• Click the 'My Files' button in the right corner or the "My
files" folder on the left navigation bar to access your files.
• When you Click the <My Files> button, you may see a folder
called "All folders", when you click this you should see a folder
named 'Home'. (This is the same as your Personal drive space. Files put
in this folder are stored but NOT on the web).
• Click the word 'Home' to open your personal space.
• Click the 'Web' folder to open it. (You must open
the web folder before uploading any files into it. - If you find you do
NOT have a "web" folder - click on "Create folder",
name the folder "web" and then proceed to open it.)
• You will see any files you have stored in your Web folder.
• Now, you can upload files your by clicking on the "Upload"
button and choosing the files you wish to upload.
• remember to upload each image separately as well
as your webpages (don't upload the folder).
- Now, email your URL (which is http://www.student.ipfw.edu/~
yourusername/yourfilename.html) to me so I can add it to the webpages
page
-
IF YOU HAVE A FACULTY/STAFF ACCOUNT, YOU NEED TO:
-
-
click on "my files" (left
navigation bar)
-
-
-
-
click on your name (if you don't have a folder
her with your name - call ITS and tell them you need one)
-
upload your webpage (there is an upload button
across the top that will allow you to choose your files - remember
you have to upload your images separately).
-
Your URL will be: http://users.ipfw.edu/yourusername/yourfilename.html
12. To edit your pages: Movie
Version
- Open them on the web (in Nvu) by going to FILE - "open
web location" and putting in your URL, then hit enter.
- Create a folder on your desktop: save your webpage and any
new images you want to add into that folder
- Make your changes
- Save to disk or desktop folder: DO NOT CHANGE THE
NAME OF YOUR WEBPAGE (if you do, the URL you sent me earlier will
no longer work).
- In your IPFW webspace (your ilogin web folder - See Step
11 above), delete the old page.
- Upload your new page (see 11. above)
- Your uploaded webpage should be similar to the following
example (example is for COM 310 - substitute appropriate headings for other
courses).
My example
13. Writing for the web
- Stuart Blythe of the English Department at IPFW has some
wonderful tips on how to write for the web, I recommend you check them out:
Writing
for the Web
