Introduction to Dreamweaver document window

The document window displays the current document. You can select any of the following views:

Design view a design environment for visualizing page layouts, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable visual representation of the document, similar to what you see when you view the page in a browser.

Code view a manual encoding environment for writing and editing HTML, JavaScript, server language code (such as PHP or ColdFusion Markup Language (CFML)), and any other type of code.

Splits a split version of the Code View Code view, allowing you to scroll to manipulate different parts of the document at the same time.

Code and Design view allow you to see both the Code view and the Design view of the same document in one window.

Real-time view is similar to Design view, which displays the document's representation in the browser more realistically and enables you to interact with the document as you would in a browser. Live view is not editable. However, you can edit in Code view, and then refresh the live view to see the changes.

Live Code view is available only when you view the document in Live view. Live Code view shows the actual code that the browser uses to execute the page, and it can change dynamically when you interact with the page in Live view. Live Code view is not editable.

When the document window is maximized (the default), a tab appears at the top of the document window showing the file names of all open documents. If you have not saved your changes, Dreamweaver will display an asterisk after the file name.

To switch to a document, click its tab.

Dreamweaver also displays the related Files toolbar under the Document's tab (under the title bar of the document if you view the document in a separate window). Related documents refer to 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 file name in the related Files toolbar.