• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 1. Dreamweaver MX Basics > Exploring the Tools

Exploring the Tools

Open Dreamweaver MX.

Before jumping into the creation of any Web pages, you need to become familiar with the variety of tools and panels in Dreamweaver that will enable you to effectively produce a Web site. If this is your first time opening Dreamweaver, you will see a Welcome window that provides information for users who are new to Dreamweaver, as well as a rundown of the new features for those who are already familiar with the program. Buttons on the bar at the bottom of this window allow you to navigate through the program information. If you want to close this window and view it another time, you can always access it from Help > Welcome. Also visible when you open Dreamweaver will be a new document window—this is where your design and coding work will be done. You may also see panels for adding or changing text and objects, working with site files and more. The visible panels might include the Insert bar, the Property inspector, the Site window, and the Answers panel.

You will see that the majority of Dreamweaver's panels are grouped according to their functions within panel groups. These panel groups include Design, Code, Application Building, Files, and Answers. Panel groups let you quickly hide or access your most frequently used panels. You can access all of the panels within these groups, as well as others, from the Window menu.

If you have opened Dreamweaver before, the panels will be placed exactly where they were the last time you quit the program. In the Window menu, a checkmark next to an item indicates that the panel or toolbar is open and visible. There may be instances in which a panel is hidden beneath another panel or the document window. To display a hidden panel, choose it from the Window menu again. If the panel you choose is in a panel group that is not currently visible, both the panel and the panel group containing that chosen panel will appear.


If a panel is selected but cannot be seen, choose Window > Arrange Panels to reset all open panels to their default positions. The Insert bar will move to the top left corner of the screen, the Property inspector will move to the bottom of the screen, and all other open panels will move to the right of the screen. For Windows users only, Dreamweaver MX introduces a new workspace that integrates all Dreamweaver-related windows and panels into one window. Windows users can switch back to floating windows and panels by choosing Edit > Preferences, selecting the General category, and clicking the Change Workspace button. The Workspace Setup dialog box will open; there you can select the desired workspace option. The Dreamweaver MX Workspace is the integrated workspace. The Dreamweaver 4 Workspace uses the floating windows and panels. Click OK to close the Workspace Setup dialog box, and click OK to close the Preferences dialog box. You must restart Dreamweaver in order for any changes to the workspace settings to take effect. The Dreamweaver MX Workspace is the recommended workspace. The integrated workspace is not available in the Macintosh version.

Move the pointer over the document window. Rest the pointer over a button to see its name.

The majority of your work will take place within the document window, where you can insert, modify, and delete the wide variety of elements that make up your Web page. As you work, the document window displays an approximation of the way your page should appear in a browser. By default, this page will initially be called Untitled Document, as you can see on the document title bar. The name of the file will be also be shown on the title bar, displayed in parenthesis after the title of the document. The name of the document is also shown in the Title text field on the document toolbar. On the Macintosh, the toolbar is part of the document window. In Windows, the toolbar is a separate panel that you can move if necessary; it is located just above the document window.

There are three viewing modes in Dreamweaver: Design View, Code View and Split Design and Code. The buttons for these modes are located on the left side of the document toolbar. At this point, the viewing mode you are using should be Design View. The button will highlight to indicate that Dreamweaver is displaying the page in that viewing mode. You will work with the Code View and Split View in Lesson 12. If the document window is shown split into two panes with code in one, you will need to select the Design View icon located on the document toolbar.

In the bottom left corner of the document window is the Tag Selector. The Tag Selector always starts from the <body> tag, hierarchically displaying HTML tags that apply to the currently selected element.


You can use the Tag Selector to select and navigate through the elements in your page by using the HTML tags that correspond with those elements. This tool allows you to move quickly through the hierarchy of code on the page, to see what element you are working with, and to select other elements easily. Getting used to working with the Tag Selector will be particularly helpful when you begin using tables in Lesson 4.

You'll become familiar with the many buttons and customizable options in the document window as you work through the lessons in this book.

Move the pointer over the Insert bar. Rest the pointer over a button to see its name.

The Insert bar contains many of the objects or elements that you can add to your page, including images, tables, special characters, forms, and frames. The elements you can insert are arranged in groups according to their type. The groups include Common, Frames, Forms, Layout, Characters, and more. You can select a group by clicking the corresponding tab. A number of special characters, for example, are in the Characters group while common elements such as an image or table are in the Common group. You can also access these objects and elements through the Insert menu.


Throughout this book, the words “object” and “element” are used interchangeably. Where possible, “object” has been used when referring to the button, and “element” has been used for the item once it appears within the document window.

To insert an element, you can drag the object's icon from the Insert bar to the location you would like it to appear in the document window. You can also place the insertion point in your document where the element should appear, and then click the object's icon in the panel. When you click the icon, the element appears in the document at the insertion point.


Depending upon the object you select, a dialog box may appear, giving you options for the element's properties and placement. For certain objects, such as tables and images, you can bypass the dialog boxes and insert a placeholder element instead by holding down the Option key (Macintosh) or Alt key (Windows). Using a placeholder may be useful if you are working on pages for which photographs or artwork are forthcoming. Dreamweaver MX now includes a button, located on the Common tab of the Insert bar, specifically for the creation of placeholder images.

On the Macintosh, you can also view the Insert bar in a vertical orientation by clicking the Vertical Insert Bar icon located in the lower right corner of the panel. When viewing the vertical panel, access object groups by clicking the black arrow, which indicates the objects pop-up menu, located at the top right corner of the panel. The vertical orientation will place the objects in different locations and slightly change the groups of objects from what they were on the horizontal Insert bar. This option is not available in Windows.

Move the pointer over the Property inspector. Rest the pointer over a button to see its name.

You will use the Property inspector to view and modify the attributes of selected text, images, tables, and other elements on your page. The Property inspector is contextual—the attributes that it makes available will change depending on what is selected in the document window. To reduce or expand the Property inspector, click the expander arrow in the bottom right corner of the panel. If the Property inspector is reduced, there may be additional properties that are not visible until you expand the panel.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint