Design View

Article
09/30/2015

Design view displays ASP.NET Web pages, master pages, content pages, HTML pages, and user controls using a near-WYSIWYG view. Design view allows you to add text and elements and then position and size them and set their properties using special menus or the Properties window. Split view allows you to see and edit a document in both Design view and Source view. By default, the two windows are arranged horizontally.

When you add elements to the page, Visual Web Developer creates corresponding markup that you can also edit in Source view. For details, see NIB: Source View.

To switch to Design view, click the Design tab at the bottom of the HTML Designer window.

Note

Design view displays only the body of a document — the portion between the <body> and </body> tags. Although you can edit some properties of the head element, such as the document's title, by using the Document Properties window, you must switch to Source view to edit properties of elements not inside the body element.

How Design View Differs from Viewing in a Web Browser

Design view gives you a near-WYSIWYG editing view of what your page will look like in a browser. However, Design view is not an exact match for how the page will be rendered, and you should always test the page in a browser (or in multiple browsers) to be sure the page will appear as you have designed it.

A document displayed in Design view differs from one displayed in a Web browser in these ways:

The design surface is editable.
Some elements are displayed in Design view for editing purposes but are not rendered in the browser, such as data source controls. Most controls that appear only while being edited are rendered as gray boxes in Design view.
Some character and paragraph formatting might appear differently than in a specific browser (if the Web browser implements formatting differently than Design view).
Hyperlinks are not functional.
Client scripts do not run.
Server code does not run.
Elements that support alternate text (such as images) do not display this alternate text in ToolTips when the pointer passes over them.

Displaying Null Characters

In Design view, when a template is used that contains a null character, the characters following the null character are truncated. No data is lost, but the Design view does not show characters in a template that follow a null character.

Positioning Elements in Design View

Elements in the page are physically laid out top to bottom. By default, when the page is rendered to the browser, the elements are rendered in the same top-to-bottom order. You can also lay out elements two-dimensionally, positioning elements with horizontal and vertical coordinates anywhere on the page. This layout option takes advantage of the positioning options available through styles. For details, see Positioning Elements in Design View.

Navigating in Design View

To help you move between elements and select them, Design view provides these options:

Tag navigator. The tag navigator displays the current element, along with the hierarchy of parent tags to which it belongs. You can use the tag navigator to see which element has the focus, and to move from the current element to an element higher in the hierarchy. For details, see NIB: Using the Tag Navigator in Visual Web Developer.
Document outline. The Document Outline window makes it possible for you to locate and select all elements within a document, including those that are not displayed. For details, see NIB: How to: Navigate in the HTML Editor in Visual Web Developer.
Properties window. When you select an element from the drop-down list at the top of the Properties window, the editor selects that element in the document.

Adding Elements

You can add elements to a page in Design view in these ways:

Drag them from the Toolbox.
Double-click the element in the Toolbox, which inserts the element at the current location of the insertion point in the document.
Drag them from another document open in Visual Web Developer.
Drag them from Solution Explorer. This is primarily useful for adding user controls and style sheet references to the page.
Type text directly into the page.

Smart Tags in Design View

In Design view, many ASP.NET server controls display a smart tag that offers quick access to the settings and actions most often used to configure the control. By default, the smart tag is displayed when you first add a control to the page. You can also display the smart tag at any time using the shortcut menu or by clicking its symbol.

Expressions in Design View

In Design view, you cannot use the Properties window to change expression values. For example, if you assign an expression to a control in Source view, you cannot change the value of that expression in the Design view. Since the expression value is calculated, you should use the Source view to change the expression.

Refreshing the Designer

When you switch from Source view to Design view, you might need to refresh the designer to see certain types of file changes. For example, theme code is parsed, not compiled; therefore, any changes made to theme code in Source view require a refresh before you can see them in the designer.

To refresh the designer, you can do one of the following:

Right-click the Design window and click Refresh.
On the View menu, click Refresh.