Create Web Pages Using Nvu

Updated on 01-Aug-2007
Break free templates… without working too hard!

With blogs, you don’t always have complete freedom to design your pages the way you want them to be-you typically end up choosing one of the themes available. Of course, a hundred other bloggers have chosen the same theme, and when you land upon a blog that has the same theme as yours, you suddenly feel smaller, less unique…

Let’s look at Nvu, a free, open source WYSIWYG Web designing software. (What You See Is What You Get means pretty much that… that the final result will look just like what you’re seeing while you’re going about designing it.) Nvu is based on Composer from the Mozilla package. It’s a free download from www.nvu.com.

STEP 1. Set Page Parameters
Before you start, remember to place all the files you create in one folder so as to avoid hyperlinking problems between pages and images.

A blank page comes up when you first start Nvu. You first need to set up the basic parameters for the page you’re going to create. Select Format > Page Title and Properties. If you don’t enter the title of the page here, the default title or no title at all will be displayed in the browser’s title bar.

To change the basic colour parameters for the page, choose Format > Page Colors and Background. Here, click the “Use custom colors” radio button and select the colours you want to use for various types of text such as active links, visited links, link text, etc. on the page.

STEP 2. Add Visuals To Your Page
Most of the text formatting and styling that you might do in Nvu is similar to doing it in any word processor, so we don’t need to tell you much. But for any kind of appeal, you need the visual element. To add images to your page, select Insert > Image. Choose the path for your image. It can be a path on your local drive or a location on the Internet. If it’s a location on the hard drive, keep the image in the same folder as your HTML file.

STEP 3. Create Links
To create a hyperlink, first select some text (or an image). Right-click on

it and select Create Link.

Create hyperlinks to friends’ sites or blogs, for example

In the window that appears, enter the desired URL and click OK.

STEP 4. Make Changes To The Code
Advanced Web designers code complete pages by hand in simple text editors, and Nvu does let you alter the code it generates. Click on the Source tab and make the changes you want to. These will be reflected both in the Preview and the Normal views.

STEP 5. Add CSS To Your Pages
Nvu has a CSS (Cascading Style Sheets) Editor to set up styles. To access it, select Tools > CSS Editor. Click the Rule button. Enter a name for the style.


CSS gives pages a much more modern and elegant look

Click the Create Style Rule button. Here you can set the colours, font styles and sizes, and many other parameters for that style. Click Close when you’re done.

To set a style to a selection of text, first highlight that text. Then in the drop-down menu for the setting of a selection to a class, choose the style you just created, and it will be applied. (Classes are used to identify groups so all the objects in one class are given the same style.)
You can also choose to import external Cascading Style Sheets: make sure you have the Web page saved, and in the CSS Editor, click the Link elt button. Click Choose, point to the external CSS file on your drive or at the site that holds the file, and click on Create Stylesheet.

Before you go ahead with publishing your page, you can clean up unnecessary code using a feature called Markup Cleaner, accessible from Tools > Markup Cleaner.

STEP 6. Publish Your Page
It’s now time to upload your pages to your Web space provider’s server. The upload is typically to an FTP server. Your provider would have given you a username, a password, and the FTP server details. To upload the pages, select File > Publish. Enter the site name, publishing server, username, password, and other details. Click Publish and the files will be uploaded.


Quickly upload pages to remote servers using the Publish feature

If you use multiple Web space providers, the Site Manager is a good way to store details for all the sites. The Site Manager should be on by default, on the left side of the window. If it’s not, go to View > Show/Hide > Site Manager. Select Edit Sites, and you can enter authentication and connection details for many sites.

Most of us don’t require dedicated Web hosts for (small) personal Web pages, and free services should suffice. Gmail and other Google service users can register for a free Web hosting service called Google Pages (www.googlepages.com) and you’ll get a site address that should look like http://YourUserName.googlepages.com. In fact, there are many free providers you can easily find: Google up “free web hosting” or “free web hosts”, and you’ll find plenty of them. Note that some services, including Google, allow no FTP access; you need to use a Web interface and upload files one by one. 



Connect On :