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. Click on OpenOffice.Org Writer to activate the Open Source Word processor Software which is an equivalent software to MS Word 5. Click on File Menu 6. Click on the Open

7. Select OBJECTIVES word file from the NVUWEBDEMO folder 8. Click on OPEN to open the selected Word File in the Open Office Writer Environment 9. Click 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 nonHTML programming. But one create dynamic web pages outside environment of NVU and use them in the NVU 1. Activate NVU software

Configuring 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. 2. 3. 4.

Activate NVU Click on the FILE Menu Click on OPEN option Select OBJECTIVES.HTML file from the NVUWEBDEMO Folder

5. 6. 7. 8.

Click on OPEN to open this File in NVU environment If the source code of this page to be viewed click on the SOURCE TAB Only HTML tags wants to view click on the HTML TAG tab 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. Click on CLOSE to close the Publishing 12. 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. Creating a Simple Page in NVU 13. Activate NVU 14. Click on INSERT Menu 15. Click on the TABLE option . Then the following window is displayed.

16. Select 3 Rows and 3 Column by blocking the above cells and Click 17. To merge the First column second and third rows cells , Block these cells 18. Right Click on theses Cells 19. Select JOIN SELECTED CELSS option

7

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

3. 4. 5. 6. 7.

Click on the CHOOSE FILE option Browse for a Image from the NVUWEBDEMO folder Type TOOL TIP as CLICK HERE Type the Alternate Text as SUSTAINABLE AGRICULTURE 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 Sustainable Agriculture 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"> New Document Objectives Introduction Global Crisis Sustainable Agriculture Sustainable Development Strategies Indicators

11

Email
24. Before closing the HEAD Tag type the Tag as shown bleow 25. 26. it means that each and every link will be displayed in the Display page 27. Then Save this file and Publish

12