DRAFTUsingADOBE® DREAMWEAVER® CS5This Help PDF is a subset of the complete, up-to-date Help available online. To see Help online,connect to the Internet. You can also use the new Community Help AIR application to downloadcomplete HTML Help for offline use.
DRAFTLast updated 2/17/2010 1Chapter 1: What’s NewFollowing is a list of top new features for Adobe® Dreamweaver® CS5.Adobe BrowserLabDreamweaver CS5 integrates with Adobe BrowserLab, one of the new CS Live online services, which provides a fastand accurate solution for cross-browser compatibility testing. With BrowserLab you can preview web pages and localcontent using multiple viewing and comparison tools. See “BrowserLab” on page 443.Business Catalyst integrationAdobe Business Catalyst is a hosted application that replaces traditional desktop tools with one, central platform forweb designers. The application works hand-in-hand with Dreamweaver, and lets you build everything from basic data-driven websites to powerful online stores.CSS enable/disableCSS enable/disable lets you disable and re-enable CSS properties directly from the CSS Styles panel. Disabling a CSSproperty simply comments out the specified property without actually deleting it.CSS InspectionCSS Inspect mode lets you visually display the CSS box model properties—including padding, border, and margin—in detail without reading code or requiring a separate third-party utility such as Firebug.CSS starter layoutsDreamweaver CS5 includes updated and simplified CSS starter layouts. The complex descendent selectors from theCS4 layouts have been removed and replaced with simplified, easy-to-understand classes.Dynamically-Related FilesThe Dynamically-Related Files feature lets you discover all of the external files and scripts necessary to assemble PHP-based Content Management System (CMS) pages, and displays their filenames in the Related Files toolbar. By defaultDreamweaver supports file discovery for the Wordpress, Drupal, and Joomla! CMS frameworks. See “OpenDynamically-Related Files” on page 65.Live view navigationLive view navigation activates links in Live view, allowing you to interact with server-side applications and dynamicdata. The feature also allows you to enter a URL to inspect pages served from a live web server and edit pages you havebrowsed to if they exist in one of your locally defined sites.PHP custom class code hintingPHP custom class code hinting displays the proper syntax for PHP functions, objects, and constants, helping you typemore accurate code. Code hinting also works with your own custom functions and classes, as well as third-partyframeworks, such as the Zend framework.Simplified site setupThe newly redesigned Site Definition dialog box (now the Site Setup dialog box) makes it easier to set up a localDreamweaver site so that you can start building web pages right away. The remote server category lets you specify yourremote and testing servers in one view. See “Set up a new site” on page 35.
DRAFTLast updated 2/17/2010 3Chapter 2: WorkspaceThe Adobe® Dreamweaver® CS5 workspace contains the toolbars, inspectors, and panels that you use to build webpages. You can customize the general appearance and behavior of the workspace.Dreamweaver workflow and workspaceDreamweaver workflow overviewYou can use several approaches to create a website. This is one approach:Plan and set up your siteDetermine where the files will go and examine site requirements, audience profiles, and site goals. Additionally,consider technical requirements such as user access, as well as browser, plug-in, and download restrictions. Afteryou’ve organized your information and determined a structure, you can begin creating your site. (See “Working withDreamweaver sites” on page 34.)Organize and manage your site filesIn the Files panel you can easily add, delete, and rename files and folders to change the organization as needed. TheFiles panel also has many tools for managing your site, transferring files to and from a remote server, setting up a CheckIn/Check Out process to prevent files from being overwritten, and synchronizing the files on your local and remotesites. From the Assets panel, you can easily organize the assets in a site; you can then drag most assets directly from theAssets panel into a Dreamweaver document. You can also use Dreamweaver to manage aspects of yourAdobe®Contribute® sites. (See “Managing files and folders” on page 67 and “Managing assets and libraries” onpage 101.)Lay out your web pagesChoose the layout technique that works for you, or use the Dreamweaver layout options in conjunction with oneanother to create your site’s look. You can use Dreamweaver AP elements, CSS positioning styles, or predesigned CSSlayouts to create your layout. The table tools let you design pages quickly by drawing and then rearranging the pagestructure. If you want to display multiple elements at once in a browser, you can use frames to lay out your documents.Finally, you can create new pages based on a Dreamweaver template, then update the layout of those pagesautomatically when the template changes. (See “Creating pages with CSS” on page 113 and “Laying out pages withHTML” on page 159.)Add content to pagesAdd assets and design elements such as text, images, rollover images, image maps, colors, movies, sound, HTML links,jump menus, and more. You can use built-in page-creation features for such elements as titles and backgrounds, typedirectly in the page, or import content from other documents. Dreamweaver also provides behaviors for performingtasks in response to specific events, such as validating a form when the visitor clicks the Submit button or opening asecond browser window when the main page has finished loading. Finally, Dreamweaver provides tools formaximizing website performance and for testing pages to ensure compatibility with different web browsers. (See“Adding content to pages” on page 190.)
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 4 WorkspaceCreate pages by hand codingCoding web pages by hand is another approach to creating pages. Dreamweaver provides easy-to-use visual editingtools, but it also provides a sophisticated coding environment; you can use either approach, or both, to create and edityour pages. (See “Working with page code” on page 271.)Set up a web application for dynamic contentMany websites contain dynamic pages that allow visitors to view information stored in databases, and usually allowsome visitors to add new information and edit information in the databases. To create such pages, you must first setup a web server and application server, create or modify a Dreamweaver site, and connect to a database. (See“Preparing to build dynamic sites” on page 479.)Create dynamic pagesIn Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted fromdatabases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it ontothe page.You can set your page to display one record or many records at a time, display more than one page of records, addspecial links to move from one page of records to the next (and back), and create record counters to help users keeptrack of the records. You can encapsulate application or business logic using technologies such as Adobe® ColdFusion®and web services. If you need more flexibility, you can create custom server behaviors and interactive forms. (See“Making pages dynamic” on page 507.)Test and publishTesting your pages is an ongoing process that happens throughout the development cycle. At the end of the cycle, youpublish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remainscurrent and functional. (See “Getting and putting files to and from your server” on page 75.)For a video tutorial on what you can do with Dreamweaver, see www.adobe.com/go/lrvid4040_dw.Workspace layout overviewThe Dreamweaver workspace lets you view documents and object properties. The workspace also places many of themost common operations in toolbars so that you can quickly make changes to your documents.In Windows®, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, allwindows and panels are integrated into a single larger application window.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 5 Workspace A B C D E F G H IA. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. CS Live G. Tag selectorH. Property inspector I. Files panelOn Mac OS®, Dreamweaver can display multiple documents in a single window with tabs that identify each document.Dreamweaver can also display a floating workspace in which each document appears in its own individual window.Panel groups are initially docked together, but can be undocked into their own windows. When panel groups aredocked and the document area is maximized, resizing or showing and hiding panels auto-sizes the main document,just as it does on Windows.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 6 Workspace A B C D E F G H IA. Application bar B. Document toolbar C. Workspace switcher D. Document window E. CS Live F. Panel groups G. Tag selectorH. Property inspector I. Files panelFor a tutorial on working with different Dreamweaver workspaces, see www.adobe.com/go/lrvid4042_dw.More Help topicsUsing toolbars, inspectors, and context menusCustomizing the CS4 workspaceDisplay tabbed documents (Dreamweaver Macintosh)Dreamweaver workspace tutorialWorkspace elements overviewThe workspace includes the following elements.Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows,use the Window menu.The Welcome screen Lets you open a recent document or create a new document. From the Welcome screen, you canalso learn more about Dreamweaver by taking a product tour or a tutorial.The Application bar Across the top of the application window contains a workspace switcher, menus (Windows only),and other application controls.The Document toolbar Contains buttons that provide options for different views of the Document window (such asDesign view and Code view), various viewing options, and some common operations such as previewing in a browser.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 9 WorkspaceRefresh Design View Refreshes the document’s Design view after you make changes in Code view. Changes you makein Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file orclicking this button.Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability toselect a code block’s opening or closing tags.View Options Allows you to set options for Code view and Design view, including which view you want to appearabove the other. Options in the menu are for the current view: Design view, Code view, or both.Visual Aids Lets you use different visual aids to design your pages.Validate Markup Lets you validate the current document or a selected tag.Check Browser Compatibility Lets you check if your CSS is compatible across different browsers.More Help topics“Display toolbars” on page 20“Preview pages in Live view” on page 267“Setting coding preferences” on page 277“View and edit head content” on page 310“Using visual aids for layout” on page 159Standard toolbar overviewThe Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Browse inBridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use theequivalent menu commands.More Help topics“Display toolbars” on page 20“Creating and opening documents” on page 54Status bar overviewThe Status bar at the bottom of the Document window provides additional information about the document you arecreating. A B C D E F G HA. Tag selector B. Select tool C. Hand tool D. Zoom tool E. Set magnification F. Window size pop-up menu G. Document size and estimateddownload time H. Encoding indicatorTag selector Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select thattag and all its contents. Click <body> to select the entire body of the document. To set the class or ID attributes for atag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from thecontext menu.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 10 WorkspaceSelect tool Enables and disables the Hand tool.Hand tool Lets you click the document and drag it in the Document window.Zoom tool and Set Magnification pop-up menu Let you set a magnification level for your document.Window size pop-up menu (Not available in Code view.) Lets you resize the Document window to predetermined orcustom dimensions.Document size and download time Shows the estimated document size and estimated download time for the page,including all dependent files such as images and other media files.Encoding indicator Shows the text encoding for the current document.More Help topics“Set window size and connection speed” on page 19“Zoom in and out” on page 201“Resize the Document window” on page 18“Set download time and size preferences” on page 202Coding toolbar overviewThe Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing andexpanding code selections, highlighting invalid code, applying and removing comments, indenting code, and insertingrecently used code snippets. The Coding toolbar appears vertically on the left side of the Document window, and isonly visible when Code view is showing.You cannot undock or move the Coding toolbar, but you can hide it (View > Toolbars > Coding).
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 11 WorkspaceYou can also edit the Coding toolbar to display more buttons (such as Word Wrap, Show Hidden Characters, and AutoIndent), or hide buttons that you don’t want to use. To do so, however, you must edit the XML file that generates thetoolbar. For more information, see Extending Dreamweaver.More Help topics“Display toolbars” on page 20“Insert code with the Coding toolbar” on page 286Style Rendering toolbar overviewThe Style Rendering toolbar (hidden by default) contains buttons that let you see how your design would look indifferent media types if you use media-dependent style sheets. It also contains a button that lets you enable or disableCSS styles. To display the toolbar, select View > Toolbars > Style Rendering.This toolbar only works if your documents use media-dependent style sheets. For example, your style sheet mightspecify a body rule for print media and a different body rule for handheld devices. For more information on creatingmedia-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.By default, Dreamweaver displays your design for the screen media type (which shows you how a page is rendered ona computer screen). You can view the following media type renderings by clicking the respective buttons in the StyleRendering toolbar.Render Screen Media Type Shows you how the page appears on a computer screen.Render Print Media Type Shows you how the page appears on a printed piece of paper.Render Handheld Media Type Shows you how the page appears on a handheld device, such as a mobile phone or aBlackBerry device.Render Projection Media Type Shows you how the page appears on a projection device.Render TTY Media Type Shows you how the page appears on a teletype machine.Render TV Media Type Shows you how the page appears on a television screen.Toggle Displaying Of CSS Styles Lets you enable or disable CSS styles. This button works independently of the othermedia buttons.Design-time Style Sheets Lets you specify a Design-time style sheet.For a tutorial on designing style sheets for print and handheld devices, see www.adobe.com/go/vid0156.More Help topics“Display toolbars” on page 20
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 12 WorkspaceProperty inspector overviewThe Property inspector lets you examine and edit the most common properties for the currently selected page element,such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. Forexample, if you select an image on your page, the Property inspector changes to show properties for the image (suchas the file path to the image, the width and height of the image, the border around the image, if any, and so on).The Property inspector is at the lower edge of the workspace by default, but you can undock it and make it a floatingpanel in the workspace.More Help topics“Dock and undock panels” on page 22“Use the Property inspector” on page 20Insert panel overviewThe Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The buttons areorganized into several categories, which you can switch by selecting the desired category from the Category pop-upmenu. Additional categories appear when the current document contains server code, such as ASP or CFMLdocuments.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 13 WorkspaceSome categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes thedefault action for the button. For example, if you select Image Placeholder from the Image button’s pop-up menu, thenext time you click the Image button, Dreamweaver inserts an image placeholder. Anytime you select a new optionfrom the pop-up menu, the default action for the button changes.The Insert panel is organized in the following categories:The Common category Lets you create and insert the most commonly used objects, such as images and tables.The Layout category Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choosetwo views for tables: Standard (default) and Expanded Tables.The Forms category Contains buttons for creating forms and inserting form elements, including Spry validationwidgets.The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeatedregions, and record insertion and update forms.The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets.The InContext Editing category Contains buttons for building InContext editing pages, including buttons for EditableRegions, Repeating Regions, and managing CSS classes.The Text category Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.The Favorites category Lets you group and organize the Insert panel buttons you use the most in one common place.Server-code categories Available only for pages that use a particular server language, including ASP, CFML Basic,CFML Flow, CFML Advanced, and PHP. Each of these categories provides server-code objects that you can insert inCode view.Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into ahorizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar (thoughyou cannot hide and display it in the same way as other toolbars).More Help topics“Use the Insert panel” on page 190“Building Spry pages visually” on page 388
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 14 WorkspaceFiles panel overviewUse the Files panel to view and manage the files in your Dreamweaver site.When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, and expand orcollapse the Files panel. When the Files panel is collapsed, it displays the contents of the local site, the remote site, thetesting server, or the SVN repository as a list of files. When expanded, it displays the local site and either the remotesite, the testing server, or the SVN repository.For Dreamweaver sites, you can also customize the Files panel by changing the view—either your local or remote site—that appears by default in the collapsed panel.More Help topics“Work with files in the Files panel” on page 70
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 15 WorkspaceCSS Styles panel overviewThe CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Currentmode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Stylespanel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All andCurrent mode.You can resize any of the panes by dragging the borders between the panes.In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSSproperties for the current selection in the document, a Rules pane that displays the location of selected properties (ora cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSSproperties for the rule defining the selection.In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). TheAll Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attachedto the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.More Help topics“Creating and managing CSS” on page 117Visual guides overviewDreamweaver provides several kinds of visual guides to help you design documents and predict approximately howthey appear in browsers. You can do any of the following:• Instantly snap the Document window to a desired window size to see how the elements fit on the page.• Use a tracing image as the page background to help you duplicate a design created in an illustration or image- editing application such as Adobe® Photoshop® or Adobe® Fireworks®.• Use rulers and guides to provide a visual cue for precise positioning and resizing of page elements.• Use the grid for precise positioning and resizing of absolutely positioned elements (AP elements).
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 16 Workspace Grid marks on the page help you align AP elements, and when snapping is enabled, AP elements automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible.More Help topics“Using visual aids for layout” on page 159GoLive usersIf you have been using GoLive and want to switch to working with Dreamweaver, you can find an online introductionto the Dreamweaver workspace and workflow, as well as a discussion of ways to migrate your sites to Dreamweaver.For more information, see www.adobe.com/go/learn_dw_golive.More Help topicsDreamweaver for GoLive users tutorialWorking in the Document windowSwitch between views in the Document windowYou can view a document in the Document window in Code view, Split Code view, Design view, Code and Designviews (Split view), or Live view. You also have the option of viewing Split Code view or Code and Design viewshorizontally or vertically. (Horizontal display is the default.)Switch to Code view❖ Do one of the following:• Select View > Code.• In the Document toolbar, click the Show Code View button.Switch to Split Code viewSplit Code view splits your document in two so that you can work on two sections of the code at once.❖ Select View > Split Code.Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.Switch to Design view❖ Do one of the following:• Select View > Design.• In the Document toolbar, click the Show Design View button.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 17 WorkspaceShow both Code and Design views❖ Do one of the following:• Select View > Code and Design.• In the Document toolbar, click the Show Code and Design Views button.By default, Code view appears at the top of the Document window and Design view appears at the bottom. To displayDesign view on top, select View > Design View on Top.Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.Toggle between Code view and Design view❖ Press Control+backquote (`).If both views are showing in the Document window, this keyboard shortcut changes keyboard focus from one view tothe other.Split views verticallyThis option is only available for Split Code view and Code and Design views (Split view). It is disabled for Code viewand Design view.1 Make sure that you are in Split Code view (View > Split Code) or Code and Design views (View > Code and Design).2 Select View > Split Vertically.If you are in Code and Design views, you have the option of displaying Design view on the left (View > Design Viewon Left).Note: If you resize the Document window or application window, or change your workspace layout, Dreamweavermaintains the split ratio so that the two views are always visible.More Help topics“Document window overview” on page 7“Preview pages in Live view” on page 267Cascade or tile Document windowsIf you have many documents open at once, you can cascade or tile them.More Help topics“Manage windows and panels” on page 22“Display tabbed documents (Dreamweaver Macintosh)” on page 27Cascade Document windows❖ Select Window > Cascade.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 18 WorkspaceTile Document windows• (Windows) Select Window > Tile Horizontally or Window > Tile Vertically.• (Macintosh) Select Window > Tile.Resize the Document windowThe Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best ata specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes,or create sizes.Resize the Document window to a predetermined size❖ Select one of the sizes from the Window Size pop-up menu at the bottom of the Document window.Note: (Windows only) Documents within the Document window are maximized by default, and you cant resize adocument when its maximized. To de-maximize the document, click the de-maximize button in the upper rightcorner of the document.The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size islisted in parentheses. For example, you would use the size “536 x 196 (640 x 480, Default)” if your visitors are likely tobe using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor. For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower-right corner of a window.Change the values listed in the Window Size pop-up menu1 Select Edit Sizes from the Window Size pop-up menu.2 Click any of the width or height values in the Window Sizes list, and type a new value.To make the Document window adjust only to a specific width (leaving the height unchanged), select a height valueand delete it.3 Click the Description box to enter descriptive text about a specific size.Add a new size to the Window Size pop-up menu1 Select Edit Sizes from the Window Size pop-up menu.2 Click the blank space below the last value in the Width column.3 Enter values for Width and Height.To set the Width or Height only, simply leave one field empty.4 Click the Description field to enter descriptive text about the size you added.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 19 WorkspaceFor example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Macnext to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.Set window size and connection speed1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).2 Select Status Bar from the Category list on the left.3 Set any of the following options:Window Sizes lets you customize the window sizes that appear in the Status bar’s pop-up menu.Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size. Thedownload size for the page is displayed in the Status bar. When an image is selected in the Document window, theimage’s download size is displayed in the Property inspector.More Help topics“Status bar overview” on page 9“Resize the Document window” on page 18Reports in DreamweaverYou can run reports in Dreamweaver to find content, troubleshoot, or test content. You can generate the followingtypes of reports:Search Lets you search for tags, attributes, and specific text within tags.Reference Lets you search for helpful reference information.Validation Lets you check for code or syntax errors.Browser Compatibility Lets you test the HTML in your documents to see if any tags or attributes are unsupported byyour target browsers.Link Checker Lets you find and fix broken, external, and orphaned links.Site Reports Enable you to improve workflow and test HTML attributes in your site. Workflow reports includechecked out by, recently modified, and design notes; HTML reports include combinable nested font tags, accessibility,missing Alt text, redundant nested tags, removable empty tags, and untitled documents.FTP Log Enables you to view all FTP file-transfer activity.Server Debug Lets you view information to debug an Adobe® ColdFusion® application.More Help topics“Search for tags, attributes, or text in code” on page 296“Use language-reference material” on page 297“Testing your site” on page 97“Validate tags” on page 302“Check for browser compatibility” on page 302“Find broken, external, and orphaned links” on page 265“Put files on a remote server” on page 78
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 20 Workspace“Get files from a remote server” on page 76“Use the ColdFusion debugger (Windows only)” on page 303Using toolbars, inspectors, and context menusDisplay toolbarsUse the Document and Standard toolbars to perform document-related and standard editing operations; the Codingtoolbar to insert code quickly; and the Style Rendering toolbar to display your page as it would appear in differentmedia types. You can choose to display or hide the toolbars as necessary.• Select View > Toolbars, and then select the toolbar.• Right-click (Windows) or Control-click (Macintosh) any of the toolbars and select the toolbar from the context menu.Note: To display or hide the Coding toolbar in the Code inspector (Window > Code Inspector), select Coding Toolbarfrom the View Options pop-up menu at the top of the inspector.More Help topics“Document toolbar overview” on page 8“Standard toolbar overview” on page 9“Coding toolbar overview” on page 10“Style Rendering toolbar overview” on page 11Use the Property inspectorThe Property inspector lets you examine and edit the most common properties for the currently selected page element,such as text or an inserted object. The contents of the Property inspector vary depending on the element(s) selected.To access help for a particular Property inspector, click the help button in the upper right corner of the Propertyinspector, or select Help from a Property inspector’s Options menu.Note: Use the Tag inspector to view and edit every attribute associated with a given tag’s properties.More Help topics“Property inspector overview” on page 12“Set text properties in the Property inspector” on page 212“Dock and undock panels” on page 22“Change attributes with the Tag inspector” on page 305Show or hide the Property inspector❖ Select Window > Properties.Expand or collapse the Property inspector❖ Click the expander arrow in the lower-right corner of the Property inspector.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 21 WorkspaceView and change properties for a page element1 Select the page element in the Document window.You might have to expand the Property inspector to view all the properties for the selected element.2 Change any of the properties in the Property inspector.Note: For information on specific properties, select an element in the Document window, and then click the Help icon inthe upper-right corner of the Property inspector.3 If your changes are not immediately applied in the Document window, apply the changes in one of these ways:• Click outside the property-editing text fields.• Press Enter (Windows) or Return (Macintosh).• Press Tab to switch to another property.Use context menusContext menus provide convenient access to the most useful commands and properties related to the object or windowyou’re working with. Context menus list only those commands that pertain to the current selection.1 Right-click (Windows) or Control-click (Macintosh) the object or window.2 Select a command from the context menu.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 22 WorkspaceCustomizing the CS4 workspaceManage windows and panelsYou can create a custom workspace by moving and manipulating Document windows and panels. You can also saveworkspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all theproducts.Rearrange, dock, or float document windowsWhen you open more than one file, the Document windows are tabbed.• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.• To undock (float or untab) a Document window from a group of windows, drag the window’s tab out of the group. Note: In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window, or Window > Arrange > Float All In Windows to float all of the Document windows at once. See tech note kb405298 for more information. Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows, or choose Window > Tile Vertically to create side-by-side Document windows. Search “Tile Vertically” in Dreamweaver Help for more information on this topic.• To dock a Document window to a separate group of Document windows, drag the window into the group.• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides of another window. You can also select a layout for the group by using the Layout button on the Application bar. Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu to help you lay out your documents.• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s tab for a moment. Note: Some products do not support this functionality.Dock and undock panelsA dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock andundock panels by moving them into and out of a dock.• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make it free-floating.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 23 WorkspaceNavigator panel being dragged out to new dock, indicated by blue vertical highlightNavigator panel now in its own dock You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the workspace.Move panelsAs you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you canmove a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If youdrag to an area that is not a drop zone, the panel floats freely in the workspace.Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the dropzone, try dragging the mouse to the place where the drop zone should be.• To move a panel, drag it by its tab.• To move a panel group, drag the title bar.ABCNarrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group.A. Title bar B. Tab C. Drop zone
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 24 Workspace Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel the operation.Add and remove panelsIf you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edgeof the workspace until a drop zone appears.• To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu.• To add a panel, select it from the Window menu and dock it wherever you want.Manipulate panel groups• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group. Adding a panel to a panel group• To rearrange panels in a group, drag a panel’s tab to a new location in the group.• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.• To move a group, drag the title bar (the area above the tabs).Stack floating panelsWhen you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows youto position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unitwhen you drag the topmost title bar.Free-floating stacked panels• To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.• To change the stacking order, drag a panel up or down by its tab. Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.Resize panels• To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also single-click the tab area (the empty space next to the tabs).• To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 25 WorkspaceCollapse and expand panel iconsYou can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in thedefault workspace.Panels collapsed to iconsPanels expanded from icons• To collapse or expand all panel icons in a column, click the double arrow at the top of the dock.• To expand a single panel icon, click it.• To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears. To display the icon text again, make the dock wider.• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar. In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel icon collapses automatically when you click away from it.• To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed to icons when added to an icon dock.)• To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating, expanded panels).Save and switch workspacesBy saving the current size and position of panels as a named workspace, you can restore that workspace even if youmove or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.
DRAFTLast updated 2/17/2010 USING DREAMWEAVER CS5 26 WorkspaceSave a custom workspace1 With the workspace in the configuration you want to save, do one of the following: • (Illustrator) Choose Window > Workspace > Save Workspace. • (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace. • (Dreamweaver) Choose Window > Workspace Layout > New Workspace. • (Flash) Choose New Workspace from the workspace switcher in the Application bar. • (Fireworks) Choose Save Current from the workspace switcher in the Application bar.2 Type a name for the workspace.3 (Photoshop, InDesign) Under Capture, select one or more options: Panel Locations Saves the current panel locations (InDesign only). Keyboard shortcuts Saves the current set of keyboard shortcuts (Photoshop only). Menus Saves the current set of menus.Display or switch workspaces❖ Select a workspace from the workspace switcher in the Application bar. In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.Delete a custom workspace• Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete. (The option is not available in Fireworks.)• (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher.• (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon.• (Photoshop, InDesign) Choose Window > Workspace > Delete Workspace, select the workspace, and then click Delete.Restore the default workspace1 Select the default, Essentials workspace from the workspace switcher in the application bar. Note: In Dreamweaver, Designer is the default workspace.2 (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].(Photoshop) Restore a saved workspace arrangementIn Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, savedarrangement of panels.• To restore an individual workspace, choose Window > Workspace > Reset Workspace Name.• To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface preferences. To rearrange the order of workspaces in the application bar, drag them.