Part two of this series on creating content is a tutorial on building web pages using Nvu. If you came here yesterday looking for this post then apologies for the slight delay. I decided this tutorial would work better as a video, so it’s taken slightly longer to put together but I hope you’ll agree it was worth the effort (plus I was really busy yesterday working through the RRS material!).

Anyway – here’s the video, and below you’ll find the rest of this blog post if you’d rather read along than watch. (Plus you’ll also find all the links mentioned in the video below!)

Links

Download Nvu: nvudev.com

Tutorial template: squeeze.zip

Nvu – creating web pages

If you’ve not done so already, head over to nvudev.com and download the free software. It’s available for Windows, Mac or Linux so just grab whichever flavour you need, install it and you should see a screen something like this:

Nvu HTML Editor – Main screen

Now, this tutorial is NOT intended to teach you HTML. What I want to show you is how, with no experience and very little effort, you can use the WYSIWYG editing screen in Nvu to create or edit web pages for use as squeeze pages, sales letters, HTML emails etc.

Quick overview of the Nvu interface

Most of the buttons on the toolbars are pretty much self explanatory, and you can hover the mouse over them for tips so I won’t waste time explaining them here. Below the toolbars, to the left is a sidebar called Nvu Site Manager. This is for keeping track of all the files used for a website, but since we’re just concentrating on single pages today you can go ahead and close it. That will allow the main editing window to expand to the width of your screen.

The window has tabs along the top, and the bottom. The tabs on the top are for different pages and by default you’ll have just one open, named untitled. The tabs along the bottom are for different views of the same page: Normal, HTML Tags, Source and Preview.

You should currently see what looks like a blank page on the Normal tab. Click on the Source tab and you’ll notice that in fact, it’s not a blank page at all, it is already filled with some HTML code like this:

HTML wrapper code for a blank page

This is the code needed to tell the browser that this is an HTML page, and make sure it renders correctly. Here’s the good news – you really don’t need to worry about this since the beauty of a program like Nvu is that it takes care of the code for you, while you just concentrate on how the page looks!

Building and editing web pages

Go back to the Normal view and type some text on the page. Then highlight the text and change its colour to red using the colour tool on the toolbar (2 squares next to the dropdown menu that says ‘Body Text’). Now if you click back on the Source tab, you’ll notice that your text has been wrapped within some extra code. Depending on your default settings, your text might look like this:

<font color=”#990000″>Hello World!</font>

or like this:

<span style=”color: rgb(153, 0, 0);”>Hello World!</span>

The reason for the differences is that the first one is pure HTML, and the second is HTML/CSS. You can choose either style from the Tools>Preferences menu, but for our purposes is really doesn’t matter as the end effect is the same. What is important though, is that you realise what is happenning… You are making changes in the Normal tab, and Nvu is writing the code for you which you can view in the Source tab.

Go ahead and save your page as myfirstpage.html and then open it in your web browser…

Congratulations, you just built a web page!

Making a useful page

OK, so you won’t win any design awards for what you just did, but hopefully it gave you the confidence that creating and editing your own web pages doesn’t have to be that difficult.

Now lets do something a little more useful. I’ve created a simple squeeze page template for you. Download it, unzip it, and open up squeeze.html in Nvu. You should see something like this:

This is a squeeze page which you can edit and actually use on your own sites if you like, but for now I just want you to practice on it. Just quickly click on the Source tab and see how much code there is for a simple page like this – aren’t you glad Nvu writes the code for you rather than having to learn all that HTML?

Making changes is very intuitive. To change text simply highlight it, or delete it, and start typing. Use the toolbar to change the font, colour, weight, and alignment of the text.

The bullet points you see are what’s called an unordered list. You can choose unordered, and ordered (numbered) lists from the toolbar too.

Links

To create a hyperlink (to another site, or another page on your own site) just highlight the text you want as your anchor (the text you want your visitor to click on) and click on the Link button on the toolbar. You’ll see a dialog box like this:

Type the URL you want to link to (including the http://) into the Link Location. If you want to link to a web page or file (like a PDF ebook) on the same site as this page, you don’t need the full URL. For example, if you link to contact.html which is in the same directory as the page you are linking from, just type contact.html and check the URL is relative to page location checkbox before clicking OK.

Images

It’s a surprise to many people new to building websites, that images are not actually part of the page. A webpage is the HTML document and this basically links to the images and arranges them in the browser. That means we have to upload our images separatly.

On the squeeze page example, my signature is actually an image. Right click on it and select Image Properties and you’ll see that the Image Location is sig.jpg

This is because the file sig.jpg is in the same directory as the web page. To keep things simple for now, place any images you want to include in the same directory as your web page, then just put the filename in this box. You can then use the other image properties to align the image as you want.

Opt-in Form

At the bottom of the page is the actual opt-in form. Of course, you’ll want to change this for you own one, otherwise you’ll be adding people to my list!

This is the point where you will need to get your hands slightly dirty with HTML – but don’t worry I’ve made it easy for you!

Click on the Source tab once more, and scroll down to line 128. You’ll see this line:

<!– Opt-in code starts here… Change it for your own! –>

This is an HTML comment (comments are code between <!– and –>) which is actually ignored by the browser and is just there to help us humans. The opt-in code starts here, and ends at like 161. Simply go to Aweber (or whatever autoresponder you use) and create an opt-in form, copy the code, and paste it here instead of mine. See – told you it would be easy!

So there you go – in 10 minutes flat you’ve edited a template and created a usable squeeze page. Of course, there’s a lot more you can learn but hopefully this tutorial has given you some understanding of how web pages work and, more importantly, the confidence that you can do it.

Tomorrow we’ll move on to part three in this series which will teach you more about images and how to use the GIMP editor.