NOTE: This page has Many Images. It will take a long time for all of the images to show up on slower internet connections, so be patient. The images are here to help you see exactly what we are talking about.

NVU is by no means perfect software, it has some quirks that make it difficult to use until you get used to it. It has some other issues that mean that it is not my preferred HTML editing software because there are certain things it just won't do that are, to me, pretty basic features. But it will work to build a functional site, and most of the quirks can be got around. The purpose of this page is to help you build a template for your site, and to learn how to do the most common tasks in NVU. This is not meant to teach you everything about it, but just enough to get you started so you can get a web page up fast. I'll add to this page as I learn to use the software better.

I will assume that you know nothing, or very little about website creation in this tutorial.

HTML is a language that web pages are written in. The browser takes the code off the page, and translates the instructions and displays it in the graphical form that you see. Writing code by hand is tedious, and complex for a beginner. HTML code basically is a set of instructions to the browser as to how to show the page, such as "put this text here, in this size, and in this font, and in this color - put this image here, and send the visitor here when it is clicked on". What you see on the page, and what is in the code behind the page, are two different things.

Normally when you write code, it does not show you what the page will look like. So programmers have designed different types of programs to help simplify the creation process.

HTML Editors are programs that are designed to make the process of building a web page easier. They come in three basic varieties:

1. Text - These handle only raw HTML Code. Many have shortcuts to writing the code, but you have to be able to relate the code that you see, to what your viewer will see on the screen. A few do have a preview window that you can look at to see what the code that you are writing is doing to the page, but most do not.

2. WYSIWYG HTML Generators - These function similarly to a word processor, and allow you to drag and drop elements onto the page, select and format, and do other tasks in a more intuitive way. They are usually relatively simple to learn. They will open any HTML document for editing, and save files as HTML files. Some produce code that is inefficiently written, but usually the code is functional. There are always differences between how the program shows the page, and how the browser shows it, so the page you are seeing is not always totally accurate, but at least it helps you design visually. These are my favorite type of editor because of their flexibility and simplicity. Many of them allow you to layer objects as well as working in a single layer layout.

3. Object Oriented WYSIWYG Editors - These programs create pages in their own file format, and won't open HTML pages. They will only generate HTML code when you tell them to - so you have two copies of your pages, the one that the program can read, and the HTML page that the browser can read. They can be difficult to control object placement when you have a page that needs to adjust for browser window size, but they do allow you to easily layer objects, and to use a more flexible layout. They can be more difficult to use in some ways though, because you will end up having to do more tasks through a dialog box. They operate very much the way desktop publishing (greeting card and business brochure) software works.

NVU belongs in the second category. It allows object layering, but we will not cover that in this tutorial. This will just cover the basics of designing a color coordinated tables based layout, which is one of the simplest ways to make a predictable and functional page.

When you first open NVU, I suggest that you configure it to handle straight HTML code, and not CSS - If you understand how to use CSS, then you can leave it alone, but if you don't, HTML is easier to learn quickly. to do this, do the following:

Configuring NVU

• Open NVU
• Choose Tools->Preferences
• There are 4 choices down the side. Click General if it is not selected already.
• Select Retain Original Source Formatting
• Deselect (clear the checkbox) for Use CSS stylesheets instead of HTML elements and attributes
• Make sure the checkbox IS checked for Maintain Table Layout when Inserting or Deleting Cells
• Select New Page Settings from the sidebar
• Under Markup, Choose HTML, and Transitional
• You can choose default New Page colors for text if you want, but usually there is no need to change that.
• This program can behave unpredictably if you don't change those settings!

Next, click the Table Tool - Any time I tell you to click a tool, you can scroll over the tool buttons until you find one with the label that I mention. When you hold the mouse over any tool, a label will appear to tell you what it is. So click the Table Tool, and drag the mouse over the boxes in the dialog box that pops up to select a 3 square wide, and 4 square deep table layout. Click when it is the right size.

You'll end up with a tiny table on your page. Go to the menubar and choose Table -> Table or Cell Properties.

A dialog box like the one below will show up. Set the width at 780 pixels - this is wide enough to have lots of room, but small enough to display well on almost all monitors.

Set the border to 0. That will make the edges invisible, which allows you to use the table for designing, without having the borders showing.

Set the spacing to 1. This will give you just a thin line between cells, and later, when we start playing with colors, we'll be using that space for accent.

Set the padding at 3. Cell padding determines how much space between the edge of the cell, and the text or images inside the cell. When you are going to put text inside a cell, spacing of 3 gives a nice margin.

You can align the table to center.

And choose a background color. I chose the second periwinkle blue down in the blue row. This will color your entire table that color.

Here is what you will see now. You can see that the table is now the color you chose, and that the gray borders have been replaced by red dotted lines. Those lines will NOT show up in your browser. NVU just uses them to show you where your table borders are as a reference point. Your page still does not look like much, so we need to do some more work.

Click in the top left cell. Hold down the Shift key, and click in the bottom left cell. That will select the entire column. You can also do this by using the Table menu, and choosing Select -> Column. Your selected cells will look like this - notice the new border around them.

Next, choose Table -> Table or Cell Properties. When the dialog box pops up, select the Cells tab. Set the Width at 150 (I know it shows 125 here, but I changed my mind! Set the Vertical Alignment to Top.

Click the Background Color box and set the background color of the cells to a shade lighter than your table color. Click OK. If you want to preview it, then click the APPLY button (in the box shown above - when you click ok on the color box it will go back to that one). When your color is right, click the Next button TWICE - we are going to do the Right side of the page next.

After you click Next twice, you should have the last column selected. Do the same thing to it that you did to the first column - the settings should match.

Now, some of these next pictures are not going to quite match the descriptions, so read carefully. I decided later to do some things differently, and if you do them in a little different order than I did, it will be easier for you!

Click the Previous Button. That will select the entire middle column. Set the Vertical Alignment to Top. Do NOT set the pixels yet, that needs to be done later to avoid problems. You see, NVU sets a pixel width for EACH cell. Many programs of this type will automatically match them in a column, but NVU does not. So you have to set all of the ones that are the same size either in a group, or individually. It is a pain, but has to be done, or your layout will come out really weird in the browser.

Set the background color as a darker color than your table color. I chose the blue below.

Click ok on the boxes to close them all out. Now, you want just ONE of the cells to be different than the rest, so we are going to make it white, and set the pixel width on just the one cell. This box will be the main content box.

Look at the pixel count in the middle - it is shown right above the Table Properties box in the image below. Select the third cell down in the middle column. Choose Table -> Table or Cell Properties, and select the Cells tab. Set the width to the same number as shown. Set the Vertical Alignment to Top.

Next, choose the background color. I chose white for just that one cell.

You can change just the color of a cell very quickly by using the command shown below. Since we needed to set the pixel width also though, this time it was better to use the Table Properties box.

Next, click in the TOP CENTER cell. Choose Table -> Join with cell to the right. Do the same with each of the dark colored cells.

Then select the column to the left - remember, there are two ways to do that, either with the menu, or by clicking in the top cell, then Shift clicking in the bottom cell. Then choose Table -> Join Selected Cells.

Now, your basic layout is complete. It has a place to put a top navigation bar, a left navigation bar, a right side ad bar, a logo under the top nav bar, content in the white cell, and standard copyright and design info in the bottom box.

Next we will make a more attractive left navigation bar. To do this, we are going to put a table inside the table. Before you do that, put the cursor in the left hand box, and push return three times. Here is another NVU quirk - If you do not do this, it will not allow you to put the cursor BELOW the table later if you want to put in text or images below that table, so make sure you put in your return characters FIRST.

Put the cursor at the TOP of the left navigation box, and choose Table -> Insert -> Table. Select a size of 1 wide, and six deep. It'll look about like this:

Leave the table selected (with the handles around it), and grab your Table Properties box again. Reset the Rows to 8 - that gives you a bit more flexibility for links, and set the width for 125. You can set the width for 144 if you want it to be wider and to fill the space better. Set the border to 0, the spacing to 2, and the padding to 3.

Colors shown here are incorrect, but other settings are right.

Now, you have a choice with the colors. You can set the table to one color, and the cells to the same color as the background in the left box (the light blue here), which will give you the effect of just having a border around the link cells, or you can leave the table color transparent, and just set the cell colors. I just set the cell colors, and I set them the same color as the top navigation bar, so that all of my links could be the same color. NVU has some problems with displaying link colors right, so it is easiest if we don't change their color too much.

To set the Cell colors, Select all of them, and get out the Table Properties box again, and click the Cells tab. Select your color. While you are in there, set the cell width to four pixels less than your table width.

Now, you can type your link titles in and format some fonts. The top navigation bar gets set up with plain text, and a bar character in between - or any other character that you think looks nice. The top bar is for Static navigation - this is information that has to be on every site, but which does not change much, and which has to do with site or company information. Things like Home, Contact, Links, About Us, Support, FAQ, Policies, Terms and Conditions, Email, etc. This is not required! This is just ONE design option, and the one I am choosing to use in this tutorial!

The side nav bar holds your site content links. The parts that make your site unique - product pages, info pages, directories, or other pages that form the reason why your visitors are here. Guestbook or Newsletter links can go either place.

So type those in. Format them as follows. I chose a light blue, in fact, the same light blue as my side backgrounds. Choose Format -> Text Color to change them. You can drag over as much text as you want to change at once, you do not need to change them link by link.

Change the font style by choosing Format -> Font -> and the font you want. I suggest sticking to the ones in the box where the arrow is in the example below. Do NOT use the fonts below that, because most people won't have them on their computer, and your page will not look right. The one exception is that you can generally use Comic Sans, which most people do have.

You can align the links to the center by selecting them, then choosing the Align Center button.

You'll need to put in standard copyright and contact info. In the image below, that is shown in the bottom cell of the table. Now, in that box, I want to make my company name a link, and the email address into a link.

A link has two parts - the part you see, and the instructions that tell it where to go, which you do NOT see. You must change both if you change a link, or it will not work right. So, to make a link, we will select the text we want to turn into a link. Then click the Link tool - it looks like a chain. Then the URL gets typed into the box as shown. If your site layout is the same on your hard drive as it will be on your server, you can use a Relative link. Look below the image for instructions on that.

In the image below, I have selected an email address, and am turning it into a link. I typed the email address into the box, and then clicked the box for email address.

Linking an image is exactly the same as linking text. Simply click on the image, and then use the Link Tool to set the URL that you want it to go to.

You can control your text colors and background also. Actually, it is usually better if you do this BEFORE you start placing links, but better late than never! Choose Format -> Page Colors and Background.

This dialog box pops up. Choose a color for each item. You can see that I chose coordinating colors for each one. I chose a fairly light link color, because I will use more links on dark colors than on light ones.

If you want your entire page to have a patterned background, you can choose a background image file. If you do, make sure you follow the rules about not letting it conflict with your text.

I added some space holders for various parts of the page. If you like this layout better at the bottom, then you can add another row of cells, and then join all of them at the bottom of the page, and set it to whatever color you like best. This is what the finished template looks like in NVU.

After you finish the template, you'll want to add images, and make links for your other pages. Make the links for the pages BEFORE you make the pages! Just type in the name you intend to give the page. Then after your standard images are in place, you can just use the Save As command to make many copies of the page, and make sure you name them EXACTLY what you called the link. You can go from having a single page, to having your entire site roughed out in about two minutes!

To insert an image, put the cursor where you want the image, and then click the image tool.

The Image Properties box will open, and you can choose the image file that you want to insert.

Now, it is important that you understand that this program won't actually put the image into the page. It will look like it did, but what it actually does, is write a location for where the program can find the image to display it. The actual image file stayed where it was. You need to put it into the Images folder for your site BEFORE you insert it into the page. And you need to make sure that when you upload the site, that you also upload the images, or they won't be where the browser can find them!

When you click the Choose File button, a standard Open box appears. Find the image you want to insert, and click Open.

Your image should be as small as you can make it and still show the detail and impact that you need, and it needs to be a jpg, gif, or png file. You can look at our Images tutorial for more info on why.

You'll then go back to the Images Properties box. Notice that the box is checked which says, URL is relative to page location? Well, if you want to display an image that is somewhere other than on your hard drive or on your own server, you can type in the location of it, and uncheck that box, just like a Link.

There is also a Link tab here, and you can set an image link in here if you like.

Click OK, and you'll get the following message:

Now, what that means is, If the browser cannot show the image, what do you want it to tell the visitor? NVU won't let you go without either filling in the Alt box, or clicking the checkbox to not use and Alt Tag. Since this is my logo, and has words on it, I am putting in what the words are.

When the image is in, I decided that the dark blue background in the cell did not look right, so I changed it to white. And this is what the finished page looked like in NVU.

The same page looks like this in Internet Explorer:

Notice that the red lines are gone, and the entire page has a smoother look. You can see the thin blue line around the different cells in the page, which was created when we made the table background one color, and the cells different colors. The page has a familiar navigation style, and it will work well when we duplicate it to build the other pages in the site.

To upload your site using NVU, use the Publish commands. The Publish Settings dialog box allows you to save settings for multiple sites. When you enter the info into the fields, you may not need a username in the URL if you have a domain name and regular hosting. If you are using free space, or if you are using space from your internet service provider, then you will probably have a username where it shows one in the URL example in the dialog box. You always DO need to enter a username and password in those boxes.

If you are publishing a single page, use the Publish Page command. This pulls up a similar dialog box. You may or may not need to enter the settings, depending on how you configured the box above.

The Publish tab includes options for uploading images, and where to upload them to.

NVU also has access to other services through the menus. Some of these are online, some are built into the program. Markup Cleaner helps remove unnecessary code. Validate HTML makes sure the code is written in a standard way. This may be important with NVU, because it can introduce errors sometimes if you make a lot of changes to your page.

There are many other things you can do with a page in NVU. There are problems that may develop as you use it to do just this much that might puzzle you. Please email me and let me know if you run into a snarl, and also check out the NVU home page and look at the forums for help on that site. Many people use this program for more complex stuff than I do, and the software makers also watch the posts to see what people are having the most problems with.

Once you get used to how this program does things, it gets easier to use. It has a built in help system, so look something up if you get lost!

Read our other pages on building websites at http://www.skinnyshoestring.com/sohotools/website.htm, for more info on how to get it to work well and look good.