Share via

Design View, HTML Designer

  • Article

Design view is one of two unique views available in the HTML Designer. To select Design view, click the Design tab at the bottom of the HTML Designer window.

The Design view editing surface provides a graphic environment for creating and editing HTML documents. In this WYSIWYG environment, you can use familiar drag-and-drop editing techniques to add and remove elements and text, and to format, size, and position them on your HTML page or Web form. To display the attributes of an HTML element, select the element and open the Properties window. The Document Outline window makes it possible for you to locate and select all elements within a document, including those that do not display.

Note   Design View displays only the body of a document — the portion between the <BODY></BODY> tags. Although you can edit some properties of the <HEAD>, such as <TITLE>, in the Document Properties window, you must switch to HTML View to edit most properties of the <HEAD>.

How Design View Differs from Viewing in a Web Browser

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

  • The user can drag-and-drop HTML elements in Design view.
  • Some character and paragraph formatting might display differently than in a specific browser (if the Web browser implements formatting differently).
  • Hyperlinks are not functional.
  • Client scripts do not run.
  • Marquee elements do not scroll.
  • Elements that support alternate text (such as images) do not display this alternate text in ToolTips when the pointer passes over them.
  • When you select the Show Details icon in the toolbar, Design view displays symbols for certain elements that are not normally visible in a Web browser.

To display the current HTML document in the built-in internal Web browser

  • Select View in Browser from the File menu.

For more information, see Editing HTML Pages in Design View and Previewing an HTML Page in a Web Browser.

When you choose to Show Details, Design view uses the following symbols to represent the location on the page of elements that do not display.

Symbol Represents
HTML comment
Client-side <SCRIPT> block, or server-side script block in .asp page (<%%> or <SCRIPT RUNAT="Server">)
<STYLE> block
<DIV> element
<SPAN> element
<P> </P>
(visible only in Flow Layout)
unrecognized HTML tag
<FORM> element

Cut and Paste in Design View

When you cut or copy text to the Clipboard from a Web page displayed in a Web browser or in Design view of the HTML Designer, two versions of the text become available: a Paste version and a Paste as HTML version.

The Paste version replaces reserved characters such as <, >, and quotation marks with HTML entities (escape sequences). For example, if you copy <MARQUEE> to the Clipboard, the Paste version will be &lt;MARQUEE&gt;. The Paste as HTML version will be <MARQUEE>, the exact code you cut or copied.

On the Edit menu, choose Paste to add Web-escaped HTML markup as text to your page, or choose Paste as HTML to create a new HTML element from the cut or copied markup. To see the actual markup added with Paste as HTML, switch to HTML view.

See Also

HTML Tab, Toolbox | Web Forms Tab, Toolbox | Clipboard Ring Tab, Toolbox | Previewing an HTML Page in a Web Browser | HTML Designer | Navigating in HTML Designer | Document Outline Window | HTML View, HTML Designer | Switching to Design View