The Dreamweaver workspace

After installing Dreamweaver, when you first launch the application, a QuickStart menu appears on the screen asking you three questions that help you personalize your Dreamweaver workspace according to your needs.

Based on your responses to these questions, Dreamweaver opens in a Developer workspace (a minimal code-focused layout), or a Standard workspace (a split layout with visual tools and an in-app preview as you code). 

After you choose a workspace, you choose a color theme that you are comfortable with. You can then get started.

Improved Home screen

The Home screen in Dreamweaver gives you quick access to your recently used files, file types, and starter templates.

Depending on your subscription status, the Start workspace may also display content tailored for your requirements.

Dreamweaver displays the Home screen at launch or when no documents are open.

Options in the Dreamweaver Start experience

Click Learn to instantly access the Dreamweaver tutorials from this screen.

Get started creating documents in Dreamweaver by clicking any of the file types displayed.

Open one of the starter templates packaged with Dreamweaver. 

Click Home to go back to the start screen. 

You can view the recent files that you have worked on in the start screen. If you do not have any recent files, this tab is blank.

You can also use the search functionality by using the Search icon on the upper-right corner of this screen. When you type a search query, the application displays your recent files, Creative Cloud assets, help links, and stock images that match the search query.

You can click Create New to start creating new Dreamweaver files. If you already have files in your system, click Open. For information on creating and opening documents in Dreamweaver, see Create and open files.

Workspace overview

The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents.

Workspace elements overview

The workspace includes the following elements:

Is across the top of the application window and contains a workspace switcher, menus (Windows only), and other application controls.

Contains buttons that provide options for different views of the Document window (such as Design view, Live view, and Code view).

To display the Standard toolbar, select Window > Toolbars > Standard. The toolbar contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.

Is on the left side of the application window and contains view-specific buttons.

Displays the current document as you create and edit it.

Lets you view and change a variety of properties for the selected object or text. Each object has different properties.

Located in the Status bar at the bottom of the Document window. Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents.

Help you monitor and modify your work. Examples include the Insert panel, the CSS Designer panel, and the Files panel. To expand a panel, double-click its tab.

Lets you upload and view your PSD files on Creative Cloud. Using this panel, you can extract CSS, text, images, fonts, colors, gradients, and measurements from your PSD comps into your document.

Contains buttons for inserting various types of objects, such as images, tables, and media elements, into a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert panel. If you prefer, you can insert objects using the Insert menu instead of the Insert panel.

Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also lets you access all the files on your local disk. For more information, see Manage files and folders.

Lets you save and reuse your code snippets across different web pages, different sites, and different installations of Dreamweaver (using sync settings). For more information, see Reuse code with snippets.

is a CSS Property Inspector that lets you "visually"create CSS styles, files, and set properties, along with media queries.

Document window overview

The Document window shows the current document. To switch views of the document, use the view options on the Document toolbar. 

You can also switch views, using the View options in the View menu.

displays a realistic representation of what your document will look like in a browser, and lets you interact with the document exactly as you would in a browser. You can edit HTML elements directly in Live View and instantly preview your changes in the same view as well. For more information on editing in Live View, see Edit HTML elments in Live View.

is 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 when viewing the page in a browser.

is a hand-coding environment for writing and editing HTML, JavaScript, and any other kind of code.

is a split version of Code view that lets you scroll to work on different sections of the document at the same time. 

lets you see both Code view and Live view for the same document in a single window.

lets you see both Code view and Design view for the same document in a single window.

displays the actual code that a browser uses to execute the page, and can dynamically change as you interact with the page in Live view.

When a Document window is maximized (the default), tabs appear at the top of the Document window showing the filenames of all open documents. Dreamweaver displays an asterisk after the filename if you have made changes that you haven’t saved yet.

Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you are viewing documents in separate windows). Related documents are documents associated with the current file, such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in the Related Files toolbar.

Switch between views

Use the Document toolbar to toggle between different views quickly. For more information, see Document toolbar overview.

You can also switch between views using the following options in the View menu:

• Code view only: Select Code
• Split view: Select Split and select any of the split options
• View mode: Toggle between Live and Design views
• Switch Views: To switch views from one view to another.

Cascade, tile, or rearrange document windows

If you have many documents open at once, you can cascade or tile them.

To cascade document windows: select Window > Arrange > Cascade.

To tile document windows: 

• (Windows) Select Window > Arrange > Tile Horizontally or Tile Vertically.
• (Macintosh) Select Window > Arrange >Tile.

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.

Resize document window

The Status bar displays the Document window’s current dimensions (in pixels). To design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create sizes.

When you change the view size of a page in design or live view only the dimensions of the view size change. The document size is unaltered.

In addition to predetermined and custom sizes, Dreamweaver also lists sizes specified in a media query. When you select a size corresponding to a media query, Dreamweaver uses the media query to display the page. You can also change the page orientation to preview the page for mobile devices where the page layout changes based on how the device is held.

To resize the document window, select one of the sizes from the Window Size pop-up menu at the bottom of the Document window.

The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size or mobile device is listed to the right.

Change the values listed in the Window Size pop‑up menu

Add a new size to the Window Size pop‑up menu

Document toolbar overview

The Document toolbar contains buttons that let you toggle between different views of your document quickly. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.

The following options appear in the Document toolbar:

Displays only the Code view in the Document window.

Splits the Document window between the Code and the Live/Design views. Design view option is not available for fluid grid documents.

Is an interactive preview that accurately renders HTML5 projects and updates in real time to show your changes as you make them. You can also edit HTML elements in Live View. The drop-down list adjacent to the Live options lets you switch between Live and Design views. This drop-down list is not available in fluid grid documents.

Displays a representation of the document showing how the user views it in a web browser. 

Standard toolbar overview

To display the Standard toolbar, select Window > Toolbars > Standard. The toolbar contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.

Browser Navigation toolbar overview

The Browser Navigation toolbar becomes active in Live view (only if you have enabled it by selecting Window->Toolbars->Standard), and shows you the address of the page you’re looking at in the Document window. Live view acts like a regular browser, so even if you browse to a site outside of your local site (for example, http://www.adobe.com), Dreamweaver will load the page in the Document window.

By default, links are not active in Live view. Having links non-active lets you select or click link text in the Document window without being taken to another page. To test links in Live view, you can enable one-time clicking or continuous clicking by selecting View > Live View Options > Follow Links (Ctrl+Click Link) or Follow Links Continuously.

Toolbar overview

The toolbar appears vertically on the left side of the Document window, and is visible in all views - Code, Live, and Design. The buttons on the toolbar are view-specific and appear only if they are applicable to the view you are working in. For example, if you are working in Live view, then Code view-specific options such as Format Source Code are not visible. 

Customize toolbar

You can choose to customize this toolbar according to your needs by adding menu options, or removing unwanted menu options from the toolbar.

To customize the toolbar, do the following:

To restore the default toolbar buttons, click Restore Default in the Customize Toolbar dialog box.

Status bar overview

The Status bar at the bottom of the Document window provides additional information about the document you are creating.

Tag selector

Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire body of the document. To set the class or ID attributes for a tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and select a class or ID from the context menu.

Output panel

Click this icon to display the Output panel that shows coding errors in your document.

Code coloring

(Only available in Code view)

Select any of the coding languages from this pop-up menu to change the coloring of the code to display according to the programming language.

Insert and Overwrite toggle

(Only available in Code view)

Allows you to toggle between Insert and Overwrite modes while working in Code view.

Line and column number

(Only available in Code view.)

Displays the line number and column number where the cursor is located.

Property inspector overview

The Property Inspector (Window > Properties) 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. For example, if you select an image on your page, the Property Inspector changes to show properties for the image (such as 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 floating panel in the workspace.

To access help for a particular Property inspector, click the help button in the upper right corner of the Property inspector, or select Help from a Property inspector’s Options menu.

View and change properties of a page element

Context menus

Context menus provide convenient access to the most useful commands and properties related to the object or window you’re working with. Context menus list only those commands that are applicable to the current selection.

To open a context menu, right-click (Windows) or Ctrl+Click (Mac) a section of code in Code view, or an object in Live or Design Views.

Rearranging panels in Dreamweaver

You can customize the placement and appearance of all the Dreamweaver panels according to your requirements.

Dock and undock panels

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

• To move a panel, drag it by its tab.
• To move a panel group, drag the title bar.

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

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

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.

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

Create custom workspaces

You can customize your workspace by adding or removing panels according to your requirements. You can then save these changes to your workspace by saving it to access later from the Workspace Switcher in the Document toolbar.

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.

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

Select a workspace from the workspace switcher in the Document toolbar.

Customizing Dreamweaver in multi-user 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.

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.

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.

Common Dreamweaver panels

You work with a number of panels in Dreamweaver. Some of the commonly used panels are described here.

Insert panel overview

The Insert panel (Window > Insert) contains buttons for creating and inserting objects such as tables, images, and links. The buttons are organized into several categories, which you can switch by selecting the desired category from the drop-down list at the top.

Some categories have buttons with pop-up menus. When you select an option from a pop-up menu, it becomes the default action for the button. For example, if you select Line Break from the Character button’s pop-up menu, the next time you click the Character button, Dreamweaver inserts a line break. Anytime you select a new option from the pop-up menu, the default action for the button changes.

The Insert panel is organized in the following categories:

Lets you create and insert the most commonly used HTML elements such as div tags and objects, such as images, and tables.

Contains buttons for creating forms and inserting form elements, such as search, month, and password.

Lets you save the document as a template and mark specific regiions as editable, optional, repeating, or editable optional regions.

Contains Bootstrap components to provide navigation, containers, dropdowns, and more that you can use in responsive projects.

Contains buttons for building sites that use jQuery Mobile.

Lets you insert jQuery UI elements such as accordion, sliders, and buttons.

Lets you group and organize the Insert panel buttons you use the most in one common place.

Insert object

To insert an object using the Insert panel:

Edit Insert panel preferences

Add, delete, or manage items in the Favorites category of the Insert panel

Files panel overview

Use the Files panel to view and manage the files on your Dreamweaver site.

You can use the Files panel to view files and folders, check whether they are associated with a Dreamweaver site or not, and perform standard file maintenance operations, such as opening and moving files.

The Files panel also helps you manage and transfer files to and from a remote server. 

For more information on all you can do with the Files panel, see Manage files and folders.

CSS Designer

CSS Designer panel (Windows > CSS Designer) is a CSS Property Inspector that lets you 'visually' create CSS styles, files, and set properties, along with media queries.

You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. The changes are automatically reflected in Live View and the relevant CSS file is also refreshed. To let you know that the related file has changed, the affected file’s tab is highlighted for a while (around 8 seconds).

The CSS Designer panel consists of the following panes and options:

All Lists all the CSS, media queries, and selectors associated with the current document. You can filter for the required CSS rules and modify the properties. You can also use this mode to begin creating selectors or media queries.

This mode is not sensitive to the selection. This means, when you select an element on the page, the associated selector, media query, or CSS are not highlighted in CSS Designer.

Current Lists all the computed styles for any selected element in Design or Live view of the current document. When you use this mode for a CSS file in Code view, all the properties for the selector in focus are displayed.

This mode is context-sensitive. Use this option to edit the properties of selectors associated with selected elements in the document.

Sources Lists all the CSS style sheets associated with the document. Using this pane, you can create and attach a CSS to the document, or define styles within the document.

@Media Lists all the media queries in the source selected in the Sources pane. If you do not select a specific CSS, this pane displays all the media queries associated with the document.

Selectors Lists all the selectors in the source selected in the Sources pane. If you also select a media query, this pane narrows down the list of selectors for that media query. If no CSS or media queries are selected, this pane displays all the selectors in the document.

When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected source are displayed.

Properties Displays properties that you can set for the specified selector. For more information, see Set properties.

If you collapse or expand the panes in CSS Designer, the sizes of the panes are remembered within a session. Sources and Media panes stick to the customized sizes until you change their sizes again.

Note: When you select a page element, the most specific Selector is selected in the Selectors pane. To view the properties of a specific Selector, click the name of that Selector in the pane.

To view all the selectors, you can choose All Sources in the Sources pane. To view selectors that do not belong to any media query in the selected source, click Global in the @Media pane.

Visual guides overview

Dreamweaver provides several kinds of visual guides to help you design documents and predict approximately how they 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).

  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.

Zoom in and out of a page

Dreamweaver lets you increase the magnification (zoom in) in the Document window so that you can check the pixel accuracy of graphics, select small items more easily, design pages with small text, design large pages, and so on.

To zoom in or out of a page, select View > Design View Options > Magnification, and choose any of the magnification options available.

You can choose from a variety of magnification options. You can also choose to:

• Fit Selection - Select an object or text, and choose this option to fill the Document window with the selection.
• Fit All - Fill the Document window with an entire page
• Fit Width - Fill the Document window with the entire width of a page

Set General preferences for Dreamweaver

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.

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.