Introduction to Nvu by m4wjcchL

VIEWS: 16 PAGES: 17

									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

								
To top