The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design views.

The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.

View full size graphic

A.

Show Code View

B.

Show Code and Design Views

C.

Show Design View

D.

Document Title

E.

File Management

F.

Preview/Debug in Browser

G.

Refresh Design View

H.

View Options

I.

Visual Aids

J.

Validate Markup

K.

Check Browser Compatibility

The following options appear in the Document toolbar:

Show Code View

Displays only the Code view in the Document window.

Show Code and Design Views

Splits the Document window between the Code and the Design views. When you select this combined view, the option Design View on Top becomes available in the View Options menu.

Show Design View

Displays only the Design view in the Document window.

Note: If you are working with XML, JavaScript, CSS, or other code-based file types, you cannot view the files in Design view and the Design and Split buttons are dimmed out.

Document Title

Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already has a title, it appears in this field.

File Management

Displays the File Management pop‑up menu.

Preview/Debug in Browser

Allows you to preview or debug your document in a browser. Select a browser from the pop‑up menu.

Refresh Design View

Refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.

Note: Refreshing also updates code features that are DOM (Document Object Model) dependent, such as the ability to select a code block’s opening or closing tags.

View Options

Allows you to set options for Code view and Design view, including which view should appear above the other. Options in the menu are for the current view: Design view, Code view, or both.

Visual Aids

Lets you use different visual aids to design your pages.

Validate Markup

Lets you validate the current document or a selected tag.

Check Browser Compatibility

Lets you check if your CSS is compatible across different browsers.