First off let me start by stating the obvious, “I’m no expert at XHTML, CSS or even ASP.NET 2.0″. Now having said that, please forgive any glaring inaccuracies or omissions in this post. I’m still learning, even at my age!
As I stated in my previous post, I’ve spent the last few months trying to learn web standards “best practices” from various books and web sites dedicated to XHTML and CSS. What I’ve learned is that you can (and probably should) use ASP.NET 2.0 Master Pages to create XHTML compliant web sites using CSS layout techniques instead of tables! Once you get the hang of it, it’s really very straight-forward and easy to accomplish in Visual Studio 2005. More importantly, you can use (some of) the new server controls and data source controls including the Menu Server Control (more about this in a later post).
My first step was to create a standards compliant HTML web page and Cascading Style Sheet (CSS) in Visual Studio to act as a “prototype” for my Master Page. For me this meant a simple two-column, fluid layout using the “Faux Sliding Columns” technique outlined in Dan Cederholm’s two great books, Bulletproof Web Design and Web Standards Solutions. I also exploited several CSS “Hacks” designed to make sure IE displays the page correctly and tested my page in both Internet Explorer and Firefox.
My next step was to create a Master Page in Visual Studio and transfer the HTML from my prototype web page to the appropriate section of the Master Page as shown below. This took some “fiddling” since I wasn’t always sure what HTML the Master Page and Content Placeholders were emitting.
The next step is to apply the Cascading Style Sheet(s) used in the prototype to the Master Page and then tweak as required. The final step is to create a Content Page from the Master Page, add some content and test, test, test! The finished product is shown below.
No tables were used in the web page and all images are loaded directly from the style sheet. The top menu was created using a SiteMapPath server control and a templated Menu server control. The web page conditionally parses against the XHTML 1.0 Transitional standard as well as accessibility standards such as WCAG and Section 508. The Cascading Style Sheet also parses against the CSS Level 1 and Level 2 standards.
As always, your comments and suggestions are very welcome!