Setting Up Your Coding Environment - Adobe 38040334 - Dreamweaver CS3 User Manual

Setting up your coding environment

Changing your coding environment
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.
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.
See also
"Change the code format" on page 309
"Set the code hints" on page 311
"Set the code colors" on page 312
View code in the Document window
❖
Select View > Code.
Code and edit a page simultaneously in the Document window
Select View > Code and Design.
1
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.
To adjust the size of the panes in the Document window, drag the splitter bar to the desired position. The splitter
3
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:
Puts or gets the file.
File Management
Previews or debugs your document in a browser.
Preview/Debug In Browser
Updates the document in Design view so that it reflects any changes you made in the code.
Refresh Design View
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.
Opens the Reference panel. See "Use language-reference material" on page 323.
Reference
Lets you move quickly in the code. See "Go to a JavaScript or VBScript function" on page 320.
Code Navigation
Lets you determine how the code is displayed. See "Set the code appearance" on page 309.
View Options
September 4, 2007
DREAMWEAVER CS3 307
User Guide