The Deconstruction of a Dynamic XHTML Web Page

DXHTML? n 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 n There is nothing more important! ¡ Validate your XHTML and eliminate all errors n ¡ Validate your CSS n ¡ XHTML, being based on XML, cannot tolerate malformed structure If a browser is advanced enough to handle DXHTML, it will require valid CSS to properly style things Tools are available n n http: //validator. w 3. org/ http: //jigsaw. w 3. org/css-validator/

Style in a Dynamic World n Two ways to go about it… ¡ Write static stylesheets and then dynamically modify values as needed n ¡ 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 n Better for pages that are all-dynamic, or that change based on external parameters

Style Can Be So Fickle n CSS support isn't a uniform space ¡ Although things are much better than in the past, browsers can still be inconsistent with CSS n height and width get different treatment n Percentage heights might not mean what you think they do Length values need units! Color values need octothorpes! n n

Making Designs Liquid n Some principles to keep in mind ¡ Liquid page design is easy n ¡ 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 n n Font sizes can be scaled along with the window! So can element heights

The W 3 C Owns the King DOM n Old DOMs haunt us still ¡ ¡ n 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 W 3 C DOM is there and ready to use—and it's supported by multiple browsers

DOM Collection Techniques n The spec provides two useful tools: ¡ get. Elements. By. Tag. Name('tagname') n n ¡ Lets you work on all of the elements that share a name, like DIV or H 1 Generally used to collect all such elements into an array which is passed around get. Elements. By. Id('idvalue') n n Lets you pick whatever element has the given value for the ID attribute Often used to do on-the-fly restyling

Roll Your Own! n get. Elements. With. Class. Name() ¡ function get. Elements. With. Class. Name(element. Name, class. Name) { var all. Elements = document. get. Elements. By. Tag. Name(element. Name); var elem. Coll = new Array(); for (i = 0; i < all. Elements. length; i++) { if (all. Elements[i]. class. Name == class. Name) { elem. Coll[elem. Coll. length] = all. Elements[i]; } } return elem. Coll; } n Use notes: ¡ To get all elements with a given class call get. Elements. With. Class. Name('*', 'class. Name'); ¡ Doesn't work with non-standard browsers (including IE 4 and NN 4. x)

Customizing XHTML n 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 n Of course, those new elements will need to be described in CSS