Creating New HTML Pages in the Page Designer

See Also

You can design HTML pages in Visual Basic, using the DHTML Page designer. The designer allows you to create your application's user interface without explicitly writing any HTML code. Instead, you add HTML elements to the designer's drawing surface, arrange them as desired, and set properties that control their appearance. Visual Basic writes the HTML code for each element behind the scenes, storing it either in an HTML file whose location you specify, or saving it within the designer itself.

It is best to design your pages within Visual Basic when you are creating a relatively simple user interface. Visual Basic does not give you direct access to the source HTML, and it does not contain some of the advanced features you will find in HTML editing programs. If your interface is more complex or your prefer greater control over the HTML source code, you can create your pages in an external program and then link them to your project.

Visual Basic provides a set of HTML elements that you can add to the page when you design HTML pages in Visual Basic. These include the most common HTML elements, such as buttons, text boxes, option buttons, checkboxes, and images. You cannot use intrinsic Visual Basic controls such as the text box or checkbox on your pages; instead you must use the special HTML controls. These controls, called elements, appear automatically on an HTML tab in the toolbox when you add a page to your project.

There are four ways you can add elements to your page:

• You can select the element from the toolbox, then draw it on the detail pane.
  
  
• You can double-click the toolbox icon for the element.
  
  
• You can drag and drop the element from the toolbox onto the designer's detail pane.
  
  
• You can type text directly onto the designer's detail pane to create paragraphs, headings, and other text elements, then set properties to change them to the appropriate style.

In addition to the HTML elements in the toolbox, you can add any ActiveX control to your page. For example, you can use Visual Basic to define an ActiveX control, add it to your toolbox, and insert it on any HTML page.

Note   Some Visual Basic controls, such as the common dialog or the sysinfo control, are invisible at run time. If you add one of these objects to your HTML page, you cannot subsequently select it in the drawing surface and move it around within the page. To manipulate one of these controls after you have added it to the page, select it in the treeview.

For More Information   For an explanation of the relationship between the elements on an HTML page and the HTML source code, see "Understanding Internet Basics" in "Introduction to Internet Applications."

To create an HTML page from scratch

1. If necessary, add a new designer to your project by clicking Add DHTML Page from the Project menu.
   
   
2. Add the elements you need to the page:
   • To add text, labels, or headings to your page, click on the page, press ENTER until you reach the location at which you want the text to appear, and then type the text.
     
     
   • To add an HTML element to your page, click the appropriate icon from the HTML tab of the toolbox and then draw the element on the page.
     
     
   • To add an ActiveX control to your page, switch to the standard tab of the toolbox, select the ActiveX control, and draw the control on the page.

     Note   You may need to use the Components dialog box to add the ActiveX control you want to your project before you will see it in the toolbox.

3. Resize and position your elements as you would for any standard Visual Basic project. See "Positioning Elements," later in this chapter, for information on moving HTML elements.
   
   
4. Set any default properties to control the appearance of the page.
   • To set properties for the page, such as background color, select the Body element in the Properties window list, then set properties.
     
     
   • To set properties for an element, select the element in the designer, then set its properties.

Tip   Some HTML elements have a very large number of properties available. It is simplest to work on the Categorized panel when you access the Properties window for these elements. The primary properties (such as ID) appear under the Misc category, while properties dealing with appearance and styles appear under the Style category.