UNIT A Viewing the Dreamweaver Dreamweaver MX The workspace, shown in Figure A-3, consists of the document , the bar, , inspectors, and panels. When you first start Dreamweaver, the program asks you to choose a workspace layout. Windows users can choose one of two different layouts for the workspace: In the MDI (Multiple Document Interface) layout, all of the windows and panels are integrated into one large window with the panels docked on the right side of the screen; in the Dreamweaver 4 workspace layout, the panels and windows are floating, rather than docked. Macintosh users must use the floating workspace layout. The figures in this book show the inte- grated workspace layout. Inspectors are palettes that display the properties of the currently selected object. Inspectors allow you to make formatting changes quickly and easily, without having to open menus. Panel groups are also palettes, containing tabs for activating Dreamweaver features and commands. You spend some time familiarizing yourself with the Dreamweaver workspace. Use Figure A-3 to find the follow- ing elements: DETAILS

• The title bar displays the name of the program (Dreamweaver), the name of the file, and the title of the open page enclosed in parentheses. If the Document window is not maximized, the filename and page title appear in the Document window title bar. The title bar also includes buttons for minimizing, resizing, and closing the window in the upper-left or upper-right corner, depending on which type of computer you are using.

• The menu bar, located under the title bar, lists the names of the menus, which contain Dreamweaver com- mands. (On a Macintosh computer, the program title bar and the menu bar are combined.) You can also issue commands by using shortcut keys or by clicking corresponding buttons on the various panels.

TROUBLE • The Insert bar contains buttons on tabs that allow you to insert objects, such as images, tables, and hori- If you don’t see the zontal rules. Each contains buttons relating to a specific task category. When you insert an object using Insert bar, click one of the buttons, a opens, letting you choose the object’s characteristics. Window, Insert.

TROUBLE • The Document contains buttons for changing the current Web page view, previewing and debug- If you do not see one ging Web pages, and managing files. The toolbar buttons are listed in Table A-2. of the toolbars, click View on the • The Standard toolbar contains buttons for some frequently used commands on the File and Edit menus. Document window menu bar, point to Toolbar, then click • The Document window is the large white area under the Document toolbar. Open Web pages appear in this area. Document or Standard. • The Property inspector displays the characteristics of the selected Web page object. You can change an object’s properties using the text boxes, drop-down menus, and buttons on the Property inspector. The con- tents of the Property inspector vary according to the object currently selected.

• The appears at the bottom of the Dreamweaver window. The left end of the status bar displays the tag selector, which shows the HTML tags being used at the insertion point location. The right side dis- plays the window size and estimated download time for the page displayed.

• Panels are small windows containing program controls. Related panels are displayed together in panel groups, such as the Design, Code, Application, and Files panel groups. You display a panel by choosing its name from the Window menu. Panel groups can be docked on the right side of the screen, or undocked by dragging the gripper on the upper-left corner of the panel. When two or more panels are docked together, you can access the panel you want by clicking its name tab. As each tab is clicked, the tab will slide downward and the panel contents will be displayed. To collapse or expand a panel, click the expander arrow on the left side of the panel group.

6 DREAMWEAVER MX UNIT A: GETTING STARTED WITH MACROMEDIA DREAMWEAVER MX Copyright © 2002 by Course Technology. All rights reserved.This publication is protected by federal copyright law. No part of this publication may be reproduced without prior permission in writing from Course Technology. Some of the product names and company names have been used for identification purposes only and may be trademarks or registered trademarks of their respective manufactures and sellers. FIGURE A-3: The Dreamweaver workspace Title bar Menu bar Insert bar Document toolbar Standard toolbar

Document window

Status bar

Property inspector

Panel groups Panels

TABLE A-2: Document toolbar buttons button name function Show Code View Displays only the Code View in the Document window

Show Code and Design Views Displays both the Code and Design Views in the Document window Dreamweaver MX Show Design View Displays only the Design View in the Document window Live Data View Displays Design View with dynamic content File Management Displays file management options Preview/Debug in Browser Activates the browser for viewing or debugging the page Refresh Design View Forces Dreamweaver to reread the page to view changes made in Code View Reference Activates the Reference panel Code Navigation Allows you to navigate through your JavaScript code View Options Activates the View Options menu

UNIT A: GETTING STARTED WITH MACROMEDIA DREAMWEAVER MX DREAMWEAVER MX 7 Copyright © 2002 by Course Technology. All rights reserved.This publication is protected by federal copyright law. No part of this publication may be reproduced without prior permission in writing from Course Technology. Some of the product names and company names have been used for identification purposes only and may be trademarks or registered trademarks of their respective manufactures and sellers.