The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.

Manage windows and panels

You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior.


The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.

Rearrange, dock, or float document windows

When 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.


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.


Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows (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. The workflow is slightly different for Macintosh users.

  • 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.


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.


Some products do not support this functionality.

Dock and undock panels

A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock 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.

Navigator panel
Navigator panel being dragged out to new dock, indicated by blue vertical highlight

Navigator panel in its own dock
Navigator 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 panels

As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.


The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can’t see the drop zone, 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.

Narrow blue drop zone indicates Color panel will be docked on its own
Narrow 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 


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 panels

If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of 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
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 panels

When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar.

Free-floating stacked panels
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.


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 double-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.

Collapse and expand panel icons

You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.

Panels collapsed to icons
Panels collapsed to icons

Panels expanded from icons
Panels 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 icons).

Save and switch workspaces

By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.

Save a custom workspace

  1. 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 or Menu Customization

    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 workspace

  1. Select the Default or Essentials workspace from the workspace switcher in the application bar. For Fireworks, see the article


    In Dreamweaver, Designer is the default workspace.

  2. For Fireworks (Windows), delete these folders:

    Windows Vista

    \\Users\<username>\AppData\Roaming\Adobe\Fireworks CS4\

    Windows XP

    \\Documents and Settings\<username>\Application Data\Adobe\Fireworks CS4

  3. (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].

(Photoshop) Restore a saved workspace arrangement

In Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved arrangement 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.

Display tabbed documents (Dreamweaver Macintosh)

You can view multiple documents in a single Document window by using tabs to identify each document. You can also display them as part of a floating workspace, in which each document appears in its own window.

Open a tabbed document in a separate window

  • Control‑click the tab and select Move To New Window from the context menu.

Combine separate documents into tabbed windows

  • Select Window > Combine As Tabs.

Change the default tabbed document setting

  1. Select Dreamweaver > Preferences, and then select the General category.
  2. Select or deselect Open Documents in Tabs, and click OK.

    Dreamweaver does not alter the display of documents that are currently open when you change preferences. Documents opened after you select a new preference, however, display according to the preference you selected.

Turn on color icons

By default, Dreamweaver CS4 and later uses black and white icons that turn into colored icons when you hover over them. You can turn color icons on permanently so that no hovering is required.

  • Do one of the following:

    • Choose View > Color Icons.

    • Switch to the Classic or Coder workspace.

To turn color icons off again, deselect Color Icons in the View menu, or switch to a different workspace.

Hide and display the Dreamweaver Welcome screen

The Welcome screen appears when you start Dreamweaver and anytime that you do not have any documents open. You can choose to hide the Welcome screen, and then later display it again. When the Welcome screen is hidden and no documents are open, the Document window is blank.

Hide the Welcome screen

  • Select the Don’t Show Again option on the Welcome screen.

Display the Welcome screen

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. In the General category, select the Show Welcome Screen option.

About customizing Dreamweaver in multiuser systems

You can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows XP or Mac OS X.

Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application creates copies of a variety of configuration files. These user configuration files are stored in a folder that belongs to you.

For example, in Windows XP, they’re stored in C:\Documents and Settings\username\Application Data\Adobe\Dreamweaver\en_US\Configuration, which is hidden by default. To show hidden files and folders, select Tools > Folder Options in Windows Explorer, click the View tab, and select the Show Hidden Files and Folders option.

In Windows Vista, they’re stored in C:\Users\username\AppData\Roaming\Adobe\Dreamweaver \en_US\Configuration, which is hidden by default. To show hidden files and folders, select Tools > Folder Options in Windows Explorer, click the View tab, and select the Show Hidden Files and Folders option.

In Mac OS X, they’re stored inside your Home folder; specifically, in Users/username/Library/Application Support/Adobe/Dreamweaver/Configuration.

If you reinstall or upgrade Dreamweaver, Dreamweaver automatically makes backup copies of existing user configuration files, so if you customized those files by hand, you still have access to the changes you made.

Set General preferences for Dreamweaver

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Set any of the following options:

    Open Documents In Tabs

    Opens all documents in a single window with tabs that let you switch between documents (Macintosh only).

    Show Welcome Screen

    Displays the Dreamweaver Welcome screen when you start Dreamweaver or when you don’t have any documents open.

    Reopen Documents on Startup

    Opens any documents that were open when you closed Dreamweaver. If this option is not selected, Dreamweaver displays the Welcome screen or a blank screen when you start (depending on your Show Welcome Screen setting).

    Warn When Opening Read-Only Files

    Alerts you when you open a read-only (locked) file. Choose to unlock/check out the file, view the file, or cancel.

    Enable Related Files

    Lets you see which files are connected to the current document (for example, CSS or JavaScript files). Dreamweaver displays a button for each related file at the top of the document, and opens the file if you click the button.

    Discover Dynamically-Related Files

    Lets you select whether Dynamically-Related Files appear in the Related Files toolbar automatically, or after manual interaction. You can also choose to disable the discovery of Dynamically-Related Files.

    Update Links When Moving Files

    Determines what happens when you move, rename, or delete a document within your site. Set this preference to always update links automatically, never update links, or prompt you to perform an update. (See Update links automatically.)

    Show Dialog When Inserting Objects

    Determines whether Dreamweaver prompts you to enter additional information when inserting images, tables, Shockwave movies, and certain other objects by using the Insert panel or the Insert menu. If this option is off, the dialog box does not appear and you must use the Property inspector to specify the source file for images, the number of rows in a table, and so on. For roll over images and Fireworks HTML, a dialog box always appears when you insert the object, regardless of this option setting. (To temporarily override this setting, Control-click (Windows) or Command-click (Macintosh) when creating and inserting objects.)

    Enable Double-Byte Inline Input

    Lets you enter double-byte text directly into the Document window if you are using a development environment or language kit that facilitates double-byte text (such as Japanese characters). When this option is deselected, a text input window appears for entering and converting double-byte text; the text appears in the Document window after it is accepted.

    Switch To Plain Paragraph After Heading

    Specifies that pressing Enter (Windows) or Return (Macintosh) at the end of a heading paragraph in Design or Live view creates a new paragraph tagged with a p tag. (A heading paragraph is one that’s tagged with a heading tag such as h1 or h2.) When the option is disabled, pressing Enter or Return at the end of a heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple headings in a row and then go back and fill in details).

    Allow Multiple Consecutive Spaces

    Specifies that typing two or more spaces in Design or Live view creates nonbreaking spaces that appear in a browser as multiple spaces. (For example, you can type two spaces between sentences, as you would on a typewriter.) This option is designed mostly for people who are used to typing in word processors. When the option is disabled, multiple spaces are treated as a single space (because browsers treat multiple spaces as single spaces).

    Use <strong> and <em> in Place of <b> and <i>

    Specifies that Dreamweaver applies the strong tag whenever you perform an action that would normally apply the b tag, and applies the em tag whenever you perform an action that would normally apply the i tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector in HTML mode and choosing Format > Style > Bold or Format > Style > Italic. To use the b and i tags in your documents, deselect this option.


    The World Wide Web Consortium discourages use of the b and i tags; the strong and em tags provide more semantic information than the b and i tags do.

    Warn when placing editable regions within <p> or <h1> - <h6> tags

    Specifies whether a warning message is displayed whenever you save a Dreamweaver template that has an editable region within a paragraph or heading tag. The message tells you that users will not be able to create more paragraphs in the region. It is enabled by default.


    Specifies whether you want to center elements using divalign="center" or the center tag when you click the Align Center button in the Property inspector.


    Both of these approaches to centering have been officially deprecated as of the HTML 4.01 specification; you should use CSS styles to center text. Both of these approaches are still technically valid as of the XHTML 1.0 Transitional specification, but they’re no longer valid in the XHTML 1.0 Strict specification.

    Maximum Number of History Steps

    Determines the number of steps that the History panel retains and shows. (The default value should be sufficient for most users.) If you exceed the given number of steps in the History panel, the oldest steps are discarded.

    For more information, see Task automation.

    Spelling Dictionary

    lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling conventions (such as American English and British English), the dialects are listed separately in the Dictionary pop‑up menu.

Set Fonts preferences for documents in Dreamweaver

A document’s encoding determines how the document appears in a browser. Dreamweaver font preferences let you view a given encoding in the font and size you prefer. The fonts you select in the Fonts Preferences dialog, however, only affect the way fonts appear in Dreamweaver; they do not affect the way the document appears in a visitor’s browser. To change the way fonts appear in a browser, you need to change the text by using the Property inspector or by applying a CSS rule.

For information on setting a default encoding for new documents, see Creating and opening documents.

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Fonts from the Category list on the left.
  3. Select an encoding type (such as Western European or Japanese) from the Font Settings list.


    To display an Asian language, you must be using an operating system that supports double-byte fonts.

  4. Select a font and size to use for each category of the selected encoding.


    To appear in the font pop‑up menus, a font must be installed on your computer. For example, to see Japanese text you must have a Japanese font installed.

    Proportional Font

    The font that Dreamweaver uses to display normal text (for example, text in paragraphs, headings, and tables). The default depends on your system’s installed fonts. For most U.S. systems, the default is Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on Mac OS.

    Fixed Font

    The font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your system’s installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco 12 pt. on Mac OS.

    Code View

    The font used for all text that appears in the Code view and Code inspector. The default depends on your system’s installed fonts.

Customize Dreamweaver highlighting colors

Use the Highlighting preferences to customize the colors that identify template regions, library items, third-party tags, layout elements, and code in Dreamweaver.

Change a highlighting color

  1. Select Edit > Preferences and select the Highlighting category.
  2. Beside the object you want to change the highlighting color for, click the color box, and then use the color picker to select a new color, or enter a hexadecimal value.

Activate or deactivate highlighting for an object

  1. Select Edit > Preferences and select the Highlighting category.
  2. Beside the object you want to activate or deactivate highlighting color for, select or deselect the Show option.

Restore default preferences

For procedures on restoring default Dreamweaver preferences, see Tech Note 83912.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy