• change your workspace to MX settings
• use the Design View
• find Properties Inspector and Objects Inspector
• open site panel
• create a site
• create a page

Estimated Time to Read and Digest: 60 Minutes

What Is Dreamweaver?

Dreamweaver is the industry leading program that allows you to create sophisticated Web sites (Digital Portfolios) in HTML format without having to learn HTML.

The Development Window is WYSIWYG (What You See Is What You Get); in other words, you use toolbars to format and design a page, and Dreamweaver writes the appropriate code "behind the scenes."

Figure 1A-A

Figure 1A-B

Figure 1A-C

Opening DW for the first time can be intimidating. All those panels and toolbars! What do you do with them?

Actually, at the beginning, you won't do much of anything with them. Below, you will learn that there are only two toolbars (called "Inspectors") and one panel set you need to know how to use--at least at the beginning.

The rest you can simply ignore for a while.

In these instructions, we will use the MX workspace.

DW opens up as it was closed down. So if you open DW in a lab, you will open the program with the exact workspace arrangement as the user had before you.

It could look something like Figure 1A-A

To change the Workspace to MX:

• click on Edit-->Preferences
• select General
• click on Change Workspace
• in the Workspace Setup box (Figure 1A-B) click on "Dreamweaver MX Workspace"
• click on Ok
• close Dreamweaver

When you open DW back up, your workspace should look similar to Figure 1A-C

You can move panels and toolbars around to suit you. But the instructions in this Digital Portfolio First Steps series will assume the default setup for Dreamweaver MX Workspace.

At the beginning, work only in the Design View.

Make certain the Design View button (Figure 1A-D) is selected

• The Design View gives you the WYSIWYG window
• The Code View displays and allows you to edit HTML.
• The Split View displays both the Design view and Code view

Figure 1A-E

Figure 1A-F

Figure 1A-G

Figure 1A-H

Figure 1A-I

Figure 1A-J

1. Insert Inspector (Figure 1A-E)
2. Properties Inspector (Figure 1A-F)

DW calls these toolbars "inspectors."

The default workspace setup places:

• the Insert Inspector at the top of the workspace
• the Properties inspector at the bottom of the workspace

Spend a few minutes exploring these two features. They will be the tools you use most, whether you are a beginner or an advanced user.

The Insert Inspector allows you to inspect and, well, insert "objects" on your page. Click on an icon, and Dreamweaver provides the appropriate tool(s).

The Insert Inspector has 12 tabs. You can click around and look at the features, but here at the beginning, we will only use a few icons on the COMMON tab (Figure 1A-G). Don't worry about the rest for now.

Keep the Common Tab selected on the Insert Properties. Then, for example, to add an image to the page, simply click on the image icon. To add a table, click on the table icon.

Note: If the icon meanings are not obvious to you, hover the mouse cursor over the icon, and DW will tell you what it is.

The Properties Inspector allows you to inspect and alter the properties of items on the page (text, tables, images, etc.)

Properties Inspector is the tool you will use most often, providing the majority of formatting and layout features.

The Properties Inspector is contextual. It changes features--depending on what you have selected in the window.

• The default interface is for text (Figure 1A-H)
• If a table is selected, you will get a different set of tools (Figure 1A-I)
• If an image is selected, you will get yet another set of tools (Figure 1A-J)

By selecting (or highlighting) the objects on the page, then clicking on the appropriate PROPERTIES INSPECTOR ICON, you can:

• right, center, or left align
• change fonts and font color
• make text bold and italicize
• number, button, and indent
• make hyperlinks (See Step Two)

Figure 1A-K

Figure 1A-L

DW offers an array of panels for advanced design and coding.

To access the panels:

• click on the white arrow next to the feature (Figure 1A-K)
• panels and features will appear in tabbed format

For the time being, however, you can safely ignore most of them.

The only panel you need to have open is the FILES PANEL-Site Tab. (Figure 1A-L)

If the Files Panel has been closed, click on the white arrow next to FILES.

This displays the file structure of your site. (You will learn how to create a site in the next section.)

The illustration to the left (Figure 1A-L) is what I currently see as I write these instructions.

Note:

• There is almost always more than one way to access a toolbar, panel, inspector, feature, or whatever.
• You can arrange your workspace however it makes most sense to you.

THE BOTTOM LINE

For most of you, the use of development windows and toolbars should not be completely new. The formatting tools and features of Dreamweaver are in some respects the same as the tools and features of, say, Word or WordPerfect.

Spend some time clicking around.

Don't worry. You won't break anything. Remember, you can always get the default MX setting back by going to Edit --> Preferences, then selecting the General Tab and clicking on Change Workspace.

And if you have a problem or question, go to the Dreamweaver Basics Discussion Forum and post it. You should get an answer within 24 hours, if not much sooner.