Overview

Dreamweaver is a high-end web-authoring tool with capabilities far superior to Netscape Composer. It is regarded as the premiere web editing tool. It fully supports Dynamic HTML (DHTML), Cascading Style Sheets (CSS-1), Cold Fusion Markup Language (CFML) and Microsoft's Active Server Pages. Major features of Dreamweaver include Round-Trip HTML (the program's ability to leave existing HTML intact), global find-and-replace, cross-broswer compatibility features and built-in Javascript-based behaviors. The program also features a site management system and an integrated visual FTP client (similar to WS_FTP).

Startup and Basic Configuration

To start Dreamweaver in a CAC lab, go to Start/Programs/Internet Programs/Web Authoring Tools/Dreamweaver

Dreamweaver's interface has a main editing window and several external palettes for inserting objects, editing properties and starting the various modules of the program. See the figure below:

You can see the main editing window in the center of the screen. The Object Palette, the window to the left, is used to inserting various objects. The Control Palette at the bottom of the screen is used for easily setting advanced formatting options for objects and text.

To make the program a bit easier to use, go to the Edit menu and select Preferences. Under Object Palette, select "Icons and Text."

Also, click on the down arrow on the Properties palette to expand it (see the figure below).

Dreamweaver should now look like this:

General Operation

To format text, highlight the text and set the appropriate options in the Control Palette. It's just like using a word processor, so the icons should be fairly familiar to you. To make a link, type the URL in the Link field at the left of the palette. If you want to link to an existing file, click on the yellow folder next to the Link field. This will open a dialog box in which you can select the desired file. Selecting a file in this manner is much easier than having to remember its exact name, as you do when you make links in Netscape Composer.

To check spelling, select the Text menu and choose "Check Spelling" (it's at the very bottom of the menu).

To insert images, movies, sounds, etc, drag the appropriate icon from the Object Palette into the editing window where you want to object to appear. You can also go to the Insert menu and choose the appropriate object type there.

The Control Palette is the center of activity for Dreamweaver. It is context-senstive; that is, the controls available within the palette change depending on what's highlighted in the edit window. Here are some example of the palette in action:

With text highlighted:

With an image highlighted:

With a table highlighted:

You can see that the palette displays only the commands which are relevant to the type of object you have selected. For example, it makes no sense to talk of making an image bold or italic, so the Bold and Italic buttons are not available when an image is selected.

If you look at the bottom of the main editing window, you will see three columns of information. The first is the current screen size of your window. This is useful if you are designing a site that has a minimum screen resolution. The second column gives you the size (in kilobytes) of the currently open page and an estimated time to download it over a 28.8 modem (to change the connection speed used to calculate the transfer time, go in to Preferences (from the Edit menu) and select 'Status Bar' on the left of the screen. There is an entry to choose between 28.8K modem, 56K modem, various cable modem speeds and high-speed LAN links (like those used on campus). The third column of the status bar has icons which will open the various modules of the program:

Resolution of Window | File Size + Download Time | Toolbar Activators

To set page properties (title, link colors, etc) go to the Modify menu and choose "Page Properties." Alternatively, you can right-click on an empty part of the editing window and choose "Page Properties"

Forms

Forms allow users to interact with a web-page. They are a useful way of collection many different types of information from users: yes/no questions, multiple-choice questions, fill-in-the-blank type information, etc. To use a form, you must first insert a form object into your web page.

The objects palette (the narrow vertical strip of icons at the left of the screen) is a "container" for many different object types. These objects are grouped together according to function. To display the form objects, click on the thin grey rectangle at the very top of the palette (which should be labeled "Common" for now). This will display a menu of different object types. Choose "Form." See the figure below:

Once you have selected "Forms" you should see the following:

These different form objects have different roles in your document. First, you must drag a Form "container" object into your document. What I'm calling a Form "container" is what's labeled "Form" (next to a little yellow square with dotted lines in it) in the Objects palette. This container tells Dreamweaver that all of the other form objects you will put in your document should behave together. You will see the container as a box of red dashed lines in Dreamweaver. All of your form objects must be inside this red box; otherwise, your form will not function properly.

The remaining form objects are called input types. Text Fields are just that -- they provide users a place to enter freeform text. Checkboxes are useful for gathering closed-ended information where multiple responses are allowed. Radio buttons, on the other hand, are also good for closed-ended information, but only allow one-responce (they're called radio buttons because the behave like the buttons on a radio or CD player -- only one of them can be pushed-in at a time).

A List Menu is also a closed-ended input type, but it displays its information as a menu. It can be set to allow only a single response or multiple responses to be selected.

Finally, each form must have at least one button, the Submit button. Every form has an action associated with it. This action is usually a program on a web server which will process the information on the form. The Submit button is what sends the information in the form to the web server. You can also have buttons to clear all of the entries on a form (called a Reset button); this is useful to use if a user has made many mistakes on a form and wants to clear the form.

We will not be using the other form input types in this course.

Each of the different input types works slightly differently. You set their options by clicking on them, and setting the appropriate values in the Control Palette. Note: by "click on them" in the previous sentence, I mean click on the form element not the descriptive text. So below, you would click on the text field next to "Name:" not on "Name:" itself.

Here is a sample form in Dreamweaver showing how these different form elements work together:

Frames

Frames are a method of dividing the web-browser window into different elements which operate independent of one another. Frames-based webpages are actually composed of several different HTML files. A master file, called the frameset describes how the web-browser window is to be divided into different regions. Each of these regions is then a separate HTML file.

To design a site with frames, go to the View menu and select "Show Frame Borders." You should see a thin gray line around the inside of the editing window. Next, from the Window menu, select "Frames." A small mini-window should appear on the screen. To make a frameset, put the mouse over one of the borders and Alt-drag the mouse. "Alt-dragging" is holding down the ALT key and dragging the mouse. You can use Alt-dragging to divide the screen into different regions. When you're finished, go to the File menu and choose "Save Frameset" (not Save).

You must now give each of these frames a name. Notice that the Frames mini-window contains a thumbnail view of your frameset. It should look something like this:

Click on each frame in the Frames mini-window. The Control Palette will change and display frame properties. Type a name for the frame. Repeat this process for each frame in your document and choose "Save Frameset" from the File menu. See the image below for what the Control Palette will look like when a frame is selected.

If you want a webpage in one frame to open a link in another frame, you have to set the Target value. To do this, make the link as normal and choose the Target (which is the name of the frame you want the link to open in) in the Control Palette:

Other References and Tutorials

For a quick introduction to basic web editing with Dreamweaver, go to this link

For a more complete overview of Dreamweaver, see Macromedia's Dreamweaver support page (this site features a nice animated overview of Dreamweaver).