Web Devs: Moonlight as a Game Developer and Win Cool Prizes by Accepting the RIA Run Challenge Now, your mission--should you choose to accept: Take your shot at gaming stardom if you think you might have what it takes to build a cool RIA game and you could win an Xbox 360 or other fabulous prizes. Hurry! You only have until May 15, 2008 to enter. »   Article: Leveraging Your Flash Development with Silverlight You're not giving up Flash any time soon (and we don't blame you.) But if you could get your Flash application working in Silverlight, why wouldn't you? We show you the tools and techniques required to have your rockin' Flash application rolled for Silverlight. Learn more here. »   Article: What Does it Take to Build the Best RIA? With the proliferation of Rich Interactive Application (RIA) platform choices out there, you no longer have to take a one-size-fits-all approach to developing your next RIA application. Knowing the strengths (and weaknesses) of each platform can help you to decide the best RIA for your next application. »

Dynamic HTML...Are You Ready to Step Up to the Plate?
Part 2

by Scott Clark

So now you've checked out what Dynamic HTML can do, and you know why we need it. But you probably don't have the slightest idea how to get started using it. We'll tell you the basics, and point you to some guides that will get you well on your way.

Dynamic HTML Basics

Essentially, cascading style sheets enable the developer to control the formatting of HTML tags. CSS gives the developer a sophisticated amount of contol over how the text and design elements are displayed on a Web page, hence the term "style sheets." The word "cascading" refers to the ability to use more than one style sheet on a Web page, and the fact that they may "cascade" over one another, subject to the orders given to the browser by the source code. Styles may be even used to control a font's face, size, style, weight and leading.

Currently there are three ways of using CSS. You can utilize them within certain tags on a page, i.e.

<p style ="font: 12pt arial">

These are called "inline style sheets." Style sheets can also be used as "embedded style sheets", i.e.

<style>
BODY {background: #ffffff; color: #000000; margin-top:.20in; margin-left:.50in; margin-right:.50in}
</style>

And last but not least, style sheets can be used as external or "linked" style sheets, i.e.

<style src="mycss.css"> </style>

While that by no means covers all aspects of Style Sheets, we must move on to layers if we are to actually get into our DHTML examples. "Layers" as we will discuss them will refer to self-contained sections which may be positioned, shown, hidden and manipulated in many ways. So we don't leave anyone out, we will use DIV tags to define our layers instead of the proprietary LAYER tag. First the layer's style must be defined in a style tag, i.e.

<STYLE TYPE="text/css">
#layerone {POSITION: absolute;
VISIBILITY: visible;
TOP: 200;
LEFT: 200;
Z-INDEX: 100010;}
</STYLE>

The style sheet tells the browser where to place the layer on the page. The position referred to in the style tag can either be relative or absolute. If the layer is relative it appears on the page only after the elements before it. If it is defined as absolute, it will appear exactly at the position you specify in the style tag. The layer's visibility is just what it sounds like--it tells the browser whether or not to show the layer. It has two possible settings: visible or hidden. The remainder of the setting used above tell the browser exactly where to position the layer. In this case, it will be placed 200 pixels from the top of the page, 200 pixels from the left side of the page. The z-index tells the browser in what order to "stack" or cascade the layers. It works like this: the layer which has the highest z-index is the one on top. The rest fall according to their relative z-index numbers.

Of course, all of the above parameters simply tell the browser what to do with a layer called "layerone," but we have yet to actually include the layer in our page. Here's how the code for the two layers below:

The first layer:
<DIV ID="layerone">
<B>Move your mouse<BR>
over the WD logo layer</B>
</DIV>

And this is the second layer:
<DIV ID="layertwo">
<A HREF="http://www.webdeveloper.com"
onMouseOver="shide('hidden')"; onMouseout="shide('visible')">
<IMG SRC="webdevlogo.gif" BORDER=0></A>
</DIV>

<SCRIPT LANGUAGE="JavaScript">
function shide(toshow){
document.layers.layerone.visibility=toshow;
}
</SCRIPT>

This lesson should have caught you up on a few of the fundamental aspects of DHTML. Next we'll look at a couple more functions, and point you to some detailed DHTML tutorials, Web sites, tools and more!