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


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

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

  • 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 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. You can do this for an individual control, for all controls on the page, or by default. 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 a control is displayed as text, the page might malfunction at run-time.

To display text representations of an individual control

  • Right-click the control, and then choose Text View.

To display text representations of all controls

  • From the View menu, choose View All Controls as Text.

To display text representations of controls by default

  • In the HTML Editor Options, set Source View Display to Text.

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

To remove object information from design-time controls

  • Right-click the control, and then choose Runtime Only. 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.


Quick View, HTML Editor

Quick view in the HTML editor enables you to:

  • View .htm files in a manner similar to how they will look in your browser.

    Note Quick view does not process server script, so it may not accurately reflect how .asp files will look in the browser. For example, if a design-time control is created by run-time server script, it will not appear in Quick view.

  • View the client elements of .asp files, such as HTML intrinsic controls.

  • See the results of your most recent changes instantly, without saving the document.

  • Test client run-time elements of your page, such as links, bookmarks, marquees, and client scripts (but not server scripts).

Use the tabs at the bottom of the editor window to switch to Quick view. When you are in Quick view, you cannot edit the page. The Document Outline is not visible in Quick view.

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.

Quick view differs from Design view because the page is interactive. You can click links or HTML controls and see the results of your actions. In addition, the page is displayed more closely resembling the way it will look in Internet Explorer. For example, controls such as the Recordset control, which are displayed in Design view, do not appear in Quick view.

Note All relative URL references work as if the document were in its location on the target Web server.

Quick view presents the document formatted for Internet Explorer 4.0, even if you normally use a different browser. If you have a different browser installed on your computer, you can use that browser to view the page by choosing the Browse With command from the Project Explorer right-click menu.

Security in Quick View

In Quick view, objects are not checked for signatures when you preview a page. This makes it more convenient for you to preview a page, because you do not have to respond to messages asking you permission to work with objects.

Because Quick view does not participate in browser security, you must:

  • Be absolutely sure that the objects on your page are safe for scripting.

  • Test your page by displaying it in the browser in exactly the same way you expect users to.


HTML Outline Window

The HTML Outline window provides an overview of the HTML elements on your page and a convenient way of navigating between them. In the HTML Outline window, you can:

  • Display a tree view of elements in the body portion of your page.

  • Navigate quickly to an object in the HTML editor (in either Design or Source view).

  • Click an element in the HTML Outline window to select it in the HTML editor.

The HTML Outline window displays the most commonly used elements in a document. To avoid making the view too complex, it does not show every possible element. For example, the HTML Outline window does not show individual paragraph tags (<P>) or individual table cells (<TD>). The complete list of elements that can appear in the HTML Outline window is in the following table.

Element | HTML tag
Body | <BODY>
Form | <FORM>
Text box | <INPUT> or <INPUT TYPE="text">
Text area | <TEXTAREA>
Password field | <INPUT TYPE="password">
File field | <INPUT TYPE="file">
Hidden field | <INPUT TYPE="hidden">
Checkbox | <INPUT TYPE="checkbox">
Radio button | <INPUT TYPE="radio">
Submit button <INPUT TYPE="submit"> or
<INPUT TYPE="image"> or
<BUTTON TYPE="submit">
Reset button <INPUT TYPE="reset"> or
<BUTTON TYPE="reset">
Button <INPUT TYPE="button"> or
<BUTTON TYPE="button"> or
<BUTTON>
Combo box | <SELECT>
Listbox | <SELECT SIZE=2>
Link | <A HREF="URL">
Bookmark | <A NAME="name">
Image | <IMG>
Marquee | <MARQUEE>
IFrame | <IFRAME>
Table | <TABLE>
Table row | <TR>
Control | <OBJECT>
Java applet | <APPLET>
Division | <DIV>
Span | <SPAN>
Horizontal rule | <HR>

Objects appear in the HTML Outline window only if they are between the <BODY> and </BODY> tags in the page. The tree view displays objects using the document's hierarchy. For example, if a table appears within a form, the HTML Outline window places the table as a node under the node for the form.

The tree view displays the elements ID if it has one, or its name if there is no ID. If the element has neither an ID nor name, the outline shows the element's type (for example, "Button").

To navigate to an object

  • Click the object's name in the HTML Outline. The insertion point in the HTML editor moves to the object. If the Properties window is visible, the object's properties are displayed.


Script Outline, HTML Editor

Script Outline Window

The Script Outline window displays the available object model for your document and the scripts on the page when you are working in Source view of the HTML editor. In the Script Outline window, you can:

  • Display a tree view of all elements on your page that have their ID or NAME attribute set.

  • Display events for each element.

  • Navigate quickly to any script in the page.

  • Quickly create new handlers for events on the page.

The Script Outline window is available in Source view of the HTML editor. In its initial state, the tree view displays nodes listed in the following table:

Node | Contains
Client Objects and Events | A hierarchy of the elements that support client script or have client script attached. Under the node for each element is a list of the events for which you can write handlers.
Client Scripts A set of nodes for each client script on the page. There is a node for each script block on the page, and a separate node for each function or subroutine defined within a script block.

There is also a node for inline scripts defined as part of a control definition, as in this example:

<INPUT TYPE="button"
NAME="button1"
ONCLICK="alert('Clicked!')">
Server Objects and Events A list of nodes for each element that supports server script or that has server script attached. Under each node is a list of the event for which you can write handlers.

The Server Object and Events node also displays the Microsoft Internet Information Server object model, including the Session object, Application object, and so on. These objects do not support events, and are therefore displayed for informational purposes only.
Server Scripts | A set of nodes for each server script on the page. Functions and subroutines are identified by name. Inline server script appears in tree, but is not identified by name.

Navigating to Scripts

You can use the Script Outline window to move between scripts.

To navigate between scripts

  • Expand the appropriate script node in the Script Outline window until you see the script you want to go to, and then click the script's name. The insertion point in the edit pane moves to the script.

If you are working in a script in the edit pane, you can synchronize the Script Outline window so you can see where you are in the context of the whole page.

To synchronize your position with the Script Outline window

  • Right click anyehwere in the Script Outline window, and then select Synch Script Outline.

Creating Scripts

When you expand the node for an object in the Script Outline window, the node displays a list of events for which you can create a handler. If the event name is bold, a handler already exists for that event.

You can create new event handlers for events listed in the Script Outline window. You can also insert new script blocks even if they are not associated with a particular event.

To create a new event handler

  1. Expand the appropriate object node until you see the event name for which you want to create a script

  2. Double-click the name of the event.

    The editor inserts a new script block with a skeleton handler for the event you selected. The handler is created in the default language for the current context. For example, if you are creating a server script, the handler is in the default language for the server.

Arranging Scripts

You can arrange the nodes or script either by declaration or alphabetically.

To arrange scripts

  • Right click anywhere in the Script Outline window, select Sort, and then select Alphabetically or By Declaration.

If you arrange scripts by declaration, each script block has a node. When you open the node, it displays the names of individual procedures (functions or subroutines) and public variable. The nodes are arranged according to their order in the page.

If you arrange script nodes alphabetically, the scripts are displayed as individual nodes by their name. Script blocks that do not contain named procedures are displayed in order according to the name of the language in which they are written (for example, VBScript). If a script block contains only one procedure, the procedure name is displayed.


General Tab (Image Properties Dialog Box)

Allows you to specify the file for an image, along with options for how the image is displayed.

Options

Image Source

Specifies the name, including the full path, of a graphics (.gif, .jpg, or .jpeg) file to insert as the image. To select a name using the URL Picker dialog box, click the button to the right.

Note If you reference an image file that is not already part of your project, the image will not automatically be added to your project.

Alternate Text

Specifies text that the browser will display if the graphic is not available. In some browsers, such as Internet Explorer, the alternate text is also displayed in a ToolTip when the user holds the mouse pointer over the graphic.

Appearance

Specifies how the image is aligned with the text around it. Choose from the following options:

Option | Alignment
Left | Aligns with the left margin.
Right | Aligns with the right margin.
Texttop | Aligns the top of the image with the tallest text in the current line.
Absmiddle | Aligns the middle of the image with the middle of the text in the current line.
Baseline | Aligns the bottom of the image with the bottom of the text in the current line.
Absbottom | Aligns the bottom of the image with the bottom of the text in the current line.
Bottom | Same as Baseline.
Middle | Aligns the middle of the image with the baseline of the text in the current line.
Top | Aligns the top of the image with the top of the tallest element in the current line.

Note The Absmiddle, Baseline, Absbottom, and Texttop options are supported only by browsers that implement HTML 4.0.

Height

Specifies the total height of the image. If you do not specify a height, the browser calculates the size of the image as it is being rendered.

Width

Specifies the total width of the image, using the units selected from the list to the right. If you do not specify a width, the browser calculates the size of the image as it is being rendered.

Border size

Specifies the width in pixels of a border around the image. Select zero to display no border.

Horizontal space

Specifies the horizontal space in pixels between the image and the surrounding text.

Vertical space

Specifies the vertical space in pixels between the image and the surrounding text.

Image map

Specifies information about hot spots if the image is being used as an image map (a single image in which different areas can contain different links).

Local hotspot information

Specifies the location and name of a <MAP> block containing the coordinates for each hot area on the image. Enter the URL of the file containing the <MAP> block, a hash mark (#), and the name assigned to the <MAP> block. If the <MAP> block is in the current file, leave out the URL, but include the hash mark and map block name.

Hotspot information on server

Specifies that the map information is processed on the server. When the user clicks the image map, the coordinates of the click are sent to the server along with the URL from the Local Hotspot Information box.


General Tab (Link Properties Dialog Box)

Allows you to specify Uniform Resource Locators (URLs), create bookmarks, select target frames, and specify pop-up text for links. For more information, see "Insert Hyperlink Dialog Box."

Options

Link Type

Specifies the type of link. For example, you could choose to create a mailto:, news:, http:, telnet:, or ftp: link.

Link

Sets the URL for the link. To search for a URL, choose Browse.

Create Bookmark

Specifies the name for the bookmark. You can create a bookmark by entering the bookmark name in the text box and then selecting (other) from the Link Type drop-down list.

Frame Target

Specifies the target window for the link.

Pop-up Text

Specifies the title that appears in a ToolTip when the mouse pointer hovers over the link.


General Tab (Page Properties Dialog Box)

Allows you to set the title, background image, page margins, script language, and browser object model for a page.

Options

Page Title

Specifies the title that appears in the title bar when the page is viewed in a browser.

Background Image

Displays the name and path of the .gif, .jpg, or .jpeg file used for the page background. You can change the background image by choosing Browse and searching for a new image.

Nonscrolling Background

Specifies that the background image does not scroll.

Default Scripting Language

Server

Sets the default server scripting language for script blocks that do not include an explicit Language attribute. The following tag is added to the top of the page:

<%@ language=VBScript %>

-or-

<%@ language=JavaScript %>

Client

Sets the default client scripting language for script blocks that do not include an explicit Language attribute.

DTC scripting platform

These options can be set for the entire Web project from the Default Editor Tab of the Project Properties dialog box.

Server (ASP)

Select to use design-time controls as server objects in this ASP page. Design-time controls will run on most browsers that support HTML 3.2. This option is only available for .asp files.

Client (IE 4.0 DHTML)

Select to use design-time controls as client objects in this page. Design-time controls run on Internet Explorer 4.x browsers. This option is available for both .htm and .asp files.

For more information, see "Database Architecture."

ASP settings

Enable transactions

Specifies whether Microsoft Transaction Server should consider changes that occur in the page, such as database manipulation or MSMQ message transmission, as transactions. A transaction is a server operation that succeeds or fails as a whole, even if the operation involves many steps. Transaction processing applies only to database access; Transaction Server cannot roll back changes to the file system or changes to other, nontransactional resources. Microsoft Transaction Server is included as part of Microsoft Internet Information Server. If selected, the following tag is added to the top of the page:

<% @ Transaction=required%>

For more information, see "Creating Transactional Scripts" in the Microsoft Internet Information Server documentation.

Enable Session state

Specifies whether Internet Information Server allows Session object support for maintaining user information over the course of a visit. The following tag is added to the top of the page:

<%@ EnableSessionState=TRUE %>

-or-

<%@ EnableSessionState=FALSE %>

You use the Session object to store information needed for a particular user session. Variables stored in the Session object are not discarded when the user jumps between pages in the application; instead, these variables persist for the entire time the user is accessing pages in your application. You can also use Session methods to explicitly end a session and set the timeout period for an idle session. For more information, see "Managing Sessions."

Enable scripting object model

Specifies whether or not to use the Visual InterDev scripting object model for ASP pages.


General Tab (Select Properties Dialog Box)

Allows you to set the size and specify the options for a list box or drop-down list.

Options

Name

Specifies a name for the list, list box, or drop-down list element. This option is the same as the name attribute of the select tag.

Size

Specifies the height of the list by increasing or decreasing the number of viewable list options. Increasing the height of the list box can create a scrollable list or a static list box of options. Setting this option to 0 creates a drop-down list.

Allow Multiple Selections

Indicates that users can select two or more options in the list using the CTRL or SHIFT keys.

Options for SELECT Tag

Text

Sets the text for the options that appear in the list.

Value

Specifies the numerical or text value assigned to each option in the list. The value is then paired with the Name value to create a unique ID. When the option is selected and submitted, this information is submitted in place of the Text option information specified above.

Insert

Allows you to add a new list option.

List

Displays all of the options that appear in the list.

Up

Moves the selected option above the previous list option.

Down

Moves the selected option below the next list option.

Delete

Allows you to delete the selected list option.


General Tab (Table Cell Properties Dialog Box)

Allows you to set width, height, color, alignment, border colors, column span, and row span for table cells.

Background Color

Sets the background color for the cell. Select a color from the drop-down list, or choose Browse to select a color from the Colors dialog box. This option overrides any background colors previously set for the table using the General Tab of the Table Properties dialog box.

Alignment

Horizontal

Sets the left-to-right alignment of text in the cell.

Vertical

Sets the top-to-bottom alignment of text in the cell.

Dimensions

Height

Sets the height of the table cell. Choose a unit for Height in the adjacent drop-down list.

Width

Sets the width of the table cell. Choose a unit for Width in the adjacent drop-down list.

Span

Columns

Specifies the number of columns that the cell extends across in the table.

Rows

Sets the number of rows that the cell extends down in the table.

Borders

Specifies the border color HTML attributes bordercolor (solid), bordercolorlight (highlight), and bordercolordark (shadow) for the table cell.

Color

Specifies a solid border color for the cell. Select a color name from the drop-down list, or choose a color from the Colors dialog box. If Highlight and Shadow are set, the Color setting is ignored.

Highlight

Sets the color for the bottom and right sides of the table cell. Select a color from the drop-down list, or choose a color from the Colors dialog box. Use this option with the Shadow option to create the appearance of a three-dimensional table cell.

Shadow

Sets the color for the top and left sides of the table cell. Select a color from the drop-down list, or choose a color from the Colors dialog box. Use this option with the Highlight option to create the appearance of a three-dimensional table cell.

Note Use a light color for Highlight and a dark color for Shadow to maximize the three-dimensional appearance.

Wrap Text

Specifies that the table cell width expands to accommodate text longer than the length of the cell.


General Tab (Table Properties Dialog Box)

Allows you to set the color, height, width, alignment, border size, border color, and other options for a table.

Options

Background Color

Sets the background color for the table. Select a color from the drop-down list, type an RGB value, or choose Browse to select a color from the Colors dialog box.

Background Image

Specifies the image file for the background graphic of the table. The image is tiled behind the table if the table exceeds the length and width of the image. Type the directory path and name for the file, or search for the file by choosing Browse.

Note If you set a background color and also specify a background image, the background image will display instead of the background color.

Dimensions

Height

Indicates the total height of the table. Choose a unit for the height in the adjacent drop-down list.

Width

Indicates the total width of the table. Choose a unit for the width in the adjacent drop-down list.

Layout

Alignment

Specifies the placement of the table on the page. By default, tables are aligned on the left margin of the page.

Cell Padding

Specifies the amount of space, in pixels, between the sides of a table cell and its contents. Cell padding can range from 0-999 pixels.

Cell Spacing

Specifies the amount of space, in pixels, between the table border and the cells in the table and each cell from other cells. Cell spacing can range from 0-999 pixels.

Borders

Specifies the border color HTML attributes bordercolor (solid), bordercolorlight (highlight), and bordercolordark (shadow) for the table.

Size

Specifies the size, in pixels, of the outside table border. The border can range from 0-99 pixels. Choose a larger number to increase the width of the outside table border. Choose a smaller number to decrease the width of the outside table border.

Color

Specifies a solid border color for the table. Select a color name from the drop-down list, or choose a color from the Colors dialog box. If Highlight and Shadow are set, the Color setting is ignored.

Highlight

Sets the color for the bottom and right sides of each table cell and the color for the left and top sides of the table border. Select a color from the drop-down list, or choose a color from the Colors dialog box. Use this option with the Shadow option to create the appearance of a three-dimensional table border.

Shadow

Sets the color for the top and left sides of each table cell and the color for the right and bottom sides of the table border. Select a color from the drop-down list, or choose a color from the Colors dialog box. Use this option with the Highlight option to create the appearance of a three-dimensional table border.

Note Use a light color for Highlight and a dark color for Shadow to maximize the three-dimensional appearance.


Bookmark Dialog Box

Allows you to insert a bookmark (target location for a hyperlink jump) into the current page. You can create a bookmark from selected text or insert a blank bookmark.

Options

Name

Specifies the name you can use when creating a jump to this bookmark. For example, if you specify the bookmark name Copyright, you can jump directly to the bookmark by using the hyperlink #Copyright from within the current page or a hyperlink such as \\server\pagename.htm#Copyright from a different page.


Insert Div Dialog Box

Allows you to insert a division, which is used to partition a document into segments. Divisions are used to enclose other HTML elements to which you want to apply style information or which you want to position absolutely on the page.

If you have selected text before inserting the division, the selection becomes part of the division. Otherwise, the editor inserts an empty division at current location.

Options

Positioning

Absolute

Specifies that the contents of the division can be placed on the page using x and y coordinates with respect to the browser's window. Absolutely positioned elements can be displayed anywhere on the page, regardless of where they are inserted.

Note Absolute positioning is supported only by browsers that implement HTML 4.0.

Inline

Specifies that the contents of the division are placed on the page in order with the HTML elements that surround them.


Hyperlink Dialog Box

Allows you to specify the type of link and the target document or bookmark when you specify selected text as a hyperlink.

Options

Type

Specifies the protocol to use when you create a link. The following table lists protocols for common types of links.

To | Choose this protocol
Jump to another Web page | http:
Jump to a bookmark on another page | http:
Jump to a bookmark on the current page | (other)
Download a file and open it | file:.
Send e-mail | mailto:
Access other Internet resources | Protocol required for that resource, such as ftp:, gopher:, telnet:, or wais:.

URL

Specifies the Universal Resource Locator (URL) for the link. You can select a URL by clicking the button next to the URL text box. Use the following guidelines for entering URLs.

  • For Web pages and files, specify the server, path, and full file name (including extension), in the format //Server/Path/File.ext, as in this example:
    //Myserver/Myproj/Startpage.htm
  • For bookmarks on another page, specify a Web page in the form //server/path/file.ext followed by # and then the name of the bookmark, as in this example:
    //Myserver/Myproj/Faq#question3
  • For bookmarks on the same page, specify # and then the name of the bookmark, as in this example:
    #contents
  • For email, specify the email name of the person to send to, as in this example:
    webmaster@mysite.com
  • For other protocols, specify the appropriate information for that protocol.

Note If you reference a file that is not already part of your project, the file will not automatically be added to your project.


Insert Image Dialog Box

Allows you to specify the file name and formatting attributes when adding a picture to a Web page.

Options

Picture Source

Specifies the name, including the full path, of a graphics (.gif, .jpg, or .jpeg) file to insert as the image. To select a name, choose Browse.

Note If you reference an image file that is not already part of your project, the image will not automatically be added to your project.

Alternate Text

Specifies text that the browser will display if the graphic is not available. In some browsers, such as Internet Explorer, the alternate text is also displayed in a ToolTip when the user holds the mouse pointer over the graphic.

Layout

Alignment

Specifies how the image is aligned with the text around it. Choose from the following options:

Option | Alignment
Left | Aligns with the left margin.
Right | Aligns with the right margin.
Texttop | Aligns the top of the image with the highest text in the current line.
Absmiddle | Aligns the middle of the image with the middle of the text in the current line.
Baseline | Aligns the bottom of the image with the bottom of the text in the current line.
Absbottom | Aligns the bottom of the image with the bottom of the text in the current line.
Bottom | Same as Baseline.
Middle | Aligns the middle of the image with the baseline of the text in the current line.
Top | Aligns the top of the image with the top of the tallest element in the current line.

Note The Absmiddle, Baseline, Absbottom, and Texttop options are supported only by browsers that implement HTML 4.0.

Border thickness

Specifies the width in pixels of a border around the image. The default is no border.

Spacing

Horizontal

Specifies the horizontal space in pixels of an area between the left and right sides of the image and the surrounding text.

Vertical

Specifies the vertical space in pixels between the top and bottom of the image and the surrounding text.


Insert Table Dialog Box

Allows you to insert an empty HTML table into the page.

Caution If you select text and then insert a table, the selected text is replaced by the empty table.

Options

Rows

Specifies the number of rows in the table. The resulting table does not include an extra row for column headings.

Columns

Specifies the number of columns.

Table attributes

Width

Indicates the total width of the table. Select units (pixels or percent) from the list next to this box.

Background color

Specifies the background color for the table. Select a color name from the drop-down list or select a color from the Colors dialog box.

Background image

Specifies a graphics (.gif, .jpg, or .jpeg) file that appears tiled behind the table. Enter a URL, or select a name from the URL dialog box.

Note If you reference an image file that is not already part of your project, the image will not automatically be added to your project.

Border

Specifies a color for the table's border. Select a color name from the drop-down list or choose a color from the Colors dialog box. If the table has no border, border color is ignored.

Border size

Specifies the size in pixels of the table border. Choose 0 to specify no border.

Alignment

Specifies how the table is aligned with respect to the document.

Cell spacing

Specifies the amount of space in pixels between cells.

Cell padding

Specifies the amount of space in pixels between cells and the table's border.

Cell attributes

Background color

Specifies the same background color for all cells in the table. The cell background color overrides the table background color. After the table has been created, you can change or remove the background color for each cell individually. Select a color name from the drop-down list or select a color from the Colors dialog box.

Border color

Specifies the same color for the borders of all cells in the table. The cell border color overrides the table border color. After the table has been created, you can change or remove the border color for each cell individually.

Alignment

Specifies how the text in a cell is aligned with its border. After the table has been created, you can change or remove the alignment option for each cell individually. Choose from the following options:

Option | Alignment
Left | Cell contents are flush with the left border.
Right | Cell contents are flush with the right border.
Center | Cell contents are centered horizontally in the cell.
Justify | Distributes text in the cell so that the left and right margins are even.
Char | Aligns text around a specified character in the cell.

Note The Justify and Char options are supported only by browsers that implement HTML 4.0.

Wrap text

Specifies whether text in cells is wrapped within the cell's borders. If checked, the text is wrapped. If unchecked, the cell is resized to accommodate the unwrapped text. After the table has been created, you can change or remove the wrap option for each cell individually.


Named Colors Tab (Color Picker Dialog Box)

Allows you to select one of 140 colors and return either the name of a color or its hex value. You can also use this tab to check the hex value for a color or the name for a color hex value.

Browsers recognize a basic set of 16 color names such as "Red," "Olive," and "Lime." Some browsers such as Microsoft Internet Explorer recognize 126 additional names, such as "DarkRed," "Goldenrod," and LawnGreen," for a total of 140 names. The Named Colors tab allows you to select a color and return the correct corresponding name to your page.

Alternatively, you can select a color and return its corresponding hex value. This is often a good idea if you are not sure what browser a user will have when using your application. Even if a browser does not recognize a color name, it will be able to process a color hex value.

The way in which colors are displayed by the browser depends on the color depth of the user's computer. Most computers can display at least 16 basic colors as solid colors, and additional colors as mixtures of the basic 16 (called "dithering.colors"). Computers set to a higher color depth can display all colors as solid colors.

Tip For best results when creating an application for a variety of browsers and computers, limit yourself to the 16 basic colors. If you want to select from a larger palette, use the colors displayed in the Safety Palette tab.

Options

Basic

Displays a palette of the colors supported on 16-color computers. The colors in the basic palette are always displayed as solid colors.

Additional

Displays a palette of the additional 124 named colors. The appearance of the colors in the additional palette depends on the current color depth setting of your computer. For example, if your computer is set to display 256 colors, some or all of the colors in the additional palette will be dithered. However, the color value returned by the dialog box is not affected by the color depth of your computer.

Use Color Names

Specifies that the dialog box returns the text name of the selected color. If this option is not selected, the dialog box returns the selected color's hex value.

Color

Displays the name and hex value for the currently selected color. The value in parentheses is displayed for information only. The actual value returned by the Color Picker dialog box is the value not in parentheses. For example, if Use Color Names is selected, the hex value is in parentheses.


Safety Palette Tab (Color Picker Dialog Box)

Allows you to select a color from a palette of 216 colors optimized for cross-platform use.

The safety palette features colors that are available on most computers used for browsing Web sites. If you select colors from only this palette, you minimize the chance that the browser will encounter a color it cannot display and substitute another color with unexpected results in your application.

Tip For maximum compatibility with all types of browsers and computers, you can limit yourself to the 16 basic colors displayed in the Named Colors tab.

Options

Select a color from the color squares.

Color

Displays the hex value for the currently selected color.


Custom Color Tab (Color Picker Dialog Box)

Allows you to select a color that is not one of the pre-defined colors from the Named Color or Safety Palette tabs. You create colors by mixing red, green, and blue (RGB).

This tab is primarily useful for creating colors to be displayed by browsers on computers that support a 16-bit color depth or higher. On computers with a lower color depth, most custom colors are displayed by dithering.

Options

Red

Specifies the amount of red in the custom color.

Green

Specifies the amount of green in the custom color.

Blue

Specifies the amount of blue in the custom color.

Color

Displays the hex value for the current color.


HTML Toolbar

Contains buttons that allow you to format characters and paragraphs in an HTML document. The buttons on the HTML toolbar are available only in Design view and Source view. Some buttons are available only in Design view.

To format characters, select all the characters to format. If you are in Source view, do not include portions of an HTML tag. You can include entire HTML tags, such as when you are making text bold that already contains some italic text.

To format paragraphs, place the insertion point in the paragraph to format. If you are formatting multiple paragraphs at once, select enough text that at least a part of every paragraph to format is in the selection.

Buttons

Toolbar Button | Name | Description
 | Paragraph Format | Displays a drop-down list of HTML paragraph types that you can apply to the current paragraph. Available only in Design view.
 | Font Name | Displays a drop-down list of font names that you can apply to the currently selected text. Available only in Design view. This list shows fonts available on your computer. If the text is displayed on a computer that does not have the font you have specified, the browser selects a substitute font.
 | Font Size | Displays a drop-down list of HTML font sizes (1 to 7) that you can apply to the currently-selected text. Available only in Design view. HTML font sizes are not absolute sizes. They represent a scale of relative sizes as interpreted by the browser when it displays the text.
 | Bold | Toggles the selected text between bold and normal. This button is not available in Source view if the current selection includes a portion of an HTML tag.
 | Italic | Toggles the selected text between italic and normal. This button is not available in Source view if the current selection includes a portion of an HTML tag.
 | Underline | Toggles the selected text between underlined and normal. This button is not available in Source view if the current selection includes a portion of an HTML tag.
 | Fore Color | Displays the Colors dialog box that allows you to assign a color to the selected text. Available only in Design view.
 | Back Color | Displays the Colors dialog box that allows you to assign a color as a background to the selected text. Available only in Design view.
 | Align Left | Aligns the currently selected paragraphs at the left margin. Available only in Design view.
 | Center | Centers the currently selected paragraphs in the browser window. Available only in Design view.
 | Align Right | Aligns the currently selected paragraphs at the right margin. Available only in Design view.
 | Bulleted List | Converts the currently selected paragraphs into a bulleted list. Available only in Design view. To create a new list item, place the insertion point in the list and press ENTER. If you press ENTER while in the last list item, the editor creates a new paragraph outside the list.
 | Numbered List | Converts the currently selected paragraphs into a numbered list. Each numbered list starts at 1. Available only in Design view. To create a new list item, place the insertion point in the list and press ENTER. If you press ENTER while in the last list item, the editor creates a new paragraph outside the list.
 | Decrease Indent | Removes an indent level previously applied with Increase Indent. Available only in Design view.
 | Increase Indent | Indents the selected paragraph by one indent unit. The size of the indentation is determined by the browser when the page is displayed. Available only in Design view.
 | Link | Displays the Hyperlink box, which allows you to convert the currently selected text into a link. Not available if the selection includes an existing link.


Design Toolbar

Contains buttons to specify how Design view in the HTML Editor displays your document and to specify absolute positioning for elements. The buttons on the toolbar are available only in Design view.

Buttons

Toolbar Button | Name | Description
 | Visible Borders | Displays a 1-pixel border around HTML elements that support a BORDER attribute and have it set to zero, such as tables, table cells, and divisions.
 | Show Details | Displays glyphs for HTML elements that do not have a visual representation, such as comments, scripts, and anchors for absolutely-positioned elements.
 | Absolute Positioning | Converts the selected element into an absolutely positioned one (one that can be positioned using x and y coordinates), or converts an absolutely positioned element into a static one (positioned according to where it appears in the HTML text).
 | Lock | Prevents an absolutely positioned element from being inadvertently moved.
 | Absolute Mode | Specifies that when new elements are dragged from the ToolBox, they are positioned absolutely. Note Absolute mode applies only when you are working in Design view.
 | Snap to Grid | Specifies that elements are aligned using an invisible grid. You can set grid spacing in the Options dialog box, and the grid will be changed the next time you open a document.


Choose Builder Dialog Box

Allows you to select and launch a utility (wizard, control, builder, and so on). The list of utilities displayed in this dialog box depends on what task you are performing at the time the dialog box is displayed, and on what utilities are installed on your computer.

For example, if you have chosen a command that starts a wizard, the Choose Builder dialog box shows you all the currently-installed wizards that are available in the current context. In some cases, only one choice might be displayed.

Options

Double-click the name of the utility to launch.


Color and Margins Tab (Page Properties Dialog Box)

Allows you to set the color for the page background, normal text, and link text.

You can use the Color tab to:

  • Select colors from the drop-down lists.

  • Choose a custom color.

  • View the color combinations as they would appear on the page.

Options

Color

Background

Sets the background color for the page. Select a color from the drop-down list, or choose Browse to select a custom color.

Text

Sets the normal text color for the page. Select a color from the drop-down list, or choose Browse to select a custom color.

Link

Sets the link color for links that the user has not visited. Select a color from the drop-down list, or choose Browse to select a custom color.

Visited Link

Sets the link color for links that the user has already traversed. Select a color from the drop-down list, or choose Browse to select a custom color.

Active Link

Sets the link color for links that the user has selected. Select a color from the drop-down list, or choose Browse to select a custom color.

Preview

Allows you to preview the interactions between the different page color options.

Page Margins

Top

Specifies the margin for the top of the page in pixels. Overrides the default margin.

Bottom

Specifies the margin for the bottom of the page in pixels. Overrides the default margin.

Left

Specifies the left margin for the page in pixels. Overrides the default margin.

Right

Specifies the right margin for the page in pixels. Overrides the default margin.


Create URL Dialog Box

Use this dialog box to build a Uniform Resource Locator (URL) for a destination URL, set properties for an existing URL, or reference an ASP page object. You can create a URL for files in the current Web project, a different Web project, or any site on the Internet. For example, you can link to bookmarks, create destination URLs for image files, and create references to .asp file methods.

Options

Projects

Displays the tree structure of the Web projects in the open solution.

Contents of Folder

Displays the files contained in the selected folder, such as .htm, .asp, and .gif files. If you are creating a reference to an .asp file object, select the .asp file to view the available methods for the object.

URL Type

Determines the level of detail for the URL you want to generate.

To | Select
Create a fully qualified URL that includes the server and path name, such as http://webserv/webproj/test.htm | Absolute
Create a URL that allows you to navigate to methods and parameters associated with ASP (PM) pages. | ASP Object Method
Create a URL that does not include a path name or server ID. The file is in the same location as the referring file. For example: test.htm | Doc Relative
Create a URL that is relative to the root of the Web server for the referring file. For example: /webproj/test.htm | Root Relative

Files of Type

Select the file extension for the files you want to view in the Projects pane.

URL

Select or type the URL for the selected file. This editable field can be updated to include additional details for the selected file, based on the URL type you select.

Parameters

Select or type additional parameters, such as bookmarks or parameter values, to append to the end of the URL. For example:

If you are creating a bookmark URL include the pound sign:

#mybookmark

If you are creating a reference to an .asp file parameter include a question mark:

?myparameter=myvalue

Target Frame

Type the name of the target frame to display the URL.

URL Preview

Displays the text that will be inserted into your page.


HTML Editor Options (HTML -- Options Dialog Box)

HTML Editor Options (HTML — Options Dialog Box)

Allows you to set preferences for working with HTML and ASP pages in the HTML Editor.

Caution Clicking Cancel cancels all changes made in this dialog box. If you made changes to more than one category, none of the changes will be saved.

Options

Initial view

Start HTML pages in

Source Automatically opens all .htm files in Source View, HTML Editor.

Design Automatically opens all .htm files in Design View, HTML Editor.

Start Active Server pages in

Source Automatically opens all .asp files in Source view.

Design Automatically opens all .asp files in Design view.

Grid

Snap to grid

Automatically positions the outer edges of HTML elements by horizontal and vertical increments when you move the element using the arrow keys or mouse.

Horizontal spacing

Indicates the pixel spacing for the x-axis of the grid.

Vertical spacing

Indicates the pixel spacing for the y-axis of the grid.

Note Grid settings are applied the next time you open a document. They will not take effect in a document that is already open.

Source view display

View controls

Graphical Displays Java applets, design-time controls, ActiveX controls, and other objects as the object would appear on the page in the browser. You can also interact with some objects, such as design-time controls, using the keyboard or mouse.

Text Displays Java applets, design-time controls, ActiveX controls, and other objects as HTML text on a page.

Warning If you edit the text for an object, the object may not work properly.

Script event handlers

Auto popup statement completion

Displays statement completion automatically when you drag an event onto a page from the Script Outline window.

Design view display

Details

Indicates that HTML elements such as unknown elements, script blocks, and comments will display in Design view as special graphics. A special graphic will appear for the beginning tags of each element.

For unknown elements, a graphic for both the beginning and ending tag appears.

Borders

Indicates that elements with borders set to zero (0), such as tables and some divisions, or DIVs, will display in Design view with a border of one (1).


References Dialog Box

Use this dialog box to choose the type libraries used for statement completion in the HTML Editor and Code Editors. Type libraries contain the properties, methods, and events for controls and other objects installed on your machine.

Options

Available references

Lists the available type libraries located in the Location path specified in the <Type library information> area. If you select the check box next to the name of the type library, the methods and properties for the objects in the type library will be available for statement completion in the Source Tab of the HTML Editor.

Priority

Select to move the type libraries up or down in priority in the Available references list. The HTML Editor and the Code Editor will search through each type library in the order they appear in the Available references list box for the correct statement completion information. If a function occurs in more than one type library, the HTML Editor will provide statement completion information from the first type library it finds the function in.

<Type library information>

Location

Displays the file path for the current type library, .dll, or .ocx file selected in the Available references list.

Language

Displays language information, such as English (United States), for each type library in the Available references list.

Version

Displays the version number for each type library in the Available references list.

Browse

Select to search for a type library in other directories.


Table Auto Format Builder

Use this builder to design the visual appearance of tables by applying color combinations, layouts, borders, and other formatting to an entire table or sections of a table. The Preview area allows you to view how your settings affect a sample table.

Note If you select HTML attributes around the <TABLE> </TABLE> tags, these attributes may be lost when you apply the Table Auto Format Builder changes. Also, this builder may disregard the COLSPAN and ROWSPAN attributes if these attributes have been applied to a table.

If you apply your table formatting choices using only HTML, the following tags are affected:

Table Attributes Font Attributes
ALIGN

COLOR

CELLPADDING

SIZE

CELLSPACING

FONT

WIDTH

If you apply your table formatting choices using styles, the following cascading style sheet attributes are affected:

Table Attributes
Cell Attributes

BACKGROUND

BORDER-BOTTOM

BORDER

BORDER-LEFT

CELLPADDING

BORDER-LEFT-COLOR

CELLSPACING

BORDER-RIGHT

WIDTH

BORDER-RIGHT-COLOR

BORDER-TOP

BORDER-TOP-COLOR

COLOR

FONT-SIZE

FONT-STYLE

FONT-VARIANT

FONT-WEIGHT

TEXT-ALIGN

Note   If you choose to apply your formatting choices using styles, the Table Auto Format Builder will overwrite any styles assigned through a .css file with inline styles.

Options

Color scheme

Specifies the type of border, shading, and font design to apply to the table.

Format

Specifies the type of column and row positioning to apply to the table.

Apply using

HTML

Applys the table formatting options using plain HTML.

Styles

Applies the table formatting options using inline CSS attributes.

Include

Borders

Specifies whether to apply the border style available with the design chosen in the Format and Color Scheme drop-down lists.

Shading

Specifieswhether to apply the shading style available with the design chosen in the Format and Color Scheme drop-down list.

Font

Specifies whether to apply the font style available with the design chosen in the Format and Color Scheme drop-down list.

Apply style to

Specifies the sections of the table that the Table Auto Format Builder applies the selected format and color scheme options to.

Header

Specifies whether the options selected in the Format and Color Scheme drop-down lists apply to the first row in the table.

Last row

Specifies whether the options selected in the Format and Color Scheme drop-down lists apply to the last row in the table.

First column

Specifies whether the options selected in the Format and Color Scheme drop-down lists apply to the first column in the table.

Last column

Specifies whether the options selected in the Format and Color Scheme drop-down lists apply to the last column in the table.