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 siteand 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 siteeven 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 searcheven 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
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).
Figure 1. In the Normal mode you can directly edit the page.
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.
Figure 2. The HTML mode displays icons for the HTML tags.
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 pageeven 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.
Figure 3. The Source mode displays the actual editable code which creates the Web page.
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.
Figure 4. The Preview mode displays a view as it would be seen on the Web.
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).
Figure 5. Web site information includes the URL (address), user name and password for uploading files to the site.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.
Figure 6. Publishing the Web page(s) to the server can be done by clicking the round Publish button (circled in red).
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.
Figure 7. Often in FTP programs, files can be uploaded to a remote computer by dragging the file name from the left window (local) to the right window (remote).
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 informationalthough 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.
Jack is the publisher of
ComputorEdge Magazine. He's been with the magazine since first issue on May 16, 1983. Back then, it was called
The Byte Buyer. His Web site is
www.computoredge.com. He can be reached at . Jack is now in the process of updating and compiling his hundreds of articles and columns into e-books. Currently available:
Just released and available from Amazon, Misunderstanding Windows 8: An Introduction, Orientation, and How-to for Windows 8
! Also available at Barnes and Noble and ComputorEdge E-Books.
Available exclusively from Amazon, Windows 7 Secrets Four-in-One E-Book Bundle
Getting Started with Windows 7: An Introduction, Orientation, and How-to for Using Windows 7
,Sticking with Windows XPor Not? Why You Should or Why You Should Not Upgrade to Windows 7
,and That Does Not Compute!
, brilliantly drawn cartoons by Jim Whiting for really stupid gags by Jack about computers and the people who use them.
Comments and Letters about My Favorite Free Web Design Program
“KompoZer Is a Free Alternative to Expensive Commercial Programs”
by Jack Dunning
A Surprise Application for KompoZer
Greetings from Southeast Asia. I am working on a long-term translation project here in Thailand, traveling back and forth from San Diego once or twice a year.
I appreciate your ComputorEdge Online
magazine, which I have read for quite some time, and where I keep up on thingswith an eye peeled for any new and useful application or utility. Last week, I took note of your article on KompoZer: "My Favorite Free Web Design Program." I downloaded it, opened a couple of my own Web pages in it, and was favorably impressed. KompoZer is definitely a "keeper."
However, that's not the reason for my letter. Being a translator into the Thai language, I translate using Thai (and sometimes Lao) fonts. Recently (since WinXP, Win7, Word '07, Word '10, and multi-language Unicode fonts) I have noticed an annoying font-oriented "bug" that imposes itself on me quite often.
As a matter of explanation, written Thai employs a left-to-right, consonant/vowel/tone-marker language format. For some odd reason (likely only known to Mr. Gates's crew), various spots in the draft version of translation text are converted to the Arabic right-to-left character formatting style. This also shows in the status bar readout when the cursor is over the corrupted area. Where this occurs, characters are swapped around, and the cursor jumps back and forth when traveling over the area.
This is unacceptable, making the text unusable. To correct this annoyance, I first tried a search/replace routine of the right-to-left Arabic language formatting style, hoping to remove or replace it with the left-to-right Thai or English alternative. No good. Although all the search data would appear correctly in the search and replace data windows, Word's search routine refused to locate anything.
I then tried removing all the Arabic fonts from the computerwhy the Microsoft people thought we all needed so many Arabic fonts escapes me. I don't need or want any of them. I then went into the language and keyboard selection control panel and removed Arabic option from the default selection, which got put there automatically somehow.
None of these things seemed to work, period. I then tried copying a line of the mixed-up Thai text into various data entry windows, hoping to strip the offending right-to-left text formatting. Remarkably, it worked when I tried this technique using my e-mail program's subject bar. I resigned myself to this boring and time-consuming process as being the only way out of the woods, so to speak. One drawback was, this process completely stripped any and all formatting: text colors, underlining, bold, italics, etc., which I then would have to reformat.
Enter KompoZer: I decided to try KompoZer to see what it might do in the way of stripping the unwanted formatting bugaboo. Nothing! After unsuccessfully poking around, trying various menu options, I came upon the "Writing direction" selection option, located under the "Format" menu heading.
Three options were available 1) Unspecified, 2) Left-to-right, and 3) Right-to-left. I selected "Unspecified" and Bingo! It Worked! Not only did it remove all of the pesky Arabic font formatting (magically rearranging things back to where they belonged), but as an added bonus, all the other formatting remained fully intact. Even highlighting and hidden text remained as it was.
I was practically giddy with excitement. This serendipity discovery was certainly a godsend. Being a longtime, committed user of quick-key keyboard shortcuts (instead of constantly reaching for the mouse), I found that the "Alt+O+W+U" key sequence worked great. It allowed me to complete each sentence or short paragraph repair cycle in a few short seconds.
I am including a single-page PDF file of some before-and-after text examples, including a screen shot of KompoZer in action.
Ron Myers, San Diego via Thailand
Surprise Application for KompoZercontinued
Some before-and-after examples, including a screen shot of KompoZer in action.
That being said, as great an improvement as it was, it soon became a finger-tiring nuisance, due to the great amount of text that needed repairing. I tried searching KompoZer's help files, hoping for a macro-recording option (so as to utilize a single quick-key stroke option), but none was available.
NOTE: I believe that KompoZer needs a macro option, or an option like MS Word, to assign one's own single-stroke quick-key choice to a function. Nevertheless, not to look a gift horse in the mouth, I remained quite delighted over my new discovery.
Finally, to save time after spending hours on repairing a single file, I tried dumping a huge 200+ page file into KompoZer. It ruminated on it a while, but then allowed me to apply the "Unspecified" text-direction option. Bingo again! It worked on the whole huge file!
Thanks, Jack. You have saved me many hours of repetitive, carpal-tunnel producing toil.
Ron Myers, San Diego via Thailand