DHTML Page Designer

Allows you to design an HTML page for use in a DHTML application. Using the designer, you can:

  • Create a new HTML page, or edit the contents of an existing page.

  • Determine which elements on the page are programmable and explore all the dynamic elements on the page.

  • Access the Code Editor window to write code for each programmable element on the page.

There are two panes to the page designer: the treeview pane and the detail pane.

Treeview Pane

Displays a hierarchical representation of all of the elements within an HTML page. For each element, the page designer lists the ID (if one exists), the type of control, and in some cases the beginning of the content for that element. If an element does not contain an ID, you can assign one to it in the Properties window. Elements with IDs are indicated in bold.

All elements in the treeview are children of the Body element and the Document object.

Detail Pane

Presents a drawing surface on which you can create a new page or edit the contents of an existing page. You can add HTML elements to the page, position elements, and set properties that control their physical appearance.


DHTMLPageDesigner Object

Represents the design-time page designer. Not available at run time.

Remarks

The DHTMLPageDesigner object's properties are only available from within the Visual Basic environment when you build a project using the DHTMLPageDesigner. The items under DHTMLPageDesigner are design time properties, and as such are not accessible by code.


Topic Not Found

No matching topic was found. Some possible reasons and remedies are as follows:

  • The file (.chm) that contains the destination topic is not in the expected location.

    Remedy: Rerun the MSDN Library Setup.

  • The file (.chm) that contains the current topic or destination topic is out-of-date and the link is no longer valid.

    Remedy: Install the latest version of the MSDN Library.

  • The MSDN Library CD is not in the CD-ROM drive.

    Remedy: Insert the MSDN Library CD into the CD-ROM drive.


DHTML Page Designer Shortcut Menus

Shortcut Menu Commands

Delete

Deletes the currently selected element. Available when you have selected any element from the treeview, except for the BODY element or Document object.

Cut

Removes the selected element and places it on the Clipboard. You must select at least one element for this command to be available.

Copy

Copies the selected element control onto the Clipboard. You must select at least one element for this command to be available.

Paste

Inserts the contents of the Clipboard at the current location.

View Code

Opens the Code Editor window and displays the event procedure for the selected HTML element. The Code Editor window shows the default event for the element. Available when you have selected any element that has an ID, from either pane of the designer.

Properties

Opens the Properties Pages dialog box for the selected element. Available when you have selected any element from either pane of the designer. If the selected element has no property page, a None tab will appear in the dialog box.

Absolute Position

Toggles the positioning mode of the current HTML element between absolute and relative. In absolute positioning, the element is placed on the page at the exact location you indicate. A series of parameters in the HTML for the element indicate the exact placement of the element.

If absolute positioning is off, the element is placed on the page in the next available space, with layout running from left to right and from top to bottom, across the relative width of the screen on the end user's computer.


HTML Intrinsic Controls

Controls that you can use with your HTML Page Designer. Controls on an HTML page are often referred to as HTML elements.

HTML intrinsic controls are named similarly to some standard Visual Basic controls, but they can only be used in the page designer and behave differently than their forms-based counterparts. For example, the methods available on the text field for an HTML page are different than the methods for a textbox on a form.

You can insert an HTML intrinsic control on the page in three ways:

  • By clicking the icon in the toolbox and dragging it to the rightmost pane of the designer.

  • By clicking the icon in the toolbox and drawing it on the rightmost pane, as you would on a form.

  • By double-clicking on the toolbox icon.

The position of the resulting element may vary depending on whether you are working in absolute positioning mode.

At design time, you can change multiple properties that control the appearance of the controls, by setting values in the Properties window. Available properties vary depending on the type of control.

HTML Intrinsic Controls

Pointer

The only item in the DHTML Page Designer Toolbox that doesn't draw a control. When you select the pointer, you can only resize or move a control that has already been drawn on an HTML page.

Button

Creates a command button on the page.

Submit Button

Creates a submit button as part of an HTML form. Submit buttons are used to send form data to the server.

Reset Button

Creates a reset button as part of an HTML form. Reset buttons are used to clear the contents of a form.

Text Field

Creates a single-line text input field on the page.

Text Area

Creates a multiline text input field on the page.

Password Field

Creates a text input field for which the contents are masked when the user enters data.

Option Button

Creates a radio button on the page.

Note To make a set of option buttons mutually exclusive (that is, you can only select one of them at a time), set their Name properties to the same value. Note, however, that you must keep the ID property for each option button unique.

Checkbox

Creates a checkbox on the page.

Select

Creates a drop-down combo list on the page.

List

Creates a scrolling list on the page.

Image

Creates a standard image on the page.

Hyperlink

Creates a hyperlink on the page. The text for the hyperlink is set to Hyperlinkn, where n is the number of hyperlink elements on the page. You can change the default text by selecting the hyperlink and typing over it. You determine what page the hyperlink should navigate to by setting the element's HREF property or writing an event procedure for the element's Click event.

Horizontal Rule

Inserts a horizontal line on the page. You can adjust the line's thickness and appearance.

FileUpload

Inserts a field and button that end users can use to specify a local file to upload to a server. Users can also browse to files using this element.

HiddenField

Inserts a hidden field onto the page. You can use a hidden field to retain information you need in processing the page.

InputImage

Creates a graphical input area that submits information about the image coordinates. The value of the SRC property specifies the URL of the image that will appear within the area.


DHTMLPage Properties Dialog Box

Allows you to specify how your page should be saved, and whether you want to use an existing HTML page or create a new one.

Options

Save Mode

Save HTML Inside the Designer

Saves the HTML file as part of the designer when you run the project. When the HTML is saved within the designer, you can't edit the page in an external editor. Visual Basic will create an external HTML file for the designer when it builds the project.

Save HTML in an External File

Saves the HTML file as an external file, to the location you specify. In this case, you can either enter a new file name, if you want to create a page from scratch, or you can select an existing page and modify it. Saving your HTML in an external file allows you to edit the page in an HTML or text editor. The value shown in the text box for this setting becomes the value of the designer's SourceFile property.

New

Opens the Create HTML File dialog box, used to specify a new file name to which you want to save your HTML file. Use this option when you want to create an HTML page from scratch.

Open

Brings up the Open dialog box, from which you can select an existing HTML page to import into the designer and edit. Use this option when you want to edit an HTML file that already exists.


Load event

Load Event (DHTMLPage)

Occurs when the browser loads an HTML page in your application.

Syntax

Private Sub object_Load

The object placeholder represents an object expression that evaluates to an object in the Applies To list.

Remarks

There are two distinct behaviors for this event, depending on whether your page is set to load asynchronously or not.

  • When loading asynchronously, the Load event fires after the first element on the page is created.

  • When loading synchronously, the Load event fires after all elements have been created.

Programmers can use this event when running asynchronously (when the AsyncLoad property is set to True) as a notification that all elements have been loaded onto the page.


Unload event

Unload Event (DHTMLPage)

Occurs in response to the user navigating away from a given HTML page or closing the browser.

Syntax

Private Sub object_Unload

The object placeholder represents an object expression that evaluates to an object in the Applies To list.

Remarks

You can use the Unload event to clean up code before execution is terminated. When the application fires this event, you may wish to clean up by closing open files, deleting temporary files, and so on. All of the objects on the HTML page still exist when the Unload event fires.


Cannot delete SourceFile

The name entered into SourceFile cannot be deleted because either:

  • The file couldn't be found.

  • You don't have permissions to delete the file.

  • There is a problem on your system preventing you from deleting the file.

  • The file is otherwise protected from deletion.


Error running external HTML Editor

An error was encountered while attempting to run the external HTML editor. Check to see that the program is installed correctly, or check the disk for problems.


Error writing HTML File

An error was encountered while writing the HTML file. Be sure the destination has enough space to contain your file and that you have write permission to the destination system, or check the disk for problems.


You must enter a file name if you want to store your HTML in an external file

Enter a file name and try the operation again.


HTML File <name> could not be found. Please specify filename

The name you specified for the HTML file could not be found on your system. Please try another.


The DHTML Page Designer requires Internet Explorer Version 4.01 Service Pack 1 or greater

The DHTML Page Designer requires Internet Explorer Version 4.01 Service Pack 1 or later. IE 4.01 Service Pack 1 can be obtained free of charge from the Microsoft web site, http://www.microsoft.com.


The SourceFile refers to a directory. Please choose a file

The name you entered into SourceFile is already in use by a directory. Please choose a another name.


The SourceFile name is invalid. Please choose another

The name entered into SourceFile either contains invalid characters or is already in use. Please choose another name.


The SourceFile refers to a non-disk file. Please choose another

The name entered into SourceFile refers to a file that is not on the specified drive. Please choose another name.


The SourceFile is ready-only. Please choose another

You cannot write to this file. Save the file under another name.


You must specify an HTML source file before launching the external editor

The external browser can work only if you specify an HTML source file.


Your version <number> of Internet Explorer is too old to be used with the DHTML Page Designer. Please install Internet Explorer version 4.01 Service Pack 1 or greater

The DHTML Page Designer requires Internet Explorer Version 4.01 Service Pack 1 or later. IE 4.01 Service Pack 1 can be obtained free of charge from the Microsoft web site, http://www.microsoft.com.


DHTMLPage Object

Run-time component that hooks up events between the Visual Basic run time and the Dynamic HTML object model.

Syntax

DHTMLPage

Remarks

The DHTMLPage object is the run-time component of a Visual Basic DHTMLPageDesigner application.


Tags, Objects, and Dynamic HTML

The item for which you have selected help is documented in the Internet Client SDK, available on your MSDN Library CD. Please see the following topics for more information:

  • If you are looking for an overview of the features of Dynamic HTML, please see "Dynamic HTML" in the Internet Client SDK.

  • If you are looking for more information on the HTML elements you see in the treeview, the toolbox, or the Properties window, please see "HTML Elements" in the "Dynamic HTML" section of the Internet Client SDK.

  • If you are looking for help on the objects used in Dynamic HTML and their properties, methods, and events, please see "Document Object Model References" in the "Dynamic HTML" section of the Internet Client SDK.


AsyncLoad Property

Sets a value that determines whether or not the objects on the page are loaded asynchronously with the execution of the code. Not available at run time.

Remarks

By default, AsyncLoad is set to False, meaning code execution does not begin until the browser has retrieved all elements on the page. If set to True, code execution begins as soon as the browser has downloaded the code, regardless of the download status of other components.

Before changing the value of this property, be sure that your code is prepared to deal with the fact that controls on the page may not be loaded at the time execution begins.


BuildFile Property

Sets the path and file name to which the designer should save the compiled HTML for this designer. Not available at run time.

Remarks

This property is initially set to the same path as the SourceFile property. You can change this path to any location to which you want to save the compiled HTML file.

You must enter an absolute path to the build location, indicating the full drive letter and directory structure in which the compiled file will be placed. If you later share your project with another developer who has a different directory structure or drive name than you originally used, the second developer will need to modify the value of the BuildFile property to reflect the location of the compiled HTML files on his machine. Run-time users are not affected by this restriction.


Document property

Document Property (DHTMLPageDesigner)

Returns the Document object from the Dynamic HTML object model, which represents the HTML page you view in the browser.

Syntax

object.Document

The object placeholder represents an object expression that evaluates to an object in the Applies To list.

Remarks

You use this object to respond to events that occur on the page, and to set the page’s properties.

Any of the collections available from the Dynamic HTML Document object are available.


DHTMLEvent Property

Returns the event object in the Dynamic HTML object model.

Syntax

object.DHTMLEvent

The object placeholder represents an object expression that evaluates to an object in the Applies To list.

Remarks

To learn the X coordinate of a mouse click, a user programming with the Dynamic HTML object model would normally have to type:

Document.parentWindow.event.x

But by using this Visual Basic shortcut, the user need only type:

DHTMLEvent.x

To cancel the bubbling of an event in Dynamic HTML, one might write:

Window.event.cancelBubble=1

-or-

Document.parentWindow.event.cancelBubble=1

However, with the DHTMLEvent property, a Visual Basic user need only type:

DHTMLEvent.cancelBubble=1


ID Property

Sets the name of an element on an HTML page, or of the DHTMLPageDesigner object. Not available at run time.

Remarks

This property allows you to assign an identifier to each DHTMLPageDesigner object or to the selected element. You must assign an identifier to an HTML element in order to put code behind it.

Until an element has an identifier, it will not appear in the Object dropdown in the Code window. The treeview in the designer window displays in bold the elements that have an identifier.


SourceFile Property

Sets the path from which the page designer should load the specified HTML file into the Detail pane of the designer. Not available at run time.

Remarks

This property can be set by accessing the Page Properties dialog box and specifying an existing file to use as the source for the page, or you can set it directly in the Properties window by accessing the DHTMLPage object for your designer. The system checks to determine if you have entered a valid path to the file, then imports the HTML page's contents into the designer. The value of the BuildFile property is initially set to the same path as the SourceFile property.

You must enter an absolute path to the source HTML file in this property, indicating the full drive letter and directory structure in which the compiled file will be placed. If you later share your project with another developer who has a different directory structure or drive name than you originally used, the second developer will need to modify the value of the SourceFile property to reflect the location of the HTML file on his machine. Run-time users are not affected by this restriction.


BaseWindow Property

Returns the topmost window object from the DHTML object model. The topmost window represents the browser window and any frames it contains.

Syntax

object.BaseWindow

The object placeholder represents an object expression that evaluates to an object in the Applies To list.

Remarks

The objects available from the topmost window (for example, history, event, navigator, and so on) are always available from the BaseWindow property. BaseWindow in Visual Basic corresponds to the Window object in Internet Explorer 4.0 browser’s Dynamic HTML object model.


DHTML Page Designer Main Screen

Select from the following links to see help for the different areas of the page designer:

  • Treeview or detail panes of the designer window

  • Format toolbar band — Buttons used to format the elements on your page using standard HTML styles.

  • File toolbar band — Buttons used to set designer properties and launch external HTML editors for the current page.

  • Element toolbar band — Buttons used to add DIV, SPAN, hyperlink, and table elements to your page.

  • Design toolbar band — Buttons used to control the placement and positioning of the elements on your page.


Format Toolbar Band (DHTML Page Designer)

Contains buttons that are frequently used when formatting an HTML page in the designer. The items on this toolbar are available whenever you have selected a DIV or SPAN element, a hyperlink, a piece of text, or the BODY or DOCUMENT objects in the treeview or detail panes of the designer.

You can click a toolbar button once to carry out the action represented by that button. Visual Basic inserts the appropriate opening and closing HTML tags or tag attributes to your selection. These tags are not visible within the designer, but the results of formatting are rendered in the detail pane.

Toolbar Buttons

HTML Block Elements

Lists options you can use to format the selected block as a standard HTML element. You can select from the following formats: Normal, Formatted, Address, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, Numbered List, Bulleted List, Directory List, Menu List, Definition Term, Definition, or Paragraph.

CSS Styles

If the current page has a style sheet defined for it, this list contains a list of the styles contained in it. You can select a style from the list and apply it to the currently selected element.

Font

Displays a list of font names that you can apply to the currently selected text.

Font Size

Displays a list of HTML font sizes (1 – 7) that you can apply to the selected text. HTML font sizes are not absolute sizes. They represent a scale of relative sizes as interpreted by the browser when it displays the text. The standard size for fonts in HTML pages is 3, with 1 as the smallest and 7 as the largest.

Bold

Toggles the appearance of the currently selected text between bold and normal.

Italics

Toggles the appearance of the currently selected text between italics and normal.

Underline

Toggles the appearance of the currently selected text between underline and normal.

Align Left

Aligns the currently selected text at the left margin.

Center

Centers the currently selected text.

Align Right

Aligns the currently selected text at the right margin.


Design Toolbar Band (DHTML Page Designer)

Contains buttons that are frequently used when positioning elements on the page. With the exception of the Lock icon, most of the items on this toolbar band are available whenever you are working in the treeview or detail panes of the designer.

You can click a toolbar button once to carry out the action represented by that button.

Toolbar Buttons

Show Table Borders

Toggles the borders of any tables in your HTML page that have their Border property set to zero. When the Border property of a table is set to zero, no border appears in the designer by default, and no border will appear in the browser when the page is run. This button enables you to temporarily view the border of these tables as you work in the designer, making it easier to position and move tables.

By default, this icon is selected when you add a designer.

Show Details

Displays glyphs for HTML elements that do not have a visual representation, such as comments, scripts, styles, and unknown or unsupported HTML tags. By default, this icon is selected when you add a designer.

In addition to showing unknown or unsupported elements, the Show Details button shows a glyph that represents the position in the HTML stream of each absolutely positioned element on the page when absolute position mode is turned on.

Absolute Position

Determines whether the selected item is positioned absolutely or relatively. When you use absolute positioning for an element, the element's HTML contains a style attribute that indicates its exact location on the page.

When you deselect absolute positioning, elements are positioned from left to right and top to bottom across the screen, space permitting, or at the current cursor location, running from left to right, regardless of the point at which they are dropped. At run time, the page can reposition relatively positioned elements based on the width of the end user's browser window.

Lock

Prevents an absolutely positioned element from being inadvertently moved. This is a design-time only feature: Setting lock on an element does not hinder your ability to programmatically move an element at run time.

Absolute Position Mode

Sets the page designer in either absolute or relative positioning mode by default. The default is applied to each element on the page as the element is created. In absolute positioning mode, all items you place on the page are positioned absolutely, according to x and y coordinates rather than according to where they appear in the HTML text. By default, this icon is selected when you add a designer.

Order

Contains a series of options you can use to arrange the elements on a page in three-dimensional space. You can layer elements on top of or behind other elements, bring them to the front or back of a stack of elements, or place elements behind or in front of text.


Element Toolbar Band (DHTML Page Designer)

Contains buttons that are frequently used when grouping elements on the page or working with tables. You can click a toolbar button once to carry out the action represented by that button.

With the exception of the Table Operations icon, the options on this toolbar band are available only when you have highlighted a selection of text or elements in the Detail pane, or when you select the Document or Body object or a DIV element in the treeview. The Table Operations icon is always available.

Toolbar Buttons

Wrap Selection in <DIV>…</DIV>

Creates an HTML DIV element around the currently selected element or elements by inserting <DIV> and </DIV> tags before and after the selection. A DIV element is a grouping element used to allow you to perform operations on a range of HTML elements. DIV offsets the elements it contains by inserting a break after its closing tag. It is therefore not suited for use within a single paragraph or in situations where you do not want to introduce a new break onto the page. In these situations, use the SPAN tag.

DIV elements are not automatically assigned an ID by Visual Basic. If you want to program the DIV you insert, you must assign a value to its ID property in the Properties window.

Wrap Selection in <SPAN>…</SPAN>

Creates an HTML SPAN element around the currently selected element or elements by inserting <SPAN> and </SPAN> tags before and after the selection. A SPAN element is a grouping element that allows you to perform operations on a portion of an HTML element. Unlike DIV, SPAN does not insert a break or make any formatting changes to the elements it encloses. It is therefore well suited to grouping sections of text or elements that you do not want to offset.

SPAN elements are not automatically assigned an ID by Visual Basic. If you want to program the SPAN you insert, you must assign a value to its ID property in the Properties window.

Make Selection Into Link

Turns the selected text into a hyperlink by inserting the appropriate HTML tags before and after the selection. You define where the link should go when it is selected by setting the HREF property for the element or writing a code procedure.

Table Operations

Contains a series of options that allow you to insert tables and manipulate their structure by adding, deleting, and rearranging their rows, columns, and cells.


File Toolbar Band (DHTML Page Designer)

Contains buttons that are frequently used when working with pages in the designer. The items on this toolbar are available whenever you have a page designer open.

You can click a toolbar button once to carry out the action represented by that button.

Toolbar Buttons

DHTML Page Designer Properties

Opens the DHTMLPage Properties dialog box, in which you can determine how your page will be saved: as a separate HTML file or within the .dsr file for the designer. In addition, you can choose an external HTML file if you want to edit an existing page, or you can indicate that you want to create a new page.

Launch Editor

Opens Notepad or your computer's default HTML editor and displays the contents of the HTML page you are currently editing in the designer. You can make changes to the contents of the file and save it. This option only works when you have chosen to save your page in an external HTML file, or when the SourceFile property is set for the page.