WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

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


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 usingit. We'll tell you the basics, and point you to some guides that will get you well on your way.

Dynamic HTML Basics

One of the first things you must be familiar with in order to code Dynamic HTML is the use of Cascading Style Sheets (CSS) and Layers. Now before all you die-hard rule fanitics start to flame me, realize that you don't even have to use the Netscape-specific LAYER tag, but you can rather use the universal DIV tag to define your ""layers""; they're here to stay, and we may as well use them when we can. But first we need to discuss CSS, what they are, and how to use them.

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.

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

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

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> 

Move your mouse
over the WD logo layer

The function which caused the second layer to disappear and reappear is also quite simple. While realizing that this code may not work for all browsers, it illustrates how layers and JavaScript may be used to ""activate"" other layers. The function appears below:

 <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!

[ < Dynamic HTML...Are You Ready to Step Up to the Plate?:
Part 1 ]
[ Dynamic HTML...Are You Ready to Step Up to the Plate?:
Part 3 > ]


HTML5 Development Center

Recent Articles