Introduction to Nvu by m4wjcchL


									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

PC User

Mac User
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:
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
 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:
 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
On the top
Top or Left
Simple text
Graphic rollover image
In the middle
            Getting started…
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
Move mouse between the two tables
Left click the mouse button.
Hit Delete (to make the two tables flush up together)
   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

Other formats:
 Font size; Bold, Italic and Underlined; Bullets; Numeric
indentation; Alignment; Font
Check Spelling
 How to Create Links and Navigation in Nvu
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.)
      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
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
 Set up Nvu Site Manager with your AFS
 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
Free Image editor
GIMP (software)
Online Image Editor
Layout Design
Previous interns’ websites
   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?
Jing Fu
Office: 118 U, Erickson Hall

To top