Designing Attractive Web Pages with Free or Inexpensive Editing Software

Navigation Menu

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 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, it has a good user interface.

What I am Using to Develop My Web Sites

NotePad Plus Plus

NotePad++ is a full-featured text editor, a multi-document replacement for the Windows Notepad, with enhancements for programmers. Portable version (run from any thumb drive), from Portable Apps.

Syntax highlighting, and keyword or argument prompting, for many programming languages, including HTML, CSS, PHP, C++.
Hide sections of your code, so you can see what you're currently working on
Brace matching, multiple types, including parentheses, square brackets, curly brackets. Single keystroke to move the cursor to the matching one.
Highlight a line (or several lines), and Ctrl-Up/Down to move. Often more convenient than cut/paste.
Powerful search and replace, including optional regular expressions.
Several capitalization styles, including proper (e.g. for headlines) and sentence. I've mapped Ctrl-Alt-P to proper case, and Ctrl-Alt-S for sentence case.
Document compare, see the two files side-by-side with differences highlighted.
Sort lines, case sensitive or insensitive. Can give only unique lines, removing duplicates.

This is the one must-have web site development tool. There are pages I have developed using only NotePad++, and an FTP program. Plus I use it to read all text files.

Firefox Add-Ons

See my favorite Firefox Add-Ons for Web Developers, including some that make getting CSS styles correct so much easier.

Dreamweaver 8

I have been using Dreamweaver 8 for years, 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 (which is my 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.

I really like the site-wide replacement features, for example if I rename a file, I can update all links in my site (including the links I forgot about, thinking I only had links in my menu file).

XAMPP a 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).

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. However, it won't even open a .php file, which I use now for all repeating elements in my websites.

Since both Kompozer and Dreamweaver won't do wysiwyg editing in a PHP file, I have my layout (including menus) in one file, and put my text in an HTML file. That also keeps my content uncluttered.

I use Kompozer to get in a flow of writing. I often find I write better when I don't think at all about formatting, I just write. All I pay attention to, with formatting, is marking headings and asides. Then I use NotePad++ to strip off the HTML heading and footer (that Kompozer insists on including, to make valid HTML files), and my file is ready for including in my PHP file.

I have searched several times for free web site editing software, and haven't found a better one. If you don't need PHP, Kompozer could be the only web site editor you'll need.

FileZilla

FileZilla is what I use regularly 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. Dreamweaver does it, you might find it worth the money just for this, and HTML-Kit lets you specify where individual files go on the server.)

NexusFont

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 type in your own text, to see what it looks like in all your fonts. 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 (even those outside the standard character set).

If you are using custom fonts in your web pages, see my Font Size Adjust page for CSS rules to use with downloadable fonts, and ways to make text sizes match in different fonts.

PHP Generator for MySQL

I use this to build the interface to any MySQL database I make. Create the tables in phpMyAdmin, and then use this to make input forms and display data. PHP Generator for MySQL.

SEO Power Suite

This is a very good collection of free SEO tools. I use the Rank Tracker to find good keyword phrases. Paid version automates filling out captcha forms for you, and lets you check how your SEO rankings change over time. SEO Spyglass lets you look at the details of your web site and competitors, to know what to do to improve yours. See the full list of SEO PowerSuite features.

XML Marker

Open an XML file, browse around. Change the sort. Search for data. See the individual records in table format.

Has "copy grid", letting you select either the entire XML file, the details for a single record, or a branch you want, and copy it to the clipboard. Paste into OpenOffice Calc, and save as CSV. [OpenOffice handles CSV files properly, Excel doesn't.] Remember that XML can have sub-records (each field can have multiple parts); the copy grid doesn't grab sub-record information.

Insert tags or attributes in a record. Edit information in any record.

XML Marker, freeware

Other Web Site Development Software I Like

HTML-Kit Tools

HTML-Kit looks very powerful. It is $79 (current sale $59) so I haven't purchased it yet, and the trial version was excellent. The earlier version, HTML-Kit build 292 is really nice, built-in FTP with multiple locations, understands PHP (server includes, code syntax, code snippets for PHP/MySQL). Has file to website mappings, so it follows my having c:\websites\lernerconsult go to http://www.lernerconsult.com and c:\websites\styles go to http://www.lernerconsult.com/styles. It crashes sometimes (but remember, I'm using an earlier version) but very good!

1st Page 2000

It's an excellent Free HTML editor
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.

Utilities That I Use Frequently When Developing Websites

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.