Unit 2.The Dreamweaver Interface.

We're going to see which are the basic elements of Dreamweaver 8: screen, bars, panels, etc, also we will learn to know how to differentiate between each one of them. We'll learn how they are called, where they are and what they are used for. We'll also see how to obtain help, in case that at some moment we don't know how to continue working.

When we know all this we'll be ready to begin to create web Pages.

The initial screen

When we start Dreamweaver an initial screen appears like this one, we're going to look at its fundamental components.

We will list the names of the different elements so it will be easier to understand the rest of the course. The screen that is next (and in general all those of this course) does possibly not coincide exactly with what you see in your computer, since each user can decide what elements they want to see at every moment, as we'll see ahead.


The tool bars


Title bar

The title bar contains the name of the program (Marcromedia Dreamweaver 8) and the name of the document we are working with, between parenthesis you can see the name of the file format this file is codified. At the end on the right are the buttons to minimize, maximize/restore and close the program.

Menu bar

The menu bar contains Dreamweaver operations, grouped in drop down menus. When we click on Insert, for example, we'll see the operations related to the different elements that can be inserted in Dreamweaver.

Many of the operations can be done from these menus, but sometimes it's preferable (or compulsory) to do them from the panels.

The Standard ToolBar

The standard toolbar contains icons to execute some of the most habitual operations immediatelly, like Open , Save , etc.

The document toolbar

The document toolbar contains icons to execute some other habitual operations that the standard toolbar doesn't include. These operations are for example changing the view of the document, preview, etc.


 The status bar

status bar

The status bar shows us in every moment the HTML tag we are in (in the image, as we are in a blank document, we are directly on the <body> tag). We also can swich between the selection, drag and zoom modes using the three buttons on the right. You can select the zoom which you want to view the Design View selecting a percentage or just tipying it on the percentage textbox (the default is 100%).


Panels and Inspectors


Dreamweaver uses floating windows similar to the toolbar ones, these are known as panels or inspectors. The difference between panel and inspector is that, in general, the appearance and options of an inspector changes depending on the selected object.

Through the Window option on the menu bar, it's possible to show or to hide each one of the panels or inspectors. We're going to look at the most important ones.

The Properties inspector

The Properties inspector shows and allows us to modify the more frequent properties that are used in the selected elements. For example, when we select element a text it will show the type of font, the alignment, whether it's in italic or bold, etc.

Clicking on the button you can unfold more options. This button is in the bottom-right corner.

It will surely be the tool that you are going to use most in Dreamweaver.


The insert toolbar or panel of objects.

The insert toolbar or panel of objects allows you to insert elements in a document without having to use the menu. The elements are classified according to their category: tables, text, forms, etc.

It's possible to configure this panel so that the icons of the objects are shown as buttons (in the previous image), as names, or both simultaneously.


If you wish to, you can customize the work area, we will explain how to do it here .

  Go to the previous page page Content  Go to the nex page  

Page 2.1