Hello and welcome back. Today I am going to teach you how to set up the frame work for your new web page using Nvu. If you didn’t read yesterday’s post on a “Quick Trick For Wrapping Text Around Affiliate Javascript Code“, then you missed out on how to ad “Adsense or even small Ebay” listings to your articles. Go read it if you haven’t, because it is a building block for creating your own web site from scratch. If you don’t want to build a site from scratch and just want to use a free template instead, that’s fine, but you will also need to know how to tweak the web page to get maximum benefits from the page.

Not everyone can afford to hire a tech to do these things for them. That’s why I created this blog. You will benefit from this information as it was tested by me. I was one of those people who knew nothing about HTML or PHP when I started AND, I did not have the money to shell out for someone else’s service. I had to learn how to do it on my own, and you can too!

Let’s get started!

If you have not downloaded “Nvu”, the free HTML editor, you can do so here (CLICK HERE). It’s free software and this is the WYSIWIG editor I use for these training sessions. It’s also the only HTML editor I recommend because of it’s ease of use. What’s a WYSIWIG? It’s an acronym for “What You See Is What You Get”. That’s not exactly true of “Nvu” because there are so many more features to this software and this’s why I recommend it!!

If you have not installed the “Nvu” program, go to the top of this post and click on my last article. It has detailed instructions on what you need to do to get it to work.

Open “Nvu” and close the tips box. If you check the little box in that window the tips box will not open when you start it any longer. You can see it again in the “Help” tab if you like. The first thing you need to do in order to create the 3 column frame for your web page is to click on the “Table” icon in the upper row. See example (CLICK HERE). Once you click the table icon, move your courser over cells area and highlight ONLY 3 of them. Click on the third highlighted cell. You will now see the 3 tables you just created side by side in equal size (CLICK HERE).

Next step is to “widen” the table horizontally across the page and set their “width limit”. To do this all you need to do is put your cursor in any one of the three cells and right click. It will bring up a menu that looks like this (CLICK HERE). Highlight and click on the “Table Cell Properties…”. This will bring up a new window. The cell tab will come up as default. Just click on the “Table” tab and you will be able to adjust the width. See example (CLICK HERE). In the “width” window, change the pixels from 100 to 952. This will stretch the width of all 3 cell across the entire screen (CLICK HERE).

Now, you have to set the limits for each cell. Setting Limits tells the browser how far the information in that cell (Column) can go before it wraps to the next line. Let’s set the middle column first. Right click inside the middle cell and highlight and click on “Table Cell Properties…”. It defaults to the cell tab. The width for the cell window is blank. Let’s give it some definition. Put 600 into the “width” window and click on the “Apply” button. You will see the middle column stretch to 600 pixels (CLICK HERE) . You will now see a true definition of how your web page will be laid out. This is like the skeleton of your site. Make sure you click the “OK” button before continuing.

Do the same for both the left hand and right hand columns. (CLICK HERE).

One final step. We have to give the web page some height. Go back and put your pointer inside the left hand column. Right click on it and get the pull down menu. Highlight and click once again on the “Table Cell Properties…” and then click on the “Table” tab. Change the height from 32 to 760 pixels (CLICK HERE). Click the “Apply” button and then click the “OK” button.

There you have it. The frame work for your new web page. (CLICK HERE) for a full page view. The left hand side is normally used for navigation. The center column is now a large area for your reading articles and the right hand column can be used in support of the reader information in the middle column. It’s doesn’t look like much now, but by the time we get some navigational links set up and a few banners as well as a couple of affiliate links, it will start looking like a professional web page. Once you get this template built, you can use it over and over again. The Internet web pages are set up basically the same on every site and there is a reason for that. This 3 column web design has become the industry standard on the net. It complements every item that needs to places on a web site and everyone expects to see it or at least a 2 column web site.

Remember to save your work as we will be building more of it tomorrow. I suggest saving it as template because I will be teaching you how to make your own header to add to the blank template. The header will changes from web site to web site, so I cover this separately, but you will always need this 3 column web site template for your future projects.

Next post, we will be adding information to your web page to make it look more lively and attractive.

Until my next post…………………..hope your making money!!

Henry Michaels

Tags: webpage, cell width, template,