Design View, HTML Editor

Switching to Design View

Use the tabs at the bottom of the editor window to switch to Design view. When you switch an existing document to Design view or open an .htm file in Design view, the editor might make the following small adjustments to your document to represent the page visually or to preserve formatting:

Add a closing HTML tag (for example, </BODY>) to a block that has been opened but not closed.
Convert all tag names to uppercase letters. For example, if you have entered the tag name <table> in Source view, the editor converts it to <TABLE>. This edit occurs only if you make a change while in Design view.
Complete the list of parameters (<PARAM> tags) for objects on the page.

Certain conditions can prevent the editor from switching successfully to Design view. If the editor detects any of the following conditions, it displays a message indicating that it cannot make the switch:

The document contains framesets.
An .asp file contains in-line server scripts of such complexity that the editor cannot create a visual representation of the page.
The document contains client script between <PARAM> tags.

Editing in Design View

You can edit in Design view in much the same way that you do in a word processing program. In general, to format elements, you select text and use the HTML toolbar, Design toolbar, or menu commands to apply formats. You can add elements, such as HTML controls, applets, paragraph and line breaks, and horizontal lines, by dragging them from the ToolBox onto the page. You can change a selected element's appearance by setting values in the Properties window.

To move quickly to any element in the page, click it in the HTML Outline window.

Note If you cut or copy an element from Design view, it contains additional information used to manage that element. If you paste the element anywhere but in Design view, it might be pasted with an extra DESIGNTIMEP tag in it. Always check the results of a paste operation if the source was Design view.

You can add elements to your page easily by dragging them from the Toolbox, from the Project Explorer, or from any other drag source. When you drop them on a page, the HTML editor either creates an instance of the element (such as an ActiveX control) or a reference to it (such as an image or another file).

Note If you drag an element onto a page that creates a reference, the URL of the reference is absolute to the source of the file. You might have to edit the URL in Source view to make it relative.

To set the appearance of elements, you can either edit the element directly or use the Properties window. For example, to set the font of text, select it, and then use the font Font Name dropdown list in the HTML toolbar to select a font.

Because you cannot directly work with every HTML element in Design view, you can use the Properties window to set attributes. When you select an item in Design view, the dropdown list at the top of the Properties window shows all the tags that currently apply. For example, if you select a boldface letter in a table cell, the Properties window shows the <STRONG> tag. If you display the dropdown list, you will see the <STRONG>, <TD>, <TR>, <TBODY>, and <TABLE> tags, and any additional tags representing the hierarchy up to the document level. Select the tag to work with and set its properties in the window.

Formatting that you apply in Design view is preserved as closely as possible when you switch to other views. For example, if you add spaces between two words, the spaces are preserved as non-breaking spaces in the HTML document.

Objects such as buttons and HTML controls, tables, lines, marquees, tables, images, Java applets, and controls display a selection border when you select them. You can edit their appearance using the Properties window.

Note If a file referenced in your document changes while the document is open — such as a style sheet, Java applet, or image — the HTML editor does not automatically update your view of the document. To get the most current versions of elements referenced in your document, choose Refresh from the View menu.

Some elements are not visible in Design view. For example, if the body portion of your page contains HTML comments or a SCRIPT block, by default they are not visible in Design view. However, you can see where they are located by choosing Show Details in the Design toolbar, which causes the editor to display a small glyph for these invisible elements.

Caution If you page contains any of these invisible elements in the body portion of the document (scripts are typically placed in the header portion, which is not displayed in Design view), it is strongly recommended that you work with details turned on. Otherwise you might inadvertently delete the invisible element when editing.

If an element contains text, such as a button with a caption, a table, a marquee, a text box, or a text area, you can directly edit the text while in Design view.

To edit control text

Select the text in the element. When the insertion point appears, type or edit the text.

To help you edit more easily, you can set the following options in the Options dialog box or on the Design toolbar:

Snap to Grid Aligns elements on an invisible grid on the page. You can set the grid spacing in the Options dialog box, and the grid will be changed the next time you open a document.
Show Borders Displays a 1-pixel border around container controls, such as tables, that have no border. This option has no effect on elements that already have borders, such as tables with borders.

Show Details Displays the following glyphs to mark the location of page elements that have no visible component.

Note The glyphs are black, so if your page background is set to black, the glyphs will not be visible.

Glyph Represents

HTML comment

Client script block (<SCRIPT>) or Server script block in.asp page (<% %> or <SCRIPT RUNAT="Server">)

Style block (<STYLE>)

<NOFRAMES> tag, used to specify alternate content for browsers that do not support frames.

Anchor point for absolutely positioned elements or elements that are aligned in the center or right. The glyph appears where the HTML tag defining the element is located in the HTML document.

Unrecognized HTML tags

Cut and Paste in Design View

When you cut or copy text to the Windows^® Clipboard from an HTML source — such as Internet Explorer, Design view of the Visual InterDev editor, or the Visual InterDev Help system or sample applications — two versions of the text become available: an HTML version and a text version.

The HTML version uses HTML escape sequences for reserved characters such as <, >, and quotation marks. For example, if you copied "<MARQUEE>" to the Clipboard, the HTML version would be "<MARQUEE>". The text version contains an exact copy of the original text you cut or copied.

When you paste, you can choose either version. To paste the HTML version, choose Paste from the View menu or the right-click menu. To paste the text version, choose Paste as HTML from the right-click menu. In general, choose Paste if you want to see the actual text such as "<MARQUEE>". Choose Paste As HTML if you want to create the tag. Tags do not appear in Design view, so the text you see might not appear to be the same as what you cut from another source.

Adding Script

You can quickly create or edit script.

To edit script in Design view

Double-click the selected element in the page.
– Or –
Right-click the element, and then choose Edit Script.

When you edit script, the editor switches to Source view, opens the Script Outline window. In the Script Outline window, the focus is placed on the default handler for the element you selected. You can then double-click the name of the event to create a new handler for it, or navigate in the Script Outline window to an existing script.

Visual Differences in Design View

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

Character and paragraph formatting might appear different, because each browser can implement formatting differently.
Links are not live.
Client scripts do not run.
Marquee elements do not scroll.
Elements that support alternate text (such as images) do not display the alternate text in ToolTips when the pointer is over them.
Certain design-time controls, such as a Recordset control, appear in Design view so you can edit them, but do not appear in the browser.
Design view can display glyphs for some elements, such as HTML comments or scripts, that are not normally visible in the browser. For a list of glyphs, see "Editing in Design View" above.

Glyph	Represents
	HTML comment
	Client script block (<SCRIPT>) or Server script block in.asp page (<% %> or <SCRIPT RUNAT="Server">)
	Style block (<STYLE>)
	<NOFRAMES> tag, used to specify alternate content for browsers that do not support frames.
	Anchor point for absolutely positioned elements or elements that are aligned in the center or right. The glyph appears where the HTML tag defining the element is located in the HTML document.
	Unrecognized HTML tags