Bars, Windows, and Inspectors

---

The Dreamweaver Document window is where you design, code, and edit your Web pages. You use the bars and inspectors surrounding it to add, modify, and manipulate your pages and the elements they contain.

Dreamweaver MX menus

Standard program/application menus, as shown in Figure 31-2, provide access to Dreamweaver MX's tools, features, and functions. Each menu offers a related set of options, as discussed in the following list:

• File and Edit menus give you options to create, save, preview, and edit pages and page elements.

• The View menu offers items that are also on the Document bar (see the following paragraphs) and can be used to view and edit rulers and grids.

• The Insert menu mirrors the Insert bar, with options that match the toolsets.

• To edit page properties or elements, including table structures, use the Modify menu.

• The Commands menu contains tools with special functions; you can download and install new commands, or build your own with the History panel.

• The Site menu contains management and publishing options.

• The Window menu provides access to and helps organize all the panels in Dreamweaver MX. It also lists all open documents.

• Finally, the Help menu offers access to resources for using Dreamweaver MX, including tutorials, help files, and support links.

Figure 31-2: The application menus

Bars and inspectors in Dreamweaver MX provide access to tools, functions, and properties for developing Web pages.

The Insert bar

Located below the application menus, the Insert bar (Figure 31-3) is a panel of different toolsets, from a common set containing basic editing functions to specialized sets like frames, forms, and special characters. Click a toolset tab to bring those tools to the forefront. Each toolset contains icons, text, or icons and text, depending on your preferences' settings. By default, only icons are displayed, but if you hover over a tool, a ToolTip lists its function.

Figure 31-3: The Insert bar

The Document bar

Along the top edge of the document window, the Document bar (Figure 31-4) contains buttons for accessing and controlling views. In Dreamweaver, you can build your pages in a visual Design view, in Code view, or in a Split view environment. Each view offers its own advantages depending upon your preferred method of working. To select a view, click its button. Views also include a Live Data view, which you use when building Web applications connected to a data source. Other views include the Remote Web server, and the local view of the Web browser in Preview mode or when debugging in a browser.

Figure 31-4: The Document bar provides access to all views.

The View menu (main application menu) offers a way to hide or display elements in your pages, based on your view choice. When Design view is selected the View menu options include Table, Frame, Layer borders, and an option for displaying icons for invisible elements. Grayed out options are not available. In Code view, Word Wrap and Line Numbers are some of your choices. These choices also include code indent and syntax coloring. Split view offers Design and Code view options.

The Document window

Depending on your workspace layout and computer platform, your documents open in an application window (Windows, integrated layout) or as floating, separate windows (Windows or Macintosh, Dreamweaver 4 layout). By default, Dreamweaver opens a new, untitled document each time you start the program, but you can disable this option in your preferences. When you disable it, the program starts up with only the docked panels (Windows only, integrated layout) or Site Window (Windows or Macintosh, Dreamweaver 4 layout) showing. To disable the new, untitled document on startup, follow these steps:

1. Choose Edit ® Preferences.

2. In the General category, check the Show Only Site Window on Startup box.

3. Click OK.

The Status bar

Along the bottom of the Document window, the status bar (Figure 31-5) contains the Tag selector, Window Size selector, and Download Speed indicator. Although you will barely notice the selector at first, as you build your development skills, you will come to rely on this feature's powerful functions. Web documents are based upon a Document Object Model (DOM), which is based on tags that tell the browser how to display the content in the page. The Tag selector reveals some of this model by showing you the relationship of your cursor or selection point to the <body> tag. Web browsers display elements between opening and closing <body></body> tags.

Figure 31-5: The Tag selector

You can select any tag that is part of the display by clicking it in the Tag selector. In complex table structures, this makes tag selection and editing a snap.

Tip 

Selecting the <body> tag selects everything on your page.

Use the Window Size selector to mimic the browser window size to ensure that your pages fit your planned target dimensions. The Download Speed indicator gives you a rough estimate of how long it will take to download the page code and graphics, based on your modem configuration and connection speed. You can modify these settings in the program Preferences menu (Edit®Preferences). To modify a setting quickly go to the Window Size menu (Figure 31-6) by clicking and holding over the small black arrow there.

Figure 31-6: Edit window size options and download speeds

The Property inspector

To work with each HTML tag's attributes, use the Property inspector, shown in Figure 31-7. By default, the Property inspector is docked along the bottom of the Document window. The inspector is contextual, meaning that its contents change based on the currently selected tag. If you cannot find the Property inspector, you can access it via the Window menu or press Control+F3 (Command+F3).

Figure 31-7: The fields in the contextual Property inspector change with the page element selected.

The Property inspector is your primary tool for setting element attributes. Be sure to click the small white arrow at the bottom-right edge of the inspector to expand the panel fully. Depending upon the element selected, you can enter values, choose from menus populated with options, and browse or point to specific files in the Site panel (window in the floating layout). Press Tab to move among fields.

Tip 

When entering values for tag properties, get into the habit of pressing the Return or Enter key afterwards. This action updates the document and ensures that the value is accepted.

---