In the last lesson we discussed 5 different ways to build a web-site, from building from scratch by writing the HTML code, or using templates or WYSIWYG.

Today’s lesson will show you an easier way to do it

PDF to lesson#6 Build an Easier Web Site

If you don’t want to learn HTML, or write your website from scratch or if you just want an easier way to build websites, this could be our solution.  I mentioned in the last lesson that I would be showing you how to use a web authoring software program, and that’s what this lesson is about.

If you can type, you can use the tools I reveal in today’s lesson:

In the next few lessons, I’ll be showing you some other ways to build a site without writing any code.  But be sure to follow the lessons in order, as I think this is a good sequence for you to learn and choose the best method for your business.

Be on the look out for these lessons, and as always-please post your questions and comments on the blog.

A Web Authoring Software program is also known as an HTML editor is simply a software program designed to help you build a website.  Arguably the two most popular HTML editors are Microsoft Front Page and Adobe Dreamweaver.  The last time I checked these products cost between $200 and $400.  And I am not going to talk much about those programs, they are both good software, and if you know how to use them, that’s great.  It does take a good deal of time investment to learn them.  And if you want to learn how to use them, there are plenty of other courses out there.  In fact they even teach Front Page in some community college classes.  However if you are interested in buying a Web Authoring Software program,  would  personally recommend XSitePro, which is a hybrid HTML editor/ site builder/ site management platform.   You can get it at www.xsitebuilderpro.com. This was actually created with internet marketers in mind, and I have heard many great things about it over the past few years.  It is a great program for the total ‘newbie’ or the experienced marketer; it’s kind of a good all around program.  And XSitePro already has a vast number of tutorials and educational materials already available for you when you buy the program, so there is no need for me to cover that here.  So if you are looking to buy something, that’s the really good option.

What I would like to cover here in this lesson is a free option.  And what I would consider to be the most well known free html editor is what is called NVU.  However the developer of NVU stopped developing it a couple of years ago, but the project was continued as an open source project called Composer.  Now as of the time of this lesson, Composer also has not had any updates in a long time, but it’s still the best free HTML editor that I have come across so far.  You can download Kompozer at http://kompozer.sourceforge.net .  Just choose your operating system and download the file, you will probably have to unzip the file, and most likely you won’t even need to install it,  it comes as a set of files and just ready to run, so all you need to do is just double click the executable file to run the program.  The executable file will be the one that ends in .exe and have your web browsers icon next to it.  Again you just double click that to run the program.  So when you open it, you will see what is called a WYSIWYG editor.  And as we discussed in the last lesson, WYSIWYG stands for What You See Is What You Get.  Another words, we can create content right there in the program, and what it looks like right there in the program is approximately what it is going to look like on the web.  In fact you can even copy and paste content right into the Kompozer HTML editor.  Find your content from anther file or something and highlight your content, hit control C (for copy) and then go to the Kompozer HTML editor and click on your page, hit control V (for paste) and the content should look just like what you copied.  Now click on the Preview tab at the bottom and you can see exactly what it will look like as a web page.  In fact if what you copied was from an HTML copy, you can just open it in the Kompozer HTML editor, and then you can edit it in the program.  Now if you click on the source tab, you can see exactly what has been written in HTML format.  Now, because you have the WYSIWYG editor you don’t really need to do that, unless you do know HTML and want to do a tweek that way.  And there may even be times when making your website ‘Search Engine Optimized’ that you will need to view the source and copy and paste some HTML into the proper place.  Or if you are monetizing it with Google Ad Words you would copy and paste the HTML that Google gives you to put into your web pages from the source tab.

So to recap, you have the Normal tab for WYSIWYG, the source tab for HTML source format, and the Preview tab for what it will look on the web.

Let’s do a couple of things that will make your web site look good without having to know any HTML.  First, formatting-would one easy way to do something, such as selecting your Headline by highlighting it, and then change the color; you could make it a nice bright red or something.  Then you could go into the Font drop down menu to change the font, maybe to something like Tahoma, cause that’s typically a pretty good font for headlines.  Then go down to select the rest of the font, and you can change that to Helvetica or Arial.  You can also add a link to something in your page, such as a picture of some text.  For example if you put in a web site name or a logo, picture or anything that you want to take the person that might click on it to a particular web page, you can link it.  So if you have text that says ‘Click Here’, just highlight it with you mouse, then click the link button.  This will open up a new window whereas you will type in the URL of the web site location you want the text to be directed to.  So if you were directing them to an affiliate link, then you just type in the affiliate link in the box, then click ok, and you have a link.  Now you can also choose to open in the same window or a new window, there are other choices, but don’t worry about those right now.  If you wanted your website viewer to keep your page open while being directed to another page, then choose new window.  The browser will then open an additional window for them to view the linked web page in without closing your website, or being directed away from it entirely…

Let’s do a couple of other things, like say a picture and format a table.

I use tables a lot, because they contain information much easier than having to deal with margins and where something is going to land when you put it in.  Another words you can more directly put things right where you want them a little more easily.

We will start by going to the table selection on the menu and select table insert and it will open up a little grid.  We will just start by making a 1 x 2 table, which is 1 row by 2 columns.  This will be reflected by clicking on the top two squares in the upper left corner of the grid.  You can create as big a table as you like right here, and you can always add more rows or columns later or when needed as well.

Now let’s highlight a portion of the text on your page here and copy it.  Then paste it into one of your cells.  At this point it is going to look fairly ridiculous, but we can change that by re-formatting it by dragging the table side (the red line) over to make it wider.  The red line will not be seen on the final web page, so no worries there.  And you can keep pulling your table walls until you have them the right size for the content, or how you want it to look.  And so now you can add a picture right next to the text in the other column or cell.  You see, each box area within your table grid is called a cell.

There a lot of neat things you can do within these cells.  Each cell can have a particular background color or even a picture as the background.  Or if you would rather, you can make the whole table have the same background.  Another words you can format the whole table in table properties or individual cells in cell properties.  It’s a really great way to add a box to your web page, or some text next to a picture, easily separating content.   The nice thing about this kind of HTML editor is that you can easily select a picture right off your computer that is somewhere on your hard drive.  And then when you use the publish feature, it will automatically upload that picture to your website in the appropriate place.  Another way to add a picture is to hotlink to a picture that is already on your website or another website, but only if you have permission to do that.  I do not recommend linking to someone else’s picture unless you actually have permission to do that.  It’s very easy to hot link a picture just by right-clicking on the picture that is on the web and selecting copy and then just do a control V in the cell you want it in on the new page you are creating back in Kompozer HTML editor.   And voila, the picture will be pasted directly from the web into the composer software.  Now to get rid of or change the table border, just right click on the table and select table properties, select the table tab, then to get rid of the table select 0 pixels on the border and  0 pixels between cells for spacing, then 2 pixels on the Padding will be fine.  Click apply and ok and then you can preview it again to see that the border is now gone.  That’s some pretty significant formatting and as you can begin to see, the sky is the limit.  Kompozer has a quite a few neat features built into it, you can do a lot with it.

Now you are going to want to go ahead and save the file.  Then one last thing we will do is use the publisher feature that is built right into it.  We have discussed in the previous lesson about using an FTP client to upload your file to the web.  Filezilla works well if you don’t want to use the publisher in the program, some do prefer to use a third party FTP client.  But if you want to stay with an all in one solution, Kompozer has the FTP client built into it’s software.  What it would do is upload your files to the domain of your choice.  If you have uploaded the page previously to the web, then you do pretty much the same thing and any changes you have made will be updated.

Now let’s go to publish on the menu.  You will put in your site name perhaps, the URL address of the homepage you are publishing to (your domain)  and the publishing server, basically the server location that will hold the files.  This (the publishing address) may look something like ftp://yourdomain.com/public_html/ then you will need to put in your username and password for your domain, and that’s it really, you will then just click publish and you can then see the files being uploaded.  And even though you may have hotlinked the picture, Kompozer will still upload it.

You can check to see if everything worked by opening your browser and going to your domain….you should see the new pages you just created and uploaded.  If you already have it open, you can just click refresh and voila.

So that’s how to build a website with the Kompozer software.  Very simple, and again you can do a lot with this program.  And when or if you ever want to get into more advance website building with a lot of advance features, you may want to consider XSitePro.  For the most part though, you will be able to do most anything you will need for all your basic website building features with Kompozer.

ACTION STEPS:

1. Decide if you would like to use a web authoring program to build your site.
2. If yes, choose a program and start using it.  If you haven’t yet chosen which method you will be using, go back to the previous lesson and review.

• Build it from scratch (using a web language like HTML)
• Use a web authoring program like an HTML editor such as Front Page, Dream Weaver, XSitePro or a free on like Kompozer.
• Use a template or site builder like HostGator’s site builder.
• Use a Script or CMS like WordPress

Next we will be talking about using a template or site builder to build your web site.

Diane Adams

http://thesumofit.com

diane@thesumofit.com

And please as always, you are welcome to post your questions and comments below.

Have a great day