beautypg.com

Document window overview – Adobe Dreamweaver CC 2014 v.13 User Manual

Page 72

background image

The Welcome screen

The Application bar

The Document toolbar

The Standard toolbar

The Coding toolbar

The Style Rendering toolbar

Note:

The Document window

The Property inspector

The Tag selector

Panels

The Insert panel

The Files panel

To the top

Design view

Code view

Split Code view

Code and Design view

Lets you open a recent document or create a new document. From the Welcome screen, you can also learn more about

Dreamweaver by taking a product tour or a tutorial.

Across the top of the application window 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 and Code view),

various viewing options, and some common operations such as previewing in a browser.

To display the Standard toolbar, select View > Toolbars > Standard. The toolbar contains buttons for common operations

from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo.

(Displayed in Code view only.) Contains buttons that let you perform many standard coding operations.

To display the Standard toolbar, select View > Toolbars > Style Rendering. The toolbar contains buttons that let

you see how your design would look in different media types if you use media-dependent style sheets. It also contains a button that lets you
enable or disable Cascading Style Sheets (CSS) styles.

Style Rendering toolbar is removed in Dreamweaver CC and later.

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

Property Inspector is not expanded by default in the Coder workspace layout.

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 Styles panel, and the Files panel. To expand a

panel, double-click its tab.

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.

Document window overview

The Document window shows the current document. To switch to a document, click its tab.

You can select any of the following views.

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.

A hand-coding environment for writing and editing HTML, JavaScript, server-language code—such PHP or ColdFusion Markup

Language (CFML)—and any other kind of code.

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 Design view for the same document in a single window.

65

This manual is related to the following products: