Source View, HTML Editor
Source view in the HTML editor enables you to:
View and edit text and HTML tags.
View and edit scripts in the page.
Work with design-time controls, Java applets, and most other objects using the visual representation they will have in the browser. (Intrinsic HTML controls are displayed as HTML text.)
Drag items from the Toolbox and from the Project Explorer to create elements on your page.
Use the Properties window and custom properties dialog boxes to edit the appearance and behavior of HTML text and controls on the page.
Note In Source view, the Properties window does not display style properties. You can edit style properties directly in an HTML tag or by using the Properties window in Design view.
Use the HTML Outline window to jump to any element in the page.
Use the Script Outline window to view and create scripts for elements in the page.
Perform debugger functions, such as setting breakpoints and viewing the current line indicator.
Source view is useful for working directly with "raw" HTML text, which gives you precise control over the tags used in the page. However, by default, you can still work with objects visually.
Editing in Source View
To help you work in Source view, the editor colors text to show its function. For example, by default, HTML tags are displayed in brown, tag attributes in red, attribute value in blue, and so on. If your page contains script, the script is colored according to the rules for the language of that script.
You can add elements to your page in Source View 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 applet) 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 to make it relative.
You can paste HTML text into Source view. If you cut or copied the text from an HTML source — such as Internet Explorer, Design view of the Visual InterDev editor, or the Visual InterDev Help system or sample applications — use the Paste As HTML command from the right-click menu. Otherwise, the editor pastes in a version of the HTML text with escape codes in place of HTML reserved characters. 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.
You can move between scripts using the Script Outline window. Click the name of a script to place the insertion point in that script. If you are working on a script in the page and want to see where you are in the Script Outline window, right-click the script block and choose Synch Outline.
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.
Source view allows you to switch between visual and text representation of all controls on the page. For example, if you are working with an object, you can set its parameters using the Property window, or you can directly set values in the <PARAM> tag of an object on the page. If you are using design-time controls in your page, Source view allows you to see both the generated script from those controls as well as the object information that the control uses to coordinate with other controls.
Note In general you should not directly edit generated script or object information created by a tool (such as a design-time control), because doing so can cause the page stop functioning properly.
Displaying Visual Representations of Objects
By default, design-time controls, Java applets, and other objects are displayed on the page using their visual representation.
Note If you select an object that has a visual representation, the line number in the status bar reflects the line immediately following the object.
You can change individual controls to show their HTML text representation. Doing so allows you to switch quickly between views, because the editor does not need to render the control graphically. However, when a control is displayed as text, it does not communicate with other controls on the page. If you add or change other controls while using text view, controls on the page will not function as designed. You should view controls as text only when you want to work with HTML text, not with the controls.
To display text representations of an individual control
- Right-click the control, and then choose Always View As Text.
To display text representations of controls by default
- In the HTML Editor Options, set Source View Display to Text.
Note You cannot successfully copy and paste the text representation of a control. If you want to copy a control, use its graphical representation.
When you use a design-time control, the control generates script in your page. The control also adds object information as HTML text that it uses to coordinate the generated script with that of other design-time controls on the page. You can preview this generated script.
To preview a design-time control's generated script
- Right-click the control, and then choose Show Runtime Text. The generated script is displayed immediately below the control in a read-only block marked in gray.
You can also remove the object information for a design-time control to reduce the size of your page. However, because the control becomes static text, it can no longer be coordinated automatically with other controls, and can cause the page to malfunction. Remove the object information only if you intend to customize the control and do not wish to use it as it was designed.
To remove object information from design-time controls
- Right-click the control, and then choose Convert to Runtime Text. The visual representation of the control is replaced by the generated script.
Caution You cannot undo this command.
Adding Script
The Script Outline window displays a tree view containing the object hierarchy for both the client and the server. Each script on the page appears as a node on the tree.
Beneath each object, the hierarchy also contains a list of events supported by that object. If a handler exists for that event, the name of the event is displayed in bold. To create a new handler, double-click the name of the event. To jump to an existing script, click its node in the tree.
If you are writing script, the HTML editor uses IntelliSense®— it displays options that help you complete statements. When you type in the name of an object available on your page followed by a period (.), the editor displays all members of that object's class.
You can quickly create or edit script for an element on the page in these ways:
Right-click the page, and then choose Edit Script.
Double-click an element that has a visual representation.
Debugging in Source View
Source view enables you to execute debugger commands, such as setting breakpoints, by choosing commands from the Debug menu or the Debug toolbar. The left margin of the edit window displays glyphs indicating breakpoints.
When the debugger is running, the current page is displayed in Source view so you can see individual lines of script. The current line is indicated in the margin with an arrow indicator.