Visual Basic Concepts

  • Article

Element Appearance in DHTML Applications

Dynamic HTML allows you to create richer, more interactive user interfaces by allowing you to:

  • Use additional measurement units, for finer control over the positioning of page elements.

  • Create elements that wrap around other elements, nest within them, or act as blocks.

  • Have finer control over tables.

  • Support additional types of graphics , including .mpg files (movie clips) and .png files (portable network graphics designed to address some of the shortcomings of .gif files), and other media types registered with the browser.

In addition, you can make use of dynamic styles and dynamic content to fine-tune the appearance of your page.

Dynamic Styles

Originally, HTML was intended to provide a way to separate the structure and content of a Web page from its presentation. That is, the HTML code that defined a page's content and structure was not intended to also define the physical appearance of elements on the page. In earlier version of HTML, this separation was not possible. The only way to allow users to control the formatting of page elements was to introduce tags such as bold <B> and italic <I> and a variety of attributes that controlled such things as font style and size.

With Dynamic HTML, the original intent of HTML is realized in that you can use cascading style sheets (CSS) to format your page elements. The code controlling the appearance of page elements can be stored in a style sheet. This style sheet is kept separate from the HTML code controlling the page's content and structure.

A style sheet is a collection of properties that control the appearance of elements on a Web page. Style sheets can apply a style to a group of elements, or to a single element. In addition, you can apply multiple styles to each element on the page. There are three main types of styles you can use in your DHTML applications:

  • Inline styles are styles applied to a single element and applied within the element's HTML tag. This is the least flexible way to use styles.

  • Global style sheets are defined at the beginning of an HTML file and set and apply styles for all elements within the page. This is a flexible way to set all styles for a single page.

  • Linked style sheets are stored in a separate file and can apply to multiple pages. This is the most powerful and flexible way to set styles for an application that uses more than one page.

The advantage of using style sheets is that it is very easy to make changes to a page's appearance without writing code. That is, you can change a single line of code in the style sheet — such as increasing the font size of an element — and have that change be reflected in multiple locations throughout your page or in multiple pages. In previous version of HTML, you would have had to make the same change in each location where you wanted to alter the page's appearance. Because of this, it is preferable to avoid using inline styles as much as possible, and store your style information in either a global or a linked style sheet.

Note   To define global style sheets in your DHTML applications, you need to edit your application's HTML pages in an external editor, as Visual Basic does not provide a way to define styles sheets within the designer. However, if you use the designer to open a page that references a style sheet, the styles for that document appear in the toolbar.

For More Information   For more information on using style sheets in your applications, see "Dynamic Styles" in the "Dynamic HTML" section of the Internet/Intranet/Extranet Services SDK.

Dynamic Content

Dynamic content means that you can customize or replace the contents of a page after the page has been loaded, without making a trip to the server. In past version of HTML, any change to a page's contents required the browser to submit a request to the Web server and then wait for a new version of the page to be sent. Customization required more processing time, and it was often difficult to retain context for the page's contents.

Using the properties and methods provided in Dynamic HTML, you can easily add new elements with events or remove existing elements. In addition, you can change portions of existing elements by inserting new content within them.

For More Information   For more information on using style sheets in your applications, see "Dynamic Content" in the "Dynamic HTML" section of the Internet/Intranet/Extranet Services SDK.