Adobe Dreamweaver CC 2014 v.13 - Manual (Page 468)

Setting up your coding environment
To the top
To the top
To the top
Using coder-oriented workspaces
Viewing code
Customizing keyboard shortcuts
Open files in Code view by default
Note: 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 .
Using coder-oriented workspaces
You can adapt the coding environment in Dreamweaver to fit the way you work. For example, you can change the way you view code, set up
different keyboard shortcuts, or import and use your favorite tag library.
Dreamweaver comes with several workspace layouts designed for an optimal coding experience. From the workspace switcher on the Application
bar, you can select from Application Developer, Application Developer Plus, Coder, and Coder Plus workspaces. All of these workspaces show
Code view by default (in either the entire Document window, or in Code and Design views), and have panels docked on the left side of the screen.
All but Application Developer Plus eliminate the Property inspector from the default view.
If none of the pre-designed workspaces offer exactly what you need, you can customize your own workspace layout by opening and docking
panels where you want them, and then saving the workspace as a custom workspace.
Viewing code
You can view the source code for the current document in several ways: you can display it in the Document window by enabling Code view, you
can split the Document window to display both the page and its associated code, or you can work in the Code inspector, a separate coding
window. The Code inspector works just like Code view; you can think of it as a detachable Code view for the current document.
View code in the Document window
Select View > Code.
Code and edit a page simultaneously in the Document window
1. Select View > Code and Design.
The code appears in the top pane and the page appears in the bottom pane.
2. To display the page on top, select Design View On Top from the View Options menu on the Document toolbar.
3. To adjust the size of the panes in the Document window, drag the splitter bar to the desired position. The splitter bar is located between the
two panes.
Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must
manually update the document in Design view by clicking in Design view or pressing F5.
View code in a separate window with the Code inspector
The Code inspector lets you work in a separate coding window, just like working in Code view.
Select Window > Code Inspector. The toolbar includes the following options:
File Management Puts or gets the file.
Preview/Debug In Browser Previews or debugs your document in a browser.
Refresh Design View Updates the document in Design view so that it reflects any changes you made in the code. Changes you make in the code
don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.
Reference Opens the Reference panel. See Use language-reference material.
Code Navigation Lets you move quickly in the code. See Go to a JavaScript or VBScript function.
View Options Lets you determine how the code is displayed. See Set the code appearance.
To use the Coding toolbar along the left side of the window, see Insert code with the Coding toolbar.
Customizing keyboard shortcuts
461