How to use a template with NVu html editor.

Exercise in getting a template and using it with NVU

1- Try this Website Template from Open Source Web Design

 http://www.oswd.org/design/preview/id/3514

2- Get NVu for free from:

http://nvudev.com/download/nvu-1.0-win32-installer-full.exe

NOTE: Kompozer has taken over the development of the NVu project. You can download Kompozer for free at:
http://www.kompozer.net/download.php

Once it is downloaded, just double-click on the file to unzip it. Open the folder and double click on the kompozer.exe filename which will start the program.

 Once open, choose from the menubar File, Open then browse to the location where you unzipped the CoffeeNCream Template and choose the index.html file.

Kompozer should display the page so that it looks like it looked when you visited the download link above. 

But now you can change the page and save the changes. NVu has a built-in help system if you get stuck at some point. Click the Normal tab at the bottom of Kompozer window. This puts it into edit mode.

TRY This:

Click on the Coffee N Cream name in the header. You can type your own site name into this area now. You can delete the text that is there. Pretty simple! Change the size or color of the text as you choose.

There are 5 links in the horizontal bar below the header. They have built-in rollover effects. Move your mouse over them and watch as they change.  You could use these to direct users to Sections of your site or even to another website. Or you could, of course, delete the text and the visitor would never know that the links were there.

The right side column contains 3 groups of links that could also be used to link within your site or to webpages elsewhere. They have built-in rollover effects.

You can type over the text of these links just as you did on the header. But now is when you need to understand how the anchor tag works so that you will be able to change them to go to the location that you want the visitor to be taken.

So click the Source tab at the bottom of the NVu window and you can scan the html code that produces the page. Scroll down the page to line 20 where you see Navigation.

The anchor tag reads like this: <a href="index.html">Vestibulum</a>

Whatever page is put between the quotes is where the visitor will go after clicking on Vestibulum.

Whatever you put between the tags will show as the text link to be clicked in the webpage.

Try this:

change index.html to http://google.com and change Vestibulum to Google. Click the Preview Tab to see that the change to Google is showing. Clicking the link inside NVu wont work to display Google. But if you choose from NVu menu, File - Browse Page, it will open  your browser and display the changed page there. It will ask to Save the file before it displays it so that your changes will be shown.

OK, but right now there is only the one page in our site. We have links that can be setup easily to other pages but there are none. So one idea is to use this index.htm and create an empty page template. We keep what we want to appear on all pages and remove the rest.

Moving a little further: Adding Pages and Navigation.

Just mark the text in the lighter, main area and delete it. Now save the page as pagetemplate.html. When you are ready to create the next page, open that file and save it as page2.html. Put in the content area a new title for that page and continue to add whatever text you had for the page.

 Now is when you can do some advance planning and if you know what pages you intend to have, you can create page names and then create links to those page names into index.html BEFORE you make your page template. By doing that all the other pages will already have the navigation links to the other pages.

 If you don't know the exact page name you intend to create, you could make links to Sections of your site or just to page1.html, page2.html, etc. Then you could just add stuff later to each page and you could rename the pages and the links as appropriate.

The REAL purpose of this exercise is to show how a template can make it easier and faster to setup a small site that looks nice and to get done quickly. Remember that a website is a work-in-progress so you may never be "done" with it.

I hope that you have fun with it.

John