Corrie Haffly

I whip web sites into submission, but I'm nice to everyone else.

Beginner's Primer

Software and Tools

Choose a Web Editor

There are many great tools on the market today for creating and editing web sites. However, what you may not know is that you can create a web site simply with a text editor (like NotePad)! In general, you can split up most web editors into a "code-only" category or a "WYSIWYG" (what-you-see-is-what-you-get) category. Code-only editors allow you to edit HTML code and start from simple text editors such as NotePad to more complex editors that have color-coding to help you view the code better. WYSIWYG editors usually have modes where you can view the code, but also work with your site in a more graphical, intuitive interface, where what-you-see is roughly what-you-get. Usually you don't need to know HTML code in order to use WYSIWYG editors, although it's recommended that you pick up some basic knowledge as you use them.

Below are some of the tools that I've used and that I know something about. There are a ton of web editors out on the market (some for free!), and if you're really concerned about getting the one that fits your purposes, I'd encourage you to research.

Code Editors
Pros
- Usually less expensive, complete control over code so very flexible
Cons - Must learn how to code HTML and supporting code like JavaScript

  • NotePad
    If you're trying to save money, NotePad is free and cheap and comes on your PC. All you have to do is create a page with HTML code, save your page with an ".htm" at the end of the file name (like "my_file_name.htm"), and you have an instant web-page that can be opened in a browser such as Internet Explorer!
  • TextPad (www.textpad.com)
    Free download evaluation copy, and if you decide to buy it, it's fairly cheap. The interface is nice and HTML is color-coded (syntax-highlighting is the technical term), plus there are lots of great tools for naming/renaming files, switching between open files, and formatting code.

WYSIWYG Editors
Pros
- Usually more intuitive to use, and can have a more "visual" representation of what you're working on; builds a lot of the code FOR you; helpful when learning HTML
Cons - Sometimes generate code that is not very "clean"

  • Microsoft FrontPage (www.microsoft.com/frontpage)
    Fairly intuitive interface similar to other Microsoft Office programs, but still has a learning curve if you're unfamiliar with web editing.
  • Macromedia Dreamweaver (www.macromedia.com/software/dreamweaver/)
    Easy to integrate Flash, good editing tools, with a bit of a learning curve.
  • Macromedia Contribute
    (www.macromedia.com/software/contribute/)
    This is mostly for people who are going to make small updates to their site. It is not a full-featured web development tool, but allows non-designers to update text, images, and more after the site has already been created.

Choose an Image Editor

If you're going to be making your own web site(s), you will need some kind of image editor to create web-ready graphics, whether those are photos, illustrations, or text-headings. While there are some free tools available, most are limited. It's a good idea to invest in a quality image editor.

  • Adobe Photoshop Elements (www.adobe.com/products/photoshopel/)
    An affordable spin-off of Adobe Photoshop with the features that most non-professionals are interested in, at a sixth of the price of Photoshop. Photoshop might be too powerful, so consider this great alternative.
  • Adobe Photoshop
    (www.adobe.com/products/photoshop)
    The powerful digital imaging software that allows you to do almost anything.
  • Jasc Paint Shop Pro (www.jasc.com/products/psp/)
    The word on the street is that this is good for basic and advanced users, and comes with more features and functionality than Photoshop Elements (for about the same price!). However, it's not the easiest to learn how to use - you'd probably actually have to read the documentation.
  • Ulead PhotoImpact (www.ulead.com/pi)
    Not as advanced as the other two, but supposedly easy to use and to learn.

Choose an FTP client

You may not need this! You'll want to check to see if your web editor allows you to FTP or "publish" your web files to a server. FrontPage, Dreamweaver, and Contribute have this built-in, but if you're using NotePad or some code editor that doesn't have this function, you'll want to get an FTP program as well. The FTP program will help you to connect to your web server so that you can put your web files online.

Windows Explorer can also act as an "FTP client," if you're looking to save money. Simply type in "ftp://your-ftp-host-domain" in the explorer bar. You may be prompted for your username and password. Once you've connected, you can upload by dragging and dropping. (To learn more, look up "FTP using Windows Explorer" in a search engine.)

However, most people prefer an actual FTP program for an easier-to-use interface. Below are some examples of FTP programs. We use FTP Voyager, but probably any of them are good.