Design and Development of Websites using Open Source Software - NVU

Dr. M. N. Reddy, Dr. N.Sandhya Shenoy, and Sh.K.V. Kumar

This is an open source free web authoring software that runs on Windows, Mac and Linux platforms. The application combines easy to use graphical interface with web file management and web page editing features. It is especially ideal for non-technical users who do not have basic knowledge of web programming languages like HTML. Thus computer users can create professional-looking and attractive web pages and web sites without knowing web coding. NVU has the same easy-to-use features that are found in popular HTML editors like Dreamweaver and FrontPage. While many web coding applications will expect the user to know HTML or other web coding languages like Cascading Style Sheets (CSS), NVU is unique in that users create web pages using a word processor by typing and then publishing the pages to a website by simply saving the edited document.

Usable For Beginners and Advanced Web Development Professionals

The application of NVU is especially appealing to students, marketing professionals and general businesses. Despite its wide appeal among the novice web designers, experienced web programmers will also find it very convenient since it will help save them time in creating basic web content and making everyday web designs. The application has 2 tabs where a designer can toggle between the HTML code mode and the editing mode. It thus proves to be very useful tool to anyone wishing to learn coding in HTML since the HTML code mode will show how the HTML code interacts with the final output to be displayed in the web browser. Above all, this software is ideal for quickly creating web pages

When creating forms and tables in NVU, a user will find it much easier and enhancement options are plentiful. In addition, when using templates, one has more customization options available and the entire web site will reflect much of the owner’s ideas. Originally started from the composer code base by Mozilla, which later split to distinct email and browser functionalities, NVU has moved ahead and added more features to the original code, improving its functionality. Thus the framework of NVU is fairly stable as is evidenced by the improving capabilities of the Mozilla Firefox browser. Time will tell if the advancement of Web 2.0 and other web platforms will see the acceptance of NVU as a professional web authoring software.

1

Converting Word Documents into HTML format

1. Click on START 2. Select PROGRAMS 3. Select Open OPEN OFFICE.ORG 2.4 4. C

So5. C6. C 7. Se8. C

E9. C

lick on OpenOffice.Org Writer to activate the Open Source Word processor ftware which is an equivalent software to MS Word

lick on File Menu lick on the Open

lect OBJECTIVES word file from the NVUWEBDEMO folder lick on OPEN to open the selected Word File in the Open Office Writer nvironment lick on SAVE AS option from the FILE Menu

2

10. Select the File Type As HTML DOCUMENT [OpenOffice.Org Writer][.HTML] format to save the opened file into HTML Format

11. Select CLOSE option from FILE Menu to Close the above opened file. 12. Similarly , covert all other word files in to HTML format using this Open

Office.org Writer Organization of Data 1. Under NVUWEBDEMO folder create two folders namely _PRIVATE and

IMAGES 2. Once all the document files are converted into HTML formats all the Word

documents are to be shifted into _PRIVATE Folder and 3. All the IMAGES are to be shifted into IMAGES folders 4. Similarly, if any other formats of data is available like Audio and Video create

those folder and kept the respective files in the respective folders.

3

Creating Web Sites Using NVU NVU is free software available for Windows, Mac, and Linux platforms. This NVU allows to edit and create websites easily . Don't use NVU for editing dynamic web pages (those pages may have extension with .php, .jsp, .asp, or .cfm). Use it only for editing .html web pages. Editing dynamic web pages in NVU will erase any non-HTML programming. But one create dynamic web pages outside environment of NVU and use them in the NVU 1. Activate NVU software

Confi

guring Nvu Before use, NVU has to configure i.e what is the home page and how to connect to server (ftp)

1. Click on the EDIT menu 2. Select PUBLISHING SITE SETTINGS option. Then PUBLISHING

SITE window is displayed as shown below

4

3. In the above window type NVU DEMO WEBSITE as the Site Name. This site name field is only for web site developers reference

4. Click on the WEB SITE INFORMATION box . 5. In this, HTTP address of your homepage, enter the URL of your

website 6. In this case type http://192.168.40.*** /index.html 7. Click on the PUBLSIHING SERVER address box 8. In this , you’ll need to enter your website’s “FTP address”. 9. For this example type ftp://192.168.40.***/nvudemo .) 10. Click on OK to create site

How-to Create a FTP folder i.e NVUDEMO

11. Activate the DESKTOP 12. Right Click on the MYCOMPUTER Icon 13. Select MANAGE option 14. Expand SERVICES and APPLICATIONS Option 15. Expand INTERNT INFORMATION SERVICES option under

SERVICES and APPLICATIONS 16. Expand FTPSITES option 17. Select the DEFAULT FTPSITE 18. Right on the DEFAULT FTPSITE 19. Select NEW option 20. Click on the VIRTUAL DIRECTORY option. Then Virtual Directory

Wizard window is displayed 21. Click on the NEXT 22. Type NVUDEMO as the alias name 23. Click on the NEXT 24. Click on the BROWSE button to select the PUBLSIHNG Folder 25. If the folder is not existing select the a DRIVE name 26. Click on the MAKE NEW FOLDER option 27. type new folder name As NVUDEMO 28. Click on OK the selected folder with path is displayed on the window 29. Click on the Next

5

30. Click the WRITE permission 31. Click on the NEXT 32. Click on FINISH

Testing the Site Publishing Server

1. Activate NVU 2. Click on the FILE Menu 3. Click on OPEN option 4. Select OBJECTIVES.HTML file from the NVUWEBDEMO Folder 5. Click on OPEN to open this File in NVU environment 6. If the source code of this page to be viewed click on the SOURCE TAB 7. Only HTML tags wants to view click on the HTML TAG tab 8. To preview this page on the Browser , Select BROWSE PAGE option from

the FILE Menu 9. For publishing this page on the server Select PUBLISH option from the File

menu

6

10. Click on the PUBLISH . Then Publishing will be started and once the

Publishing this page is completed the following window is displayed 11.12.

Cre 13.14.15. 16.17.18.19.

Click on CLOSE to close the Publishing Similarly Open other html files i.e Introduction, Land Degradation Index, Sustainable Agriculture, Strategies, Indicators, Sustainable Development etc., independently and publish those files Once publishing activity is completed close this option.

ating a Simple Page in NVU

Activate NVU Click on INSERT Menu Click on the TABLE option . Then the following window is displayed.

S T R S

elect 3 Rows and 3 Column by blocking the above cells and Click o merge the First column second and third rows cells , Block these cells ight Click on theses Cells elect JOIN SELECTED CELSS option

7

Inserting Images

1. Position the Cursor in the merged cells 2. Select IMAGE option from the INSERT Menu

3. Click on the CHOOSE FILE option 4. Browse for a Image from the NVUWEBDEMO folder 5. Type TOOL TIP as CLICK HERE 6. Type the Alternate Text as SUSTAINABLE AGRICULTURE 7. Click OK Then the picture is displayed as shown below

8. Fill the cells in the table as shown below

9. Save this file as INDEX.HTML 10. Then Publish this file as did earlier. 11. After Publishing close this file

8

Creating FRAMED Pages NVU doesn’t support Frames Pages. Hence it is not possible to create Framed pages in this NVU environment. It solve this issue by using HTML code create Framed Pages and use those framed pages in the NVU

HTML Code for Framed Pages <html>

<head> <title>

Sustainable Agriculture </title>

</head>

<frameset rows="25%,*"> <frame name= "top" src="Top.html">

<frameset cols="25%,*"> <frame name="content" src="Content.html"> <frame name="display" src="Display.html"> </frameset>

</frameset> <body> </body>

</html>

1. Activate NOTEPAD Program 2. Type the above HTML Code in the NOTEPAD and Save this page as

Main.html 3. Close the NOTEPAD Program 4. Observe the above code three HTML Pages namely TOP.HTML,

CONTENT.HTML and DISPLAY.HTML are included in the Code. Hence those three file has to create in NVU Environment

5. Activate NVU Program 6. Select NEW option from FILE Menu 7. Type the Institute Name say “ NAARM” in full form 8. Apply the Desired Format for the Text 9. Click on the SAVE Icon 10. type file as TOP.HTML 11. Then Publish this file 12. Similarly Create DISPLAY.HTML page and Publish Creating Contents Page 13. Select NEW option from FILE Menu 14. After inserting Table Type the Contents as shown below

9

Creating Hyperlinks 15. Block the Word INTRODUCTION 16. Right Click CREATE A LINK Option

10

17. Click on the CHOOSE option 18. Select INTODUCTION.HTML File 19. Click on OPEN and 20. select the option as shown above 21. Click OK 22. Similarly create other links 23. To view the Source Code Click on SOURCE Tab then the source code is

displayed as ahown below !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>New Document</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <base target="display"> </head> <body> <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><a href="objectives.html" rel="tag friend co-worker co-resident parent">Objectives</a></td> </tr> <tr> <td><a href="introduction.html" rel="tag friend colleague co-resident parent">Introduction</a></td> </tr> <tr> <td><a href="land_degradation_index.html" target="_blank" rel="tag friend co-worker co-resident parent">Global Crisis</a></td> </tr> <tr> <td>Sustainable Agriculture</td> </tr> <tr> <td>Sustainable Development</td> </tr> <tr> <td>Strategies</td> </tr> <tr> <td>Indicators</td> </tr> <tr>

11

12

<td>Email</td> </tr> </tbody> </table> <br> </body> </html> 24. Before closing the HEAD Tag type the Tag as shown bleow 25. <base target="display"> 26. it means that each and every link will be displayed in the Display page 27. Then Save this file and Publish