Inexpensive Web Design and Editing Software

There are many good (and not so good) web editing programs available. Some are free, some cost hundreds of dollars. Here are some criteria for picking what software you will get, and the tools I used to develop my web sites.

Criteria for Picking Website Editing Software

• Easy to edit your web site
• Doesn't mangle your web code
• Inexpensive, while having the power needed for the complexity of your site.
• Adheres to web site standards, so your web site will display well and work on the most browsers.
• Widely available, so you can access the expertise of others while you learn.
• Reliable, stable software (doesn't crash, doesn't lose your work).
• You like the approach the designers took, good user interface.

Tools for making web site design easy

When I started making web sites, I picked FrontPage. I wanted "themes" that made a consistent look throughout my site. I wanted an easy way to make the navigation system (the menu buttons to move from page to page) easy to maintain. I wanted software I would be able to use in any company I went to. Besides, the company I worked at installed it on my computer...

I liked the ability to have themes that I could customize. Once I had a theme I liked, all fonts, paragraph styles, navigation buttons, and all the other visual elements of the site would be very easy to edit.

Unfortunately, the themes that come with FrontPage are not made with professional web sites in mind. There are "artistic" buttons and banners that detract from a professional image. The font colors do not even match the colors on the buttons and banners!

CSS Style sheets completely replace FrontPage's Themes, with more flexibility and control.

I also wanted to not have to worry about maintaining the navigation system for the site. FrontPage lets you simply drag your web pages around an organization chart, and it automatically maintains the navigation buttons for you. It even makes buttons with text on them for the navigation. But those buttons are graphics, so they don't resize (making them unreadable on high-resolution monitors). Worse, with all the support files needed by Frontpage, each button takes more than twice as much space on your server as the graphic file itself. Change the navigation of your site, and the buttons for each page need to be redone, and all those image files uploaded. CSS style sheets can achieve better-looking navigation systems without the bloat.

Server side includes let you make one file for your menu, to display on every page you want it—and you can have each page listed in the menu exactly where it makes sense to you, instead of having to fit your site design into a strict organization chart. The menu is one small file. The style sheet is one file that servers and browsers will cache for speedy access.

The HTML code FrontPage produces is complex. The default way of assigning fonts, text sizes, colors makes HTML code that is very hard to edit by hand; CSS style sheets are much easier, more flexible, and simpler.

The comments FrontPage uses for objects (such as navigation bars) get shown in search engine listings, rather than the descriptions I include myself.

What I am Using to Develop My Web Sites

Dreamweaver 8

I have Dreamweaver 8, well worth the money for the ease of use. I adjust properties of a tag simply by positioning the cursor in a tag and the Property Editor shows the options. I change the CSS layout in the CSS Editor, that even shows where the current style was defined (if you have multiple style sheets, plus styles in the header of the file, plus in the body of file, determining where to place your change can be a challenge without this information).

The most important feature of Dreamweaver compared to the free software I've found is the way it keeps track of the structure of your web site, and uploads files into the correct folder. I have the files on my computer, plus the files on a testing server, plus the production files. Not having to use an external FTP program, and carefully upload all files into the correct place, is a huge time saver.

XAMPP—Full Web Server on Your Computer

This free collection of applications includes Apache Server, MySQL, PHP, and Perl, in a simple to install package. Test your web site on your own computer, saving the time required to FTP the site to your web host. Keep the production site running as you develop and test new features without worrying about messing up the main site. See my blog for configuring Xampp to have multiple virtual domains on your computer (for testing multiple separate websites).

The key features you need to develop your web site are now readily available in free software

• 1st Page 2000 is an excellent HTML editor.
  • It's Free.
  • Highlight text and click any HTML tag button, and the tag is inserted around the text. Great for repetitive formats like lists or tables.
  • Very nice ability to save code segments you will use repeatedly; you can insert them into new pages with a single click, and the insertion point can be positioned ready for you to type. For example, the code I use for Amazon links will be ready for me to enter Amazon's product number.
  • Easy access to your Favorite folders. Most web sites have many folder (e.g. the main HTML folder, images, cgi-bin, and then the folders for each blog, guest book, affiliate program, autoresponder, etc. that you have installed. Much better than browsing up and down your folders.
  • Single keystroke to preview how it will look in any modern browser (without having to transfer it to my web server). Of course doesn't show the server side includes, CGI scripts, etc. that would show in a browser.
• Kompozer A complete Web Authoring System for Linux Desktop users as well as Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver. Kompozer is a free, open source WYSIWYG editor that fully supports the latest HTML and CSS standards. Unlike most WYSIWYG editors, your code doesn't get mangled, so using Kompozer with other editors is effortless.
• FileZilla for transferring files to my web server. Free, cross-platform, even has a portable version that runs off a thumb drive. (Still looking for an inexpensive FTP program that automatically sends files I've updated to the correct places on my server—the one feature of FrontPage that I miss. Dreamweaver does it, you might find it worth the money just for this.)

Utilities That I Use Frequently When Developing Websites

• Firefox is a better browser than Internet Explorer. For developers, it has add-on tools including a View Source tool and HTML Validator combined (the source that the browser sees, after your CGI scripts, server includes, and other changes have occurred)— so you see the exact coding errors in context. Gives intelligent explanations of the errors, so you can improve your code. Most HTML Validators refer to a line number, but due to your scripts and includes the line number never matches your source. This one works beautifully so you get the results you want with any browser. Other extensions include easily seeing the form field parameters, the sizes of screen elements, the CSS styles of elements, editing the CSS and seeing the results.
• 7-Zip has higher compression than WinZip, is free, works with more archive formats, and is available on most operating systems. Very nice two-panel file browser, lets you browse folders and archives with the same commands. Extract the files you've highlighted in one panel to the folder (or archive) in the other archive with a single keystroke.
• Servant Salamander is a free tool that is much easier to use than Windows Explorer, for navigating all the drives and folders on your computer. Two file panels for easily copying files, comparing folder contents, keeping your place in your hundreds of folders. Single keystroke access to your 10 favorite folders (press Ctrl-<favorite number 0-9>). Single keystroke to the last folder you were in on each drive (press Ctrl-<drive letter>). Navigate the whole heirarchy with backspace, up or down arrow, enter. Best of all, you can move to a file by typing the file name, instead of (in some versions) Windows Explorer's stupid "keep typing the first letter". You can configure drag/drop to ask whether to copy or move selected file(s), much easier than the Windows Explorer method of holding down the right keys to move the files.
• If you are going to be using custom fonts in your web pages (or your word processing documents), NexusFont (available on CNET Downloads) is a free gem. Lets you see what every font in your collection looks like, at the size you want. You can categorize fonts, too, so you can pick from among your professional, artsy, or keyboard fonts, or your favorites. Find duplicate fonts, print font samples with your text, see a map of every character.