1 / 50

Comprehensive Nvu Tutorial for Creating Your First Website

This tutorial guides you through the process of using Nvu to create your first website. Starting from the installation of Nvu, you'll learn to set up your project folder structure in the public_html directory, save webpages with proper naming conventions, and insert text and images. Follow step-by-step instructions on formatting elements, creating tables, and linking pages. By the end, you'll be able to upload your completed website to a server and view it in a browser.

adora
Télécharger la présentation

Comprehensive Nvu Tutorial for Creating Your First Website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Nvu (N-view) Tutorial Linspire Inc.Began as Mozilla Code with Additional Features AddedFree Download: http://nvu.com/download.php

  2. PC Lab: Start, My Computer, Navigate to the Drive (I) Inside of your public_html folder Create a folder called website1 Name all folders, webpages, & graphics with all lowercase letters, no spaces, & no special characters. All folders, webpages, & graphics are to be saved inside of the website1 folder.

  3. Launch Nvu • (PC) Bottom Left Select • Start>All Programs>Nvu Folder>Nvu Icon Nvu Start

  4. File>New or File>Open File If Needed

  5. File>Save As • Navigate to the (I) drive • Navigate to the public_html folder • Navigate to the website1 folder you created. • Inside of the website1 folder save your main homepage as index.html

  6. View>Show/Hide Tools Checked

  7. Format>Page Title & Properties

  8. Format>Page Colors & Background • Reader’s default colors standard setting

  9. Format>Font>Ariel

  10. Format>Size

  11. Format>Text Style

  12. Format>Text Color

  13. Select Desired Color & Value

  14. Insert TableOr Table Icon

  15. Table Layout Example 1 Row & 2 Columns 1 Row & 6 Columns 1 Row & 2 Columns

  16. Highlight Cells & Table>Join Selected Cells

  17. Example of Joined Cells

  18. Example of Using Cells to Organize the Layout

  19. Highlight Text

  20. Format>Font>Ariel

  21. Highlight Desired CellsFormat>Table Cell Properties

  22. 0 Select Table Tab, Background Color Selected, OK, Apply, OK Border Changed to 0 hidden

  23. Adding Graphics to Your Webpage • Be sure your graphics are saved to your website1 folder (.jpg or .gif) public_html website1 student.jpg logo.gif index.html reading.html math.html

  24. Add a Logo Click in the Desired Cell & Select the Image Link Icon or Insert>Image I

  25. Location Tab, Select URL is relative to page location, Choose File ALT Tag or Alternate text name the graphic for auditory reader use OK

  26. Highlight Navigation Cells,Format>Table Cell Properties Table Tab, Change Background Color if Desired

  27. Highlight Title, Format>Size, XX-large

  28. Adding a Graphic: Click in the Desired Cell, Insert>Image I

  29. Images Must be in Your Website Folder Check URL is relative to page location Choose File to Locate Select Alternate text radial button & describe for auditory readers .jpg or .gif images OK

  30. Select Image & Alignment, Add Body Text

  31. Adding Cell Background Colors, Highlight Navigation Cells

  32. Format>Table Cell Properties

  33. Highlight Link Name,Insert>Link

  34. Enter the Link Location (Name of the Webpage)

  35. Underlined Link is Now Active

  36. Repeat For All Navigation Links

  37. Highlight Navigation Cells,Align Center

  38. With the Main Homepage Open File>Save As index.html

  39. File>Browse Page to Preview

  40. In the Browser WindowTest the Links & Close

  41. Change the Title, File>Save As, New Name: reading.html

  42. Change Page Title, File>Save As New Name

  43. Example of Web Page Naming Conventions index.html reading.html math.html science.html All Lowercase, No Spaces, No Special Characters

  44. E-mail Link: Highlight Text, Link Icon

  45. mailto:jholland@emporia.edu

  46. External Link to URL Website Address, Highlight Text, Link Icon

  47. Add Full URL Website Address to Link Location

  48. Finished Website

  49. <HTML> Source Tab selected at the bottom of the window to view the HTML code generated. Select the Normal Tab to return to the Design View.

  50. Upload All Files to Your ESU “My Files” Web Server Space index.htmlreading.htmlwriting.htmlmath.htmlscience.jpglogo.gifgraphic.jpg

More Related