My Favorite Free Web Design Program

My Favorite Free Web Design Program
“KompoZer Is a Free Alternative to Expensive Commercial Programs”
by Jack Dunning

If a Facebook page does everything you want then you don't need a Web site of your own. In fact most people will never want a separate Web site—and for good reason. Unless you have a single static page site, keeping a Web site up is a lot of work. Who needs it?

However, if you own a business, you probably should own a Web site—even if only to act as an electronic business card. Today, every business is expected to host a Web site. It is your virtual proof of existence. People want a way to find you with an Internet search—even if it's only to get your address or telephone number. I suppose that a Facebook page can substitute for a separate Web business page, but you're so much more constrained when you depend upon a third party to sponsor your marketing activities. Your flexibility is severely limited on Facebook. Plus, who knows what new rules (or fees) Facebook will implement in the future?

It's no problem to find inexpensive hosting for a Web site ($5 per month or less). Plus, these hosts offer many free tools for maintaining your Web pages. (Because it's cheap, I currently use GoDaddy for a number of sites, although I do maintain separate servers at a colocation facility for ComputorEdge and e-mail.) While the tools from the Web hosting company are useful, they are often limited.

There are commercial programs, such as Adobe Dreamweaver, designed specifically for creating and designing Web pages, but they can be quite pricey. These programs will offer a WYSIWYG (What You See Is What You Get, pronounced "wizzie-wig") interface for designing your pages. They automatically generate the HTML code (the language of the Web) from the design screens. You can then use the program to directly publish (upload) the pages to the Web. You can also generate Javascript applets for making the pages more interactive. The primary downside is the price of the software.

Fortunately there is free software which does virtually everything you find in the commercial Web design programs. KompoZer is a powerful, free Web authoring system which offers WYSIWYG Web page editing and the functions for managing the site structure and transferring (FTP) the updated pages to the host Web server. It is my favorite Web design program because while a beginner can immediately start creating pages as if using a word processing program, the more experienced Web designer can directly access the HTML code to tweak the pages.

I can and have written Web programs directly in HTML. However, generating code by hand is tedious, especially when you're adjusting design and style elements. Even if I intend to deliver the final product to the Web server as a file tweaked in a text editor, I will often do the initial design with the WYSIWYG design function in KompoZer, then switch to the Source mode to clean up the code. If you are a beginner, there is no need to mess with the HTML since it is automatically generated from the KompoZer WYSIWYG screen. I switch to text editors because most Web design programs of this type (including the commercial products) will often add unnecessary code as changes are made in the main editing screen. This is just my preference. The pages generated in KompoZer will still display the same without any direct HTML editing.

There are four primary modes in KompoZer: The Normal mode, the HTML mode, the Source mode, and the Preview mode.

The Normal Mode

The Normal mode is your primary WYSIWYG editing screen (see Figure 1). It responds to your actions much in the same way as word processing software. You can directly enter text, change fonts, adjust alignments, alter colors and insert images. As you do this, the program is writing the HTML code which controls the Web display of your words and design. If you put in special features such as tables, they will show as light lines in the Normal mode, but they will not appear in the final page (unless you add visible borders).



Unless you are comfortable with working with the HTML tags or code, the Normal mode will be your primary editing view.

The HTML Mode

If you click the second tab at the bottom of the screen labeled HTML Tags, you will see the HTML tag editing mode. This screen is identical to the Normal editing screen except it has added the HTML tags which are embedded in the page as icons (see Figure 2). In this mode you work with the text and images in much the same manner as the Normal mode, as well as, the HTML tag icons (little boxes) in yellow. It offers an intermediate way to work with HTML tags without dealing directly with the code.



Double-clicking on an icon will open a window for editing and modifying the tag parameters. Right-clicking will open a menu of options. If you have problems in your HTML, you may quickly see them here, while it could be much more difficult to locate problems in the source code page—even if you're an experienced Web programmer.

The Source Mode

The third tab at the bottom of the screen is the Source (or source code) view. This is the actual program code which will generate the Web page in the user's browser upon loading from the Web server (see Figure 3). If you are comfortable with directly editing HTML code, then this is where you may want to tweak your pages. Any changes you make will be reflected in all of the other views since this is the driving code behind everything which will appear on the Web.



Tip: If you would like to learn a little HTML, make changes in the Normal view (or HTML view), then switch to Source to see what code has been generated. Then try changing or adding code to the source page and see the effect on the Normal view.

The Preview Mode

In Preview, the fourth tab at the bottom, you will see the most accurate representation of the Web page design (see Figure 4). None of the formatting lines or HTML tags which may confuse the view will display. This is how you check the look of the final product.



Note: Not every browser will render the Web page in exactly the same manner. It is also useful to check how a page looks in various Web browsers (Firefox, Chrome, etc).

Web Site Information

Web page hosting sites use FTP (File Transfer Protocol) for publishing your Web page. When you sign up you will be given an address, user name and password for accessing the site. After you enter this information into KompoZer, you will be able to connect with your Web site and upload new pages (see Figure 5).



Publishing Your Web Page

When you're making changes to your Web site, none of the pages on the site itself will update until you publish to the site. This prevents users from seeing what you're doing until you know that the page is right. Even though it may appear that you are working directly on the site, you are actually editing pages on your computer. To upload the new pages, click the Publish button (see Figure 6). If you make any changes to the Web page, the Publish button will automatically be enabled for transferring the new files to the Web server.



While working on your Web site, it's a good idea to periodically save a copy of your Web site files locally on your hard drive. This will give you additional backup. The host server (if from a hosting company) will most likely make backups, but it is always a good idea to have your own copies.

There are many more features in KompoZer, but you will discover these as you work with your Web pages. The basic concept is to design a Web page, then publish it to the Web. Once you do that, the entire world is capable of seeing it. Now you need to tell someone about it.

Firefox for FTP

If you use other programs (such as a word processing) for generating your Web pages, then you will still need a program for uploading the files to the Web server. I previously used FileZilla as an FTP program for uploading, until I ran into problems which prompted me to look for an alternative. (FileZilla is an excellent program for file transfer, but be sure not to save your user name and password in the program for automatic log on. This feature allowed one of my sites to be compromised. This problem has probably been fixed since then, but I've moved on.) My favorite FTP program is now the FireFTP add-on for Mozilla Firefox.

FireFTP runs within Firefox and works in a manner very similar to FileZilla. Common in FTP programs is a screen displaying two windows (see Figure 7). The window on the left represents the file structure on your local computer. The window on the right shows the file structure for the remote (or Web host) server. Uploading and downloading is as simple as highlighting the file name and clicking the appropriate arrow. File names may also be dragged (left-click and hold while moving the cursor) from one side to the other for updating.



Sometimes when I need to make a large file (too big to e-mail) available to someone, I will upload it to a Web site with an FTP program such as FireFTP and e-mail a link to the file to that person. The file does not become part of the Web site (no links), but the recipient of the e-mail link can download the file by clicking on the link.

When not using a program such as KompoZer, I've effectively used FireFTP to support my Web sites.

I've compiled many of my articles on my favorite free Windows programs into an e-book coincidentally title Jack's Favorite Free Windows Programs: What They Are, What They Do, and How to Get Started! The book includes this article plus my favorite free CAD program, video editing, graphic editing, program editing, and more.

You can also dig through all my articles over the past couple of years to find most of the same information—although there is some new stuff in the book. It's currently available at Amazon and will soon be found at other e-book sources. (At iTunes it will take about a month for the book to appear since Apple is never in a rush.) I'm thinking of getting a copy myself so that the next time I set up a new computer I'll remember what to load on it.

www.computoredge.com