Dreamweaver is an HTML editor with some different and some more advanced features than are found in some other editors.  You can download a trial version of Dreamweaver to use for thirty days. After thirty days, it will expire. Dreamweaver costs $299 if you buy it online. Academic versions are available, but not advertised on the web site. The academic cost is around $130.

The Basic Features

Dreamweaver will perform the basic functions we are accustomed to in an HTML editor. We will present some of those functions here so that you can use them during this workshop.

H1, H2, etc. - Text menu, Format, or Format from the Properties Window

Center, Right, Left - Text menu, Alignment or Alignment buttons from the Properties Window

Font change - Text menu, Font or Font drop down box from the Properties Window

Font color - Text menu, Color or Text Color box from the Properties Window

If it is not already open, start Dreamweaver by clicking the Start Menu, then Programs, then Macromedia Dreamweaver 2, then Dreamweaver 2 . 

From the File menu, select Open. From the Dreamweaver folder open the file called admissions.html.

Apply some basic formatting features as indicated above to the text in the admissions file.  Try creating Headers, Aligning Text, Changing fonts, and Changing font color.
 

Using the Properties Box

You can view and change the properties of any selected text by using the Properties Box. To open the Properties Box: From the Window menu, click Properties.

 It is very convenient to view and change properties using the controls in the box, instead of using the Menu bar.

Activity------------------------------------------------------------------

Click on any text you modified in the admissions page to view the properties (color, size, format, etc) displayed in the Properties box. 

Change some properties using the buttons as illustrated above. 

Create a list by selecting all the items in a list and clicking one of the List buttons. When you are finished, click the List button again.

The up arrow in the lower right hand corner shrinks the Properties Box to show only the most commonly used items and to hide the Table options. To expand the box again, click the down arrow in the lower right hand corner.

Viewing and Editing HTML

One advantage that Dreamweaver has over other editors is that you can easily switch between WYSIWYG display and HTML tag display.

From the Window menu, select Launcher if it is not already selected.

The Launcher has buttons that toggle the display of various boxes and modes. Click the HTML button to view the HTML editor.

Activity---------------------------------------------------------------------

Change Dreamweaver's settings so that either the HTML editor or the WYSIWYG window can be on top. 

From the Edit menu, select Preferences.....  Select Floating Palettes .  Uncheck the HTML box.  Now, either window can be on top.

Type some text in the HTML editor and immediately, the WYSIWYG display is updated. It is very easy to hand edit code and still have the benefits of a graphical editor. 

Type some text in the WYSIWYG display and the HTML code is updated.

Don't Change My Code!

Have you ever spent time editing and formatting your HTML code so that it looks the way you want for easy readibility? When you open HTML code in many editors, make some changes and save,  your code may change.  Some HTML editors remove your formatting.  They may also insert their own <meta> information. This is very annoying and sometimes downright destructive. Dreamweaver doesn't (usually) change your HTML code.

Previewing in a Browser

After creating some HTML in Dreamweaver, you will want to view it in a browser. To preview, click the File menu, and select Preview in Browser. 

Even though Dreamweaver is a WYSIWYG editor, some of the advanced features will not show in the editor window.  They will show up in the appropriate browser.

Marking your Errors

If you prefer to type in HTML tags by hand, Dreamweaver can provide some basic help if there is an error.

When you don't properly close a tag, the error that results is marked in bright yellow in the text, as in the image below where the font tag has not been closed.

You can shift to HTML view and correct the error, or click on the offending tag to select it and delete it.

The Objects Palette

If it is not already visible, from the Window menu choose Objects to open the Objects Palette.

The Objects Palette allows you to easily insert a type of object by clicking on its icon. You can change the category of object and the icons that appear by clicking the small down arrow at the top.

The choices of object categories include Common (images, tables, layers, etc) , Forms (check boxes, radio buttons, text boxes, etc), Head (meta tags, keywords, descriptions, etc), and Invisibles (anchor tags, scripts, comments, etc). The image to the left shows the icons that represent the objects you can insert with the Common category.

Return