Dreamweaver is considered by many to be the industry standard in hypertext markup language (html) editor among web professionals. With Dreamweaver, the user can work either directly with html code or in a graphic editing environment that functions like a word processing program (e.g. MS Word). Although Dreamweaver can accomplish many difficult tasks- such as writing Cascading Style Sheets (CSS)- it is relatively easy to use for creating ordinary web pages.

It's not a bad idea to get your web server access setup before you start. You can jump to that section now: Creating and Managing a Site.

When you first open Dreamweaver, you should see a dialog box that suggests you create a new Dreamweaver document. If none appears, go to File > New on the very top menu bar. This will open a new document diaglog box. To start with, open up a basic html page.

At the bottom of your document window:

Tag Selector: Displays the tag associated with the current cursor location. Clicking on the tag selects an entire component (such as a heading or an image).

The Object Properties Panel

Everything you insert into a page - including text, graphics, tables, and horizontal lines - are considered “objects” that have certain “properties.” When you select an object, the Properties bar at the bottom of the screen displays all of the formatting properties associated with that object, including any links. By default, the Properties bar is set to text. Using this bar, you can format most objects, such as:

• Properties of text: Style, font, size, text decoration, alignment, bullets, numbering, indent, and links.
• Properites of images: Heigt, width, source (path of the image), alignment, link, and alternative text (text displayed when the mouse rolls over the image).
• Properties of tables: Width, height, alignment, and borders.
  

You can establish background colors, margins, and other basic page/layout features by selecting Modify > Page Properties in the top menu bar.

At the top of the dialogue box is a field in which you can enter a title for your web page. Just underneath is a field for entering the name of an image to use as the background (you can navigate to an image on your hard drive by selecting Browse). You can also set default colors for your text, background, and links (in all three states) by clicking on the appropriate square and selecting a color.

As you move the eye dropper icon around the colors, the hexadecimal values of each color will appear in the gray bar across the top. More options are available under the buttons on the top right. Selecting the color wheel will give you a spectrum from which you can choose millions of different colors. Selecting the arrow allows you to choose from a collection of gray shades.

Inserting Objects

To insert text:

Choose an insertion point in your Document window and start typing, or cut and paste text from another document into your Document window. You can control the font style, color, size and other characterisitcs through the Properties panel. You can treat Dreamweaver text much as you would a word processor, but note that you must create line breaks or paragraph breaks manually:

To create a single line break: Hit "shift" and "Enter"

To create a double link break: Simply hit "Enter"

To insert a hypertext link:

Highlight the text in your document that you'd like to make into a hypertext link, then type the URL of your link into the Link box in the Properties bar. Note that the URL should include "http://", such as:

http://www.willamette.edu

To insert an image:

1. Place the insertion point where you want the image to appear in the Document window, then select the image icon in the Common Objects menu to choose a graphic file.
2. Browse to select the image you want to insert.

   If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

3. Click OK.

To insert a table:

1. Place the insertion point where you want the table to appear in the Document window, then select the table icon in the Common Objects menu.
2. A dialog box will appear asking you for information about the desired characteristics of your table, such as the number of columns and rows you'd like.
3. Control additional properties of your table via the Properties bar, and also through the "Modify > Table" commands in the top menu bar. Note that you can control for border visibility through the properties bar - setting it to zero will cause your table borders to appear as dotted lines in Dreamweaver, but will appear invisible in a web browser.

You can explore the "Insert" top menu item or the Objects palette to see other items that DreamWeaver can insert, including Flash, audio and video files, forms, and scripts.

Previewing Your Work

Since different browsers render html differently, it is a good idea to preview your work in the two major browsers- Netscape and Internet Explorer. Dreamweaver offers a shortcut: under the File menu, select Preview in Browser. Dreamweaver will open the browser on your machine and load your page. You can add up to 20 different browsers by selecting Edit browser list. Your primary browser will automatically be assigned the keyboard shortcut F12, and your secondary browser will automatically be assigned Ctrl-F12.

A rollover- easily one of the most popular visual effects on the internet- is an image that changes when you roll the mouse over it. The effect is created when two images swap at just the right time. You can create mouse rollovers by selecting Insert > Interactive Images > Rollover Image. You are prompted for a name that will refer to both images (any unique name will work) and are given two browse button to navigate to the two image files you want to use. Checking the option Preload Rollover Image will cause the images to be stored in the client browser’s cache so they will appear immediately when they need to. If you want to make the rollover image a link, you can also insert a Uniform Resource Locator (URL) in the given field.

Go to Site > New Site to create a new site. This will open the site definitions. Dreamweaver provides a way for you to work on several pages. This feature enables you to create your web structure locally before you upload it. Following this method, all relative links will continue to work.

Editing Files: Work with your files by first editing them locally on your machine, then uploading them to the server (the strongly recommended setting - DreamWeaver often fails if you try to set your local and remote sites to the same location). You'll need to select a folder on your local computer on which to store your files. You can name this folder anything; Dreamweaver may try to suggest a folder name that is the same as your site definition name.

As long as you are going to be the only person working on the site, select No. If you will be sharing access to the site, check Yes. By checking Yes, only one person will be able to work on pages within the site at one time (the person will "check out" individual pages on the site when working on it, just as they would "check out" a book from the library).

Now you can create and edit your web pages. Remember to use the green download or blue upload arrows to download and upload your web files.