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

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