Introduction to Nvu

Jing Fu

What is nVu?
Free web design and development tool
WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages

How to install Nvu

Free download
http://nvudev.com/download.php

PC User
nvu-1.0-win32-installer-full.exe

Mac User
nvu-1.0-mac.dmg Bug: After installation, please drag the file to Application.

How to set up FTP Info on Nvu

Make sure you have Nvu up and running.
Edit ==> Publishing Site Settings ==>New Site Enter your information:
Site Name : What ever you want your site to be called HTTP address of your home page : You may leave it blank. Publishing address: ftp://afs.msu.edu/web User name: NetID Password: ****** Check SAVE PASSWORD

Hit OK

How to set up FTP Info on Nvu

Test your publishing site setting by enter some text anywhere in on the screen. File ==> Save As If it asks you to enter a title, just type in 'testing'. Save it to your Desktop and name it - test (.html). Hit Publish Button in Nvu. Test to see that it upload correctly: www.msu.edu/~MSUNetID/test.html Do you see the text you wrote? Organize your webpages and files.
Create a folder on Desktop / My document.

Name it whatever you want

Make sure you put all the files for your site in that folder.

Tips for Layout

HEADER
On the top

NAVIGATION
Top or Left Simple text Graphic rollover image

CONTENT
In the middle

Getting started
Options
Table, CSS, Flash site, etc.

Getting Started
Table ==> 1 x 1 table Select the table ==>Table ==>Table Properties Edit table properties: Width: 100% Border: 0 (zero) Background color Go back and look at your screen Insert Header (text or images)

Getting Started
Essentially repeat the process to create Navigation and Content Move the mouse directly under the table Click Table ==> Insert ==> 1 x 2 (one row, 2 columns). Move mouse between the two tables Left click the mouse button.

Hit Delete (to make the two tables flush up together)

Edit the table (PRACTICE IT ON YOUR OWN LAPTOP)

How to format text in Nvu

General Text Format:
Text Bar on the top of the Window

Choose the desired color:

The colors in the box on the right are considered web safe colors.

Other formats:
Font size; Bold, Italic and Underlined; Bullets; Numeric indentation; Alignment; Font

Check Spelling

How to Create Links and Navigation in Nvu ATTENTION:

Home page ALWAYS starts with index. It will either be index.htm, or index.html. (default.html, default.htm)*

Highlight the text Click Link

Hyperlink; Certain Place within the webpage;email; Files (audio, video, doc, pdf, etc.) i.e. http://www.msu.edu/~MSUNetID/test.html

http://www.msu.edu/~MSUNetID/index.html

Window options

How to Work with Images in Nvu

Insert image: Image icon at the top Choose File ==>pick the image
After choosing the file, you'll see a preview of the image.

Enter alternate text: description of the image.

Edit the picture

Tabs on the top of the window Drag it with mouse

Make the image a link

Image ==> Link Boarders

How to Publish Webpages

Create a folder on your desktop After working on a page, Save the page. Make sure that the page is saved to your working folder. Publish ==>Page title

Practice
Set up Nvu Site Manager with your AFS space Make a homepage (index.html)
1. Header New background color; Any text you want 2. Navigation
four links: your e-mail address; MSU Homepage; .doc file, your test.html

3. Content Insert a picture, and a short bio

Resources
Free Image editor
GIMP (software) http://www.gimp.org/downloads/ Online Image Editor http://bighugelabs.com/flickr/

Layout Design
http://www.cs.brown.edu/cgi-bin/colorcomb

Previous interns websites

http://www.msu.edu/course/te/407/FS05Sec3/te407/stud_websites.htm

Questions for You.

How many pages will you need?
What pages do you want to have in the site?

What kind of Header and any images or

pictures you want to add?

Contact
Jing Fu Email: jingfu@msu.edu Office: 118 U, Erickson Hall