Design View, HTML Editor

Design view in the HTML editor enables you to:

View and edit a page in a WYSIWYG-like environment.
Work with HTML controls such as buttons and text boxes, Java applets, and most ActiveX controls using the visual representation they will have in the browser.
Use menu and toolbar commands to apply certain types of formatting, such as paragraph alignment, that are not available in Source view.
Use menu and toolbar commands to add and edit certain elements, such as tables and lists, that you must edit as HTML text in Source view.
Use drag to reposition absolutely positioned elements.
Use the Properties window and custom properties dialog boxes to edit the appearance and behavior of HTML text and controls on the page.
Use the HTML Outline window to jump to any element in the page.

Note In Design view, the editor displays only the body of a document ù the portion following the HTML <BODY> tag. To edit information in the <HEAD> block, use Source view or the elements' property pages.

In Design view, Web pages are formatted and displayed the way they would be in Microsoft Internet Explorer 4.0, even if you normally use a different browser.

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

Tip To move quickly to any element in the page, click it in the HTML Outline 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 intrinsic 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.

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

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