The Dreamweaver MX Workspace
*Information in this tutorial was taken from the Using Dreamweaver MX help tutorials.
Click on a link below or an area in the image. |
 |
Menus overview
This section provides a brief overview of the menus in Dreamweaver.
The File menu and Edit menu contain the standard menu items for File and Edit menus, such as New, Open, Save, Cut, Copy, and Paste. The File menu also contains various other commands for viewing or acting on the current document, such as Preview in Browser and Print Code. The Edit menu includes selection and searching commands, such as Select Parent Tag and Find and Replace, and provides access to the Keyboard Shortcut Editor and the Tag Library Editor. The Edit menu also provides access to Preferences, except on the Macintosh in Mac OS X, where Preferences are in the Dreamweaver menu.
The View menu allows you to see various views of your document (such as Design view and Code view) and to show and hide various kinds of page elements and various Dreamweaver tools.
The Insert menu provides an alternative to the Insert bar for inserting objects into your document.
The Modify menu allows you to change properties of the selected page element or item. Using this menu, you can edit tag attributes, change tables and table elements, and perform various actions for library items and templates.
The Text menu allows you to easily format text.
The Commands menu provides access to a variety of commands, including one to format code according to your formatting preferences, one to create a photo album, and one to optimize an image using Macromedia Fireworks.
The Site menu provides menu items to create, open, and edit sites, and (on the Macintosh) to manage files in the current site.
The Window menu provides access to all of the panels, inspectors, and windows in Dreamweaver.
The Help menu provides access to Dreamweaver documentation, including help systems for using Dreamweaver, creating extensions to Dreamweaver, and reference material for a variety of languages.
In addition to the menu-bar menus, Dreamweaver provides many context menus, which give you easy access to useful commands pertaining to the current selection or area. To display a context menu, right-click (Windows) or Control-click (Macintosh) an item in a window. All items in context menus can also be found in menu-bar menus. top
The Insert bar contains several tabs: Common, Layout, Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script, and Application. Additional tabs appear when the current document contains server code, such as ASP or CFML documents.
The Application tab allows you to insert dynamic elements such as recordsets, repeated regions, and record insertion and update forms. For information about dynamic content, see Adding Dynamic Content to Web Pages.
The Characters tab contains special characters such as the copyright symbol, curved quotation marks, and trademark symbols. Note that some of these symbols may not display correctly in versions 3.0 and earlier of the Internet Explorer and Netscape Navigator browsers.
The Common tab contains buttons for creating and inserting the most commonly used objects, such as images, tables, and layers.
The Forms tab contains buttons for creating forms and inserting form elements.The Frames tab contains common frameset layouts.
The Head tab contains buttons for adding various head elements, such as meta and base tags.The Layout tab allows you to insert tables and layers, and lets you choose between two views of tables: Standard (default) view and Layout view. When Layout view is selected, you can use the Dreamweaver layout tools: Draw Layout Cell and Draw Layout Table.
The Media tab contains buttons for inserting animated or interactive media objects such as Flash buttons and text, Java applets, and ActiveX objects. For more information, see Inserting Media.
The Script tab allows you to insert a script, a noscript section, or a server-side include.
The Tables tab allows you to insert an entire table or a specific table tag (such as tr, th, or td).
The Templates tab allows you to insert editable, optional, and repeating regions in template files. top
The Document window shows the current document. You can choose any of the following views:
- Design view, a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser. You can configure the Design view to display dynamic content while you’re working on the document (see Viewing live data in Design view).
- Code view, a hand-coding environment for writing and editing HTML, JavaScript, server-language code—such as Microsoft Active Server Pages (ASP) or ColdFusion Markup Language—and any other kind of code. For more information, see Coding in Dreamweaver.
- Code and Design view allows you to see both Code view and Design view for the same document in a single window.
To toggle quickly between the two views, press Control+tilde (~) (Windows) or Command+backquote (‘) (Macintosh).
When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.
When the Document window is maximized in the integrated workspace layout (Windows only), it has no title bar; in that case the page title and the file’s path and filename appear in the title bar of the main workspace window. top
Managing panels and panel groups
Panels in Dreamweaver are grouped together into panel groups. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups. Panel groups can also be docked to the integrated application window (Windows integrated workspace only). This makes it easy to access the panels you need without cluttering your workspace. Panels within a panel group appear as tabs.
*Note: When a panel group is floating (undocked), a narrow blank bar appears at the top of the panel group. In this documentation, the term “panel group’s title bar” refers to the area where the panel group’s name appears, rather than to this narrow blank bar.
To expand or collapse a panel group, do one of the following:
Click the expander arrow on the left side of the panel group’s title bar.
Click the panel group’s title.
To select a panel within an expanded panel group:
Click the panel’s tab.
To undock a panel group:
Drag the panel group by its gripper (on the left side of the panel group’s title bar) until its outline indicates that it’s no longer docked.
To dock a panel group to other panel groups (floating workspace) or to the integrated window (Windows only):
Drag the panel group by its gripper until its outline indicates that it’s docked.
Most panels can be docked only to either the left or the right of the Document window area in the integrated workspace, while others (such as the Property inspector and the Insert bar) can be docked only to the top or bottom of the integrated window.
To drag a floating (undocked) panel group without docking it:
Drag the panel group by the bar above its title bar. The panel group doesn’t dock as long as you don’t drag it by its gripper.
To see a panel group’s Options menu:
Expand the panel group by clicking its expander arrow. The Options menu is visible only when the panel group is expanded.
Tip: Some options are available in the panel group’s context menu even when the group is collapsed; right-click (Windows) or Control-click (Macintosh) the panel group’s title bar to view the context menu.
To rename a panel group:
Choose Rename Panel Group from the Options menu on the right side of the panel group’s title bar.
Enter a new name and click OK.
To undock a panel from a panel group:
Drag the panel by its tab until its outline indicates that it’s no longer docked. The panel appears in a new panel group of its own.
To dock a panel in a panel group:
Drag the panel by its tab until its outline indicates that it’s docked.
To maximize a panel group, do one of the following:
Choose Maximize Panel Group from the Options menu in the panel group’s title bar.
Double-click anywhere in the panel group’s title bar.
The panel group grows vertically to fill all of the available vertical space.
To close a panel group, making it disappear completely:
Choose Close Panel Group from the Options menu in the panel group’s title bar.
The panel group disappears from your screen.
To open a panel group that isn’t visible on your screen:
Choose the name of a panel from the Window menu.
To change the size of the entire set of panel groups (floating workspace only):
Drag to resize the set of panel groups just as you would drag to resize any window in your operating system. For example, you can drag the resize area at the lower right corner of the set of panel groups. top
The Property inspector lets you examine and edit properties for the currently selected page element, such as text or an inserted object. You can select page elements in either Design view or Code view.
To show or hide the Property inspector, choose Window > Properties.
Most changes you make to properties are immediately applied in the Document window. For some properties, however, changes are not applied until you click outside the property-editing text fields, press Enter (Windows) or Return (Macintosh), or press Tab to switch to another property.
The contents of the Property inspector vary depending on the element selected. For information on specific properties, select an element in the Document window and then click the Help icon in the upper right corner of the Property inspector.
The Property inspector initially displays most of the properties of the selected element. Click the expander arrow in the lower right corner of the Property inspector to collapse the Property inspector to show only the most commonly used properties.
Tip: In a few cases, certain obscure properties may not appear even in the expanded Property inspector; in these cases, use Code view or the Code inspector to code these properties by hand, or select the tag in Code view and choose Modify > Edit Tag. top
*Information in this tutorial was taken from the Using Dreamweaver MX help tutorials.