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 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: 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; ; Files (audio, video, doc, pdf, etc.) i.e. 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 address; MSU Homepage;.doc file, your test.html 3. Content Insert a picture, and a short bio

Resources 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?

Contact Jing Fu Office: 118 U, Erickson Hall