HTML Editors

WYSIWYG environments for creating Web pages.

WYSIWYG (pronounced "wiz-ee-wig") = "What You See Is What You Get"

Several HTML editors are available for free:
Netscape Composer (part of Communicator)

Microsoft FrontPage Express (free version of commercial FrontPage)
AOLPress (free from AOL for anyone to use)

They all work basically the same, but the best regarded of all of them is Macromedia Dreamweaver. A 30-day trial version is available for free and the educational price is currently $99 (5/18/00). If you buy Dreamweaver together with Fireworks as Macromedia Studio, the price is $180.

Dreamweaver Basics

• When first started, several windows are opened. If a window you need is not open at some point, you may open it by selecting the Window Menu and then choosing the appropriate window.
  1. Main Document window
     
     Into which you may type your text or insert images.
     At the bottom are various controls and status displays:
     
  2. Properties Window
     
     Many aspects of a Web page may be set in the Properties window
     • Bold, italics, color, alignment, lists, and, most importantly, links.
       • To make a hypertext link:
         1. Highlight the text/image to become a link.
         2. Type the location of the link or its filename into the "Link" box in the Properties window.
            • Or, copy-n-paste a URL.
            • Or, click on the file icon in the Properties window and go find the file.
  3. Object Window (or "Palette")
     Allows you to insert images, tables, horizontal rules, etc. (Also, if you click on the Object Window's button you may change the choices in the window itself.)
     • E.g., to insert an image:
       1. Click in the Object window (or choose Image from the Insert Menu or use the CTRL-ALT-I keyboard shortcut).
       2. Search for your image file in the Select Image Source dialog box--which shows a thumbnail preview of the images in a folder (on the right):
          
          
• One key window is not automatically opened.
  1. HTML Inspector window
     
     1. To open:
        • Select Window Menu, then HTML, or
        • Hit F10, or
        • Hit CTRL-TAB (Windows) or CMD-TAB (Mac), or
        • Click the HTML button in the Mini-launcher at the lower right of the screen.
     2. You may then edit HTML code directly.
     • And have it immediately reflected in the WYSIWYG Document window.
     • And it's nicely color-coded (like BBedit).
     3. To close:
     • Hit F10 again

Page Properties in Dreamweaver

The page's <TITLE> as well as background colors/images can be easily set.

1. Choose Modify menu, then Page Properties.
   
2. In the Page Properties dialog box, type in a title for the page.
3. Optionally, you may select colors for the page background, text, links, visited links, and active links color; or you may indicate a background image.
4. Click OK and you're done.

Dreamweaver Exercise

Create a sample Web page from scratch with Dreamweaver

1. Start Dreamweaver and select New from the File menu.
2. Save your page dwtest.htm and, when its finished, FTP it to your bama.ua.edu account.
   • Show me the page in Navigator once you've copied it to bama.ua.edu.
3. Set the page's <TITLE>
4. Set a background color.
5. Add a bit of text:
   1. Bold
   2. Italics
   3. A font other than Times
   4. Colored
   5. Centered
6. Insert an image. (Nab one off the Web somewhere or use your scanned photos of yourself, if you have one.) Include:
   1. ALT attribute
   2. HEIGHT and WIDTH attributes.
7. Set up a hypertext link.
8. Create a table with colored cells.
9. Create a numbered list.
10. Insert a horizontal rule.

A Dreamweaver Shockwave Movie

For an interactive Shockwave movie explaining the basics of Dreamweaver, go to this page.

It's almost 500k, so it's best to use it in the computer lab and not at home.

Dreamweaver Tips

1. Keyboard shortcuts and other tips are availble in an online, printable Quick Reference.