Customize the Dreamweaver workspace

Change your Dreamweaver workspace to suit your needs. Learn how to move, resize, dock, float, collapse, or expand 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.

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.

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.


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

  • 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

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

Create custom 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 Document toolbar.

To save a custom workspace:

  1. Choose Window > Workspace Layout > New Workspace.
  2. Type a name for the workspace.
The workspace is saved and is visible in the Workspace switcher in the Document toolbar.

To delete a custom workspace:

Select Manage Workspaces from the workspace switcher in the Application bar to open the Manage Workspaces dialog box. Select the workspace, and then click Delete.

Display or switch workspaces

  1. Select a workspace from the workspace switcher in the Application bar.

Display tabbed documents (On Mac only)

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.

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.

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.

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.

Adobe logo

Sign in to your account