The Deconstruction of a Dynamic XHTML Web Page

DXHTML?

What's so great about it? You can use XML-based languages like SVG

and SMIL with relative ease The more strict structural requirements inherent

in XHTML mean fewer surprises later on You can create your own customized markup

(elements and attributes) and still have the document validate

Be Valid In All That You Do

There is nothing more important! Validate your XHTML and eliminate all errors

XHTML, being based on XML, cannot tolerate malformed structure

Validate your CSS If a browser is advanced enough to handle DXHTML, it

will require valid CSS to properly style things

Tools are available http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Style in a Dynamic World

Two ways to go about it… Write static stylesheets and then dynamically

modify values as needed This approach favors documents that start with a

"default look" and then make a few changes

Write out the whole stylesheet dynamically and then make dynamic modifications as needed Better for pages that are all-dynamic, or that change

based on external parameters

Style Can Be So Fickle

CSS support isn't a uniform space Although things are much better than in the past,

browsers can still be inconsistent with CSS height and width get different treatment Percentage heights might not mean what you think

they do Length values need units! Color values need octothorpes!

Making Designs Liquid

Some principles to keep in mind Liquid page design is easy

Instead of making everything a certain number of pixels wide, try using percentages

If you're already dynamic, then real liquidity is that much easier Font sizes can be scaled along with the window! So can element heights

The W3C Owns the King DOM

Old DOMs haunt us still document.layers died with LAYER itself document.all is still alive, but it's also

completely proprietary

Don't use either if you can avoid it! The W3C DOM is there and ready to use—and

it's supported by multiple browsers

DOM Collection Techniques

The spec provides two useful tools: getElementsByTagName('tagname')

Lets you work on all of the elements that share a name, like DIV or H1

Generally used to collect all such elements into an array which is passed around

getElementsById('idvalue') Lets you pick whatever element has the given value

for the ID attribute Often used to do on-the-fly restyling

Roll Your Own!

getElementsWithClassName() function getElementsWithClassName(elementName,className) {

var allElements = document.getElementsByTagName(elementName); var elemColl = new Array(); for (i = 0; i < allElements.length; i++) { if (allElements[i].className == className) { elemColl[elemColl.length] = allElements[i]; } } return elemColl;}

Use notes: To get all elements with a given class call

getElementsWithClassName('*','className'); Doesn't work with non-standard browsers (including IE4

and NN4.x)

Customizing XHTML

It doesn't take a DTD However, it does take at least a customized

schema Standards-compliant schema can be

automatically generated by tools such as xmlspy You can add your own attributes, or even whole

new elements Of course, those new elements will need to be

described in CSS